mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -0,0 +1,4 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<div style="overflow:scroll">PASS if BODY has scrollbars, but not viewport.</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: HTML root containment stops overflow propagation from BODY</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation">
|
||||
<link rel="match" href="overflow-body-propagation-011-ref.html">
|
||||
<style>
|
||||
html {
|
||||
contain: paint;
|
||||
}
|
||||
body {
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<body>PASS if BODY has scrollbars, but not viewport.</body>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#propdef-opacity">
|
||||
<link rel="help" href="https://crbug.com/1237054">
|
||||
<link rel="author" title="mailto:kojii@chromium.org">
|
||||
<link rel="match" href="reference/overflow-inline-block-with-opacity-ref.html">
|
||||
<style>
|
||||
span { opacity: 0.99; }
|
||||
#button { display: inline-block; inline-size: 0px; }
|
||||
</style>
|
||||
<span>
|
||||
<div id="button">hello world</div>
|
||||
</span>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!doctype html>
|
||||
<title>CSS Overflow Test: Frameset overflow does not propagate to viewport</title>
|
||||
<meta name="assert" content="The computed overflow should not propagate from frameset to thte viewport">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation">
|
||||
<link rel="match" href="/common/blank.html">
|
||||
<frameset style="overflow:scroll"></frameset>
|
||||
|
|
@ -84,10 +84,10 @@
|
|||
</div>
|
||||
<script>
|
||||
function hasHorizontalScrollbar(el) {
|
||||
return (el.offsetHeight - el.clientHeight) > 0;
|
||||
return (el.scrollWidth - el.offsetWidth) > 0;
|
||||
}
|
||||
function hasVerticalScrollbar(el) {
|
||||
return (el.offsetWidth - el.clientWidth) > 0;
|
||||
return (el.scrollHeight - el.offsetHeight) > 0;
|
||||
}
|
||||
// Tests needs to be run after load.
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.scroller {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: scroll;
|
||||
/* to make the scroller a white mask over the content */
|
||||
filter: brightness(0) invert(1);
|
||||
position: relative;
|
||||
top: -200px;
|
||||
}
|
||||
.content {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div class="content"></div>
|
||||
<div class="content"></div>
|
||||
<div class="scroller"></div>
|
||||
<div class="scroller"></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Overflow: overflow: scroll with resize: both and visibility: hidden</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3#propdef-overflow">
|
||||
<link rel="match" href="overflow-scroll-resize-visibility-hidden-ref.html">
|
||||
<style>
|
||||
.scroller {
|
||||
overflow: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
resize: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.content {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
background: green;
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
<div class="scroller">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="scroller" style="will-change: transform">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
|
|
@ -26,4 +26,12 @@
|
|||
test_invalid_value("scrollbar-gutter", "none");
|
||||
test_invalid_value("scrollbar-gutter", "red");
|
||||
|
||||
test_invalid_value("scrollbar-gutter", "stable both");
|
||||
test_invalid_value("scrollbar-gutter", "stable force");
|
||||
test_invalid_value("scrollbar-gutter", "stable both force");
|
||||
test_invalid_value("scrollbar-gutter", "always");
|
||||
test_invalid_value("scrollbar-gutter", "always both");
|
||||
test_invalid_value("scrollbar-gutter", "always force");
|
||||
test_invalid_value("scrollbar-gutter", "always both force");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,15 +12,8 @@
|
|||
|
||||
test_valid_value("scrollbar-gutter", "auto");
|
||||
test_valid_value("scrollbar-gutter", "stable");
|
||||
test_valid_value("scrollbar-gutter", "stable both");
|
||||
test_valid_value("scrollbar-gutter", "stable force");
|
||||
test_valid_value("scrollbar-gutter", "stable both force");
|
||||
test_valid_value("scrollbar-gutter", "always");
|
||||
test_valid_value("scrollbar-gutter", "always both");
|
||||
test_valid_value("scrollbar-gutter", "always force");
|
||||
test_valid_value("scrollbar-gutter", "always both force");
|
||||
test_valid_value("scrollbar-gutter", "stable both-edges");
|
||||
|
||||
test_valid_value("scrollbar-gutter", "force both stable", "stable both force");
|
||||
test_valid_value("scrollbar-gutter", "force always both", "always both force");
|
||||
test_valid_value("scrollbar-gutter", "both-edges stable", "stable both-edges");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
span { opacity: 0.99; }
|
||||
#button { display: inline-block; }
|
||||
</style>
|
||||
<span>
|
||||
<div id="button">hello<br>world</div>
|
||||
</span>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
background-color: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">
|
||||
<div>
|
||||
Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
font: 16px / 32px serif;
|
||||
background-color: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">
|
||||
<div>
|
||||
Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: Test the text in an input is not clipped and reachable</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 160px;
|
||||
padding-inline: 40px 60px;
|
||||
background: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<input value="XpX">
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: Test the text in an input is not clipped and reachable</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1715291">
|
||||
<link rel="match" href="scrollable-overflow-input-001-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 160px;
|
||||
padding-inline: 20px 60px;
|
||||
background: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- The total width of the text (120px) must be less than the <input>'s
|
||||
width (160px) to reproduce this bug. -->
|
||||
<input id="input" value="X XpX">
|
||||
|
||||
<script>
|
||||
document.getElementById('input').scrollLeft = 1000;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Reference: Test the text in an input is not clipped and reachable</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 160px;
|
||||
padding-inline: 40px 60px;
|
||||
background: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
border: 0;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
|
||||
<input value="XpX">
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: Test the text in an input is not clipped and reachable</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1715291">
|
||||
<link rel="match" href="scrollable-overflow-input-002-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<style>
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 160px;
|
||||
padding-inline: 20px 60px;
|
||||
background: yellow;
|
||||
font: 20px/1 Ahem;
|
||||
border: 0;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- The total width of the text (120px) must be less than the <input>'s
|
||||
width (160px) to reproduce this bug. -->
|
||||
<input id="input2" value="XpX X">
|
||||
|
||||
<script>
|
||||
document.getElementById('input2').scrollLeft = -1000;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow Test: Test padding in included in the texarea's scrollable overflow area</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527949">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1696885">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
padding: 11px 13px 17px 19px;
|
||||
font: 20px/1 Ahem;
|
||||
background: yellow content-box;
|
||||
border: 0;
|
||||
outline: 1px solid blue;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('#textarea')">
|
||||
<!-- Expected scroll width 132px =
|
||||
width:100px + padding-left:19px + padding-right:13px.
|
||||
Expected scroll height 128px =
|
||||
5 lines of 20px height + padding-top:11px + padding-bottom:17px -->
|
||||
<textarea id="textarea" data-expected-scroll-width="132" data-expected-scroll-height="128">XXXXX XXXXX XXXXX XXXXX XXXXX</textarea>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform</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 elements with transform contribute to the scrollable overflow.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
background: silver;
|
||||
border: solid thick;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('.container')">
|
||||
|
||||
<div class="container" data-expected-scroll-width="250">
|
||||
<div style="transform: translateX(200px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-expected-scroll-height="350">
|
||||
<div style="transform: translateY(300px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-expected-scroll-width="250" data-expected-scroll-height="350">
|
||||
<div style="transform: translate(200px, 300px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Positioned 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 elements with transform contribute to the scrollable overflow on a positioned element.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
background: silver;
|
||||
border: solid thick;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
<body onload="checkLayout('.container')">
|
||||
<div style="position: relative;">
|
||||
|
||||
<div class="container" style="top: 0px;" data-expected-scroll-width="250">
|
||||
<div style="transform: translateX(200px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="top: 150px;" data-expected-scroll-height="350">
|
||||
<div style="transform: translateY(300px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="top: 300px;" data-expected-scroll-width="250" data-expected-scroll-height="350">
|
||||
<div style="transform: translate(200px, 300px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform 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 elements with transform contribute to the scrollable overflow on an inline element.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.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>
|
||||
<body onload="checkLayout('.container')">
|
||||
|
||||
<div class="container" style="top: 0px;" data-expected-scroll-width="250">
|
||||
<div style="transform: translateX(200px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="top: 150px;" data-expected-scroll-height="350">
|
||||
<div style="transform: translateY(300px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="top: 300px;" data-expected-scroll-width="250" data-expected-scroll-height="350">
|
||||
<div style="transform: translate(200px, 300px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Dynamic</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.">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Dynamic Positioned 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 a positioned element.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
background: silver;
|
||||
border: solid thick;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="position: relative;">
|
||||
|
||||
<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>
|
||||
|
||||
</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>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Dynamic Position Change</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 element has changed position too.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
background: silver;
|
||||
border: solid thick;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="container1" style="top: 100px;" class="container">
|
||||
<div id="element1" style="transform: translateX(20px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div id="container2" style="top: 250px;" class="container">
|
||||
<div id="element2" style="transform: translateY(30px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<div id="container3" style="top: 400px;" class="container">
|
||||
<div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(container1.scrollWidth, 100);
|
||||
container1.style.top = "110px";
|
||||
element1.style.transform = "translateX(200px)";
|
||||
assert_equals(container1.scrollWidth, 250);
|
||||
}, "Check scrollWidth before and after position and transform chage");
|
||||
|
||||
test(() => {
|
||||
assert_equals(container2.scrollHeight, 100);
|
||||
container2.style.top = "260px";
|
||||
element2.style.transform = "translateY(300px)";
|
||||
assert_equals(container2.scrollHeight, 350);
|
||||
}, "Check scrollHeight before and after position and transform chage");
|
||||
|
||||
test(() => {
|
||||
assert_equals(container3.scrollWidth, 100);
|
||||
assert_equals(container3.scrollHeight, 100);
|
||||
container3.style.top = "410px";
|
||||
element3.style.transform = "translate(200px, 300px)";
|
||||
assert_equals(container3.scrollWidth, 250);
|
||||
assert_equals(container3.scrollHeight, 350);
|
||||
}, "Check scrollWidth and scrollHeight after position and transform chage");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!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 added to 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>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(container1.scrollWidth, 100);
|
||||
document.body.appendChild(document.createElement("div"));
|
||||
element1.style.transform = "translateX(200px)";
|
||||
assert_equals(container1.scrollWidth, 250);
|
||||
}, "Check scrollWidth before and after appendChild() and transform chage");
|
||||
|
||||
test(() => {
|
||||
assert_equals(container2.scrollHeight, 100);
|
||||
document.body.appendChild(document.createElement("div"));
|
||||
element2.style.transform = "translateY(300px)";
|
||||
assert_equals(container2.scrollHeight, 350);
|
||||
}, "Check scrollHeight before and after appendChild() and transform chage");
|
||||
|
||||
test(() => {
|
||||
assert_equals(container3.scrollWidth, 100);
|
||||
assert_equals(container3.scrollHeight, 100);
|
||||
document.body.appendChild(document.createElement("div"));
|
||||
element3.style.transform = "translate(200px, 300px)";
|
||||
assert_equals(container3.scrollWidth, 250);
|
||||
assert_equals(container3.scrollHeight, 350);
|
||||
}, "Check scrollWidth and scrollHeight before and after appendChild() and transform chage");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!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>
|
||||
|
|
@ -33,28 +33,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -75,7 +64,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-y: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -103,90 +92,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -230,167 +175,85 @@
|
|||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable both-edges
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable both-edges");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter on the root, not scrolling</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#content {
|
||||
background: green;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
|
||||
test(function () {
|
||||
let root = document.documentElement;
|
||||
let body = document.body;
|
||||
let content = document.getElementById('content');
|
||||
|
||||
// Note: as per the CSSOM spec, the clientWidth of the root element is
|
||||
// "viewport width excluding the size of a rendered scroll bar (if any)"
|
||||
// which does not take scrollbar-gutter into account.
|
||||
// Since no such special case exists for offsetWidth, this means that here
|
||||
// root.clientWidth is actually greater than root.offsetWidth.
|
||||
|
||||
assert_less_than(root.offsetWidth, window.innerWidth, "viewport has gutter");
|
||||
assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
|
||||
assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
|
||||
assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
|
||||
}, "viewport has gutter, others do not");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter on the root, scrolling</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#content {
|
||||
background: green;
|
||||
width: 100%;
|
||||
/* force scrolling */
|
||||
height: 200vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
|
||||
test(function () {
|
||||
let root = document.documentElement;
|
||||
let body = document.body;
|
||||
let content = document.getElementById('content');
|
||||
|
||||
// Note: as per the spec, the clientWidth of the root element is
|
||||
// "viewport width excluding the size of a rendered scroll bar (if any)"
|
||||
// which does not take scrollbar-gutter into account.
|
||||
// Since no such special case exists for offsetWidth, this means that here
|
||||
// root.clientWidth is greater than root.offsetWidth (!!!).
|
||||
|
||||
assert_less_than(root.offsetWidth, window.innerWidth, "viewport has gutter");
|
||||
assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
|
||||
assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
|
||||
assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
|
||||
}, "viewport has gutter, others do not");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter on the root with overflow:auto, not scrolling</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: stable;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#content {
|
||||
background: green;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
|
||||
test(function () {
|
||||
let root = document.documentElement;
|
||||
let body = document.body;
|
||||
let content = document.getElementById('content');
|
||||
|
||||
// Note: as per the spec, the clientWidth of the root element is
|
||||
// "viewport width excluding the size of a rendered scroll bar (if any)"
|
||||
// which does not take scrollbar-gutter into account.
|
||||
// Since no such special case exists for offsetWidth, this means that here
|
||||
// root.clientWidth is greater than root.offsetWidth (!!!).
|
||||
|
||||
assert_less_than(root.offsetWidth, window.innerWidth, "viewport has gutter");
|
||||
assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
|
||||
assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
|
||||
assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
|
||||
}, "viewport has gutter, others do not");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter on the root with overflow:auto, scrolling</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: stable;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#content {
|
||||
background: green;
|
||||
width: 100%;
|
||||
/* force scrolling */
|
||||
height: 200vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
|
||||
test(function () {
|
||||
let root = document.documentElement;
|
||||
let body = document.body;
|
||||
let content = document.getElementById('content');
|
||||
assert_equals(body.offsetWidth, root.offsetWidth, "root width");
|
||||
assert_equals(content.offsetWidth, body.offsetWidth, "content width");
|
||||
}, "root, body and content have the same width");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter on the root with overflow:scroll</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: stable;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#content {
|
||||
background: green;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
|
||||
test(function () {
|
||||
let root = document.documentElement;
|
||||
let body = document.body;
|
||||
let content = document.getElementById('content');
|
||||
assert_equals(body.offsetWidth, root.offsetWidth, "root width");
|
||||
assert_equals(content.offsetWidth, body.offsetWidth, "content width");
|
||||
}, "root, body and content have the same width");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter on the body is not propagated</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#content {
|
||||
background: green;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
|
||||
test(function () {
|
||||
let root = document.documentElement;
|
||||
let body = document.body;
|
||||
let content = document.getElementById('content');
|
||||
assert_equals(body.offsetWidth, root.offsetWidth, "root width");
|
||||
assert_equals(content.offsetWidth, body.offsetWidth, "content width");
|
||||
}, "content, body and root have the same width");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: scrollbar-gutter on the root, overflow:scroll on the body</title>
|
||||
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#content {
|
||||
background: green;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="content"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
|
||||
test(function () {
|
||||
let root = document.documentElement;
|
||||
let body = document.body;
|
||||
let content = document.getElementById('content');
|
||||
|
||||
assert_less_than(root.clientWidth, window.outerWidth, "viewport has scrollbars");
|
||||
assert_equals(body.offsetWidth, root.clientWidth, "body matches root");
|
||||
assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
|
||||
assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
|
||||
}, "viewport has fixed scrollbars");
|
||||
|
||||
done();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -33,28 +33,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -75,7 +64,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-y: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -103,90 +92,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -230,167 +175,85 @@
|
|||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable both-edges
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_always');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
|
||||
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable both-edges");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -31,28 +31,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -73,7 +62,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-x: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -101,90 +90,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -228,167 +173,85 @@
|
|||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable both-edges
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable both-edges");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -31,28 +31,17 @@
|
|||
background: lightsalmon;
|
||||
}
|
||||
|
||||
/* scrollbar-gutter
|
||||
Note: not testing "stable" because the decision to use overlay scrollbars
|
||||
is up to the browser. The "always" keyword takes effect regardless of
|
||||
whether classical or overlay scrollbars are being used.*/
|
||||
/* scrollbar-gutter */
|
||||
.sg_auto {
|
||||
scrollbar-gutter: auto;
|
||||
}
|
||||
|
||||
.sg_always {
|
||||
scrollbar-gutter: always;
|
||||
.sg_stable {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.sg_always_both {
|
||||
scrollbar-gutter: always both;
|
||||
}
|
||||
|
||||
.sg_always_force {
|
||||
scrollbar-gutter: always force;
|
||||
}
|
||||
|
||||
.sg_always_both_force {
|
||||
scrollbar-gutter: always both force;
|
||||
.sg_stable_mirror {
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
|
||||
/* overflow */
|
||||
|
|
@ -73,7 +62,7 @@
|
|||
}
|
||||
|
||||
.container.ov_clip {
|
||||
overflow-x: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
|
@ -101,90 +90,46 @@
|
|||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always" id="container_auto_always">
|
||||
<div class="content" id="content_auto_always">auto/always</div>
|
||||
<div class="container ov_auto sg_stable" id="container_auto_stable">
|
||||
<div class="content" id="content_auto_stable">auto/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always" id="container_scroll_always">
|
||||
<div class="content" id="content_scroll_always">scroll/always</div>
|
||||
<div class="container ov_scroll sg_stable" id="container_scroll_stable">
|
||||
<div class="content" id="content_scroll_stable">scroll/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always" id="container_visible_always">
|
||||
<div class="content" id="content_visible_always">visible/always</div>
|
||||
<div class="container ov_visible sg_stable" id="container_visible_stable">
|
||||
<div class="content" id="content_visible_stable">visible/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always" id="container_hidden_always">
|
||||
<div class="content" id="content_hidden_always">hidden/always</div>
|
||||
<div class="container ov_hidden sg_stable" id="container_hidden_stable">
|
||||
<div class="content" id="content_hidden_stable">hidden/stable</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always" id="container_clip_always">
|
||||
<div class="content" id="content_clip_always">clip/always</div>
|
||||
<div class="container ov_clip sg_stable" id="container_clip_stable">
|
||||
<div class="content" id="content_clip_stable">clip/stable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_force" id="container_auto_always_force">
|
||||
<div class="content" id="content_auto_always_force">auto/always force</div>
|
||||
<div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
|
||||
<div class="content" id="content_auto_stable_mirror">auto/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
|
||||
<div class="content" id="content_scroll_always_force">scroll/always force</div>
|
||||
<div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
|
||||
<div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_force" id="container_visible_always_force">
|
||||
<div class="content" id="content_visible_always_force">visible/always force</div>
|
||||
<div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
|
||||
<div class="content" id="content_visible_stable_mirror">visible/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
|
||||
<div class="content" id="content_hidden_always_force">hidden/always force</div>
|
||||
<div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
|
||||
<div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_force" id="container_clip_always_force">
|
||||
<div class="content" id="content_clip_always_force">clip/always force</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both" id="container_auto_always_both">
|
||||
<div class="content" id="content_auto_always_both">auto/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
|
||||
<div class="content" id="content_scroll_always_both">scroll/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both" id="container_visible_always_both">
|
||||
<div class="content" id="content_visible_always_both">visible/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
|
||||
<div class="content" id="content_hidden_always_both">hidden/always both</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both" id="container_clip_always_both">
|
||||
<div class="content" id="content_clip_always_both">clip/always both</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
|
||||
<div class="content" id="content_auto_always_both_force">auto/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
|
||||
<div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
|
||||
<div class="content" id="content_visible_always_both_force">visible/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
|
||||
<div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
|
||||
</div>
|
||||
|
||||
<div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
|
||||
<div class="content" id="content_clip_always_both_force">clip/always both force</div>
|
||||
<div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
|
||||
<div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -229,167 +174,85 @@
|
|||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter auto");
|
||||
|
||||
// scrollbar-gutter: always
|
||||
// scrollbar-gutter: stable
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always');
|
||||
let content = document.getElementById('content_auto_always');
|
||||
let container = document.getElementById('container_auto_stable');
|
||||
let content = document.getElementById('content_auto_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always");
|
||||
}, "overflow auto, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always');
|
||||
let content = document.getElementById('content_scroll_always');
|
||||
let container = document.getElementById('container_scroll_stable');
|
||||
let content = document.getElementById('content_scroll_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always");
|
||||
}, "overflow scroll, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always');
|
||||
let content = document.getElementById('content_visible_always');
|
||||
let container = document.getElementById('container_visible_stable');
|
||||
let content = document.getElementById('content_visible_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always");
|
||||
}, "overflow visible, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always');
|
||||
let content = document.getElementById('content_hidden_always');
|
||||
let container = document.getElementById('container_hidden_stable');
|
||||
let content = document.getElementById('content_hidden_stable');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter stable");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_stable');
|
||||
let content = document.getElementById('content_clip_stable');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always");
|
||||
}, "overflow clip, scrollbar-gutter stable");
|
||||
|
||||
// scrollbar-gutter: stable both-edges
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always');
|
||||
let content = document.getElementById('content_clip_always');
|
||||
let container = document.getElementById('container_auto_stable_mirror');
|
||||
let content = document.getElementById('content_auto_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow auto, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_stable_mirror');
|
||||
let content = document.getElementById('content_scroll_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow scroll, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_stable_mirror');
|
||||
let content = document.getElementById('content_visible_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always");
|
||||
|
||||
// scrollbar-gutter: always force
|
||||
}, "overflow visible, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_force');
|
||||
let content = document.getElementById('content_auto_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow auto, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_force');
|
||||
let content = document.getElementById('content_scroll_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow scroll, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_force');
|
||||
let content = document.getElementById('content_visible_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_force');
|
||||
let content = document.getElementById('content_hidden_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_force');
|
||||
let content = document.getElementById('content_clip_always_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always force");
|
||||
|
||||
// scrollbar-gutter: always both
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both');
|
||||
let content = document.getElementById('content_auto_always_both');
|
||||
let container = document.getElementById('container_hidden_stable_mirror');
|
||||
let content = document.getElementById('content_hidden_stable_mirror');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow auto, scrollbar-gutter always both");
|
||||
let reference = document.getElementById('content_auto_stable');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
|
||||
}, "overflow hidden, scrollbar-gutter stable both-edges");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both');
|
||||
let content = document.getElementById('content_scroll_always_both');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both');
|
||||
let content = document.getElementById('content_visible_always_both');
|
||||
let container = document.getElementById('container_clip_stable_mirror');
|
||||
let content = document.getElementById('content_clip_stable_mirror');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow visible, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both');
|
||||
let content = document.getElementById('content_hidden_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow hidden, scrollbar-gutter always both");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both');
|
||||
let content = document.getElementById('content_clip_always_both');
|
||||
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_equals(container.offsetTop, content.offsetTop, "content position");
|
||||
}, "overflow clip, scrollbar-gutter always both");
|
||||
|
||||
// scrollbar-gutter: always both force
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_auto_always_both_force');
|
||||
let content = document.getElementById('content_auto_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_auto_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow auto, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_scroll_always_both_force');
|
||||
let content = document.getElementById('content_scroll_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_scroll_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow scroll, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_visible_always_both_force');
|
||||
let content = document.getElementById('content_visible_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_visible_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow visible, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_hidden_always_both_force');
|
||||
let content = document.getElementById('content_hidden_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_hidden_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow hidden, scrollbar-gutter always both force");
|
||||
|
||||
test(function () {
|
||||
let container = document.getElementById('container_clip_always_both_force');
|
||||
let content = document.getElementById('content_clip_always_both_force');
|
||||
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
|
||||
assert_less_than(container.offsetTop, content.offsetTop, "content position");
|
||||
let reference = document.getElementById('content_clip_always_force');
|
||||
assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
|
||||
}, "overflow clip, scrollbar-gutter always both force");
|
||||
}, "overflow clip, scrollbar-gutter stable both-edges");
|
||||
|
||||
done();
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-038-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp correctly clamps a block-in-inline.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
background-color: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">
|
||||
<div>
|
||||
Line 1
|
||||
<span><div>Line 2<br>Line 3<br>Line 4</div></span>
|
||||
Line 5
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-039-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp correctly clamps a block-in-inline.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
font: 16px / 32px serif;
|
||||
background-color: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">
|
||||
<div>
|
||||
Line 1
|
||||
<span><div>Line 2<br>Line 3<br>Line 4</div></span>
|
||||
Line 5<br>Line 6
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue