forked from mirrors/gecko-dev
adae3a271c
Automatic update from web-platform-tests Add tests to check layout overflow recalc This test check how an element with transform contribute to the scrollable overflow of an inline element. It also has a dynamic version, where the transform changes, and we test that it's still contributing as expected to the scrollable overflow. The dynamic test won't pass if we don't recalc layout overflow properly (see methods LayoutBlock::RecalcChildLayoutOverflow() and LayoutBlockFlow::RecalcInlineChildrenLayoutOverflow()). Change-Id: I7996534d72cb774eac0554a1b8eb6124560ce7ec Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773220 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#864440} -- wpt-commits: 1bc6797d277399ff4c10c1be2000e2290562177b wpt-pr: 28138
58 lines
2 KiB
HTML
58 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow: Scrollable Overflow Transform Dynamic Inline Element</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 on an inline element.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
.container {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: auto;
|
|
background: silver;
|
|
border: solid thick;
|
|
}
|
|
|
|
.element {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: lime;
|
|
}
|
|
</style>
|
|
|
|
<div id="container1" style="top: 0px;" class="container">
|
|
<div id="element1" style="transform: translateX(20px);" class="element"></div>
|
|
</div>
|
|
|
|
<div id="container2" style="top: 150px;" class="container">
|
|
<div id="element2" style="transform: translateY(30px);" class="element"></div>
|
|
</div>
|
|
|
|
<div id="container3" style="top: 300px;" class="container">
|
|
<div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
assert_equals(container1.scrollWidth, 100);
|
|
element1.style.transform = "translateX(200px)";
|
|
assert_equals(container1.scrollWidth, 250);
|
|
}, "Check scrollWidth before and after transform chage");
|
|
|
|
test(() => {
|
|
assert_equals(container2.scrollHeight, 100);
|
|
element2.style.transform = "translateY(300px)";
|
|
assert_equals(container2.scrollHeight, 350);
|
|
}, "Check scrollHeight before and after transform chage");
|
|
|
|
test(() => {
|
|
assert_equals(container3.scrollWidth, 100);
|
|
assert_equals(container3.scrollHeight, 100);
|
|
element3.style.transform = "translate(200px, 300px)";
|
|
assert_equals(container3.scrollWidth, 250);
|
|
assert_equals(container3.scrollHeight, 350);
|
|
}, "Check scrollWidth and scrollHeight before and after transform chage");
|
|
</script>
|