Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 9ca57e052ba1b19fa3dd46c6aa656e8d529469a8

Browse source
This commit is contained in:
WPT Sync Bot 2020-09-12 08:20:19 +00:00
parent 68cb8f3d59
commit 75d6484415
1377 changed files with 31062 additions and 16983 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/wpt/web-platform-tests/css/css-overflow/clip-001.html
View file

@ -10,7 +10,6 @@
width: 100px;
height: 100px;
background: red;
overflow: -moz-hidden-unscrollable;
overflow: clip;
}

35
tests/wpt/web-platform-tests/css/css-overflow/clip-002-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: overflow: clip can be combined with overflow: visible</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<style>
.outer {
width: 50px;
height: 50px;
margin-left: 100px;
margin-top: 100px;
background: black;
}
.inner {
position: relative;
background: blue;
height: 100px;
width: 100px;
opacity: 0.5;
}
</style>
<!-- there should be no overflow -->
<div class="outer">
<div class="inner" style="width:50px; height:50px;"></div>
</div>
<!-- there should be overflow in the vertical dimension, but not horizontally -->
<div class="outer">
<div class="inner" style="top:-20px; width:50px"></div>
</div>
<!-- there should be overflow in the horizontal dimension, but not vertically -->
<div class="outer">
<div class="inner" style="left:-40px; height:50px"></div>
</div>

39
tests/wpt/web-platform-tests/css/css-overflow/clip-002.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: overflow:clip can be combined with overflow:visible</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
<link rel="match" href="clip-002-ref.html">
<style>
.outer {
width: 50px;
height: 50px;
margin-left: 100px;
margin-top: 100px;
background: black;
}
.inner {
position: relative;
top: -20px;
left: -40px;
background: blue;
height: 100px;
width: 100px;
opacity: 0.5;
}
</style>
<!-- there should be no overflow -->
<div class="outer" style="overflow:clip">
<div class="inner"></div>
</div>
<!-- there should be overflow in the vertical dimension, but not horizontally -->
<div class="outer" style="overflow-x:clip">
<div class="inner"></div>
</div>
<!-- there should be overflow in the horizontal dimension, but not vertically -->
<div class="outer" style="overflow-y:clip">
<div class="inner"></div>
</div>

61
tests/wpt/web-platform-tests/css/css-overflow/clip-003-ref.html Normal file
View file

@ -0,0 +1,61 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: overflow:clip can be combined with overflow:visible</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<style>
.wrapper {
margin-left: 30px;
margin-bottom: 20px;
width: 50px;
height: 50px;
}
.outer {
width: 50px;
height: 50px;
background: black;
}
.inner {
position: relative;
top: -10px;
left: -10px;
height: 100px;
width: 100px;
background: blue;
opacity: 0.5;
}
</style>
<!-- there should be no scrollbars -->
<div class="wrapper" style="overflow: hidden">
<div class="outer">
<div class="inner"></div>
</div>
</div>
<!-- there should be no white areas inside the outline -->
<div class="wrapper" style="outline: solid">
<div class="outer">
<div class="inner" style="left:0; width:50px"></div>
</div>
</div>
<!-- there should be a vertical scrollbar, but not a horizontal one -->
<div class="wrapper" style="overflow: hidden scroll; margin-top:50px">
<div class="outer">
<div class="inner" style="width:1px"></div>
</div>
</div>
<!-- there should be no white areas inside the outline -->
<div class="wrapper" style="outline: solid">
<div class="outer">
<div class="inner" style="top:0; height:50px"></div>
</div>
</div>
<!-- there should be horizontal scrollbar, but not a vertical one -->
<div class="wrapper" style="overflow: scroll hidden">
<div class="outer">
<div class="inner" style="height:1px"></div>
</div>
</div>

63
tests/wpt/web-platform-tests/css/css-overflow/clip-003.html Normal file
View file

