mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
6f5c9f8c9e
On our CI for Android, the device screen width is 800, without meta viewport Gecko tries to render such documents in 980px width canvas, thus the document gets scaled by 0.816326531 (= 800 / 980), with this scale the tests in this change will not work as intended with the next commit. There will be two failure cases; 1) the content is not scrollable because of the scale abspos-contributes-to-static-parent-bounds.html is one of this category 2) fractional scroll position difference (or some such) because of our scroll position rounding / pixel alignment issues Differential Revision: https://phabricator.services.mozilla.com/D220975
59 lines
2.1 KiB
HTML
59 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<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>
|