forked from mirrors/gecko-dev
33458a742b
Automatic update from web-platform-tests Move layout overflow recalc to LayoutNG This patch makes that LayoutNG objects no longer use the legacy method LayoutBlock::RecalcChildLayoutOverflow(), and instead use the fragments to recalc layout overflow on children. This patch adds a runtime flag LayoutNGLayoutOverflowRecalc enabled by default. Apart from that this patch avoids to do any work for LayoutNG elements in RecalcLayoutOverflow() if they are marked as NeedsLayout(). And it ensures we call RecalcLayoutOverflow() if needed when we use a cached LayoutResult. This adds new tests that do three different things: * First one has a position change (that causes a subtree layout) combined with a transform change (that doesn't cause a layout but it marks the element as NeedsLayoutOverflowRecalc()), in that case we cannot reuse the layout result we get as is, we need to call RecalcLayoutOverflow() to ensure that the layout overflow is computed properly. * Add/remove an element to the DOM. Which causes the tree to be marked as needing layout. * Change a transform. Which marks things for layout overflow recalc. BUG=1197261 TEST=external/wpt/css/css-overflow/scrollable-overflow-transform-dynamic-004.html TEST=external/wpt/css/css-overflow/scrollable-overflow-transform-dynamic-005.html TEST=external/wpt/css/css-overflow/scrollable-overflow-transform-dynamic-006.html Change-Id: I44e1e87ec102e34766b4aba1cf5d4ee362e03a70 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773341 Commit-Queue: Manuel Rego <rego@igalia.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#876492} -- wpt-commits: 337bf4a44a39f715f5bdc7463d40f4f5b3117b5a wpt-pr: 28527
64 lines
2.2 KiB
HTML
64 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow: Scrollable Overflow Transform Dynamic DOM Manipulation</title>
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
|
<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow, even when some new element has been removed from the DOM tree.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
.container {
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: auto;
|
|
background: silver;
|
|
border: solid thick;
|
|
}
|
|
|
|
.element {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: lime;
|
|
}
|
|
</style>
|
|
|
|
<div id="container1" class="container">
|
|
<div id="element1" style="transform: translateX(20px);" class="element"></div>
|
|
</div>
|
|
|
|
<div id="container2" class="container">
|
|
<div id="element2" style="transform: translateY(30px);" class="element"></div>
|
|
</div>
|
|
|
|
<div id="container3" class="container">
|
|
<div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
|
|
</div>
|
|
|
|
<div id="toremove1"></div>
|
|
<div id="toremove2"></div>
|
|
<div id="toremove3"></div>
|
|
|
|
<script>
|
|
test(() => {
|
|
assert_equals(container1.scrollWidth, 100);
|
|
document.body.removeChild(toremove1);
|
|
element1.style.transform = "translateX(200px)";
|
|
assert_equals(container1.scrollWidth, 250);
|
|
}, "Check scrollWidth before and after removeChild() and transform chage");
|
|
|
|
test(() => {
|
|
assert_equals(container2.scrollHeight, 100);
|
|
document.body.removeChild(toremove2);
|
|
element2.style.transform = "translateY(300px)";
|
|
assert_equals(container2.scrollHeight, 350);
|
|
}, "Check scrollHeight before and after removeChild() and transform chage");
|
|
|
|
test(() => {
|
|
assert_equals(container3.scrollWidth, 100);
|
|
assert_equals(container3.scrollHeight, 100);
|
|
document.body.removeChild(toremove3);
|
|
element3.style.transform = "translate(200px, 300px)";
|
|
assert_equals(container3.scrollWidth, 250);
|
|
assert_equals(container3.scrollHeight, 350);
|
|
}, "Check scrollWidth and scrollHeight before and after removeChild() and transform chage");
|
|
</script>
|