@ -0,0 +1,63 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: overflow:clip can be combined with overflow:visible</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
<link rel="match" href="clip-003-ref.html">
<style>
.wrapper {
margin-left: 30px;
margin-bottom: 20px;
width: 50px;
height: 50px;
}
.outer {
width: 50px;
height: 50px;
background: black;
}
.inner {
position: relative;
top: -10px;
left: -10px;
height: 100px;
width: 100px;
background: blue;
opacity: 0.5;
}
</style>
<!-- there should be no scrollbars -->
<div class="wrapper" style="overflow: auto">
<div class="outer" style="overflow:clip; outline:solid red">
<div class="inner"></div>
</div>
</div>
<!-- there should be no white areas inside the outline -->
<div class="wrapper" style="outline: solid">
<div class="outer" style="overflow-x:clip">
<div class="inner"></div>
</div>
</div>
<!-- there should be a vertical scrollbar, but not a horizontal one -->
<div class="wrapper" style="overflow: auto; margin-top:50px">
<div class="outer" style="overflow-x:clip">
<div class="inner" style="width:1px"></div>
</div>
</div>
<!-- there should be no white areas inside the outline -->
<div class="wrapper" style="outline: solid">
<div class="outer" style="overflow-y:clip">
<div class="inner"></div>
</div>
</div>
<!-- there should be horizontal scrollbar, but not a vertical one -->
<div class="wrapper" style="overflow: auto">
<div class="outer" style="overflow-y:clip">
<div class="inner" style="height:1px"></div>
</div>
</div>

35
tests/wpt/web-platform-tests/css/css-overflow/clip-004-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: overflow: clip can be combined with overflow: visible</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<style>
.outer {
width: 50px;
height: 50px;
margin-left: 100px;
margin-top: 100px;
background: black;
}
.inner {
position: relative;
background: blue;
height: 100px;
width: 100px;
opacity: 0.5;
}
</style>
<!-- there should be no overflow -->
<div class="outer">
<div class="inner" style="width:50px; height:50px;"></div>
</div>
<!-- there should be overflow in the vertical dimension, but not horizontally -->
<div class="outer">
<div class="inner" style="top:-10px; width:50px"></div>
</div>
<!-- there should be overflow in the horizontal dimension, but not vertically -->
<div class="outer">
<div class="inner" style="left:-30px; height:50px"></div>
</div>

40
tests/wpt/web-platform-tests/css/css-overflow/clip-004.html Normal file
View file

@ -0,0 +1,40 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: overflow:clip can be combined with overflow:visible</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
<link rel="match" href="clip-004-ref.html">
<style>
.outer {
width: 30px;
height: 30px;
padding: 10px;
margin-left: 100px;
margin-top: 100px;
background: black;
}
.inner {
position: relative;
top: -20px;
left: -40px;
background: blue;
height: 100px;
width: 100px;
opacity: 0.5;
}
</style>
<!-- there should be no overflow -->
<div class="outer" style="overflow:clip">
<div class="inner"></div>
</div>
<!-- there should be overflow in the vertical dimension, but not horizontally -->
<div class="outer" style="overflow-x:clip">
<div class="inner"></div>
</div>
<!-- there should be overflow in the horizontal dimension, but not vertically -->
<div class="outer" style="overflow-y:clip">
<div class="inner"></div>
</div>

36
tests/wpt/web-platform-tests/css/css-overflow/clip-005-ref.html Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<meta charset="utf-8">
<title>Reference: overflow:clip doesn't affect the box' own outline</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<style>
.outer {
width: 50px;
height: 50px;
margin-left: 100px;
margin-top: 100px;
background: black;
outline: 2px solid grey;
}
.inner {
position: relative;
background: blue;
height: 100px;
width: 100px;
opacity: 0.5;
}
</style>
<!-- there should be no overflow -->
<div class="outer">
<div class="inner" style="width:50px; height:50px;"></div>
</div>
<!-- there should be overflow in the vertical dimension, but not horizontally -->
<div class="outer">
<div class="inner" style="top:-10px; width:50px"></div>
</div>
<!-- there should be overflow in the horizontal dimension, but not vertically -->
<div class="outer">
<div class="inner" style="left:-30px; height:50px"></div>
</div>

41
tests/wpt/web-platform-tests/css/css-overflow/clip-005.html Normal file
View file

@ -0,0 +1,41 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: overflow:clip doesn't affect the box' own outline</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
<link rel="match" href="clip-005-ref.html">
<style>
.outer {
width: 30px;
height: 30px;
padding: 10px;
margin-left: 100px;
margin-top: 100px;
background: black;
outline: 2px solid grey;
}
.inner {
position: relative;
top: -20px;
left: -40px;
background: blue;
height: 100px;
width: 100px;
opacity: 0.5;
}
</style>
<!-- there should be no overflow -->
<div class="outer" style="overflow:clip">
<div class="inner"></div>
</div>
<!-- there should be overflow in the vertical dimension, but not horizontally -->
<div class="outer" style="overflow-x:clip">
<div class="inner"></div>
</div>
<!-- there should be overflow in the horizontal dimension, but not vertically -->
<div class="outer" style="overflow-y:clip">
<div class="inner"></div>
</div>

1
tests/wpt/web-platform-tests/css/css-overflow/dynamic-visible-to-clip-001.html
View file

@ -32,7 +32,6 @@ onload = function() {
let target = document.getElementById("target");
window.unused = target.getBoundingClientRect(); // Update layout
requestAnimationFrame(() => requestAnimationFrame(() => {
target.style.overflow = "-moz-hidden-unscrollable";
target.style.overflow = "clip";
document.documentElement.removeAttribute("class");
}));

1
tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-007.html
View file

@ -7,7 +7,6 @@
<link rel="match" href="overflow-body-propagation-007-ref.html">
<style>
body {
overflow-x: -moz-hidden-unscrollable; /* will be removed in bug 1531609 */
overflow-x: clip;
width: 30px;
height: 30px;

1
tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-008.html
View file

@ -7,7 +7,6 @@
<link rel="match" href="overflow-body-propagation-008-ref.html">
<style>
body {
overflow-y: -moz-hidden-unscrollable; /* will be removed in bug 1531609 */
overflow-y: clip;
width: 30px;
height: 30px;

1
tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-009.html
View file

@ -7,7 +7,6 @@
<link rel="match" href="overflow-body-propagation-009-ref.html">
<style>
body {
overflow: -moz-hidden-unscrollable; /* will be removed in bug 1531609 */
overflow: clip;
width: 30px;
height: 30px;

2
tests/wpt/web-platform-tests/css/css-overflow/parsing/overflow-computed.html
View file

@ -25,6 +25,7 @@ test_computed_value("overflow", 'clip auto', 'hidden auto');
test_computed_value("overflow", 'clip clip', 'clip');
test_computed_value("overflow", 'clip hidden', 'hidden');
test_computed_value("overflow", 'clip scroll', 'hidden scroll')
test_computed_value("overflow", 'clip visible', 'clip visible')
test_computed_value("overflow", 'hidden clip', 'hidden');
test_computed_value("overflow", 'hidden visible', 'hidden auto');
test_computed_value("overflow", 'scroll auto');
@ -33,6 +34,7 @@ test_computed_value("overflow", 'scroll visible', 'scroll auto');
test_computed_value("overflow", 'visible auto', 'auto');
test_computed_value("overflow", 'visible hidden', 'auto hidden');
test_computed_value("overflow", 'visible scroll', 'auto scroll');
test_computed_value("overflow", 'visible clip', 'visible clip');
test_computed_value("overflow", 'visible visible', 'visible');

187
tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-001.html Normal file
View file

@ -0,0 +1,187 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: auto (classic scrollbars)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: auto with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: auto;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars */
.classic {
scrollbar-width: 20px;
scrollbar-color: hsla(0, 0%, 20%, 0.6) hsla(0, 0%, 40%, 0.3);
}
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing modes */
.horizontal {
writing-mode: horizontal-tb;
overflow-x: auto;
}
.vertical {
writing-mode: vertical-rl;
overflow-y: auto;
}
/* overflow on the block direction */
.horizontal.auto { overflow-y: auto; }
.horizontal.scroll { overflow-y: scroll; }
.horizontal.visible { overflow: visible; }
.horizontal.hidden { overflow-y: hidden; }
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
test(function() {
let container = document.getElementById('container_auto_h');
let content = document.getElementById('content_auto_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow auto, scrollbar-gutter auto, horizontal-tb");
test(function() {
let container = document.getElementById('container_scroll_h');
let content = document.getElementById('content_scroll_h');
assert_equals(container.scrollWidth, 180, "scroll/auto scrollWidth");
assert_equals(container.clientWidth, 180, "scroll/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "scroll/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/auto offsetWidth");
}, "Unexpected layout: overflow scroll, scrollbar-gutter auto, horizontal-tb");
test(function() {
let container = document.getElementById('container_visible_h');
let content = document.getElementById('content_visible_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow visible, scrollbar-gutter auto, horizontal-tb");
test(function() {
let container = document.getElementById('container_hidden_h');
let content = document.getElementById('content_hidden_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "hidden/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "hidden/auto offsetWidth");
}, "Unexpected layout: overflow hidden, scrollbar-gutter auto, horizontal-tb");
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow auto, scrollbar-gutter auto, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 180, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 180, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "scroll/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/auto offsetHeight");
}, "Unexpected layout: overflow scroll, scrollbar-gutter auto, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow visible, scrollbar-gutter auto, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "hidden/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/auto offsetHeight");
}, "Unexpected layout: overflow hidden, scrollbar-gutter auto, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: auto, writing-mode: horizontal-tb
<div class="container classic horizontal auto" id="container_auto_h">
<div class="content" id="content_auto_h">overflow-y: auto</div>
</div>
<div class="container classic horizontal scroll" id="container_scroll_h">
<div class="content" id="content_scroll_h">overflow-y: scroll</div>
</div>
<div class="container classic horizontal visible" id="container_visible_h">
<div class="content" id="content_visible_h">overflow: visible</div>
</div>
<div class="container classic horizontal hidden" id="container_hidden_h">
<div class="content" id="content_hidden_h">overflow-y: hidden</div>
</div>
writing-mode: vertical-rl;
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">overflow-x: auto</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">overflow-x: scroll</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">overflow: visible</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">overflow-x: hidden</div>
</div>
</body>

187
tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-002.html Normal file
View file

@ -0,0 +1,187 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: stable (classic scrollbars)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: stable with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: stable;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars */
.classic {
scrollbar-width: 20px;
scrollbar-color: hsla(0, 0%, 20%, 0.6) hsla(0, 0%, 40%, 0.3);
}
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing modes */
.horizontal {
writing-mode: horizontal-tb;
overflow-x: auto;
}
.vertical {
writing-mode: vertical-rl;
overflow-y: auto;
}
/* overflow on the block direction */
.horizontal.auto { overflow-y: auto; }
.horizontal.scroll { overflow-y: scroll; }
.horizontal.visible { overflow: visible; }
.horizontal.hidden { overflow-y: hidden; }
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
test(function() {
let container = document.getElementById('container_auto_h');
let content = document.getElementById('content_auto_h');
assert_equals(container.scrollWidth, 180, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 180, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow auto, scrollbar-gutter stable, horizontal-tb");
test(function() {
let container = document.getElementById('container_scroll_h');
let content = document.getElementById('content_scroll_h');
assert_equals(container.scrollWidth, 180, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 180, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "scroll/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/auto offsetWidth");
}, "Unexpected layout: overflow scroll, scrollbar-gutter stable, horizontal-tb");
test(function() {
let container = document.getElementById('container_visible_h');
let content = document.getElementById('content_visible_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow visible, scrollbar-gutter stable, horizontal-tb");
test(function() {
let container = document.getElementById('container_hidden_h');
let content = document.getElementById('content_hidden_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "hidden/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "hidden/auto offsetWidth");
}, "Unexpected layout: overflow hidden, scrollbar-gutter stable, horizontal-tb");
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 180, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 180, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow auto, scrollbar-gutter stable, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 180, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 180, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "scroll/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/auto offsetHeight");
}, "Unexpected layout: overflow scroll, scrollbar-gutter stable, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow visible, scrollbar-gutter stable, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "hidden/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/auto offsetHeight");
}, "Unexpected layout: overflow hidden, scrollbar-gutter stable, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: stable, writing-mode: horizontal-tb
<div class="container classic horizontal auto" id="container_auto_h">
<div class="content" id="content_auto_h">overflow-y: auto</div>
</div>
<div class="container classic horizontal scroll" id="container_scroll_h">
<div class="content" id="content_scroll_h">overflow-y: scroll</div>
</div>
<div class="container classic horizontal visible" id="container_visible_h">
<div class="content" id="content_visible_h">overflow: visible</div>
</div>
<div class="container classic horizontal hidden" id="container_hidden_h">
<div class="content" id="content_hidden_h">overflow-y: hidden</div>
</div>
writing-mode: vertical-rl;
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">overflow-x: auto</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">overflow-x: scroll</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">overflow: visible</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">overflow-x: hidden</div>
</div>
</body>

187
tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-003.html Normal file
View file

@ -0,0 +1,187 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: always (classic scrollbars)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: always with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: always;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars */
.classic {
scrollbar-width: 20px;
scrollbar-color: hsla(0, 0%, 20%, 0.6) hsla(0, 0%, 40%, 0.3);
}
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing modes */
.horizontal {
writing-mode: horizontal-tb;
overflow-x: auto;
}
.vertical {
writing-mode: vertical-rl;
overflow-y: auto;
}
/* overflow on the block direction */
.horizontal.auto { overflow-y: auto; }
.horizontal.scroll { overflow-y: scroll; }
.horizontal.visible { overflow: visible; }
.horizontal.hidden { overflow-y: hidden; }
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
test(function() {
let container = document.getElementById('container_auto_h');
let content = document.getElementById('content_auto_h');
assert_equals(container.scrollWidth, 180, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 180, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow auto, scrollbar-gutter always, horizontal-tb");
test(function() {
let container = document.getElementById('container_scroll_h');
let content = document.getElementById('content_scroll_h');
assert_equals(container.scrollWidth, 180, "scroll/auto scrollWidth");
assert_equals(container.clientWidth, 180, "scroll/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "scroll/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/auto offsetWidth");
}, "Unexpected layout: overflow scroll, scrollbar-gutter always, horizontal-tb");
test(function() {
let container = document.getElementById('container_visible_h');
let content = document.getElementById('content_visible_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow visible, scrollbar-gutter always, horizontal-tb");
test(function() {
let container = document.getElementById('container_hidden_h');
let content = document.getElementById('content_hidden_h');
assert_equals(container.scrollWidth, 200, "hidden/auto scrollWidth");
assert_equals(container.clientWidth, 200, "hidden/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "hidden/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "hidden/auto offsetWidth");
}, "Unexpected layout: overflow hidden, scrollbar-gutter always, horizontal-tb");
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 180, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 180, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow auto, scrollbar-gutter always, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 180, "scroll/auto scrollHeight");
assert_equals(container.clientHeight, 180, "scroll/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "scroll/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/auto offsetHeight");
}, "Unexpected layout: overflow scroll, scrollbar-gutter always, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow visible, scrollbar-gutter always, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "hidden/auto scrollHeight");
assert_equals(container.clientHeight, 200, "hidden/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "hidden/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/auto offsetHeight");
}, "Unexpected layout: overflow hidden, scrollbar-gutter always, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: always, writing-mode: horizontal-tb
<div class="container classic horizontal auto" id="container_auto_h">
<div class="content" id="content_auto_h">overflow-y: auto</div>
</div>
<div class="container classic horizontal scroll" id="container_scroll_h">
<div class="content" id="content_scroll_h">overflow-y: scroll</div>
</div>
<div class="container classic horizontal visible" id="container_visible_h">
<div class="content" id="content_visible_h">overflow: visible</div>
</div>
<div class="container classic horizontal hidden" id="container_hidden_h">
<div class="content" id="content_hidden_h">overflow-y: hidden</div>
</div>
writing-mode: vertical-rl;
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">overflow-x: auto</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">overflow-x: scroll</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">overflow: visible</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">overflow-x: hidden</div>
</div>
</body>

187
tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-004.html Normal file
View file

@ -0,0 +1,187 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: stable both (classic scrollbars)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: stable with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: stable both;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars */
.classic {
scrollbar-width: 20px;
scrollbar-color: hsla(0, 0%, 20%, 0.6) hsla(0, 0%, 40%, 0.3);
}
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing modes */
.horizontal {
writing-mode: horizontal-tb;
overflow-x: auto;
}
.vertical {
writing-mode: vertical-rl;
overflow-y: auto;
}
/* overflow on the block direction */
.horizontal.auto { overflow-y: auto; }
.horizontal.scroll { overflow-y: scroll; }
.horizontal.visible { overflow: visible; }
.horizontal.hidden { overflow-y: hidden; }
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
test(function() {
let container = document.getElementById('container_auto_h');
let content = document.getElementById('content_auto_h');
assert_equals(container.scrollWidth, 160, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 160, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow auto, scrollbar-gutter stable both, horizontal-tb");
test(function() {
let container = document.getElementById('container_scroll_h');
let content = document.getElementById('content_scroll_h');
assert_equals(container.scrollWidth, 160, "scroll/auto scrollWidth");
assert_equals(container.clientWidth, 160, "scroll/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "scroll/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/auto offsetWidth");
}, "Unexpected layout: overflow scroll, scrollbar-gutter stable both, horizontal-tb");
test(function() {
let container = document.getElementById('container_visible_h');
let content = document.getElementById('content_visible_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow visible, scrollbar-gutter stable both, horizontal-tb");
test(function() {
let container = document.getElementById('container_hidden_h');
let content = document.getElementById('content_hidden_h');
assert_equals(container.scrollWidth, 200, "hidden/auto scrollWidth");
assert_equals(container.clientWidth, 200, "hidden/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "hidden/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "hidden/auto offsetWidth");
}, "Unexpected layout: overflow hidden, scrollbar-gutter stable both, horizontal-tb");
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 160, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 160, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow auto, scrollbar-gutter stable both, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 160, "scroll/auto scrollHeight");
assert_equals(container.clientHeight, 160, "scroll/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "scroll/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/auto offsetHeight");
}, "Unexpected layout: overflow scroll, scrollbar-gutter stable both, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow visible, scrollbar-gutter stable both, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "hidden/auto scrollHeight");
assert_equals(container.clientHeight, 200, "hidden/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "hidden/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/auto offsetHeight");
}, "Unexpected layout: overflow hidden, scrollbar-gutter stable both, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: stable both, writing-mode: horizontal-tb
<div class="container classic horizontal auto" id="container_auto_h">
<div class="content" id="content_auto_h">overflow-y: auto</div>
</div>
<div class="container classic horizontal scroll" id="container_scroll_h">
<div class="content" id="content_scroll_h">overflow-y: scroll</div>
</div>
<div class="container classic horizontal visible" id="container_visible_h">
<div class="content" id="content_visible_h">overflow: visible</div>
</div>
<div class="container classic horizontal hidden" id="container_hidden_h">
<div class="content" id="content_hidden_h">overflow-y: hidden</div>
</div>
writing-mode: vertical-rl;
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">overflow-x: auto</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">overflow-x: scroll</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">overflow: visible</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">overflow-x: hidden</div>
</div>
</body>

187
tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-005.html Normal file
View file

@ -0,0 +1,187 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: always both (classic scrollbars)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: always with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
.container {
scrollbar-gutter: always both;
height: 200px;
width: 200px;
margin: 1px;
padding: 0px;
border: none;
background: deepskyblue;
}
.content {
height: 100%;
width: 100%;
background: lightsalmon;
}
/* ensure that we are using classic scrollbars */
.classic {
scrollbar-width: 20px;
scrollbar-color: hsla(0, 0%, 20%, 0.6) hsla(0, 0%, 40%, 0.3);
}
.classic::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.classic::-webkit-scrollbar-track {
background-color: hsla(0, 0%, 40%, 0.4);
}
.classic::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 20%, 0.8);
border-radius: 10px;
}
/* writing modes */
.horizontal {
writing-mode: horizontal-tb;
overflow-x: auto;
}
.vertical {
writing-mode: vertical-rl;
overflow-y: auto;
}
/* overflow on the block direction */
.horizontal.auto { overflow-y: auto; }
.horizontal.scroll { overflow-y: scroll; }
.horizontal.visible { overflow: visible; }
.horizontal.hidden { overflow-y: hidden; }
.vertical.auto { overflow-x: auto; }
.vertical.scroll { overflow-x: scroll; }
.vertical.visible { overflow: visible; }
.vertical.hidden { overflow-x: hidden; }
/* Note: not testing with overflow: clip; */
</style>
<script type="text/javascript">
function performTest() {
setup({explicit_done: true});
test(function() {
let container = document.getElementById('container_auto_h');
let content = document.getElementById('content_auto_h');
assert_equals(container.scrollWidth, 160, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 160, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow auto, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_scroll_h');
let content = document.getElementById('content_scroll_h');
assert_equals(container.scrollWidth, 160, "scroll/auto scrollWidth");
assert_equals(container.clientWidth, 160, "scroll/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "scroll/auto clientWidth");
assert_not_equals(container.offsetWidth, content.offsetWidth, "scroll/auto offsetWidth");
}, "Unexpected layout: overflow scroll, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_visible_h');
let content = document.getElementById('content_visible_h');
assert_equals(container.scrollWidth, 200, "visible/auto scrollWidth");
assert_equals(container.clientWidth, 200, "visible/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "visible/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "visible/auto offsetWidth");
}, "Unexpected layout: overflow visible, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_hidden_h');
let content = document.getElementById('content_hidden_h');
assert_equals(container.scrollWidth, 200, "hidden/auto scrollWidth");
assert_equals(container.clientWidth, 200, "hidden/auto clientWidth");
assert_equals(container.clientWidth, content.clientWidth, "hidden/auto clientWidth");
assert_equals(container.offsetWidth, content.offsetWidth, "hidden/auto offsetWidth");
}, "Unexpected layout: overflow hidden, scrollbar-gutter always both, horizontal-tb");
test(function() {
let container = document.getElementById('container_auto_v');
let content = document.getElementById('content_auto_v');
assert_equals(container.scrollHeight, 160, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 160, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow auto, scrollbar-gutter always both, vertical-rl");
test(function() {
let container = document.getElementById('container_scroll_v');
let content = document.getElementById('content_scroll_v');
assert_equals(container.scrollHeight, 160, "scroll/auto scrollHeight");
assert_equals(container.clientHeight, 160, "scroll/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "scroll/auto clientHeight");
assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/auto offsetHeight");
}, "Unexpected layout: overflow scroll, scrollbar-gutter always both, vertical-rl");
test(function() {
let container = document.getElementById('container_visible_v');
let content = document.getElementById('content_visible_v');
assert_equals(container.scrollHeight, 200, "visible/auto scrollHeight");
assert_equals(container.clientHeight, 200, "visible/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "visible/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "visible/auto offsetHeight");
}, "Unexpected layout: overflow visible, scrollbar-gutter always both, vertical-rl");
test(function() {
let container = document.getElementById('container_hidden_v');
let content = document.getElementById('content_hidden_v');
assert_equals(container.scrollHeight, 200, "hidden/auto scrollHeight");
assert_equals(container.clientHeight, 200, "hidden/auto clientHeight");
assert_equals(container.clientHeight, content.clientHeight, "hidden/auto clientHeight");
assert_equals(container.offsetHeight, content.offsetHeight, "hidden/auto offsetHeight");
}, "Unexpected layout: overflow hidden, scrollbar-gutter always both, vertical-rl");
done();
}
</script>
<body onload="performTest()">
Test scrollbar-gutter: always both, writing-mode: horizontal-tb
<div class="container classic horizontal auto" id="container_auto_h">
<div class="content" id="content_auto_h">overflow-y: auto</div>
</div>
<div class="container classic horizontal scroll" id="container_scroll_h">
<div class="content" id="content_scroll_h">overflow-y: scroll</div>
</div>
<div class="container classic horizontal visible" id="container_visible_h">
<div class="content" id="content_visible_h">overflow: visible</div>
</div>
<div class="container classic horizontal hidden" id="container_hidden_h">
<div class="content" id="content_hidden_h">overflow-y: hidden</div>
</div>
writing-mode: vertical-rl;
<div class="container classic vertical auto" id="container_auto_v">
<div class="content" id="content_auto_v">overflow-x: auto</div>
</div>
<div class="container classic vertical scroll" id="container_scroll_v">
<div class="content" id="content_scroll_v">overflow-x: scroll</div>
</div>
<div class="container classic vertical visible" id="container_visible_v">
<div class="content" id="content_visible_v">overflow: visible</div>
</div>
<div class="container classic vertical hidden" id="container_hidden_v">
<div class="content" id="content_hidden_v">overflow-x: hidden</div>
</div>
</body>