diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-overflow')
351 files changed, 11207 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-overflow/META.yml b/testing/web-platform/tests/css/css-overflow/META.yml new file mode 100644 index 0000000000..b9ba7acd15 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-overflow/ +suggested_reviewers: + - frivoal + - dbaron + - rachelandrew diff --git a/testing/web-platform/tests/css/css-overflow/auto-scrollbar-inline-children.html b/testing/web-platform/tests/css/css-overflow/auto-scrollbar-inline-children.html new file mode 100644 index 0000000000..149cf942fe --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/auto-scrollbar-inline-children.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow"> +<style> + /* Avoid auto scrollbars on the viewport, because that might trigger re-layout + (and thus hide bugs). */ + body { overflow:hidden; } + + .container { width:100px; } +</style> +<p>There should be a blue rectangle below, and possibly a scrollbar (depending + on OS / browser), that should not obscure any parts of the rectangle. The + word "FAIL" should not be seen.</p> +<div class="container" style="overflow:auto; height:200px;"> + <div id="child" style="display:inline-block; box-sizing:border-box; width:100%; height:100%; border:10px solid blue;"></div> + <br>FAIL +</div> + +<div class="container" style="visibility:hidden; overflow:scroll;"> + <div id="ref"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var child = document.getElementById("child"); + assert_equals(child.offsetWidth, ref.offsetWidth); + }, "Auto scrollbar affects size of children"); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/chrome-body-overflow-propagation-crash.html b/testing/web-platform/tests/css/css-overflow/chrome-body-overflow-propagation-crash.html new file mode 100644 index 0000000000..22607b4a4d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/chrome-body-overflow-propagation-crash.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Overflow Test: Chrome scrollbar crash - multiple body elements, removed stylesheet</title> +<style id="sheet"> +</style> +<style> + body { + overflow: scroll; + width: 100px; + height: 100px; + } +</style> +<body>Pass if no crash</body> +<script> + document.body.offsetTop; + sheet.remove(); + document.documentElement.insertBefore(document.createElement("body"), document.body); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/clip-001-ref.html b/testing/web-platform/tests/css/css-overflow/clip-001-ref.html new file mode 100644 index 0000000000..9ccdbf93c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-001-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + #target { + width: 100px; + height: 100px; + background: red; + /* For this simple case, hidden and clip are equivalent */ + overflow: hidden; + } + + #container { + overflow: auto; + height: 300px; + } + + #fill { + background: blue; + height: 5000px; + } +</style> +<div id="container"> + <div id="target"> + <div id="fill"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-001.html b/testing/web-platform/tests/css/css-overflow/clip-001.html new file mode 100644 index 0000000000..dacb658db6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-001.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset="utf-8"> +<title>overflow: clip clips its contents and doesn't cause scrollable overflow</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="clip-001-ref.html"> +<style> + #target { + width: 100px; + height: 100px; + background: red; + overflow: clip; + } + + #container { + overflow: auto; + height: 300px; + } + + #fill { + background: blue; + height: 5000px; + } +</style> +<div id="container"> + <div id="target"> + <div id="fill"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-002-ref.html b/testing/web-platform/tests/css/css-overflow/clip-002-ref.html new file mode 100644 index 0000000000..19c901981d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-002-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: overflow: clip can be combined with overflow: visible</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<style> + .outer { + width: 50px; + height: 50px; + margin-left: 100px; + margin-top: 100px; + background: black; + } + + .inner { + position: relative; + background: blue; + height: 100px; + width: 100px; + opacity: 0.5; + } +</style> +<!-- there should be no overflow --> +<div class="outer"> + <div class="inner" style="width:50px; height:50px;"></div> +</div> + +<!-- there should be overflow in the vertical dimension, but not horizontally --> +<div class="outer"> + <div class="inner" style="top:-20px; width:50px"></div> +</div> + +<!-- there should be overflow in the horizontal dimension, but not vertically --> +<div class="outer"> + <div class="inner" style="left:-40px; height:50px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-002.html b/testing/web-platform/tests/css/css-overflow/clip-002.html new file mode 100644 index 0000000000..cd8b9a3cbe --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-002.html @@ -0,0 +1,39 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: overflow:clip can be combined with overflow:visible</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="match" href="clip-002-ref.html"> +<style> + .outer { + width: 50px; + height: 50px; + margin-left: 100px; + margin-top: 100px; + background: black; + } + + .inner { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 100px; + width: 100px; + opacity: 0.5; + } +</style> +<!-- there should be no overflow --> +<div class="outer" style="overflow:clip"> + <div class="inner"></div> +</div> + +<!-- there should be overflow in the vertical dimension, but not horizontally --> +<div class="outer" style="overflow-x:clip"> + <div class="inner"></div> +</div> + +<!-- there should be overflow in the horizontal dimension, but not vertically --> +<div class="outer" style="overflow-y:clip"> + <div class="inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-003-ref.html b/testing/web-platform/tests/css/css-overflow/clip-003-ref.html new file mode 100644 index 0000000000..5de31068e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-003-ref.html @@ -0,0 +1,61 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: overflow:clip can be combined with overflow:visible</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<style> + .wrapper { + margin-left: 30px; + margin-bottom: 20px; + width: 50px; + height: 50px; + } + .outer { + width: 50px; + height: 50px; + background: black; + } + + .inner { + position: relative; + top: -10px; + left: -10px; + height: 100px; + width: 100px; + background: blue; + opacity: 0.5; + } +</style> +<!-- there should be no scrollbars --> +<div class="wrapper" style="overflow: hidden"> +<div class="outer"> + <div class="inner"></div> +</div> +</div> + +<!-- there should be no white areas inside the outline --> +<div class="wrapper" style="outline: solid"> +<div class="outer"> + <div class="inner" style="left:0; width:50px"></div> +</div> +</div> + +<!-- there should be a vertical scrollbar, but not a horizontal one --> +<div class="wrapper" style="overflow: hidden scroll; margin-top:50px"> +<div class="outer"> + <div class="inner" style="width:1px"></div> +</div> +</div> + +<!-- there should be no white areas inside the outline --> +<div class="wrapper" style="outline: solid"> +<div class="outer"> + <div class="inner" style="top:0; height:50px"></div> +</div> +</div> + +<!-- there should be horizontal scrollbar, but not a vertical one --> +<div class="wrapper" style="overflow: scroll hidden"> +<div class="outer"> + <div class="inner" style="height:1px"></div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-003.html b/testing/web-platform/tests/css/css-overflow/clip-003.html new file mode 100644 index 0000000000..0c7e9bfa25 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-003.html @@ -0,0 +1,63 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: overflow:clip can be combined with overflow:visible</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="match" href="clip-003-ref.html"> +<style> + .wrapper { + margin-left: 30px; + margin-bottom: 20px; + width: 50px; + height: 50px; + } + .outer { + width: 50px; + height: 50px; + background: black; + } + + .inner { + position: relative; + top: -10px; + left: -10px; + height: 100px; + width: 100px; + background: blue; + opacity: 0.5; + } +</style> +<!-- there should be no scrollbars --> +<div class="wrapper" style="overflow: auto"> +<div class="outer" style="overflow:clip; outline:solid red"> + <div class="inner"></div> +</div> +</div> + +<!-- there should be no white areas inside the outline --> +<div class="wrapper" style="outline: solid"> +<div class="outer" style="overflow-x:clip"> + <div class="inner"></div> +</div> +</div> + +<!-- there should be a vertical scrollbar, but not a horizontal one --> +<div class="wrapper" style="overflow: auto; margin-top:50px"> +<div class="outer" style="overflow-x:clip"> + <div class="inner" style="width:1px"></div> +</div> +</div> + +<!-- there should be no white areas inside the outline --> +<div class="wrapper" style="outline: solid"> +<div class="outer" style="overflow-y:clip"> + <div class="inner"></div> +</div> +</div> + +<!-- there should be horizontal scrollbar, but not a vertical one --> +<div class="wrapper" style="overflow: auto"> +<div class="outer" style="overflow-y:clip"> + <div class="inner" style="height:1px"></div> +</div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-004-ref.html b/testing/web-platform/tests/css/css-overflow/clip-004-ref.html new file mode 100644 index 0000000000..39e12445d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-004-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: overflow: clip can be combined with overflow: visible</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<style> + .outer { + width: 50px; + height: 50px; + margin-left: 100px; + margin-top: 100px; + background: black; + } + + .inner { + position: relative; + background: blue; + height: 100px; + width: 100px; + opacity: 0.5; + } +</style> +<!-- there should be no overflow --> +<div class="outer"> + <div class="inner" style="width:50px; height:50px;"></div> +</div> + +<!-- there should be overflow in the vertical dimension, but not horizontally --> +<div class="outer"> + <div class="inner" style="top:-10px; width:50px"></div> +</div> + +<!-- there should be overflow in the horizontal dimension, but not vertically --> +<div class="outer"> + <div class="inner" style="left:-30px; height:50px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-004.html b/testing/web-platform/tests/css/css-overflow/clip-004.html new file mode 100644 index 0000000000..30dde4a5e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-004.html @@ -0,0 +1,40 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: overflow:clip can be combined with overflow:visible</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="match" href="clip-004-ref.html"> +<style> + .outer { + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + background: black; + } + + .inner { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 100px; + width: 100px; + opacity: 0.5; + } +</style> +<!-- there should be no overflow --> +<div class="outer" style="overflow:clip"> + <div class="inner"></div> +</div> + +<!-- there should be overflow in the vertical dimension, but not horizontally --> +<div class="outer" style="overflow-x:clip"> + <div class="inner"></div> +</div> + +<!-- there should be overflow in the horizontal dimension, but not vertically --> +<div class="outer" style="overflow-y:clip"> + <div class="inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-005-ref.html b/testing/web-platform/tests/css/css-overflow/clip-005-ref.html new file mode 100644 index 0000000000..09081e2503 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-005-ref.html @@ -0,0 +1,36 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference: overflow:clip doesn't affect the box' own outline</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<style> + .outer { + width: 50px; + height: 50px; + margin-left: 100px; + margin-top: 100px; + background: black; + outline: 2px solid grey; + } + + .inner { + position: relative; + background: blue; + height: 100px; + width: 100px; + opacity: 0.5; + } +</style> +<!-- there should be no overflow --> +<div class="outer"> + <div class="inner" style="width:50px; height:50px;"></div> +</div> + +<!-- there should be overflow in the vertical dimension, but not horizontally --> +<div class="outer"> + <div class="inner" style="top:-10px; width:50px"></div> +</div> + +<!-- there should be overflow in the horizontal dimension, but not vertically --> +<div class="outer"> + <div class="inner" style="left:-30px; height:50px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-005.html b/testing/web-platform/tests/css/css-overflow/clip-005.html new file mode 100644 index 0000000000..e55f4b22fc --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-005.html @@ -0,0 +1,41 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: overflow:clip doesn't affect the box' own outline</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="match" href="clip-005-ref.html"> +<style> + .outer { + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + background: black; + outline: 2px solid grey; + } + + .inner { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 100px; + width: 100px; + opacity: 0.5; + } +</style> +<!-- there should be no overflow --> +<div class="outer" style="overflow:clip"> + <div class="inner"></div> +</div> + +<!-- there should be overflow in the vertical dimension, but not horizontally --> +<div class="outer" style="overflow-x:clip"> + <div class="inner"></div> +</div> + +<!-- there should be overflow in the horizontal dimension, but not vertically --> +<div class="outer" style="overflow-y:clip"> + <div class="inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-006.html b/testing/web-platform/tests/css/css-overflow/clip-006.html new file mode 100644 index 0000000000..08f755ad75 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-006.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; height: 100px; overflow-x: auto;"> + <div style="overflow-x: clip;"> + <div style="width: 200px; height: 100px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/clip-007.html b/testing/web-platform/tests/css/css-overflow/clip-007.html new file mode 100644 index 0000000000..642ea9c3e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/clip-007.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; height: 100px; overflow-y: auto;"> + <div style="overflow-y: clip; height: 100px;"> + <div style="width: 100px; height: 200px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/display-flex-svg-overflow-default-ref.html b/testing/web-platform/tests/css/css-overflow/display-flex-svg-overflow-default-ref.html new file mode 100644 index 0000000000..2dce244975 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/display-flex-svg-overflow-default-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>display:flex on svg uses 0 as min size with default overflow</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + body { + background: lightblue; + } + div { + width: 100px; + height: 100px; + background: green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-overflow/display-flex-svg-overflow-default.html b/testing/web-platform/tests/css/css-overflow/display-flex-svg-overflow-default.html new file mode 100644 index 0000000000..5fb69d0e09 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/display-flex-svg-overflow-default.html @@ -0,0 +1,24 @@ +<!doctype html> +<meta charset="utf-8"> +<title>display:flex on svg uses 0 as min size with default overflow</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="display-flex-svg-overflow-default-ref.html"> +<style> + body { + background: lightblue; + } + div { + display: flex; + width: 100px; + height: 100px; + } + svg { + flex-grow: 1; + } +</style> +<div> + <svg> + <rect width="150" height="150" fill="green"></rect> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/dynamic-visible-to-clip-001.html b/testing/web-platform/tests/css/css-overflow/dynamic-visible-to-clip-001.html new file mode 100644 index 0000000000..e2011324dd --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/dynamic-visible-to-clip-001.html @@ -0,0 +1,39 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Overflow areas are updated when dynamically changed to overflow: clip</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="clip-001-ref.html"> +<style> + #target { + width: 100px; + height: 100px; + overflow: visible; + } + + #container { + overflow: auto; + height: 300px; + } + #fill { + height: 5000px; + background: blue; + } +</style> +<div id="container"> + <div id="target"> + <div id="fill"></div> + </div> +</div> +<script> +onload = function() { + let target = document.getElementById("target"); + window.unused = target.getBoundingClientRect(); // Update layout + requestAnimationFrame(() => requestAnimationFrame(() => { + target.style.overflow = "clip"; + document.documentElement.removeAttribute("class"); + })); +} +</script> diff --git a/testing/web-platform/tests/css/css-overflow/ellipsis-with-image-crash.html b/testing/web-platform/tests/css/css-overflow/ellipsis-with-image-crash.html new file mode 100644 index 0000000000..42a18d0eb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/ellipsis-with-image-crash.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://issues.chromium.org/issues/41493875"> +<style> + #ellipsis { + overflow: clip; + text-overflow: ellipsis; + white-space: nowrap; + width: 18ch; + } + img { + width: 10ch; + } + .ib { + display: inline-block; + width: 10ch; + height: 10px; + } +</style> +<div id="ellipsis"> + <span style="border-top:1px solid;"> + x<br> + <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><div class="ib"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/float-with-relpos-and-transform.html b/testing/web-platform/tests/css/css-overflow/float-with-relpos-and-transform.html new file mode 100644 index 0000000000..6024b72617 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/float-with-relpos-and-transform.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#scrollable"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +.container { + background: green; + width: 100px; + height: 100px; + overflow: auto; +} +.float { + float: left; + position: relative; + width: 50px; + height: 50px; + top: calc(50% - 100vh); + transform: translateY(-50%) translateY(100vh); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="container"> + <div class="float"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/incremental-scroll-ref.html b/testing/web-platform/tests/css/css-overflow/incremental-scroll-ref.html new file mode 100644 index 0000000000..131e54ec29 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/incremental-scroll-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<div id="target" style="background: white; overflow: scroll; width: 500px; height: 500px; + font-size: 40px; will-change: transform"> +</div> +<script> +for (var i = 0; i < 500; i++) { + var div = document.createElement("div"); + div.textContent = i; + target.appendChild(div); +} +target.scrollTop = 10000; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/incremental-scroll.html b/testing/web-platform/tests/css/css-overflow/incremental-scroll.html new file mode 100644 index 0000000000..be1a1cbb74 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/incremental-scroll.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scroll-container"> +<link rel="match" href="incremental-scroll-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<div id="target" style="background: white; overflow: scroll; width: 500px; height: 500px; + font-size: 40px; will-change: transform"> +</div> +<script> +for (var i = 0; i < 500; i++) { + var div = document.createElement("div"); + div.textContent = i; + target.appendChild(div); +} + +function scroll() { + target.scrollTop += 500; + if (target.scrollTop < 10000) { + waitForAtLeastOneFrame().then(scroll); + } else if (window.testRunner) { + takeScreenshot(); + } +} + +waitForAtLeastOneFrame().then(scroll); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/inheritance.html b/testing/web-platform/tests/css/css-overflow/inheritance.html new file mode 100644 index 0000000000..ffc6b2f881 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/inheritance.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Overflow properties</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_inherited('block-ellipsis', 'none', 'auto'); +assert_not_inherited('continue', 'auto', 'discard'); +assert_not_inherited('max-lines', 'none', '2'); +assert_not_inherited('overflow-block', 'visible', 'scroll'); +assert_not_inherited('overflow-inline', 'visible', 'scroll'); +assert_not_inherited('overflow-x', 'visible', 'scroll'); +assert_not_inherited('overflow-y', 'visible', 'scroll'); +assert_not_inherited('text-overflow', 'clip', 'ellipsis'); +assert_not_inherited('scrollbar-gutter', 'auto', 'stable'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/input-scrollable-region-001.html b/testing/web-platform/tests/css/css-overflow/input-scrollable-region-001.html new file mode 100644 index 0000000000..96fedfed74 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/input-scrollable-region-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Input Text Padding and Overflow: css-overflow-3</title> +<link rel="author" title="Boaz Sender, Ali Juma, Robert Ma"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> +<link rel="match" href="reference/input-scrollable-region-001-ref.html"> +<meta name="assert" content="input text is preserved when the (input height + minus the input padding minus the input border) is + smaller than the height of the text"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +input { + font-family: Ahem; + width: 100px; + margin: 0px; + border: 1px solid black; + height: 30px; + padding: 10px; + font-size: 18px; + box-sizing: border-box; + line-height: 1; +} + +</style> +<body> + <input type="text" value="foo"> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/logical-overflow-001.html b/testing/web-platform/tests/css/css-overflow/logical-overflow-001.html new file mode 100644 index 0000000000..15bf57f793 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/logical-overflow-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow Test: flow-relative versions of overflow-x and -y</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#logical"> +<link rel="help" href="https://drafts.csswg.org/css-logical/#box"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#d1, #d2 { + overflow-block: hidden; + overflow-inline: scroll +} +#d1 { + writing-mode: horizontal-tb; +} +#d2 { + writing-mode: vertical-rl; +} + +</style> +<body> + <div id="log"></div> + + <div id=d1></div> + <div id=d2></div> + + <script> + test( + function(){ + var target = document.getElementById("d1"); + assert_equals(getComputedStyle(target).overflowX, "scroll"); + assert_equals(getComputedStyle(target).overflowY, "hidden"); + }, "overflow-x matches overflow-inline, and overflow-y matches overflow-block when the element has a horizontal writing mode"); + test( + function(){ + var target = document.getElementById("d2"); + assert_equals(getComputedStyle(target).overflowX, "hidden"); + assert_equals(getComputedStyle(target).overflowY, "scroll"); + }, "overflow-y matches overflow-inline, and overflow-x matches overflow-block when the element has a vertical writing mode"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/margin-block-end-scroll-area-001.html b/testing/web-platform/tests/css/css-overflow/margin-block-end-scroll-area-001.html new file mode 100644 index 0000000000..3b8f4ca3f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/margin-block-end-scroll-area-001.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Overflow Test: margin-block-end, scrolling area height and scrollTop (complex)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> + <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-element-scrolltop"> + <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#scrolling-area"> + <link rel="match" href="reference/ref-if-there-is-no-red.xht"> + + <!-- + + This test is a slightly modified version of the testcase from + + Morten Stenshorne coming from + + https://bugs.chromium.org/p/chromium/issues/detail?id=750992#c8 + + --> + + <meta content="" name="flags"> + <meta content="This test checks that when the bottom edge of an element's scrolling area is the bottom margin edge of all of the element's descendants' boxes, then the element.scrollTop must reach such bottom edge. In this test, the tested element's scrolling area height must reach the end edge of the margin-bottom of the p element." name="assert"> + + <style> + div + { + height: 200px; + } + + div#test + { + font-size: 100px; + /* + Setting a font-size of 100px is to influence the + margin on the P without setting it directly. + */ + overflow: hidden; + } + + div#red + { + background-color: red; + } + + div#red > p + { + height: 1px; + } + </style> + + <body onload="document.getElementById('test').scrollTop = 200;"> + + <p>Test passes if there is <strong>no red</strong>. + + <div id="test"> + + <div id="red"> + + <div id="filler"></div> + + <p> + + </div> + + </div> diff --git a/testing/web-platform/tests/css/css-overflow/multicol-in-orthogonal-writing-mode-crash.html b/testing/web-platform/tests/css/css-overflow/multicol-in-orthogonal-writing-mode-crash.html new file mode 100644 index 0000000000..5a7378de2e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/multicol-in-orthogonal-writing-mode-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1245440"> +<div style="display:inline-block;"> + <div style="writing-mode:vertical-lr;"> + <div style="columns:2; overflow:auto; width:1px;">boom</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/no-scrollable-overflow-vertical-rl-2.html b/testing/web-platform/tests/css/css-overflow/no-scrollable-overflow-vertical-rl-2.html new file mode 100644 index 0000000000..895f9bafc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/no-scrollable-overflow-vertical-rl-2.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: Scrollable overflow area of a multicol container in vertical-rl writing-mode</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> + <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> + <meta name="assert" content="This test verifies the nested float element in a multicol container in vertical-rl writing-mode shouldn't contribute to its container'sscrollable overflow area."> + + <style> + .scroll-container { + writing-mode: vertical-rl; + inline-size: 100px; + block-size: 100px; + overflow: auto; + } + .multicol { + block-size: 100px; + inline-size: 100px; + column-fill: auto; + column-count: 2; + column-gap: 0; + } + .float { + float: left; + inline-size: 50px; + block-size: 100px; + background: green; + } + </style> + + <!--This test passes if the scroll-container has no scrollbar. --> + + <p>Test passes if there is a filled green square.</p> + <div class="scroll-container"> + <div class="multicol"> + <div> + <div style="block-size: 100px; background: green;"></div> + <div class="float"></div> + </div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/no-scrollable-overflow-vertical-rl.html b/testing/web-platform/tests/css/css-overflow/no-scrollable-overflow-vertical-rl.html new file mode 100644 index 0000000000..13385a2685 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/no-scrollable-overflow-vertical-rl.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: Scrollable overflow area of a multicol container in vertical-rl writing-mode</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> + <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> + <meta name="assert" content="This test verifies the float element in a multicol container in vertical-rl writing-mode shouldn't contribute to its container'sscrollable overflow area."> + + <style> + .scroll-container { + writing-mode: vertical-rl; + inline-size: 100px; + block-size: 100px; + overflow: auto; + } + .multicol { + block-size: 100px; + inline-size: 100px; + column-fill: auto; + column-count: 2; + column-gap: 0; + } + .float { + float: left; + inline-size: 50px; + block-size: 100px; + background: green; + } + </style> + + <!--This test passes if the scroll-container has no scrollbar. --> + + <p>Test passes if there is a filled green square.</p> + <div class="scroll-container"> + <div class="multicol"> + <div style="block-size: 100px; background: green;"></div> + <div class="float"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/orthogonal-flow-with-inline-end-margin.html b/testing/web-platform/tests/css/css-overflow/orthogonal-flow-with-inline-end-margin.html new file mode 100644 index 0000000000..f0af1fe306 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/orthogonal-flow-with-inline-end-margin.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Scrollable container with orthogonal writing-mode child with inline-end margin</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="container" style="writing-mode:vertical-rl; overflow:auto; width:100px; height:100px;"> + <div style="writing-mode:horizontal-tb; width:100px; height:100px; margin-bottom:200px;"></div> +</div> +<script> + test(function() { + var container = document.getElementById("container"); + assert_equals(container.scrollWidth, 100); + assert_equals(container.scrollHeight, 300); + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/outline-with-opacity-crash.html b/testing/web-platform/tests/css/css-overflow/outline-with-opacity-crash.html new file mode 100644 index 0000000000..556e3cfedc --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/outline-with-opacity-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1011699"> +<span id="target" style="outline: 1px solid black; will-change: opacity; opacity: 0.7;">test</span> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + target.style.background = "lightblue"; + }, "no crash"); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-abpos-transform.html b/testing/web-platform/tests/css/css-overflow/overflow-abpos-transform.html new file mode 100644 index 0000000000..df1128316f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-abpos-transform.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>CSS Overflow and Transforms: css-overflow-3</title> +<link rel="author" title="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<meta name="assert" content="css transform is used to compute scroll overflow of abspos children"> +<style> + #container { + position: relative; + overflow: auto; + width: 200px; + height: 200px; + } + #target { + position: absolute; + width: 150px; + height: 150px; + margin-left: 100px; + transform: translateX(-100px); + background: green; + } +</style> +<!-- There should be no scrollbars on this page --> +<div id="container"> + <div id="target"></div> +</div> +<script> + test(() => { + assert_equals(document.querySelector("#container").scrollWidth, 200); + }, '#target used transform when computing scroll overflow'); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-001-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-001-ref.html new file mode 100644 index 0000000000..8c092bd0c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-001-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Reference: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + + <style> + .line { + display: flex; + } + .container { + block-size: 50px; + border: 5px solid black; + scrollbar-gutter: stable; + margin: 10px; + } + .hidden { + overflow: hidden; + } + .scroll-x { + overflow-x: scroll; + } + .scroll-y { + overflow-y: scroll; + } + .tall { + /* trigger overflow */ + block-size: 5000px; + } + </style> + + <div class="line"> + <div class="container hidden"> + <div>I should not wrap</div> + </div> + + <div class="container scroll-y"> + <div class="tall">I should not wrap</div> + </div> + </div> + + <div class="line"> + <div class="container hidden" style="writing-mode: vertical-rl"> + <div>I should not wrap</div> + </div> + + <div class="container scroll-x" style="writing-mode: vertical-rl"> + <div class="tall">I should not wrap</div> + </div> + + <div class="container hidden" style="writing-mode: vertical-lr"> + <div>I should not wrap</div> + </div> + + <div class="container scroll-x" style="writing-mode: vertical-lr"> + <div class="tall">I should not wrap</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-001.html b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-001.html new file mode 100644 index 0000000000..061339b49c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-001-ref.html"> + + <style> + .line { + display: flex; + } + .container { + block-size: 50px; + border: 5px solid black; + overflow: auto; + scrollbar-gutter: stable; + margin: 10px; + } + .tall { + /* trigger overflow */ + block-size: 5000px; + } + </style> + + <div class="line"> + <div class="container"> + <div>I should not wrap</div> + </div> + + <div class="container"> + <div class="tall">I should not wrap</div> + </div> + </div> + + <div class="line"> + <div class="container" style="writing-mode: vertical-rl"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-rl"> + <div class="tall">I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div class="tall">I should not wrap</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-002-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-002-ref.html new file mode 100644 index 0000000000..bb0742bfd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-002-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Reference: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + + <style> + .line { + display: flex; + } + .container { + block-size: 50px; + border: 5px solid black; + scrollbar-gutter: stable both-edges; + margin: 10px; + } + .hidden { + overflow: hidden; + } + .scroll-x { + overflow-x: scroll; + } + .scroll-y { + overflow-y: scroll; + } + .tall { + /* trigger overflow */ + block-size: 5000px; + } + </style> + + <div class="line"> + <div class="container hidden"> + <div>I should not wrap</div> + </div> + + <div class="container scroll-y"> + <div class="tall">I should not wrap</div> + </div> + </div> + + <div class="line"> + <div class="container hidden" style="writing-mode: vertical-rl"> + <div>I should not wrap</div> + </div> + + <div class="container scroll-x" style="writing-mode: vertical-rl"> + <div class="tall">I should not wrap</div> + </div> + + <div class="container hidden" style="writing-mode: vertical-lr"> + <div>I should not wrap</div> + </div> + + <div class="container scroll-x" style="writing-mode: vertical-lr"> + <div class="tall">I should not wrap</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-002.html b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-002.html new file mode 100644 index 0000000000..535f2c4d52 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: scrollbar-gutter size contributes to the scroll container's intrinsic size with "overflow:auto"</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-002-ref.html"> + + <style> + .line { + display: flex; + } + .container { + block-size: 50px; + border: 5px solid black; + overflow: auto; + scrollbar-gutter: stable both-edges; + margin: 10px; + } + .tall { + /* trigger overflow */ + block-size: 5000px; + } + </style> + + <div class="line"> + <div class="container"> + <div>I should not wrap</div> + </div> + + <div class="container"> + <div class="tall">I should not wrap</div> + </div> + </div> + + <div class="line"> + <div class="container" style="writing-mode: vertical-rl"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-rl"> + <div class="tall">I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div class="tall">I should not wrap</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-003-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-003-ref.html new file mode 100644 index 0000000000..2fb2eb4479 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-003-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: scrollbar-gutter size doesn't contribute to the scroll container's intrinsic size with "overflow:auto" and "scrollbar-width: none"</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="help" href="https://drafts.csswg.org/css-scrollbars/#scrollbar-width"> + + <style> + .line { + display: flex; + } + .container { + block-size: 50px; + border: 5px solid black; + margin: 10px; + } + </style> + + <div class="line"> + <div class="container"> + <div>I should not wrap</div> + </div> + + <div class="container"> + <div>I should not wrap</div> + </div> + </div> + + <div class="line"> + <div class="container" style="writing-mode: vertical-rl"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-rl"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div>I should not wrap</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-003.html b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-003.html new file mode 100644 index 0000000000..ab247d9ca5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-auto-scrollbar-gutter-intrinsic-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: scrollbar-gutter size doesn't contribute to the scroll container's intrinsic size with "overflow:auto" and "scrollbar-width: none"</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="help" href="https://drafts.csswg.org/css-scrollbars/#scrollbar-width"> + <link rel="match" href="overflow-auto-scrollbar-gutter-intrinsic-003-ref.html"> + + <style> + .line { + display: flex; + } + .container { + block-size: 50px; + border: 5px solid black; + overflow: auto; + scrollbar-gutter: stable; + scrollbar-width: none; + margin: 10px; + } + .tall { + /* trigger overflow */ + block-size: 5000px; + } + </style> + + <div class="line"> + <div class="container"> + <div>I should not wrap</div> + </div> + + <div class="container"> + <div class="tall">I should not wrap</div> + </div> + </div> + + <div class="line"> + <div class="container" style="writing-mode: vertical-rl"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-rl"> + <div class="tall">I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div>I should not wrap</div> + </div> + + <div class="container" style="writing-mode: vertical-lr"> + <div class="tall">I should not wrap</div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-001.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-001.html new file mode 100644 index 0000000000..0998fe68e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-001.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>CSS Overflow Test: Propagation of body overflow to viewport</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/4148"> +<link rel="match" href="reference/overflow-body-propagation-ref.html"> +<style> + body { + overflow: scroll; + margin-top: 100px; + } +</style> +<body>The viewport should have scrollbars, not the body.</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-002.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-002.html new file mode 100644 index 0000000000..5991dd52e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-002.html @@ -0,0 +1,6 @@ +<!doctype html> +<title>CSS Overflow Test: Do not propagate overflow of display:none body to viewport</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-propagation"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/4148"> +<link rel="match" href="/css/reference/blank.html"> +<body style="display:none; overflow:scroll"></body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-003.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-003.html new file mode 100644 index 0000000000..a329a8dfe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-003.html @@ -0,0 +1,6 @@ +<!doctype html> +<title>CSS Overflow Test: Do not propagate overflow of display:contents body to viewport</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-propagation"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/4148"> +<link rel="match" href="/css/reference/blank.html"> +<body style="display:contents; overflow:scroll"></body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-004.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-004.html new file mode 100644 index 0000000000..2ed8d2687a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-004.html @@ -0,0 +1,14 @@ +<!doctype html> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/4148"> +<link rel="match" href="reference/overflow-body-no-propagation-ref.html"> +<style> + html { + overflow: hidden; + } + body { + overflow: scroll; + margin-top: 100px; + } +</style> +<body>The body should have scrollbars, not the viewport.</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-005.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-005.html new file mode 100644 index 0000000000..e4de576958 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-005.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Overflow Test: overscroll-behavior doesn't stop overflow from being propagated from the body</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1586600"> +<link rel="match" href="reference/overflow-body-propagation-ref.html"> +<style> + :root { + overscroll-behavior-y: contain; + } + body { + overflow: scroll; + margin-top: 100px; + } +</style> +<body>The viewport should have scrollbars, not the body.</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-006.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-006.html new file mode 100644 index 0000000000..4758150683 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-006.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Overflow Test: scroll-snap-type doesn't stop overflow from being propagated from the body</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1586600"> +<link rel="match" href="reference/overflow-body-propagation-ref.html"> +<style> + :root { + scroll-snap-type: both mandatory; + } + body { + overflow: scroll; + margin-top: 100px; + } +</style> +<body>The viewport should have scrollbars, not the body.</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-007-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-007-ref.html new file mode 100644 index 0000000000..66f9b1c3b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-007-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: overflow-x:clip propagated from BODY</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<style> + html { overflow: hidden auto; } + body { + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + } + + div { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 10000px; + width: 10000px; + border-right-width: 20px; + border-right-style: solid; + border-right-color: red; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-007.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-007.html new file mode 100644 index 0000000000..ee6e1a1cc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-007.html @@ -0,0 +1,31 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Test: overflow-x:clip propagated from BODY</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="match" href="overflow-body-propagation-007-ref.html"> +<style> + body { + overflow-x: clip; + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + } + + div { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 10000px; + width: 10000px; + border-right-width: 20px; + border-right-style: solid; + border-right-color: red; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-008-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-008-ref.html new file mode 100644 index 0000000000..ba9f6e12d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-008-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: overflow-y:clip propagated from BODY</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<style> + html { overflow: auto hidden; } + body { + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + } + + div { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 10000px; + width: 10000px; + border-right-width: 20px; + border-right-style: solid; + border-right-color: red; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-008.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-008.html new file mode 100644 index 0000000000..7da4a5a750 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-008.html @@ -0,0 +1,31 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Test: overflow-y:clip propagated from BODY</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="match" href="overflow-body-propagation-008-ref.html"> +<style> + body { + overflow-y: clip; + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + } + + div { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 10000px; + width: 10000px; + border-right-width: 20px; + border-right-style: solid; + border-right-color: red; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-009-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-009-ref.html new file mode 100644 index 0000000000..9632674a5a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-009-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: overflow:clip propagated from BODY</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<style> + html { overflow: hidden; } + body { + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + } + + div { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 10000px; + width: 10000px; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-009.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-009.html new file mode 100644 index 0000000000..33cb079487 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-009.html @@ -0,0 +1,31 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Test: overflow:clip propagated from BODY</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="match" href="overflow-body-propagation-009-ref.html"> +<style> + body { + overflow: clip; + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + } + + div { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 10000px; + width: 10000px; + border-right-width: 20px; + border-right-style: solid; + border-right-color: red; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-010-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-010-ref.html new file mode 100644 index 0000000000..9e502e7e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-010-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: contain:paint on BODY with overflow:clip</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<style> + body { + margin-left: 100px; + margin-top: 100px; + } + + div { + width: 50px; + height: 50px; + background: blue; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-010.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-010.html new file mode 100644 index 0000000000..a3fcdaf3c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-010.html @@ -0,0 +1,32 @@ +<!doctype html> +<html><head> +<meta charset="utf-8"> +<title>CSS Test: contain:paint on BODY with overflow:clip</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1635473"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation"> +<link rel="match" href="overflow-body-propagation-010-ref.html"> +<style> + body { + overflow: clip; + contain: paint; + width: 30px; + height: 30px; + padding: 10px; + margin-left: 100px; + margin-top: 100px; + } + + div { + position: relative; + top: -20px; + left: -40px; + background: blue; + height: 10000px; + width: 10000px; + border-right-width: 20px; + border-right-style: solid; + border-right-color: red; + } +</style></head> +<body><div></div></body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-011-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-011-ref.html new file mode 100644 index 0000000000..0d440ef20a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-011-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-011.html b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-011.html new file mode 100644 index 0000000000..c8672c2af2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-body-propagation-011.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-canvas-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-canvas-ref.html new file mode 100644 index 0000000000..3ad440e371 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-canvas-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to canvas elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<script src="../css-images/support/testHelper.js"></script> +<body> +<canvas></canvas> +</body> +<script> + paintCanvases(); +</script> + diff --git a/testing/web-platform/tests/css/css-overflow/overflow-canvas.html b/testing/web-platform/tests/css/css-overflow/overflow-canvas.html new file mode 100644 index 0000000000..e9529cb0bc --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-canvas.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to canvas elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-canvas-ref.html"> +<script src="../css-images/support/testHelper.js"></script> +<style> + .default { + width: 25px; + height: 50px; + object-fit: none; + object-position: 0% 0%; + overflow: visible; + } +</style> +<body> +<canvas class=default></canvas> +</body> +<script> + paintCanvases(); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-001-crash.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-001-crash.html new file mode 100644 index 0000000000..156343954d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-001-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1134184"> +<style> + * { overflow-x: clip } +</style> +<p id="child">child</p> +<script> + window.getSelection().selectAllChildren( + document.getElementById("child")); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-002-crash.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-002-crash.html new file mode 100644 index 0000000000..e60239655a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-002-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1134937"> +<style> +.item { + background: cyan; + background-attachment: local; + overflow: clip; + border-style: solid +} +</style> +<div class="item"> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-cant-scroll-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-cant-scroll-ref.html new file mode 100644 index 0000000000..d52fa0e957 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-cant-scroll-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: clip can not be scrolled</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .child { + width: 100px; + height: 100px; + background-color: green; + } +</style> +<p>You should see two green squares (no red). +<div class="child"></div> +<div class="child"></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-cant-scroll.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-cant-scroll.html new file mode 100644 index 0000000000..529ef1fad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-cant-scroll.html @@ -0,0 +1,46 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Overflow: clip can not be scrolled</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-cant-scroll-ref.html"> +<style> + .parent { + width: 100px; + height: 100px; + overflow: clip; + } + + .child1, .child2 { + width: 100px; + height: 100px; + flex: none; + } + + .child1 { + background-color: green; + } + + .child2 { + background-color: red; + } +</style> +<p>You should see two green squares (no red). +<div id="parent1" class="parent" style="display: flex"> + <div class="child1"></div> + <div class="child2"></div> +</div> + +<div id="parent2" class="parent"> + <div class="child1"></div> + <div class="child2"></div> +</div> + +<script> +onload = function() { + document.getElementById("parent1").scrollLeft = 100; + document.getElementById("parent2").scrollTop = 100; + document.documentElement.removeAttribute("class"); +} +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-content-visual-overflow-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-content-visual-overflow-ref.html new file mode 100644 index 0000000000..378da736ec --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-content-visual-overflow-ref.html @@ -0,0 +1,36 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies content visual overflow is shown</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + body { + margin: 0 + } + + .shadow { + width: 100px; + height: 100px; + will-change: transform; + background: black; + box-shadow: 10px 50px 5px red; + } + + .cover { + width: 200px; + height: 200px; + background: white; + position: absolute; + } + + .spacer { + width: 100px; + height: 150px; + } +</style> +<div class="shadow"></div> +<div class="cover" style="left: 100px; top: 0"></div> +<div class="spacer"></div> +<div class="shadow"></div> +<div class="cover" style="top: 350px"></div> +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-content-visual-overflow.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-content-visual-overflow.html new file mode 100644 index 0000000000..8ea8e2c333 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-content-visual-overflow.html @@ -0,0 +1,37 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies content visual overflow is shown</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-content-visual-overflow-ref.html"> +<style> + body { + margin: 0 + } + + .parent { + width: 100px; + height: 100px; + will-change: transform; + } + + .child { + width: 100px; + height: 100px; + background: black; + box-shadow: 10px 50px 5px red; + } + + .spacer { + width: 100px; + height: 150px; + } +</style> +<div class="parent" style="overflow-x: clip; overflow-y: visible"> + <div class="child"></div> +</div> +<div class="spacer"></div> +<div class="parent" style="overflow-x: visible; overflow-y: clip"> + <div class="child"></div> +</div> +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-hit-testing.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-hit-testing.html new file mode 100644 index 0000000000..b22497601c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-hit-testing.html @@ -0,0 +1,50 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: clip hit testing doesn't include overflow: clip</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .parent { + width: 100px; + height: 100px; + flex: none; + } + + .child1, .child2 { + width: 100px; + height: 100px; + flex: none; + } + + .child1 { + background-color: green; + } + + .child2 { + background-color: red; + } +</style> +<div class="parent" style="display: flex; overflow-x: visible; overflow-y: clip"> + <div id="c1" class="child1"></div> + <div id="hit1" class="child2"></div> +</div> +<div class="parent" style="overflow-x: clip; overflow-y: visible"> + <div id="c2" class="child1"></div> + <div id="hit2" class="child2"></div> +</div> + +<script> +test(() => { + var c1Bounds = document.getElementById("c1").getBoundingClientRect(); + var hitElement = document.elementFromPoint(c1Bounds.x + 150, + c1Bounds.y + 50); + assert_equals(hitElement.id, "hit1"); + + var c2Bounds = document.getElementById("c2").getBoundingClientRect(); + hitElement = document.elementFromPoint(c2Bounds.x + 50, + c2Bounds.y + 150); + assert_equals(hitElement.id, "hit2"); +}, "Ensure elements in overflow:visible are returned from elementFromPoint"); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-001-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-001-ref.html new file mode 100644 index 0000000000..7efcc11ddb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-001-ref.html @@ -0,0 +1,32 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin extends outside bounds</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .container { + display: flex; + } + .parent { + position: relative; + top: -10px; + left: -10px; + width: 120px; + height: 120px; + flex: none; + background-color: green; + } + .spacer { + flex: none; + height: 100px; + width: 100px; + } + +</style> +<p>You should see two green squares touching each other. The one on the + right should be slightly larger.</p> +<div class="spacer"></div> +<div class="container"> + <div class="spacer" style="background-color: green"></div> + <div class="parent"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-001.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-001.html new file mode 100644 index 0000000000..9a97f94e81 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-001.html @@ -0,0 +1,42 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin extends outside bounds</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-001-ref.html"> +<style> + .container { + display: flex; + } + .parent { + width: 100px; + height: 100px; + flex: none; + overflow: clip; + overflow-clip-margin: 10px; + } + .child { + width: 200px; + height: 200px; + position: relative; + top: -50px; + left: -50px; + background-color: green; + } + .spacer { + flex: none; + height: 100px; + width: 100px; + } + +</style> +<p>You should see two green squares touching each other. The one on the + right should be slightly larger.</p> +<div class="spacer"></div> +<div class="container"> + <div class="spacer" style="width: 90px; background-color: green"></div> + <div class="spacer" style="width: 10px"></div> + <div class="parent"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-002-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-002-ref.html new file mode 100644 index 0000000000..412602adae --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-002-ref.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin impacts layout</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .scroller { + overflow: auto; + width: 100px; + height: 100px; + /* Avoids some fuzz on scrollbar corners */ + scrollbar-color: blue blue; + } + .child { + position: relative; + width: 110px; + height: 110px; + background-color: green; + } +</style> +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="child"></div> +</div> + +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="child" style="width: 150px; height: 150px"></div> +</div> + +<p>You should see a green box with no scrollbars.</p> +<div class="scroller" style="background-color: green"> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-002.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-002.html new file mode 100644 index 0000000000..5f6d740e0b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-002.html @@ -0,0 +1,48 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin impacts layout</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-002-ref.html"> +<style> + .scroller { + overflow: auto; + width: 100px; + height: 100px; + /* Avoids some fuzz on scrollbar corners */ + scrollbar-color: blue blue; + } + .parent { + width: 100px; + height: 100px; + overflow: clip; + overflow-clip-margin: 10px; + } + .child { + width: 200px; + height: 200px; + position: relative; + top: -50px; + left: -50px; + background-color: green; + } +</style> +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="parent"> + <div class="child"></div> + </div> +</div> + +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="parent" style="overflow-clip-margin: 100px"> + <div class="child"></div> + </div> +</div> + +<p>You should see a green box with no scrollbars.</p> +<div class="scroller"> + <div class="parent" style="background-color: green"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-003-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-003-ref.html new file mode 100644 index 0000000000..cf6b55a2f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-003-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin doesn't impact paint effects</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .parent { + width: 100px; + height: 100px; + background-color: green; + box-shadow: 20px 20px 5px red; + } +</style> +<p>You should see a green box with a red box shadow. +<div class="parent"></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-003.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-003.html new file mode 100644 index 0000000000..52625e9097 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-003.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin doesn't impact paint effects</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-003-ref.html"> +<style> + .parent { + width: 100px; + height: 100px; + background-color: green; + overflow: clip; + overflow-clip-margin: 1px; + box-shadow: 20px 20px 5px red; + } +</style> +<p>You should see a green box with a red box shadow. +<div class="parent"></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-004-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-004-ref.html new file mode 100644 index 0000000000..3cc79ed480 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-004-ref.html @@ -0,0 +1,32 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin extends outside bounds with contain: paint</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .container { + display: flex; + } + .parent { + position: relative; + top: -10px; + left: -10px; + width: 120px; + height: 120px; + flex: none; + background-color: green; + } + .spacer { + flex: none; + height: 100px; + width: 100px; + } + +</style> +<p>You should see two green squares touching each other. The one on the + right should be slightly larger.</p> +<div class="spacer"></div> +<div class="container"> + <div class="spacer" style="background-color: green"></div> + <div class="parent"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-004.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-004.html new file mode 100644 index 0000000000..aab356f487 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-004.html @@ -0,0 +1,42 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin extends outside bounds with contain: paint</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-004-ref.html"> +<style> + .container { + display: flex; + } + .parent { + width: 100px; + height: 100px; + flex: none; + contain: paint; + overflow-clip-margin: 10px; + } + .child { + width: 200px; + height: 200px; + position: relative; + top: -50px; + left: -50px; + background-color: green; + } + .spacer { + flex: none; + height: 100px; + width: 100px; + } + +</style> +<p>You should see two green squares touching each other. The one on the + right should be slightly larger.</p> +<div class="spacer"></div> +<div class="container"> + <div class="spacer" style="width: 90px; background-color: green"></div> + <div class="spacer" style="width: 10px"></div> + <div class="parent"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-005-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-005-ref.html new file mode 100644 index 0000000000..412602adae --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-005-ref.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin impacts layout</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .scroller { + overflow: auto; + width: 100px; + height: 100px; + /* Avoids some fuzz on scrollbar corners */ + scrollbar-color: blue blue; + } + .child { + position: relative; + width: 110px; + height: 110px; + background-color: green; + } +</style> +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="child"></div> +</div> + +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="child" style="width: 150px; height: 150px"></div> +</div> + +<p>You should see a green box with no scrollbars.</p> +<div class="scroller" style="background-color: green"> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-005.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-005.html new file mode 100644 index 0000000000..1b4b4aa943 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-005.html @@ -0,0 +1,48 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin impacts layout</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-005-ref.html"> +<style> + .scroller { + overflow: auto; + width: 100px; + height: 100px; + /* Avoids some fuzz on scrollbar corners */ + scrollbar-color: blue blue; + } + .parent { + width: 100px; + height: 100px; + contain: paint; + overflow-clip-margin: 10px; + } + .child { + width: 200px; + height: 200px; + position: relative; + top: -50px; + left: -50px; + background-color: green; + } +</style> +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="parent"> + <div class="child"></div> + </div> +</div> + +<p>You should see a green box with scrollbars.</p> +<div class="scroller"> + <div class="parent" style="overflow-clip-margin: 100px"> + <div class="child"></div> + </div> +</div> + +<p>You should see a green box with no scrollbars.</p> +<div class="scroller"> + <div class="parent" style="background-color: green"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-006-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-006-ref.html new file mode 100644 index 0000000000..cf6b55a2f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-006-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin doesn't impact paint effects</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .parent { + width: 100px; + height: 100px; + background-color: green; + box-shadow: 20px 20px 5px red; + } +</style> +<p>You should see a green box with a red box shadow. +<div class="parent"></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-006.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-006.html new file mode 100644 index 0000000000..493bcee29f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-006.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin doesn't impact paint effects</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-006-ref.html"> +<style> + .parent { + width: 100px; + height: 100px; + background-color: green; + contain: paint; + overflow-clip-margin: 1px; + box-shadow: 20px 20px 5px red; + } +</style> +<p>You should see a green box with a red box shadow. +<div class="parent"></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-007-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-007-ref.html new file mode 100644 index 0000000000..9f562d67fe --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-007-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin: is shown with content-visibility: auto</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + body { + height: 15000px; + } + .big { + width: 10px; + height: 20000px; + position: relative; + top: -10000px; + background: green; + } +</style> +<div class=big></div> +<script> +onload = function() { + document.documentElement.scrollTop = window.innerHeight * 3; +} +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-007.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-007.html new file mode 100644 index 0000000000..0ae8881b02 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-007.html @@ -0,0 +1,34 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin: is shown with content-visibility: auto</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-007-ref.html"> +<style> + body { + height: 15000px; + } + .auto { + content-visibility: auto; + width: 100px; + height: 100px; + overflow-clip-margin: 10000px; + background: lightblue; + } + .big { + width: 10px; + height: 20000px; + position: relative; + top: -10000px; + background: green; + } +</style> +<div class=auto> + <div class=big></div> +</div> +<script> +onload = function() { + document.documentElement.scrollTop = window.innerHeight * 3; +} +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-008-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-008-ref.html new file mode 100644 index 0000000000..3af9e4e951 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-008-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin has no effect with overflow:scroll and paint containment (ref)</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> +.container { + width: 100px; + height: 100px; + contain: paint; + overflow: scroll; +} +.child { + width: 200px; + height: 200px; + background: lightblue; +} +</style> +<div class=container> + <div class=child></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-008.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-008.html new file mode 100644 index 0000000000..fabe669a49 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-008.html @@ -0,0 +1,24 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin has no effect with overflow:scroll and paint containment </title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="match" href="overflow-clip-margin-008-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + overflow-clip-margin: 20px; + contain: paint; + overflow: scroll; +} +.child { + width: 200px; + height: 200px; + background: lightblue; +} +</style> +<div class=container> + <div class=child></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-009-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-009-ref.html new file mode 100644 index 0000000000..efbf8985e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-009-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin can be inherited even if it has no effect on specified element</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> +.container { + width: 100px; + height: 100px; + overflow-clip-margin: 20px; + overflow: clip; +} +.child { + width: 200px; + height: 200px; + background: lightblue; +} +</style> +<div class=container> + <div class=child></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-009.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-009.html new file mode 100644 index 0000000000..6ba9a5a3e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-009.html @@ -0,0 +1,28 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin can be inherited even if it has no effect on specified element</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="match" href="overflow-clip-margin-009-ref.html"> +<style> +.prop { + overflow-clip-margin: 20px; +} +.container { + width: 100px; + height: 100px; + overflow-clip-margin: inherit; + overflow: clip; +} +.child { + width: 200px; + height: 200px; + background: lightblue; +} +</style> +<div class=prop> + <div class=container> + <div class=child></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-010-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-010-ref.html new file mode 100644 index 0000000000..e548417c72 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-010-ref.html @@ -0,0 +1,40 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin corner shape (ref)</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> +.container { + width: 100px; + height: 100px; + + position: relative; + top: 30px; + left: 30px; + + border: 5px solid green; + + border-radius: 0px 15px 25px 35px; +} +.clipper { + width: 140px; + height: 140px; + + margin: -20px; + border-radius:0px 27.5px 40px 50px; + overflow: clip; +} +.child { + width: 400px; + height: 400px; + background: lightblue; + opacity: 0.8; +} +</style> + +<div class=container> + <div class=clipper> + <div class=child></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-010.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-010.html new file mode 100644 index 0000000000..e2d1983069 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-010.html @@ -0,0 +1,34 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow-clip-margin corner shape</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="match" href="overflow-clip-margin-010-ref.html"> +<style> +.container { + width: 100px; + height: 100px; + + position: relative; + top: 30px; + left: 30px; + + border: 5px solid green; + + overflow: clip; + overflow-clip-margin: 20px; + border-radius: 0px 15px 25px 35px; +} +.child { + width: 400px; + height: 400px; + margin: -200px; + background: lightblue; + opacity: 0.8; +} +</style> + +<div class=container> + <div class=child></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-011-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-011-ref.html new file mode 100644 index 0000000000..684de0cf0c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-011-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-011.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-011.html new file mode 100644 index 0000000000..5952f5e9de --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-011.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow-clip-margin: child of a small-border-box out-of-view large-clip-margin parent is shown</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="match" href="overflow-clip-margin-011-ref.html"> +<style> + .overflow-hidden { + width: 200px; + height: 200px; + overflow: hidden; + } + .parent { + width: 100px; + height: 100px; + position: relative; + top: 500px; + overflow: clip; + overflow-clip-margin: 500px; + z-index: 1; + background: red; + } + .child { + width: 100px; + height: 100px; + position: relative; + top: -500px; + background: green; + } +</style> +<div class="overflow-hidden"> + <div class="parent"> + <div class="child"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-012.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-012.html new file mode 100644 index 0000000000..a1b0587a4d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-012.html @@ -0,0 +1,36 @@ +<!doctype html> +<html class="reftest"> +<meta charset="utf-8"> +<title>Overflow: visible + overflow-clip-margin is shown with content-visibility: auto</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="match" href="overflow-clip-margin-007-ref.html"> +<style> + body { + height: 15000px; + } + + .auto { + content-visibility: auto; + width: 100px; + height: 100px; + overflow-clip-margin: 10000px; + overflow: visible; + background: lightblue; + } + + .big { + width: 10px; + height: 20000px; + position: relative; + top: -10000px; + background: green; + } +</style> +<div class=auto> + <div class=big></div> +</div> +<script> + onload = function () { + document.documentElement.scrollTop = window.innerHeight * 3; + } +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-hit-testing.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-hit-testing.html new file mode 100644 index 0000000000..c3a67dc047 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-hit-testing.html @@ -0,0 +1,27 @@ +<!doctype html> +<title>Overflow: clip hit testing includes overflow in overflow-clip-margin</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Scott Violet" href="mailto:wangxianzhu@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="container" style="width: 100px; height: 100px; + overflow: clip; overflow-clip-margin: 50px"> + <div id="child" style="width: 300px; height: 50px"></div> +</div> + +<script> +test(() => { + var bounds = container.getBoundingClientRect(); + assert_equals(child, document.elementFromPoint(bounds.x + 50, bounds.y + 20), + 'in child and container'); + assert_equals(child, document.elementFromPoint(bounds.x + 125, bounds.y + 25), + 'in child and container overflow clip margin'); + assert_equals(document.body, document.elementFromPoint(bounds.x + 175, bounds.y + 25), + 'outside of container overflow, would in child without clip'); + assert_equals(container, document.elementFromPoint(bounds.x + 50, bounds.y + 75), + 'outside of child, in container'); + assert_equals(document.documentElement, + document.elementFromPoint(bounds.x + 50, bounds.y + 125), + 'in container overflow clip margin, but nothing there'); +}, "Ensure elements in overflow-clip-margin are returned from elementFromPoint"); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-intersection-observer.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-intersection-observer.html new file mode 100644 index 0000000000..dcc1e6e7ed --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-intersection-observer.html @@ -0,0 +1,55 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: intersection observer with overflow-clip-margin</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #clipped_container { + overflow: clip; + width: 100px; + height: 100px; + border: solid; + overflow-clip-margin: 50px; + } + #big_green_div { + position: relative; + width: 1000px; + height: 1000px; + background: green; + left: -200px; + top: -200px; + } + /* These values ensure the element is vertically offscreen. */ + .spacer { width: 150px; height: calc(100vh + 10px); } +</style> +<div class="spacer"></div> +<div id="clipped_container"> + <div id="big_green_div"></div> +</div> + +<script> +let t = async_test("ParentWithOverflowClipMargin"); +let options = { + threshold: 0, + rootMargin: '0px' +} +// The 'big_green_div' is initially on screen due to +// overflow-clip-margin of the parent. Once the observer is notified, the +// overflow-clip-margin is reduced so that 'big_green_div' is no longer +// on screen, and the observer should again be notified. +let gotIntersects = false; +let intersectionObserver = new IntersectionObserver((entries, observer) => { + t.step(function() { assert_equals(1, entries.length); }); + let entry = entries[0]; + if (!gotIntersects) { + t.step(function() { assert_true(entry.isIntersecting); }); + gotIntersects = true; + document.getElementById('clipped_container').style.overflowClipMargin = "0px"; + } else { + t.step(function() { assert_false(entry.isIntersecting); }); + t.done(); + }}, options); +intersectionObserver.observe(document.getElementById('big_green_div')); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-invalidation-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-invalidation-ref.html new file mode 100644 index 0000000000..1ec2a5ce0a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-invalidation-ref.html @@ -0,0 +1,40 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: overflow-clip-margin: invalidation on change</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<style> + .container { + display: flex; + } + .parent_overflow { + position: relative; + top: -10px; + left: -10px; + width: 120px; + height: 120px; + flex: none; + background-color: green; + } + .parent { + width: 100px; + height: 100px; + flex: none; + background-color: green; + } + .spacer { + flex: none; + height: 100px; + width: 100px; + } + +</style> +<div class="spacer"></div> +<div class="container"> + <div class="spacer"></div> + <div class="parent"></div> +<div class="spacer"></div> +<div class="container"> + <div class="spacer"></div> + <div class="parent_overflow"></div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-invalidation.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-invalidation.html new file mode 100644 index 0000000000..d9c87a34a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-invalidation.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>CSS Overflow: overflow-clip-margin: invalidation on change</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<meta name="assert" content="overflow-clip-margin: toggling should invalidate."> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<link rel="match" href="overflow-clip-margin-invalidation-ref.html"> +<style> + .container { + display: flex; + } + .parent { + flex: none; + width: 100px; + height: 100px; + flex: none; + overflow: clip; + } + .child { + width: 200px; + height: 200px; + position: relative; + top: -50px; + left: -50px; + background-color: green; + } + .spacer { + flex: none; + height: 100px; + width: 100px; + } + .margin { + overflow-clip-margin: 10px; + } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +</head> +<body> +<div class="spacer"></div> +<div class="container"> + <div class="spacer"></div> + <div id="div_with_margin" class="parent margin"> + <div class="child"></div> + </div> +<div class="spacer"></div> +<div class="container"> + <div class="spacer"></div> + <div id="div_without_margin" class="parent"> + <div class="child"></div> + </div> +</body> +<script> +async function runTest() { + document.getElementById('div_with_margin').classList.remove("margin"); + document.getElementById('div_without_margin').classList.add("margin"); + takeScreenshot(); +} +onload = () => { + waitForAtLeastOneFrame().then(() => { runTest() }); +} +</script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-border-box-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-border-box-ref.html new file mode 100644 index 0000000000..98de614875 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-border-box-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + body { + width: 200px; + height: 50px; + column-count: 2; + } + + .container { + overflow: clip; + } + .wrapper { + height: 50px; + border: 5px solid grey; + padding: 5px; + } + + .content { + position: relative; + top: -20px; + left: -20px; + width: 100px; + height: 50px; + } +</style> +<div class="container"> + <div class="wrapper"> + <div class="content" style="background:blue"></div> + <div class="content" style="background:green"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-border-box.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-border-box.html new file mode 100644 index 0000000000..a0a1e895a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-border-box.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-margin-mul-column-border-box-ref.html"> +<style> + body { + width: 200px; + height: 50px; + column-count: 2; + } + + .container { + height: 50px; + border: 5px solid grey; + padding: 5px; + overflow: clip; + overflow-clip-margin: border-box; + } + + .content { + position: relative; + top: -20px; + left: -20px; + width: 100px; + height: 50px; + } +</style> +<div class="container"> + <div class="content" style="background:blue"></div> + <div class="content" style="background:green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-content-box-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-content-box-ref.html new file mode 100644 index 0000000000..be5e46e341 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-content-box-ref.html @@ -0,0 +1,36 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + body { + width: 200px; + height: 50px; + column-count: 2; + } + + .container { + height: 50px; + border: 5px solid grey; + padding: 5px; + } + .wrapper { + height: 50px; + overflow: clip; + } + + .content { + position: relative; + top: -20px; + left: -20px; + width: 100px; + height: 50px; + } +</style> +<div class="container"> + <div class="wrapper"> + <div class="content" style="background:blue"></div> + <div class="content" style="background:green"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-content-box.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-content-box.html new file mode 100644 index 0000000000..26c081e04c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-content-box.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-margin-mul-column-content-box-ref.html"> +<style> + body { + width: 200px; + height: 50px; + column-count: 2; + } + + .container { + height: 50px; + border: 5px solid grey; + padding: 5px; + overflow: clip; + overflow-clip-margin: content-box; + } + + .content { + position: relative; + top: -20px; + left: -20px; + width: 100px; + height: 50px; + } +</style> +<div class="container"> + <div class="content" style="background:blue"></div> + <div class="content" style="background:green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-padding-box-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-padding-box-ref.html new file mode 100644 index 0000000000..3cfa1a7eba --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-padding-box-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + body { + width: 200px; + height: 50px; + column-count: 2; + } + + .container { + height: 50px; + border: 5px solid grey; + padding: 5px; + overflow: clip; + } + +.content { + position: relative; + top: -20px; + left: -20px; + width: 100px; + height: 50px; + } +</style> +<div class="container"> + <div class="content" style="background:blue"></div> + <div class="content" style="background:green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-padding-box.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-padding-box.html new file mode 100644 index 0000000000..e3b3700608 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-mul-column-padding-box.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-margin-mul-column-padding-box-ref.html"> +<style> + body { + width: 200px; + height: 50px; + column-count: 2; + } + + .container { + height: 50px; + border: 5px solid grey; + padding: 5px; + overflow: clip; + overflow-clip-margin: padding-box; + } + +.content { + position: relative; + top: -20px; + left: -20px; + width: 100px; + height: 50px; + } +</style> +<div class="container"> + <div class="content" style="background:blue"></div> + <div class="content" style="background:green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-svg-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-svg-ref.html new file mode 100644 index 0000000000..a40bd5aace --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-svg-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>overflow-clip-margin applies to svg</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + div { + width: 110px; + height: 110px; + background: green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-svg.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-svg.html new file mode 100644 index 0000000000..db66ddbbdb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-svg.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>overflow-clip-margin applies to svg</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-margin-svg-ref.html"> +<style> + svg { + width: 100px; + height: 100px; + overflow-clip-margin: 10px; + } +</style> +<svg> + <rect width="150" height="150" fill="green"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-ref.html new file mode 100644 index 0000000000..000e12ad1b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-ref.html @@ -0,0 +1,52 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin supports visual-box</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + .container { + width: 100px; + height: 100px; + overflow: visible; + padding: 10px; + border: 10px solid black; + margin: 10px; + background: grey; + } + + .inner_border_box { + width: 150px; + height: 150px; + position: relative; + top: -25px; + left: -25px; + background: blue; + } + + .inner_padding_box { + width: 130px; + height: 130px; + position: relative; + top: -15px; + left: -15px; + background: blue; + } + + .inner_content_box { + width: 110px; + height: 110px; + position: relative; + top: -5px; + left: -5px; + background: blue; + } +</style> +<div class="container"> + <div class="inner_border_box"></div> +</div> +<div class="container"> + <div class="inner_padding_box"></div> +</div> +<div class="container"> + <div class="inner_content_box"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html new file mode 100644 index 0000000000..84b845fb5c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html @@ -0,0 +1,56 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin supports visual-box</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + .container { + width: 100px; + height: 100px; + overflow: visible; + padding: 10px; + border: 10px solid black; + margin: 10px; + border-radius: 0px 15px 25px 35px; + background: grey; + } + + .inner_border_box { + width: 150px; + height: 150px; + position: relative; + top: -25px; + left: -25px; + background: blue; + border-radius: 0px 15.55px 30px 40px; + } + + .inner_padding_box { + width: 130px; + height: 130px; + position: relative; + top: -15px; + left: -15px; + background: blue; + border-radius: 0px 10px 20px 30px; + } + + .inner_content_box { + width: 110px; + height: 110px; + position: relative; + top: -5px; + left: -5px; + background: blue; + border-radius: 0px 0px 10px 20px; + } +</style> +<div class="container"> + <div class="inner_border_box"></div> +</div> +<div class="container"> + <div class="inner_padding_box"></div> +</div> +<div class="container"> + <div class="inner_content_box"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-with-border-radius.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-with-border-radius.html new file mode 100644 index 0000000000..06ddb5c163 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value-with-border-radius.html @@ -0,0 +1,37 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin supports visual-box</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html"> +<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-100" /> +<style> + .container { + width: 100px; + height: 100px; + overflow: clip; + padding: 10px; + border: 10px solid black; + border-radius: 0px 15px 25px 35px; + margin: 10px; + background: grey; + } + + .inner { + width: 150px; + height: 150px; + position: relative; + top: -25px; + left: -25px; + background: blue; + } +</style> +<div class="container" style="overflow-clip-margin: border-box 5px;"> + <div class="inner"></div> +</div> +<div class="container" style="overflow-clip-margin: padding-box 5px;"> + <div class="inner"></div> +</div> +<div class="container" style="overflow-clip-margin: content-box 5px;"> + <div class="inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value.html new file mode 100644 index 0000000000..cfef434814 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-and-value.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin supports visual-box</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-margin-visual-box-and-value-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + overflow: clip; + padding: 10px; + border: 10px solid black; + margin: 10px; + background: grey; + } + + .inner { + width: 150px; + height: 150px; + position: relative; + top: -25px; + left: -25px; + background: blue; + } +</style> +<div class="container" style="overflow-clip-margin: border-box 5px"> + <div class="inner"></div> +</div> +<div class="container" style="overflow-clip-margin: padding-box 5px;"> + <div class="inner"></div> +</div> +<div class="container" style="overflow-clip-margin: content-box 5px;"> + <div class="inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-ref.html new file mode 100644 index 0000000000..5a265c7a73 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box-ref.html @@ -0,0 +1,49 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin supports visual-box</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + .container { + width: 100px; + height: 100px; + overflow: visible; + padding: 10px; + border: 10px solid black; + margin: 10px; + background: grey; + } + + .inner_border_box { + width: 140px; + height: 140px; + position: relative; + top: -20px; + left: -20px; + background: blue; + } + + .inner_padding_box { + width: 120px; + height: 120px; + position: relative; + top: -10px; + left: -10px; + background: blue; + } + + .inner_content_box { + width: 100px; + height: 100px; + background: blue; + } +</style> +<div class="container"> + <div class="inner_border_box"></div> +</div> +<div class="container"> + <div class="inner_padding_box"></div> +</div> +<div class="container"> + <div class="inner_content_box"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box.html new file mode 100644 index 0000000000..db2c17fcc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-margin-visual-box.html @@ -0,0 +1,35 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow-clip-margin supports visual-box</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-margin-visual-box-ref.html"> +<style> + .container { + width: 100px; + height: 100px; + overflow: clip; + padding: 10px; + border: 10px solid black; + margin: 10px; + background: grey; + } + + .inner { + width: 150px; + height: 150px; + position: relative; + top: -25px; + left: -25px; + background: blue; + } +</style> +<div class="container" style="overflow-clip-margin: border-box"> + <div class="inner"></div> +</div> +<div class="container" style="overflow-clip-margin: padding-box;"> + <div class="inner"></div> +</div> +<div class="container" style="overflow-clip-margin: content-box;"> + <div class="inner"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-rounded-table-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-rounded-table-ref.html new file mode 100644 index 0000000000..5452c4efcf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-rounded-table-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html><head><meta charset="utf-8"> +<title>Verifies overflow-clip on table with rounded border renders correctly</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<style> +table { + border-radius: 10px; + border-collapse: collapse; + overflow: hidden; +} +thead { + background: green; +} +</style> +</head><body><p>You should see a green table with rounded corners</p> +<table> + <thead> + <tr> + <th>One</th> + <th>Two</th> + </tr> + </thead> +</table> +</body></html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-rounded-table.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-rounded-table.html new file mode 100644 index 0000000000..5484129e7f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-rounded-table.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html><head><meta charset="utf-8"> +<title>Verifies overflow-clip on table with rounded border renders correctly</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="match" href="overflow-clip-rounded-table-ref.html"> +<style> +table { + border-radius: 10px; + border-collapse: collapse; + overflow: clip; +} +thead { + background: green; +} +</style> +</head><body><p>You should see a green table with rounded corners</p> +<table> + <thead> + <tr> + <th>One</th> + <th>Two</th> + </tr> + </thead> +</table> +</body></html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-scroll-size.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-scroll-size.html new file mode 100644 index 0000000000..1f2c2236a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-scroll-size.html @@ -0,0 +1,80 @@ +<!doctype html> +<meta charset="utf-8"> +<title>overflow: scroll width/height should return overflow size</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip"> +<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .parent { + width: 100px; + height: 101px; + } + .child { + width: 200px; + height: 201px; + } + .overflow_clip_and_border { + width: 100px; + height: 101px; + overflow: clip; + border-width: 2px; + border-style: solid; + } +</style> +<div id="parent-clip-both" class="parent" style="overflow: clip"> + <div class="child"></div> +</div> +<div id="parent-clip-x" class="parent" style="overflow: clip-x"> + <div class="child"></div> +</div> +<div id="parent-clip-y" class="parent" style="overflow: clip-y"> + <div class="child"></div> +</div> + +<div id="border-equal-clip" class="parent"> + <div class="overflow_clip_and_border" + style="overflow-clip-margin: 2px"> + <div class="child"></div> + </div> +</div> +<div id="border-smaller-clip" class="parent"> + <div class="overflow_clip_and_border" + style="overflow-clip-margin: 3px"> + <div class="child"></div> + </div> +</div> +<div id="border-greater-clip" class="parent"> + <div class="overflow_clip_and_border" + style="overflow-clip-margin: 1px"> + <div class="child"></div> + </div> +</div> + +<script> +test(() => { + var pClipBoth = document.getElementById("parent-clip-both"); + assert_equals(pClipBoth.scrollWidth, 200); + assert_equals(pClipBoth.scrollHeight, 201); + + var pClipX = document.getElementById("parent-clip-x"); + assert_equals(pClipX.scrollWidth, 200); + assert_equals(pClipX.scrollHeight, 201); + + var pClipY = document.getElementById("parent-clip-y"); + assert_equals(pClipY.scrollWidth, 200); + assert_equals(pClipY.scrollHeight, 201); +}, "scroll size should match that of size specified by overflow: clip"); + +test(() => { + assert_equals(document.getElementById("border-equal-clip").scrollWidth, + 104); + + assert_equals(document.getElementById("border-smaller-clip").scrollWidth, + 105); + + assert_equals(document.getElementById("border-greater-clip").scrollWidth, + 104); +}, "scroll size should take into account border size and overflow-clip-margin"); + +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-x-visible-y-svg-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-x-visible-y-svg-ref.html new file mode 100644 index 0000000000..31e831d011 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-x-visible-y-svg-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: can have different clip and visible value in x/y directions with svg</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + div { + width: 100px; + height: 150px; + background: green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-x-visible-y-svg.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-x-visible-y-svg.html new file mode 100644 index 0000000000..bd903cdfd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-x-visible-y-svg.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: can have different clip and visible value in x/y directions with svg</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-x-visible-y-svg-ref.html"> +<style> + svg { + width: 100px; + height: 100px; + overflow-y: visible; + overflow-x: clip; + } +</style> +<svg> + <rect width="150" height="150" fill="green"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-y-visible-x-svg-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-y-visible-x-svg-ref.html new file mode 100644 index 0000000000..33b0a4d6ad --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-y-visible-x-svg-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: can have different clip and visible value in x/y directions with svg</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + div { + width: 150px; + height: 100px; + background: green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-clip-y-visible-x-svg.html b/testing/web-platform/tests/css/css-overflow/overflow-clip-y-visible-x-svg.html new file mode 100644 index 0000000000..8416af3047 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-clip-y-visible-x-svg.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Overflow: can have different clip and visible value in x/y directions with svg</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-clip-y-visible-x-svg-ref.html"> +<style> + svg { + width: 100px; + height: 100px; + overflow-x: visible; + overflow-y: clip; + } +</style> +<svg> + <rect width="150" height="150" fill="green"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-codependent-scrollbars.html b/testing/web-platform/tests/css/css-overflow/overflow-codependent-scrollbars.html new file mode 100644 index 0000000000..eb0e4f5ea2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-codependent-scrollbars.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="author" href="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<meta name="assert" content="What happens when appearance of one scrollbar triggers the other one?"> +<style> +.container { + width: 100px; + height: 100px; + overflow: auto; + background: #DDD; + --too-big: 120px; + --slightly-smaller: 95px; +} +.target { + width: 120px; + height: 95px; + background: rgba(0,255,0,0.3); +} +</style> +<!-- --> +<div class="container"> + <div class="target" style="width:var(--too-big);height:var(--slightly-smaller)" ></div> +</div> +<div class="container"> + <div class="target" style="height:var(--too-big);width:var(--slightly-smaller)" ></div> +</div> + +<script> +test(() => { + Array.from(document.querySelectorAll(".container")).forEach( el => { + let verticalScrollbar = el.offsetWidth - el.clientWidth; + let horizontalScrollbar = el.offsetHeight - el.clientHeight; + assert_equals(verticalScrollbar, horizontalScrollbar, "both scrollbars are visible."); + }); +}, 'appearance of one scrollbar caused the other scrollbar to appear.'); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-ellipsis-dynamic-001.html b/testing/web-platform/tests/css/css-overflow/overflow-ellipsis-dynamic-001.html new file mode 100644 index 0000000000..2a9edba930 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-ellipsis-dynamic-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Overflow Test: text-overflow: ellipsis after dynamic test change</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#text-overflow"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1615811"> +<link rel="author" href="mailto:emilio@crisal.io" name="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" name="Mozilla"> +<link rel="match" href="reference/overflow-ellipsis-dynamic-001-ref.html"> +<style> +p { + width: 40ch; + font: 16px/1 monospace; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +</style> +<p>longtext longtext longtext longtext longtext longtext longtext longtext</p> +<script> +onload = function() { + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector("p").firstChild.nodeValue = "short"; + document.documentElement.className = ""; + })); +} +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-empty-child-box.html b/testing/web-platform/tests/css/css-overflow/overflow-empty-child-box.html new file mode 100644 index 0000000000..880e0d3684 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-empty-child-box.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: Testing an empty child box and its container'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"> + <meta name="assert" content="This test verifies that an empty child box shouldn't contribute to its parents scrollable overflow area."> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/check-layout-th.js"></script> + + <style> + .container { + border: 1px solid black; + width: 200px; + height: 100px; + } + + .empty { + position: relative; + width: 0px; + height: 0px; + left: 500px; + top: 300px; + box-shadow: 0 0 0 10px blue; + } + </style> + + <body onload="checkLayout('.container')"> + <p>You should see no scrollbars in these container because an empty child + box shouldn't contribute to its parents scrollable overflow area. </p> + + <div class="container" style="overflow: visible" + data-expected-scroll-width="200" data-expected-scroll-height="100"> + <div class="empty"></div> + </div> + + <div class="container" style="overflow: auto" + data-expected-scroll-width="200" data-expected-scroll-height="100"> + <div class="empty"></div> + </div> + + <div class="container" style="overflow: hidden" + data-expected-scroll-width="200" data-expected-scroll-height="100"> + <div class="empty"></div> + </div> + + <div class="container" style="overflow: clip" + data-expected-scroll-width="200" data-expected-scroll-height="100"> + <div class="empty"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-hidden-resize-with-stacking-context-child.html b/testing/web-platform/tests/css/css-overflow/overflow-hidden-resize-with-stacking-context-child.html new file mode 100644 index 0000000000..8569ac1533 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-hidden-resize-with-stacking-context-child.html @@ -0,0 +1,42 @@ +<!doctype html> +<html class="reftest-wait"> +<title>overflow:hidden changes size with stacking context child</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-hidden"> +<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<script src="/common/rendering-utils.js"></script> +<script src="/common/reftest-wait.js"></script> +<style> +#container { + overflow: hidden; + width: 100px; + height: 20px; +} +#stacking-context { + position: relative; + background: red; + z-index: 100; +} +.content { + width: 100px; + height: 20px; + background: green; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="stacking-context"> + <div class="content"></div> + <div class="content"></div> + <div class="content"></div> + <div class="content"></div> + <div class="content"></div> + </div> +</div> +<script> +waitForAtLeastOneFrame().then(() => { + container.style.height = '100px'; + takeScreenshot(); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-border-radius.html b/testing/web-platform/tests/css/css-overflow/overflow-img-border-radius.html new file mode 100644 index 0000000000..cec70d6b94 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-border-radius.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow:visible doesn't clip using border-radius</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-img-ref.html"> +<style> + .default { + width: 25px; + height: 50px; + object-fit: none; + overflow: visible; + border-radius: 50%; + object-position: 0% 0%; + } +</style> +<body> +<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-display-table-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-img-display-table-ref.html new file mode 100644 index 0000000000..4552cb06da --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-display-table-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies img elements are clipped with display:table</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + .default { + width: 25px; + height: 50px; + border-radius: 2px; + overflow: clip; + border-radius: 2px; + } +</style> +<body> + <div class="default"> + <img src="../css-images/support/exif-orientation-6-ru.jpg"></img> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-display-table.html b/testing/web-platform/tests/css/css-overflow/overflow-img-display-table.html new file mode 100644 index 0000000000..b7e19aa616 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-display-table.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies img elements are clipped with display:table</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-img-display-table-ref.html"> +<style> + .default { + width: 25px; + height: 50px; + object-fit: none; + object-position: 0% 0%; + border-radius: 2px; + display: table; + } +</style> +<body> +<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-object-position-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-img-object-position-ref.html new file mode 100644 index 0000000000..dde966c991 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-object-position-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to img elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + img { + position: relative; + top: 50px; + left: 25px; + } +</style> +<body> +<img src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> + diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-object-position.html b/testing/web-platform/tests/css/css-overflow/overflow-img-object-position.html new file mode 100644 index 0000000000..67e6febef2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-object-position.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to img elements with object-position</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-img-object-position-ref.html"> +<style> + .default { + object-fit: none; + overflow: visible; + object-position: 25px 50px; + } +</style> +<body> +<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-img-ref.html new file mode 100644 index 0000000000..7764371702 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to img elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<body> +<img src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> + diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-non-replaced-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-non-replaced-ref.html new file mode 100644 index 0000000000..426cb2be66 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-non-replaced-ref.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow allows scrolling when rendering alt test for img elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + div { + border: solid; + display: block; + width: 150px; + padding: 10px; + overflow: scroll; + } +</style> +<body> +<div> +<img src="about:invalid" alt="I have "></img> +scrollbar ................................................................ +</div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-non-replaced.html b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-non-replaced.html new file mode 100644 index 0000000000..6468c73068 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-non-replaced.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow allows scrolling when rendering alt test for img elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-img-scroll-non-replaced-ref.html"> +<style> + img { + border: solid; + display: block; + width: 150px; + padding: 10px; + overflow: scroll; + } +</style> +<body> +<img src="about:invalid" alt="I have scrollbar ................................................................"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-replaced-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-replaced-ref.html new file mode 100644 index 0000000000..50793440a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-replaced-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow:scroll on a replaced element clips to content box but doesn't generate scrollbars</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + img { + padding: 10px; + background: grey; + object-fit: none; + width: 50px; + height: 50px; + object-position: 0% 0%; + } +</style> +<body> +<img src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-replaced.html b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-replaced.html new file mode 100644 index 0000000000..0657596d4f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-scroll-replaced.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow:scroll on a replaced element clips to content box but doesn't generate scrollbars</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-img-scroll-replaced-ref.html"> +<style> + img { + padding: 10px; + background: grey; + object-fit: none; + width: 50px; + height: 50px; + object-position: 0% 0%; + overflow: scroll; + } +</style> +<body> +<img src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-svg-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-img-svg-ref.html new file mode 100644 index 0000000000..e81f5c158a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-svg-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to img elements rendering svg</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<body> +<img src="../css-images/support/blue-green-red-yellow-50x100.svg"></img> +</body> + diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img-svg.html b/testing/web-platform/tests/css/css-overflow/overflow-img-svg.html new file mode 100644 index 0000000000..15285ca3b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img-svg.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to img elements rendering svg</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-img-svg-ref.html"> +<style> + .default { + width: 25px; + height: 50px; + object-fit: none; + object-position: 0% 0%; + overflow: visible; + } +</style> +<body> +<img class=default src="../css-images/support/blue-green-red-yellow-50x100.svg"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-img.html b/testing/web-platform/tests/css/css-overflow/overflow-img.html new file mode 100644 index 0000000000..cd9d30ffaa --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-img.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Verifies overflow applies to img elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-img-ref.html"> +<style> + .default { + width: 25px; + height: 50px; + object-fit: none; + object-position: 0% 0%; + overflow: visible; + } +</style> +<body> +<img class=default src="../css-images/support/exif-orientation-6-ru.jpg"></img> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-inline-block-with-opacity.html b/testing/web-platform/tests/css/css-overflow/overflow-inline-block-with-opacity.html new file mode 100644 index 0000000000..20288f8a0d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-inline-block-with-opacity.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-inline-transform-relative.html b/testing/web-platform/tests/css/css-overflow/overflow-inline-transform-relative.html new file mode 100644 index 0000000000..4df7b63894 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-inline-transform-relative.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>CSS Overflow and Transforms: css-overflow-3</title> +<link rel="author" title="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<meta name="assert" content="css transform is used to compute scroll overflow of inline-block children"> +<style> + #container { + border: 1px solid black; + width: 200px; + overflow: auto; + } + #target { + display: inline-block; + width: 20px; + height: 20px; + background: green; + position: relative; + top: 100px; + transform: translateY(80px); + } +</style> +<!-- + #container should have vertical scrollbar because target is offset + by position:relative and transform. +--> +<div id="container"> + <span> + scroll + <div id="target"></div> + down + </span> +</div> +<script> + test(() => { + assert_equals(document.querySelector("#container").scrollHeight, 200); + }, '#target used transform when computing scroll overflow'); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-negative-margin-dynamic.html b/testing/web-platform/tests/css/css-overflow/overflow-negative-margin-dynamic.html new file mode 100644 index 0000000000..5eec139521 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-negative-margin-dynamic.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1157299"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="position: relative; width: 100px; height: 100px; box-sizing: border-box; overflow: auto; padding-bottom: 10px;"> + <div style="background: green; margin-bottom: 10px;"> + <div style="height: 100px; margin-bottom: -20px;"></div> + </div> + <div id="target" style="position: absolute; top: 0; left: 0;"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.top = '10px'; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-negative-margin.html b/testing/web-platform/tests/css/css-overflow/overflow-negative-margin.html new file mode 100644 index 0000000000..070ab62f7f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-negative-margin.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1157299"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px; height: 100px; box-sizing: border-box; overflow: auto; padding-bottom: 10px;"> + <div style="height: 100px; background: green; margin-bottom: -10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-no-frameset-propagation.html b/testing/web-platform/tests/css/css-overflow/overflow-no-frameset-propagation.html new file mode 100644 index 0000000000..687adbe0bc --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-no-frameset-propagation.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-no-interpolation.html b/testing/web-platform/tests/css/css-overflow/overflow-no-interpolation.html new file mode 100644 index 0000000000..403482fa29 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-no-interpolation.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'overflow-clip-margin', + from: 'initial', + to: '123px' +}); + +test_no_interpolation({ + property: 'overflow-x', + from: 'hidden', + to: 'visible' +}); + +test_no_interpolation({ + property: 'overflow-y', + from: 'hidden', + to: 'visible' +}); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-overlay-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-overlay-ref.html new file mode 100644 index 0000000000..3d88b75890 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-overlay-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + div { + width: 15em; + height: 10em; + overflow: auto; + } +</style> +<div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-overlay.html b/testing/web-platform/tests/css/css-overflow/overflow-overlay.html new file mode 100644 index 0000000000..0e8ff093b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-overlay.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8063"> +<link rel="match" href="overflow-overlay-ref.html"> +<style> + div { + width: 15em; + height: 10em; + overflow: overlay; + } +</style> +<div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-padding.html b/testing/web-platform/tests/css/css-overflow/overflow-padding.html new file mode 100644 index 0000000000..2d6efc391a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-padding.html @@ -0,0 +1,113 @@ +<!doctype html> +<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003373"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + --size: 100px; + --padding-size: 30px; + --too-big-size: calc(var(--size) - var(--padding-size) + 1px); + --just-right-size: calc(var(--size) - var(--padding-size)); + overflow:auto; + width: var(--size); + height: var(--size); + padding-right: var(--padding-size); + padding-bottom: var(--padding-size); + background: #DDD; + box-sizing: border-box; + display: inline-block; +} +.big { + width: var(--too-big-size); + height: var(--too-big-size); + background: green; +} +.small { + width: var(--just-right-size); + height: var(--just-right-size); + background: yellow; +} +.bigfont { + font-size: var(--too-big-size); + font-family: Ahem; + line-height: 1; + color:green; +} +.smallfont { + font-size: var(--just-right-size); + font-family: Ahem; + line-height: 1; + color:yellow; +} +.red { + background:red; +} + +</style> +<body onload="runTest()"> +<p><span style="background:green">green</span> blocks get scrollbars, <span style="background:yellow">yellow</span> do not.</p> +<p>Block child gets block and inline padding.</p> +<div class="container" data-scrollbar="hv"> + <div class="big"></div> +</div> +<div class="container" data-scrollbar=""> + <div class="small"></div> +</div> + +<p>Inline child gets block and inline padding.</p> +<div class="container bigfont" data-scrollbar="hv"> + <span>X</span> +</div> +<div class="container" style="font:36px/1 Ahem;color:green" data-scrollbar="hv"> + <span>XX</span><br>XX +</div> +<div class="container smallfont" data-scrollbar=""> + <span>X</span> +</div> + +<p>Inline block child gets block and inline padding.</p> +<div class="container" data-scrollbar="hv"> + <div class="big" style="display:inline-block;vertical-align:bottom;"></div> +</div> +<div class="container" data-scrollbar=""> + <div class="small" style="display:inline-block;vertical-align:bottom;"></div> +</div> + +<p>Padding applies to linebox, not linebox overflow.</p> +<div class="container" data-scrollbar=""> + <div class="small" style="display:inline-block;vertical-align:bottom"> + <div style="height:90px;width:80px;background: rgba(0,0,255,0.3)"></div> + </div> +</div> +<script> + function hasHorizontalScrollbar(el) { + return (el.scrollWidth - el.offsetWidth) > 0; + } + function hasVerticalScrollbar(el) { + return (el.scrollHeight - el.offsetHeight) > 0; + } + // Tests needs to be run after load. + function runTest() { + test(()=> { + let i=0; + for (el of Array.from(document.querySelectorAll(".container"))) { + i++; + el.classList.toggle("red"); + let expected = el.getAttribute("data-scrollbar"); + if (expected.match(/h/)) + assert_true(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`); + else + assert_false(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`); + if (expected.match(/v/)) + assert_true(hasVerticalScrollbar(el), `vertical scrollbar ${i}`); + else + assert_false(hasVerticalScrollbar(el), `vertical scrollbar ${i}`); + el.classList.toggle("red"); + } + }, "Container padding is applied approriately to block/inline children."); + } +</script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-recalc-001.html b/testing/web-platform/tests/css/css-overflow/overflow-recalc-001.html new file mode 100644 index 0000000000..5d0d6f0009 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-recalc-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Overflow recalc after font-size change</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1036644"> +<link rel="match" href="reference/overflow-recalc-001-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-5"> +<meta name="assert" content="Checks that overflow of an inline element is properly recomputed after changes on the descendants."> +<script src="/common/reftest-wait.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#scroller { + height: 200px; + overflow: scroll; + position: relative; +} +#wrapper { + margin-top: 100px; + width: 200px; + height: 200px; + overflow: hidden; + font-family: Ahem; + line-height: 1; + color: green; +} +#red { + background: red; + width: 200px; + height: 200px; + position: absolute; + top: 100px; + z-index: -1; +} +</style> +<p>Test passes if there is <strong>no red</strong>.</p> +<div id="scroller"> + <div id="wrapper"> + <span id="inlineouter"> + <span id="inlineinner">X</span> + </span> + </div> + <div id="red"></div> +</div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + inlineinner.style.fontSize = "200px"; + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-replaced-element-001.html b/testing/web-platform/tests/css/css-overflow/overflow-replaced-element-001.html new file mode 100644 index 0000000000..2e3c332c2f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-replaced-element-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS Overflow: overflow replaced element with borders and negative end margins</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#scrollable"> +<meta name="assert" content="Checks that the scrollable overflow of a replaced elements with borders is properly computed even when it has a negative margin-right and margin-bottom."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#wrapper');"> + <div id="wrapper" style="width: 200px; height: 100px; overflow: scroll;" + data-expected-scroll-width="400" data-expected-scroll-height="300"> + <img style="border: 50px solid green; width: 300px; height: 200px; + margin-right: -100px; margin-bottom: -200px;" /> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-scroll-big-border-small-content-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-scroll-big-border-small-content-ref.html new file mode 100644 index 0000000000..c7ea180744 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-scroll-big-border-small-content-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<div id="scroller" style="overflow: scroll; width: 100px; height: 100px; + border: 100px solid white; background: green"> + <div style="height: 200px"></div> +</div> +<script> +onload = () => { + scroller.scrollTo(0, 100); +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-scroll-big-border-small-content.html b/testing/web-platform/tests/css/css-overflow/overflow-scroll-big-border-small-content.html new file mode 100644 index 0000000000..0b033c02e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-scroll-big-border-small-content.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Overflow: overflow: scroll with big border and a small overflowing content</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3#propdef-overflow"> +<link rel="match" href="overflow-scroll-big-border-small-content-ref.html"> +<div id="scroller" style="overflow: scroll; width: 100px; height: 100px; + border: 100px solid white; background: red"> + <div style="height: 50px; background: green"></div> + <div style="height: 50px; background: green"></div> + <div style="height: 50px; background: green"></div> + <div style="height: 50px; background: green"></div> +</div> +<script> +onload = () => { + scroller.scrollTo(0, 100); +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-scroll-intrinsic-001-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-scroll-intrinsic-001-ref.html new file mode 100644 index 0000000000..8870d33919 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-scroll-intrinsic-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Reference: Intrinsic size of a "overflow:auto" vertical scroll container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + + <style> + .container { + border: 1px solid black; + width: 100px; + display: inline-block; + } + </style> + + <div class="container" style="overflow-x: scroll;"></div> + <div class="container" style="overflow-y: scroll;"></div> + <div class="container" style="overflow-x: scroll;"></div> + <div class="container" style="overflow-y: scroll;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-scroll-intrinsic-001.html b/testing/web-platform/tests/css/css-overflow/overflow-scroll-intrinsic-001.html new file mode 100644 index 0000000000..093fd283c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-scroll-intrinsic-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Test: Intrinsic size of a "overflow:auto" vertical scroll container</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> + <link rel="match" href="overflow-scroll-intrinsic-001-ref.html"> + + <style> + .container { + border: 1px solid black; + width: 100px; + display: inline-block; + } + </style> + + <div class="container" style="writing-mode: vertical-rl; overflow-x: scroll;"></div> + <div class="container" style="writing-mode: vertical-rl; overflow-y: scroll;"></div> + <div class="container" style="writing-mode: vertical-lr; overflow-x: scroll;"></div> + <div class="container" style="writing-mode: vertical-lr; overflow-y: scroll;"></div> + +</html> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html new file mode 100644 index 0000000000..571ba348df --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-scroll-resize-visibility-hidden.html b/testing/web-platform/tests/css/css-overflow/overflow-scroll-resize-visibility-hidden.html new file mode 100644 index 0000000000..e8d0bc9144 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-scroll-resize-visibility-hidden.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-shorthand-001.html b/testing/web-platform/tests/css/css-overflow/overflow-shorthand-001.html new file mode 100644 index 0000000000..f425636c3b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-shorthand-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow Test: Overflow longhand accepts two values</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="author" title="Emilio Cobos Álvarez <emilio@crisal.io>"> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<div id="test-div"></div> +<script> +let div = document.getElementById("test-div"); +function testOverflowShorthand(x, y) { + test(function() { + div.style.overflowX = x; + div.style.overflowY = y; + + let expectedX = getComputedStyle(div).overflowX; + let expectedY = getComputedStyle(div).overflowY; + let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedX} ${expectedY}`; + let expectedSpecifiedSerialization = x == y ? x : `${x} ${y}`; + + assert_equals(div.style.overflow, expectedSpecifiedSerialization); + assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization); + + div.style.overflowX = ""; + div.style.overflowY = ""; + assert_equals(div.style.overflow, ""); + + div.style.overflow = `${x} ${y}`; + assert_equals(div.style.overflow, expectedSpecifiedSerialization); + assert_equals(div.style.overflowX, x); + assert_equals(div.style.overflowY, y); + assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization); + assert_equals(getComputedStyle(div).overflowX, expectedX); + assert_equals(getComputedStyle(div).overflowY, expectedY); + }, `overflow: ${x} ${y} works`); +} + +let OVERFLOW_VALUES = [ "auto", "hidden", "scroll", "visible" ]; +for (let x of OVERFLOW_VALUES) + for (let y of OVERFLOW_VALUES) + testOverflowShorthand(x, y); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-video-ref.html b/testing/web-platform/tests/css/css-overflow/overflow-video-ref.html new file mode 100644 index 0000000000..4a8a83e04a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-video-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Verifies overflow applies to video elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<script src="/common/reftest-wait.js"></script> +<style> + body { + background: grey; + } +</style> +<video autoplay> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> +</video> +<script type="text/javascript"> + document.getElementsByTagName('video')[0].addEventListener('play', (event) => { + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overflow-video.html b/testing/web-platform/tests/css/css-overflow/overflow-video.html new file mode 100644 index 0000000000..1721f8732b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-video.html @@ -0,0 +1,29 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Verifies overflow applies to video elements</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="overflow-video-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> + body { + background: grey; + } + .default { + width: 100px; + height: 100px; + object-fit: none; + object-position: 0% 0%; + overflow: visible; + } +</style> +<video autoplay class="default"> + <source src="/media/white.webm" type="video/webm"> + <source src="/media/white.mp4" type="video/mp4"> +</video> +<script type="text/javascript"> + document.getElementsByTagName('video')[0].addEventListener('play', (event) => { + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/overfow-outside-padding.html b/testing/web-platform/tests/css/css-overflow/overfow-outside-padding.html new file mode 100644 index 0000000000..792f7b8735 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overfow-outside-padding.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>CSS Overflow and Transforms: css-overflow-3</title> +<link rel="author" href="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> +<meta name="assert" content="blocks wholly outside padding edges should not contribute to overflow"> +<style> +.container { + position: relative; + display: inline-block; + border: 5px solid rgba(0,0,0,0.5); + border-width: 0px 0px 50px 80px; + overflow: auto; + width: 200px; + height: 200px; + background: gray; +} +.target { + position: absolute; + width: 1000px; + height: 1000px; + background: red; +} +.htb { + writing-mode: horizontal-tb; +} +.vrl { + writing-mode: vertical-rl; +} +.vlr { + writing-mode: vertical-lr; +} +.rtl { + direction: rtl; +} +</style> +<!-- --> +<div class="container htb"> + <div class="target" style="top: -1000px"></div> + htb +</div> +<div class="container htb rtl"> + <div class="target" style="right: -1000px" ></div> + htb rtl +</div> +<div class="container vrl"> + <div class="target" style="top: -1000px"></div> + vrl +</div> +<div class="container vrl rtl"> + <div class="target" style="bottom: -1000px"></div> + vrl rtl +</div> +<div class="container vlr"> + <div class="target" style="top: -1000px"></div> + vlr +</div> +<div class="container vlr rtl"> + <div class="target" style="left: -1000px"></div> + vlr rtl +</div> +<script> +test(() => { + Array.from(document.querySelectorAll(".container")).forEach( el => { + assert_equals(el.scrollWidth, 200); + }); +}, '#target did not trigger scroll overflow'); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/paint-containment-svg-ref.html b/testing/web-platform/tests/css/css-overflow/paint-containment-svg-ref.html new file mode 100644 index 0000000000..a40bd5aace --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/paint-containment-svg-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>overflow-clip-margin applies to svg</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<style> + div { + width: 110px; + height: 110px; + background: green; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-overflow/paint-containment-svg.html b/testing/web-platform/tests/css/css-overflow/paint-containment-svg.html new file mode 100644 index 0000000000..bf2939f709 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/paint-containment-svg.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>overflow-clip-margin applies to svg when paint containment is specified</title> +<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip"> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="paint-containment-svg-ref.html"> +<style> + svg { + width: 100px; + height: 100px; + overflow: visible; + contain: paint; + overflow-clip-margin: 10px; + } +</style> +<svg> + <rect width="150" height="150" fill="green"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/block-ellipsis-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/block-ellipsis-invalid.html new file mode 100644 index 0000000000..2b9c059a45 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/block-ellipsis-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing block-ellipsis with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-block-ellipsis"> +<meta name="assert" content="block-ellipsis supports only the grammar 'none | auto | <string>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("block-ellipsis", 'hidden'); + +test_invalid_value("block-ellipsis", 'none auto'); +test_invalid_value("block-ellipsis", 'auto "string"'); +test_invalid_value("block-ellipsis", '"string" none'); +test_invalid_value("block-ellipsis", '"first" "second"'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/block-ellipsis-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/block-ellipsis-valid.html new file mode 100644 index 0000000000..06148ef01b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/block-ellipsis-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing block-ellipsis with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-block-ellipsis"> +<meta name="assert" content="block-ellipsis supports the full grammar 'none | auto | <string>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("block-ellipsis", 'none'); +test_valid_value("block-ellipsis", 'auto'); +test_valid_value("block-ellipsis", '" etc., etc. "'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/continue-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/continue-invalid.html new file mode 100644 index 0000000000..36e164158f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/continue-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing continue with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-continue"> +<meta name="assert" content="continue supports only the grammar 'auto | discard'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("continue", 'none'); + +test_invalid_value("continue", 'auto discard'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/continue-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/continue-valid.html new file mode 100644 index 0000000000..97524cf80d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/continue-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing continue with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-continue"> +<meta name="assert" content="continue supports the full grammar 'auto | discard'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("continue", 'auto'); +test_valid_value("continue", 'discard'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/line-clamp-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/line-clamp-invalid.html new file mode 100644 index 0000000000..7b64e47358 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/line-clamp-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing line-clamp with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-line-clamp"> +<meta name="assert" content="line-clamp supports only the grammar 'none | <integer> <‘block-ellipsis’>?'."> +<meta name="assert" content="Zero or negative max-lines integers are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("line-clamp", 'auto'); + +test_invalid_value("line-clamp", '0'); +test_invalid_value("line-clamp", '-5'); + +test_invalid_value("line-clamp", '" etc., etc. "'); + +test_invalid_value("line-clamp", 'none 2'); +test_invalid_value("line-clamp", '3 none'); +test_invalid_value("line-clamp", 'auto 4'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/line-clamp-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/line-clamp-valid.html new file mode 100644 index 0000000000..735300c9ef --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/line-clamp-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing line-clamp with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-line-clamp"> +<meta name="assert" content="line-clamp supports the full grammar 'none | <integer> <‘block-ellipsis’>?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("line-clamp", 'none'); + +test_valid_value("line-clamp", '1'); +test_valid_value("line-clamp", '6'); + +test_valid_value("line-clamp", '7 none'); +test_valid_value("line-clamp", '8 auto', '8'); +test_valid_value("line-clamp", '9 " etc., etc. "'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/max-lines-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/max-lines-invalid.html new file mode 100644 index 0000000000..85fe77fdb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/max-lines-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing max-lines with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-max-lines"> +<meta name="assert" content="max-lines supports only the grammar 'none | <integer>'."> +<meta name="assert" content="Zero or negative integers are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("max-lines", 'auto'); +test_invalid_value("max-lines", '0'); +test_invalid_value("max-lines", '-5'); + +test_invalid_value("max-lines", 'none none'); +test_invalid_value("max-lines", '1 none'); +test_invalid_value("max-lines", 'none 2'); +test_invalid_value("max-lines", '3 4'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/max-lines-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/max-lines-valid.html new file mode 100644 index 0000000000..f2fda80c3b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/max-lines-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing max-lines with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-max-lines"> +<meta name="assert" content="max-lines supports the full grammar 'none | <integer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("max-lines", 'none'); +test_valid_value("max-lines", '1'); +test_valid_value("max-lines", '6'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/overflow-clip-margin-computed.html b/testing/web-platform/tests/css/css-overflow/parsing/overflow-clip-margin-computed.html new file mode 100644 index 0000000000..17f271b370 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/overflow-clip-margin-computed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: getComputedStyle() for overflow-clip-margin</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("overflow-clip-margin", "0px", "0px"); +test_computed_value("overflow-clip-margin", "10px"); + +test_computed_value("overflow-clip-margin", "content-box"); +test_computed_value("overflow-clip-margin", "content-box 0px", "content-box"); +test_computed_value("overflow-clip-margin", "content-box 10px"); +test_computed_value("overflow-clip-margin", "10px content-box", "content-box 10px"); + +test_computed_value("overflow-clip-margin", "padding-box", "0px"); +test_computed_value("overflow-clip-margin", "padding-box 0px", "0px"); +test_computed_value("overflow-clip-margin", "padding-box 10px", "10px"); +test_computed_value("overflow-clip-margin", "10px padding-box", "10px"); + +test_computed_value("overflow-clip-margin", "border-box"); +test_computed_value("overflow-clip-margin", "border-box 0px", "border-box"); +test_computed_value("overflow-clip-margin", "border-box 10px"); +test_computed_value("overflow-clip-margin", "10px border-box", "border-box 10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/overflow-clip-margin.html b/testing/web-platform/tests/css/css-overflow/parsing/overflow-clip-margin.html new file mode 100644 index 0000000000..bfa4128555 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/overflow-clip-margin.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing overflow-clip-margin</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("overflow-clip-margin", '10px', '10px'); + +test_valid_value("overflow-clip-margin", 'content-box', 'content-box'); +test_valid_value("overflow-clip-margin", 'content-box 10px', 'content-box 10px'); +test_valid_value("overflow-clip-margin", '10px content-box', 'content-box 10px'); +test_valid_value("overflow-clip-margin", '0px content-box', 'content-box'); + +test_valid_value("overflow-clip-margin", 'padding-box', '0px'); +test_valid_value("overflow-clip-margin", 'padding-box 0px', '0px'); +test_valid_value("overflow-clip-margin", 'padding-box 10px', '10px'); +test_valid_value("overflow-clip-margin", '10px padding-box', '10px'); + +test_valid_value("overflow-clip-margin", 'border-box', 'border-box'); +test_valid_value("overflow-clip-margin", 'border-box 0px', 'border-box'); +test_valid_value("overflow-clip-margin", 'border-box 10px', 'border-box 10px'); +test_valid_value("overflow-clip-margin", '10px border-box', 'border-box 10px'); + +test_invalid_value("overflow-clip-margin", 'margin-box'); +test_invalid_value("overflow-clip-margin", 'inset(10px)'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/overflow-computed.html b/testing/web-platform/tests/css/css-overflow/parsing/overflow-computed.html new file mode 100644 index 0000000000..563d1b31d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/overflow-computed.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: getComputedStyle().overflow</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<meta name="assert" content="visible/clip compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("overflow", 'visible'); +test_computed_value("overflow", 'hidden'); +test_computed_value("overflow", 'clip'); +test_computed_value("overflow", 'scroll'); +test_computed_value("overflow", 'auto'); + +test_computed_value("overflow", 'auto auto', 'auto'); +test_computed_value("overflow", 'auto clip', 'auto hidden'); +test_computed_value("overflow", 'auto visible', 'auto'); +test_computed_value("overflow", 'clip auto', 'hidden auto'); +test_computed_value("overflow", 'clip clip', 'clip'); +test_computed_value("overflow", 'clip hidden', 'hidden'); +test_computed_value("overflow", 'clip scroll', 'hidden scroll') +test_computed_value("overflow", 'clip visible', 'clip visible') +test_computed_value("overflow", 'hidden clip', 'hidden'); +test_computed_value("overflow", 'hidden visible', 'hidden auto'); +test_computed_value("overflow", 'scroll auto'); +test_computed_value("overflow", 'scroll clip', 'scroll hidden'); +test_computed_value("overflow", 'scroll visible', 'scroll auto'); +test_computed_value("overflow", 'visible auto', 'auto'); +test_computed_value("overflow", 'visible hidden', 'auto hidden'); +test_computed_value("overflow", 'visible scroll', 'auto scroll'); +test_computed_value("overflow", 'visible clip', 'visible clip'); +test_computed_value("overflow", 'visible visible', 'visible'); + + +test_computed_value("overflow-x", 'scroll'); +test_computed_value("overflow-x", 'hidden'); +test_computed_value("overflow-x", 'visible'); +test_computed_value("overflow-y", 'clip'); +test_computed_value("overflow-y", 'auto'); +test_computed_value("overflow-y", 'visible'); +test_computed_value("overflow-block", 'hidden'); +test_computed_value("overflow-block", 'clip'); +test_computed_value("overflow-block", 'visible'); +test_computed_value("overflow-inline", 'scroll'); +test_computed_value("overflow-inline", 'visible'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/overflow-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/overflow-invalid.html new file mode 100644 index 0000000000..c99fda7f78 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/overflow-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing overflow with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<meta name="assert" content="overflow supports only the grammar '[ visible | hidden | clip | scroll | auto ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("overflow", 'none'); +test_invalid_value("overflow", 'visible clip auto'); + + +test_invalid_value("overflow-x", 'visible clip'); +test_invalid_value("overflow-y", 'clip hidden'); +test_invalid_value("overflow-block", 'hidden scroll'); +test_invalid_value("overflow-inline", 'scroll auto'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/overflow-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/overflow-valid.html new file mode 100644 index 0000000000..02ddd93859 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/overflow-valid.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing overflow with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<meta name="assert" content="overflow supports the full grammar '[ visible | hidden | clip | scroll | auto ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("overflow", 'visible'); +test_valid_value("overflow", 'hidden'); +test_valid_value("overflow", 'clip'); +test_valid_value("overflow", 'scroll'); +test_valid_value("overflow", 'auto'); + +test_valid_value("overflow", 'visible visible', 'visible'); +test_valid_value("overflow", 'hidden visible'); +test_valid_value("overflow", 'clip clip', 'clip'); +test_valid_value("overflow", 'scroll auto'); +test_valid_value("overflow", 'auto auto', 'auto'); + + +test_valid_value("overflow-x", 'visible'); +test_valid_value("overflow-x", 'scroll'); +test_valid_value("overflow-y", 'clip'); +test_valid_value("overflow-y", 'auto'); +test_valid_value("overflow-block", 'hidden'); +test_valid_value("overflow-block", 'clip'); +test_valid_value("overflow-inline", 'scroll'); +test_valid_value("overflow-inline", 'visible'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html new file mode 100644 index 0000000000..e59790c32e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html @@ -0,0 +1,43 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: parsing invalid scrollbar-gutter declarations</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> +<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/> +<meta name="assert" content="Parsing invalid scrollbar-gutter declarations"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> + + test_invalid_value("scrollbar-gutter", "auto both"); + test_invalid_value("scrollbar-gutter", "force auto"); + test_invalid_value("scrollbar-gutter", "auto always"); + test_invalid_value("scrollbar-gutter", "always stable"); + test_invalid_value("scrollbar-gutter", "force"); + test_invalid_value("scrollbar-gutter", "both"); + test_invalid_value("scrollbar-gutter", "force both"); + + test_invalid_value("scrollbar-gutter", ""); + test_invalid_value("scrollbar-gutter", "0"); + test_invalid_value("scrollbar-gutter", "1px"); + test_invalid_value("scrollbar-gutter", "3em"); + test_invalid_value("scrollbar-gutter", "1 2 3"); + 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"); + + test_invalid_value("scrollbar-gutter", "auto stable"); + test_invalid_value("scrollbar-gutter", "auto both-edges"); + test_invalid_value("scrollbar-gutter", "both-edges"); + test_invalid_value("scrollbar-gutter", "both-edges auto"); + test_invalid_value("scrollbar-gutter", "stable auto"); + +</script> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-valid.html new file mode 100644 index 0000000000..97ac6afec6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-valid.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: parsing valid scrollbar-gutter declarations</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> +<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/> +<meta name="assert" content="Parsing valid scrollbar-gutter declarations"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> + + test_valid_value("scrollbar-gutter", "auto"); + test_valid_value("scrollbar-gutter", "stable"); + test_valid_value("scrollbar-gutter", "stable both-edges"); + + test_valid_value("scrollbar-gutter", "both-edges stable", "stable both-edges"); + +</script> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-computed.html b/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-computed.html new file mode 100644 index 0000000000..60add5dd12 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-computed.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: getComputedStyle().textOverflow</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-text-overflow"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("text-overflow", 'clip'); +test_computed_value("text-overflow", 'ellipsis'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-invalid.html new file mode 100644 index 0000000000..785632a727 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing text-overflow with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-text-overflow"> +<meta name="assert" content="text-overflow supports only the grammar 'clip | ellipsis'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("text-overflow", 'auto'); + +test_invalid_value("text-overflow", 'clip ellipsis clip'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-valid.html new file mode 100644 index 0000000000..df77dffd6d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/text-overflow-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing text-overflow with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-text-overflow"> +<meta name="assert" content="text-overflow supports the full grammar 'clip | ellipsis'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("text-overflow", 'clip'); +test_valid_value("text-overflow", 'ellipsis'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/webkit-line-clamp-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/webkit-line-clamp-invalid.html new file mode 100644 index 0000000000..6bb90fa9e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/webkit-line-clamp-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing -webkit-line-clamp with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#webkit-line-clamp"> +<meta name="assert" content="-webkit-line-clamp supports only the grammar 'none | <integer>'."> +<meta name="assert" content="Zero or negative max-lines integers are invalid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("-webkit-line-clamp", 'auto'); + +test_invalid_value("-webkit-line-clamp", '0'); +test_invalid_value("-webkit-line-clamp", '-5'); + +test_invalid_value("-webkit-line-clamp", 'none "~"'); +test_invalid_value("-webkit-line-clamp", '1 "~"'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/parsing/webkit-line-clamp-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/webkit-line-clamp-valid.html new file mode 100644 index 0000000000..8b0e9c49e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/parsing/webkit-line-clamp-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Overflow: parsing -webkit-line-clamp with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#webkit-line-clamp"> +<meta name="assert" content="-webkit-line-clamp supports the full grammar 'none | <integer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("-webkit-line-clamp", 'none'); + +test_valid_value("-webkit-line-clamp", '1'); +test_valid_value("-webkit-line-clamp", '6'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/reference/input-scrollable-region-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/input-scrollable-region-001-ref.html new file mode 100644 index 0000000000..d7125ee2ef --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/input-scrollable-region-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Boaz Sender, Ali Juma, Robert Ma"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +input { + font-family: Ahem; + width: 100px; + margin: 0px; + border: 1px solid black; + height: 30px; + padding: 0px 10px; + font-size: 18px; + box-sizing: border-box; + line-height: 1; +} + +</style> +<body> + <input type="text" value="foo"> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/reference/overflow-body-no-propagation-ref.html b/testing/web-platform/tests/css/css-overflow/reference/overflow-body-no-propagation-ref.html new file mode 100644 index 0000000000..9795d1f586 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/overflow-body-no-propagation-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<html style="overflow:auto"> +<title>CSS Overflow Test Reference</title> +<body style="margin-top:100px;overflow:scroll">The body should have scrollbars, not the viewport.</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/reference/overflow-body-propagation-ref.html b/testing/web-platform/tests/css/css-overflow/reference/overflow-body-propagation-ref.html new file mode 100644 index 0000000000..340bda9de9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/overflow-body-propagation-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<html style="overflow:scroll"> +<title>CSS Overflow Test Reference</title> +<body style="margin-top:100px">The viewport should have scrollbars, not the body.</body> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/reference/overflow-ellipsis-dynamic-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/overflow-ellipsis-dynamic-001-ref.html new file mode 100644 index 0000000000..85f8c50a8d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/overflow-ellipsis-dynamic-001-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>CSS test reference</title> +<style> +p { + width: 40ch; + font: 16px/1 monospace; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +</style> +<p>short<p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/overflow-inline-block-with-opacity-ref.html b/testing/web-platform/tests/css/css-overflow/reference/overflow-inline-block-with-opacity-ref.html new file mode 100644 index 0000000000..1b37bfffb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/overflow-inline-block-with-opacity-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/reference/overflow-recalc-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/overflow-recalc-001-ref.html new file mode 100644 index 0000000000..b18dee8caf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/overflow-recalc-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: Reference Overflow recalc after font-size change</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#scroller { + height: 200px; + overflow: scroll; +} +#wrapper { + margin-top: 100px; + width: 200px; + height: 200px; + background: green; +} +</style> +<p>Test passes if there is <strong>no red</strong>.</p> +<div id="scroller"> + <div id="wrapper"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/ref-if-there-is-no-red.xht b/testing/web-platform/tests/css/css-overflow/reference/ref-if-there-is-no-red.xht new file mode 100644 index 0000000000..a5b4e9f47a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/ref-if-there-is-no-red.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-001-ref.html new file mode 100644 index 0000000000..814bfd6a2f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + } +</style> +<p>The test passes if it matches the reference.</p> +<div>ppp</div> +<div>pppp</div> +<div>pppX</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-002-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-002-ref.html new file mode 100644 index 0000000000..cf26b6b8c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-002-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +div { + background-color: green; + display: inline-block; + vertical-align: top; + font-family: Ahem; +} +</style> +<div><span>ABC</span><span style="visibility: hidden">…</span></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-rtl-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-rtl-001-ref.html new file mode 100644 index 0000000000..5c75e38d83 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-rtl-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + white-space: pre; + } +</style> +<p>The test passes if it matches the reference.</p> +<div> ppp</div> +<div>pppp</div> +<div>Xppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-vertical-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-vertical-001-ref.html new file mode 100644 index 0000000000..18f8a1beae --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-vertical-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + height: 400px; + display: inline-block; + writing-mode: vertical-lr; + } +</style> +<p>The test passes if it matches the reference.</p> +<div>ppp</div> +<div>pppp</div> +<div>pppX</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-vertical-rtl-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-vertical-rtl-001-ref.html new file mode 100644 index 0000000000..1c9e660331 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-ellipsis-vertical-rtl-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + height: 400px; + display: inline-block; + writing-mode: vertical-lr; + direction: rtl; + } +</style> +<p>The test passes if it matches the reference.</p> +<div>ppp</div> +<div>pppp</div> +<div>Xppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-001-ref.html new file mode 100644 index 0000000000..18836f3204 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + white-space: pre; + } +</style> +<p>The test passes if it matches the reference.</p> + +<div>p pX</div> +<div>pp p</div> +<div> pX</div> +<div>pp p</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-rtl-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-rtl-001-ref.html new file mode 100644 index 0000000000..4be95f4fb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-rtl-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + } +</style> +<p>The test passes if it matches the reference.</p> + +<div>X pp</div> +<div>ppp</div> +<div>Xp</div> +<div>ppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-vertical-lr-001-ref.html new file mode 100644 index 0000000000..8b671171e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-vertical-lr-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + display: inline-block; + writing-mode: vertical-lr; + font: 100px/1 Ahem; + height: 400px; + white-space: pre; + } +</style> +<p>The test passes if it matches the reference.</p> + +<div>p pX</div> +<div>pp p</div> +<div> pX</div> +<div>pp p</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html new file mode 100644 index 0000000000..fff3dec59c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + display: inline-block; + writing-mode: vertical-lr; + font: 100px/1 Ahem; + height: 400px; + } +</style> +<p>The test passes if it matches the reference.</p> + +<div>X pp</div> +<div>ppp</div> +<div>Xp</div> +<div>ppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-001-ref.html new file mode 100644 index 0000000000..ef28e01dac --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-005-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-005-ref.html new file mode 100644 index 0000000000..c9a9ae5d7f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-005-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-006-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-006-ref.html new file mode 100644 index 0000000000..3a17a6d5f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-006-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4…</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-007-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-007-ref.html new file mode 100644 index 0000000000..1c9a728aaf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-007-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 +Line 4…</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-008-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-008-ref.html new file mode 100644 index 0000000000..4ead437830 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-008-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: block; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3</div><div>Line A +Line B +Line C</div>Line 一 +Line 二…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-009-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-009-ref.html new file mode 100644 index 0000000000..62e100d633 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-009-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3…</div></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-010-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-010-ref.html new file mode 100644 index 0000000000..63e9885e8b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-010-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5…</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-011-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-011-ref.html new file mode 100644 index 0000000000..fbcd8ca311 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-011-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; + padding: 0 4px; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5…</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-012-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-012-ref.html new file mode 100644 index 0000000000..d28c9388ae --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-012-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + display: flex; + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5…</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-013-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-013-ref.html new file mode 100644 index 0000000000..ba14aefc7c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-013-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<table class="child" border="1"><tr><td>Line 3 +Line 4</td></tr></table>Line 5…</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-014-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-014-ref.html new file mode 100644 index 0000000000..c7346ab527 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-014-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + direction: rtl; +} +</style> +<div class="clamp">Line 1 +Line 2…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-015-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-015-ref.html new file mode 100644 index 0000000000..d73bc7d7cb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-015-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: horizontal; + font: 16px / 32px serif; + white-space: pre; + padding: 4px 0; + background-color: yellow; + writing-mode: vertical-rl; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-016-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-016-ref.html new file mode 100644 index 0000000000..e54947e395 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-016-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-017-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-017-ref.html new file mode 100644 index 0000000000..043e5f3d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-017-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3…</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-018-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-018-ref.html new file mode 100644 index 0000000000..b95f7ce766 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-018-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-019-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-019-ref.html new file mode 100644 index 0000000000..b95f7ce766 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-019-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-020-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-020-ref.html new file mode 100644 index 0000000000..043e5f3d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-020-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3…</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-021-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-021-ref.html new file mode 100644 index 0000000000..043e5f3d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-021-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3…</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-022-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-022-ref.html new file mode 100644 index 0000000000..29d738589d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-022-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-023-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-023-ref.html new file mode 100644 index 0000000000..3127bb078b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-023-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-024-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-024-ref.html new file mode 100644 index 0000000000..d4820a1b48 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-024-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: inline-block; + overflow: hidden; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +Before <div class="clamp">Line 1 +Line 2 +Line …</div> After</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-025-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-025-ref.html new file mode 100644 index 0000000000..c33a6b5033 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-025-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + background-color: yellow; + width: 11ch; +} +.float { + float: right; + color: orange; +} +</style> +<div class="clamp"><div><div class="float">[f]</div>A B C D…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-026-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-026-ref.html new file mode 100644 index 0000000000..e4c1b03349 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-026-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-027-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-027-ref.html new file mode 100644 index 0000000000..be27d6d276 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-027-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<fieldset>Line 3 +Line 4<legend>Line 5 +Line 6</legend></fieldset>Line 7…</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-029-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-029-ref.html new file mode 100644 index 0000000000..0d18c2a7f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-029-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: block; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; +} +.child { + overflow: hidden; +} +</style> +<div class="clamp"><div class="child">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-030-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-030-ref.html new file mode 100644 index 0000000000..e88c8bffc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-030-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; + border: none; + overflow: hidden; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3…</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-031-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-031-ref.html new file mode 100644 index 0000000000..14f2fb1bb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-031-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +.big { + font-weight: bold; + border-top: 2px solid blue; + padding: 20px 0; +} +</style> +<div class="clamp"><div class="item">Line 1 +Line 2 +Line 3 <span class="big">BIG</span>…</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-032-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-032-ref.html new file mode 100644 index 0000000000..8f5b1ef53e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-032-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +…</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-035-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-035-ref.html new file mode 100644 index 0000000000..230218399e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-035-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS reference</title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +#parent { + display: inline-block; + background: green; +} +#clamp { + font-family: Ahem; + display: block; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div id="parent"> + <div id="clamp"> + AAA<br> + BBB<br> + CCC<span style="visibility: hidden">…</span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-036-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-036-ref.html new file mode 100644 index 0000000000..0de35e98ab --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-036-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + width: 10ch; + font: 16px / 32px monospace; + background-color: yellow; + padding: 4px; + overflow: hidden; +} +</style> +<div class="clamp"> + supercalifragilisticexpialidocious + supercali… +</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-037-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-037-ref.html new file mode 100644 index 0000000000..2927716d76 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-037-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + width: 150px; + font: 16px / 32px monospace; + background-color: yellow; + padding: 4px; + overflow: hidden; +} +</style> +<div class="clamp"> + supercalifragilisticexpialidocious + supercalifragilisticexpialidocious +</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-038-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-038-ref.html new file mode 100644 index 0000000000..bd8db762dd --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-038-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-039-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-039-ref.html new file mode 100644 index 0000000000..fd8a76b2f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-039-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-040-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-040-ref.html new file mode 100644 index 0000000000..f55be86e54 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-040-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + height: 5em; +} +</style> +<div class="clamp">Line 1 +Line 2… +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-block-in-inline-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-block-in-inline-001-ref.html new file mode 100644 index 0000000000..79f2e40910 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-block-in-inline-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> +.clamp { + display: -webkit-inline-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} +</style> +<body> + <div class="clamp"> + 1<br> + 2<br> + <div>3</div> + 4<br> + 5 + </div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-dynamic-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-dynamic-001-ref.html new file mode 100644 index 0000000000..21458953df --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-dynamic-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +#container { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + font-size: 20px; + width: 10ch; +} +</style> +<body> + <div id="container"> + abc def ghi jkl mno pqr stu vwx yz + 123 456 789 + </div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-with-line-height-ref.html b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-with-line-height-ref.html new file mode 100644 index 0000000000..c2c8914161 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/reference/webkit-line-clamp-with-line-height-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#test { + width: 100px; + + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + border: solid thin grey; + font: 20px 'Ahem'; + line-height: 40px; +} +</style> +<p>This tests the -webkit-line-clamp property with line-height applied.</p> +<div id="test"> + XXXX XXX +</div> diff --git a/testing/web-platform/tests/css/css-overflow/resizer-no-size-change.tentative.html b/testing/web-platform/tests/css/css-overflow/resizer-no-size-change.tentative.html new file mode 100644 index 0000000000..a8c659dc48 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/resizer-no-size-change.tentative.html @@ -0,0 +1,107 @@ +<!doctype html> +<meta charset=utf-8> +<title>Resizer should not set the width/height properties when size doesn't change</title> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1795536"> +<style> +body { + margin: 0; +} +#resizeme { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + overflow: hidden; + resize: both; + background-color: green; +} +#parent { + background-color: purple; + position: relative; +} +</style> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<div id="parent" style="width: 400px; height: 400px"> + <div id="resizeme" style="width: 100px; height: 100px;"></div> +</div> +<script> +function tick() { + return new Promise(r => { + requestAnimationFrame(() => requestAnimationFrame(r)); + }); +} + +promise_test(async function test() { + const element = document.getElementById("resizeme"); + + { + // Set up the observer. + const observer = new ResizeObserver(entries => { + const rect = entries[0].contentRect; + if (rect.width && rect.height) { + const style = element.style; + const { height, width } = style; + const widthPercent = width.endsWith("%"); + const heightPercent = height.endsWith("%"); + if (widthPercent && heightPercent) { + return; + } + + const parent = element.parentElement; + const parentWidth = parseFloat(parent.style.width); + const parentHeight = parseFloat(parent.style.height); + if (!widthPercent) { + style.width = `${(100 * parseFloat(width)) / parentWidth}%`; + } + if (!heightPercent) { + style.height = `${(100 * parseFloat(height)) / parentHeight}%`; + } + } + }); + observer.observe(element); + } + + { + // Resize to the smallest horizontal dimension possible. + const rect = element.getBoundingClientRect(); + + await new test_driver.Actions() + .pointerMove(rect.right - 1, rect.bottom - 1) + .pointerDown() + .pointerMove(rect.left, rect.bottom - 1) + .pointerUp() + .send(); + } + + await tick(); + + assert_true(element.style.width.endsWith("%"), "Width is in percent"); + assert_true(element.style.height.endsWith("%"), "Height is in percent"); + + const oldRect = element.getBoundingClientRect(); + { + // Try to shrink again (we shouldn't be able to). + await new test_driver.Actions() + .pointerMove(oldRect.right - 1, oldRect.bottom - 1) + .pointerDown() + .pointerMove(oldRect.left, oldRect.bottom - 1) + .pointerUp() + .send(); + } + + assert_true(element.style.width.endsWith("%"), "Width is still in percent"); + assert_true(element.style.height.endsWith("%"), "Height is still in percent"); + + await tick(); + + assert_true(element.style.width.endsWith("%"), "Width is still in percent"); + assert_true(element.style.height.endsWith("%"), "Height is still in percent"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/resizer-transform.tentative.html b/testing/web-platform/tests/css/css-overflow/resizer-transform.tentative.html new file mode 100644 index 0000000000..7b1af7f8f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/resizer-transform.tentative.html @@ -0,0 +1,44 @@ +<!doctype html> +<meta charset=utf-8> +<title>Resizer should account for transforms to decide resize direction</title> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1775797"> +<style> +#resizeme { + position: absolute; + top: 200px; + left: 200px; + width: 100px; + height: 100px; + overflow: hidden; + resize: both; + background-color: green; + transform-origin: 0 0; + transform: rotate(90deg); +} +</style> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<div id="resizeme"></div> +<script> +promise_test(async function test() { + let element = document.getElementById("resizeme"); + let rect = element.getBoundingClientRect(); + + // Due to the rotation, the resizer should be at the bottom left. + await new test_driver.Actions() + .pointerMove(rect.left + 1, rect.bottom - 1) + .pointerDown() + .pointerMove(rect.left + 1, rect.bottom + 50) + .pointerUp() + .send(); + + // We should've made the element wider due to the rotation. + assert_greater_than(parseInt(getComputedStyle(element).width, 10), 100, "Element should be wider"); + assert_equals(parseInt(getComputedStyle(element).height, 10), 100, "Element should have the same height"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/rounded-overflow-clip-visible-ref.html b/testing/web-platform/tests/css/css-overflow/rounded-overflow-clip-visible-ref.html new file mode 100644 index 0000000000..3a25b794d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/rounded-overflow-clip-visible-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +.box { + width: 100px; + height: 100px; + background: green; + display: inline-block; +} +</style> + +There should be 4 100x100 green squares (no rounded corners) below.<br> +<div class="box"></div> +<div class="box"></div> +<div class="box"></div> +<div class="box"></div> diff --git a/testing/web-platform/tests/css/css-overflow/rounded-overflow-clip-visible.html b/testing/web-platform/tests/css/css-overflow/rounded-overflow-clip-visible.html new file mode 100644 index 0000000000..65e7f055a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/rounded-overflow-clip-visible.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>Border radius should not round the clipping region when mixing overflow: visible and clip</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434"> +<link rel="match" href="rounded-overflow-clip-visible-ref.html"> +<style> +.container { + width: 100px; + height: 50px; + overflow: clip visible; + background: red; + display: inline-block; +} +.border-radius { + border-radius: 25px; +} +.child { + width: 200px; + height: 100px; + background: green; + fill: green; +} +</style> + +There should be 4 100x100 green squares (no rounded corners) below.<br> +<div class="container border-radius"> + <div class="child"></div> +</div> + +<div class="container"> + <div class="child"></div> +</div> + +<svg class="container border-radius"> + <rect class="child"></rect> +</svg> + +<svg class="container"> + <rect class="child"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-overflow/rounded-overflow-visible-clip-ref.html b/testing/web-platform/tests/css/css-overflow/rounded-overflow-visible-clip-ref.html new file mode 100644 index 0000000000..a97633ed3b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/rounded-overflow-visible-clip-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +.box { + width: 100px; + height: 100px; + background: green; + display: inline-block; +} +</style> + +There should be 4 100x100 green squares (no rounded corners) below.<br> +<div class="box"></div> +<br> +<div class="box"></div> +<br> +<div class="box"></div> +<br> +<div class="box"></div> diff --git a/testing/web-platform/tests/css/css-overflow/rounded-overflow-visible-clip.html b/testing/web-platform/tests/css/css-overflow/rounded-overflow-visible-clip.html new file mode 100644 index 0000000000..8bd727e1cf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/rounded-overflow-visible-clip.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>Border radius should not round the clipping region when mixing overflow: visible and clip</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#corner-clipping"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7434"> +<link rel="match" href="rounded-overflow-visible-clip-ref.html"> +<style> +.container { + width: 50px; + height: 100px; + overflow: visible clip; + background: red; + display: inline-block; +} +.border-radius { + border-radius: 25px; +} +.child { + width: 100px; + height: 200px; + background: green; + fill: green; +} +</style> + +There should be 4 100x100 green squares (no rounded corners) below.<br> +<div class="container border-radius"> + <div class="child"></div> +</div> +<br> +<div class="container"> + <div class="child"></div> +</div> +<br> +<svg class="container border-radius"> + <rect class="child"></rect> +</svg> +<br> +<svg class="container"> + <rect class="child"></rect> +</svg> diff --git a/testing/web-platform/tests/css/css-overflow/scroll-overflow-padding-block-001.html b/testing/web-platform/tests/css/css-overflow/scroll-overflow-padding-block-001.html new file mode 100644 index 0000000000..13df853ab3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scroll-overflow-padding-block-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title>Test "end-edges" of scrollable overflows in various writing modes</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> +<link rel="author" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +scroller { + display: inline-block; + overflow: auto; + width: 100px; + height: 100px; + font-size: 50px; + line-height: 1; +} +.vlr { writing-mode: vertical-lr; } +.vrl { writing-mode: vertical-rl; } +.htb > .block-start { padding-top: 200px; } +.htb > .block-end { padding-bottom: 200px; } +.vlr > .block-start { padding-left: 200px; } +.vlr > .block-end { padding-right: 200px; } +.vrl > .block-start { padding-right: 200px; } +.vrl > .block-end { padding-left: 200px; } +</style> +<body> + <div id="log"></div> + <div class="htb"> + <scroller class="block-start">A</scroller> + <scroller class="block-end">A</scroller> + </div> + <div class="vlr"> + <scroller class="block-start">A</scroller> + <scroller class="block-end">A</scroller> + </div> + <div class="vrl"> + <scroller class="block-start">A</scroller> + <scroller class="block-end">A</scroller> + </div> +<script> +for (let element of document.getElementsByTagName('scroller')) { + let writing_mode = getComputedStyle(element).writingMode; + test(() => { + assert_equals(element.scrollWidth, element.offsetWidth, "scrollWidth"); + assert_equals(element.scrollHeight, element.offsetHeight, "scrollHeight"); + }, writing_mode + ' ' + element.className); +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-float.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-float.html new file mode 100644 index 0000000000..f75c0a66cf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-float.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta name="assert" content="This ensures that floats block-end margin contributes to the scrollable overflow."> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('#target')"> + <div id="target" style="width: 100px; height: 100px; overflow: scroll;" data-expected-scroll-height="220"> + <div style="float: left; width: 50px; height: 200px; margin: 10px; background: lime;"></div> + </div> + <div id=log></div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-001-ref.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-001-ref.html new file mode 100644 index 0000000000..151843a72c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-001-ref.html @@ -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"> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-001.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-001.html new file mode 100644 index 0000000000..1b58803079 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-002-ref.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-002-ref.html new file mode 100644 index 0000000000..782ffab9da --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-002-ref.html @@ -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"> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-002.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-002.html new file mode 100644 index 0000000000..3efebf0b90 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-input-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-padding.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-padding.html new file mode 100644 index 0000000000..6a37f73cb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-padding.html @@ -0,0 +1,183 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129"> +<style> +scrollable-container { + display: block; + width: 100px; + height: 100px; + overflow: scroll; + padding: 10px 5px; + line-height: 0; +} + +scrollable-container > div { + position: relative; + writing-mode: horizontal-tb; + direction: ltr; + outline: solid red 2px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('scrollable-container')"> + +<!-- + All of these tests have a child which contributes to the "alignment rectangle" ("infow-bounds" in Blink). + However doesn't directly contribute to the scrollable-overflow as it is relative-positioned before the + "scroll origin" edge(s). + + All of these tests have an inline/block end margin (wrt. the parent writing-mode + direction). +--> + +<!-- HTB + LTR --> +<div style="writing-mode: horizontal-tb; direction: ltr;"> + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div> + </scrollable-container> + + <!-- For this specific case collapsed-margins affect the size of the alignment rectangle. --> + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; margin-bottom: 100px; top: -1000px;"> + <div style="height: 200px; margin-bottom: -50px;"></div> + </div> + </scrollable-container> +</div> + +<!-- HTB + RTL --> +<div style="writing-mode: horizontal-tb; direction: rtl;"> + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; margin-bottom: 100px; top: -1000px;"> + <div style="height: 200px; margin-bottom: -50px;"></div> + </div> + </scrollable-container> +</div> + +<!-- VRL + LTR --> +<div style="writing-mode: vertical-rl; direction: ltr;"> + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="height: 0; margin-left: 100px; right: -1000px;"> + <div style="width: 200px; margin-left: -50px;"></div> + </div> + </scrollable-container> +</div> + +<!-- VRL + RTL --> +<div style="writing-mode: vertical-rl; direction: rtl;"> + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="height: 0; margin-left: 100px; right: -1000px;"> + <div style="width: 200px; margin-left: -50px;"></div> + </div> + </scrollable-container> +</div> + +<!-- VLR + LTR --> +<div style="writing-mode: vertical-lr; direction: ltr;"> + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="height: 0; margin-right: 100px; left: -1000px;"> + <div style="width: 200px; margin-right: -50px;"></div> + </div> + </scrollable-container> +</div> + +<!-- VLR + RTL --> +<div style="writing-mode: vertical-rl; direction: rtl;"> + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-height="270"> + <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px; display: inline-block;"></div> + </scrollable-container> + + <scrollable-container data-expected-scroll-width="260"> + <div style="height: 0; margin-right: 100px; left: -1000px;"> + <div style="width: 200px; margin-right: -50px;"></div> + </div> + </scrollable-container> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-self-collapsing.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-self-collapsing.html new file mode 100644 index 0000000000..cf47f2407c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-self-collapsing.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta name="assert" content="This ensures that an end self-collapsing block contributes to the scrollable overflow correctly."> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.target')"> + <div class="target" style="width: 100px; height: 100px; overflow: scroll;" data-expected-scroll-height="110"> + <div style="width: 50px; height: 100px; margin-bottom: 10px; background: lime;"></div> + <div></div> <!-- self-collapsing --> + </div> + <div class="target" style="width: 100px; height: 100px; overflow: scroll;" data-expected-scroll-height="150"> + <div style="width: 50px; height: 100px; margin-bottom: 10px; background: lime;"></div> + <div style="margin-bottom: 50px;"></div> <!-- self-collapsing --> + </div> + <div class="target" style="width: 100px; height: 100px; overflow: scroll;" data-expected-scroll-height="180"> + <div style="width: 50px; height: 100px; margin-bottom: 30px; background: lime;"></div> + <div style="margin-bottom: 100px;"> <!-- self-collapsing --> + <div style="margin-top: -20px;"></div> + </div> + </div> + <div id=log></div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-textarea.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-textarea.html new file mode 100644 index 0000000000..2be500bc8b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-textarea.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-001.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-001.html new file mode 100644 index 0000000000..f2bac4041e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-001.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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-002.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-002.html new file mode 100644 index 0000000000..e69fec1342 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-003.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-003.html new file mode 100644 index 0000000000..bf6c635760 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-001.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-001.html new file mode 100644 index 0000000000..52d1f5bc63 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-002.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-002.html new file mode 100644 index 0000000000..baa9ae7a06 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-003.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-003.html new file mode 100644 index 0000000000..0a6d90bbaf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-004.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-004.html new file mode 100644 index 0000000000..a23954e1de --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-005.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-005.html new file mode 100644 index 0000000000..845c28f12a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-006.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-006.html new file mode 100644 index 0000000000..8e21512bdb --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-dynamic-006.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-vertical-rl-dynamic.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-vertical-rl-dynamic.html new file mode 100644 index 0000000000..07f3229017 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-vertical-rl-dynamic.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#scrollbar-layout"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="container" style="width:600px; height:400px; writing-mode:vertical-rl; overflow:auto;"> +<div id="target" style="width:1000px; height:500px; background:lime;"></div> +</div> + +<script> +promise_test(async () => { + await new Promise(resolve => requestAnimationFrame(resolve)); + await new Promise(resolve => requestAnimationFrame(resolve)); + // Remove the vertical scrollbar. + document.querySelector('#target').style.height = '200px'; + assert_equals(document.querySelector('#container').scrollLeft, 0); +}, 'Removing the vertical scrollbar of a vertical-rl container should keep scrollLeft'); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-zero-one-axis.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-zero-one-axis.html new file mode 100644 index 0000000000..1986a8d48b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-zero-one-axis.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: Scroll Length Calculated Correctly When One Axis Has Zero Length</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://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=1800907"> +<style> +.scroll { + overflow: scroll; +} + +.zero-h { + width: 100px; + height: 0px; +} + +.zero-w { + width: 0; + height: 100px; +} + +.flex-row { + display: flex; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.grid { + display: grid; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.scroll')"> +<div class="scroll zero-h" data-expected-scroll-height="100"> + <div class="zero-w"></div> +</div> +<div class="scroll zero-w" data-expected-scroll-width="100"> + <div class="zero-h"></div> +</div> + +<div class="scroll zero-h flex-row" data-expected-scroll-height="100"> + <div class="zero-w"></div> +</div> +<div class="scroll zero-w flex-col" data-expected-scroll-width="100"> + <div class="zero-h"></div> +</div> + +<div class="scroll zero-h grid" data-expected-scroll-height="100"> + <div class="zero-w"></div> +</div> +<div class="scroll zero-w grid" data-expected-scroll-width="100"> + <div class="zero-h"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-empty-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-empty-001.html new file mode 100644 index 0000000000..0b2eebb569 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-empty-001.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>overflow-y: scroll on an empty element doesn't cause it to gain height</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow-y"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1365806"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="/css/reference/blank.html"> +<style> + div { + background: red; + overflow-y: scroll; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-empty-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-empty-002.html new file mode 100644 index 0000000000..490146cad2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-empty-002.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>overflow:auto containers shouldn't grow due to scrollbars, even if there's out of flow content that overflows</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow-y"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1637511"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="/css/reference/blank.html"> + +<!-- + If we create a horizontal scrollbar it'd cause overflow in the vertical + direction as well, due to the svg's aspect-ratio. +--> +<div style="width: 300px;"> + <div style="overflow:auto"> + <div style="height: 0; position: relative;"> + <svg style="top: 0; left: 0; position: absolute" width="300" height="300"></svg> + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-001.html new file mode 100644 index 0000000000..4486471cde --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-001.html @@ -0,0 +1,261 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: test scrollbar-gutter with horizontal left to right content</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> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: ltr; + + height: 200px; + width: 200px; + margin: 10px; + padding: 0px; + border-width: 0px; + overflow-x: auto; + flex: none; + background: deepskyblue; + } + + .content { + width: 100%; + height: 100%; + padding: 0px; + border-width: 0px; + background: lightsalmon; + } + + /* scrollbar-gutter */ + .sg_auto { + scrollbar-gutter: auto; + } + + .sg_stable { + scrollbar-gutter: stable; + } + + .sg_stable_mirror { + scrollbar-gutter: stable both-edges; + } + + /* overflow */ + .container.ov_auto { + overflow-y: auto; + } + + .container.ov_scroll { + overflow-y: scroll; + } + + .container.ov_visible { + overflow: visible; + } + + .container.ov_hidden { + overflow-y: hidden; + } + + .container.ov_clip { + overflow: clip; + } +</style> +<body> + + <div class="line"> + <div class="container ov_auto sg_auto" id="container_auto_auto"> + <div class="content" id="content_auto_auto">auto/auto</div> + </div> + + <div class="container ov_scroll sg_auto" id="container_scroll_auto"> + <div class="content" id="content_scroll_auto">scroll/auto</div> + </div> + + <div class="container ov_visible sg_auto" id="container_visible_auto"> + <div class="content" id="content_visible_auto">visible/auto</div> + </div> + + <div class="container ov_hidden sg_auto" id="container_hidden_auto"> + <div class="content" id="content_hidden_auto">hidden/auto</div> + </div> + + <div class="container ov_clip sg_auto" id="container_clip_auto"> + <div class="content" id="content_clip_auto">clip/auto</div> + </div> + </div> + + <div class="line"> + <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_stable" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable">scroll/stable</div> + </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_stable" id="container_hidden_stable"> + <div class="content" id="content_hidden_stable">hidden/stable</div> + </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_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_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_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_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_stable_mirror" id="container_clip_stable_mirror"> + <div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div> + </div> + </div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + // scrollbar-gutter: auto + + test(function () { + let container = document.getElementById('container_auto_auto'); + let content = document.getElementById('content_auto_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow auto, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_scroll_auto'); + let content = document.getElementById('content_scroll_auto'); + assert_greater_than(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow scroll, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_visible_auto'); + let content = document.getElementById('content_visible_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow visible, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_hidden_auto'); + let content = document.getElementById('content_hidden_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow hidden, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_clip_auto'); + let content = document.getElementById('content_clip_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow clip, scrollbar-gutter auto"); + + // scrollbar-gutter: stable + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 clip, scrollbar-gutter stable"); + + // scrollbar-gutter: stable both-edges + + test(function () { + 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 visible, scrollbar-gutter stable both-edges"); + + test(function () { + 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_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_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 clip, scrollbar-gutter stable both-edges"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-002-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-002-ref.html new file mode 100644 index 0000000000..ae51682c75 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-002-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Reference: test scrollbar-gutter with horizontal left to right content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: ltr; + + box-sizing: border-box; + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-y: auto"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable"></div> + </div> + + <div class="container" style="overflow-y: hidden" id="container_hidden_stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-y: auto;" id="container_auto_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll" id="container_scroll_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: hidden;" id="container_hidden_stable_both_edges"> + <div class="content"></div> + </div> + </div> + + <script> + let container_scroll_stable = document.getElementById("container_scroll_stable"); + let content_scroll_stable = document.getElementById("content_scroll_stable"); + let vScrollbarWidth = (container_scroll_stable.offsetWidth - content_scroll_stable.offsetWidth); + let vScrollbarWidthStr = vScrollbarWidth + "px"; + + // Simulate scrollbar-gutter via padding on containers. + document.getElementById("container_hidden_stable").style.paddingInlineEnd = vScrollbarWidthStr; + document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; + document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = vScrollbarWidthStr; + </script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-002.html new file mode 100644 index 0000000000..129eb2c085 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-002.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow: test scrollbar-gutter with horizontal left to right content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="scrollbar-gutter-002-ref.html"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: ltr; + + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-y: auto; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: hidden; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-abspos-001-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-abspos-001-ref.html new file mode 100644 index 0000000000..29a2a99615 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-abspos-001-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Overflow Reference: scrollbar-gutter is accounted for in abspos sizing</title> +<style> +.container { + scrollbar-gutter: stable; + overflow-y: auto; + width: 100px; + height: 200px; + position: relative; +} +.child { + width: 100%; + height: 100px; + background: green; +} +</style> +<div class="container"> + <div class="child"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-abspos-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-abspos-001.html new file mode 100644 index 0000000000..946cd203e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-abspos-001.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Overflow Test: scrollbar-gutter is accounted for in abspos sizing</title> +<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="help" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1756826"> +<link rel="match" href="scrollbar-gutter-abspos-001-ref.html"> +<style> +.container { + scrollbar-gutter: stable; + overflow-y: auto; + width: 100px; + height: 200px; + position: relative; +} +.abspos { + width: 100%; + height: 100px; + background: green; + position: absolute; + left: 0; +} +</style> +<div class="container"> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-001-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-001-ref.html new file mode 100644 index 0000000000..5f2f7bff26 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-001-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + #ref { + font: 100px/1 Ahem; + color: green; + } +</style> +<div id="ref">X<br>X</div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-001.html new file mode 100644 index 0000000000..3dcb32048c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-001.html @@ -0,0 +1,21 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: scrollbar-gutter changing dynamically</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="scrollbar-gutter-dynamic-001-ref.html"> + +<style> + #scroller { + font: 100px/1 Ahem; + color: green; + overflow-y: auto; + width: 300px; + height: 300px; + } +</style> +<div id="scroller">X X</div> +<script> + scroller.offsetTop; + scroller.style.scrollbarGutter = "stable"; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-002-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-002-ref.html new file mode 100644 index 0000000000..b1db1a8cb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-002-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Test Reference</title> + <style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: ltr; + + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div id="auto-auto" class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div id="scroll-auto" class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div id="hidden-auto" class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="auto-stable" class="container" style="overflow-y: auto; scrollbar-gutter: auto"> + <div class="content"></div> + </div> + + <div id="scroll-stable" class="container" style="overflow-y: scroll; scrollbar-gutter: auto"> + <div class="content"></div> + </div> + + <div id="hidden-stable" class="container" style="overflow-y: hidden; scrollbar-gutter: auto"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="hidden-stable-both" class="container" style="overflow-y: auto; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div id="hidden-stable-both" class="container" style="overflow-y: scroll; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div id="hidden-stable-both" class="container" style="overflow-y: hidden; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-002.html new file mode 100644 index 0000000000..a830e6b680 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-002.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Overflow: test scrollbar-gutter dynamic update</title> + <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="scrollbar-gutter-dynamic-002-ref.html"> + <script src="/common/reftest-wait.js"></script> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: ltr; + + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div id="auto-auto" class="container" style="overflow-y: auto; scrollbar-gutter: auto"> + <div class="content"></div> + </div> + + <div id="scroll-auto" class="container" style="overflow-y: scroll; scrollbar-gutter: auto"> + <div class="content"></div> + </div> + + <div id="hidden-auto" class="container" style="overflow-y: hidden; scrollbar-gutter: auto"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="auto-stable" class="container" style="overflow-y: auto; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div id="scroll-stable" class="container" style="overflow-y: scroll; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div id="hidden-stable" class="container" style="overflow-y: hidden; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="auto-stable-both" class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div id="scroll-stable-both" class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div id="hidden-stable-both" class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + </div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.getElementById('auto-auto').style.scrollbarGutter = 'stable both-edges'; + document.getElementById('scroll-auto').style.scrollbarGutter = 'stable both-edges'; + document.getElementById('hidden-auto').style.scrollbarGutter = 'stable both-edges'; + document.getElementById('auto-stable').style.scrollbarGutter = 'auto'; + document.getElementById('scroll-stable').style.scrollbarGutter = 'auto'; + document.getElementById('hidden-stable').style.scrollbarGutter = 'auto'; + document.getElementById('auto-stable-both').style.scrollbarGutter = 'stable'; + document.getElementById('scroll-stable-both').style.scrollbarGutter = 'stable'; + document.getElementById('hidden-stable-both').style.scrollbarGutter = 'stable'; + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-003-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-003-ref.html new file mode 100644 index 0000000000..259afc014e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-003-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: ltr; + block-size: 200px; + inline-size: 200px; + overflow-y: hidden; + margin: 10px; + background: deepskyblue; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + + .width-auto { + scrollbar-width: auto; + } + + .width-thin { + scrollbar-width: thin; + } + + .width-none { + scrollbar-width: none; + } + + .gutter-stable { + scrollbar-gutter: stable; + } + + .gutter-both { + scrollbar-gutter: stable both-edges; + } + </style> + + <div class="line"> + <div id="stable-auto" class="container gutter-stable width-none"> + <div class="content"></div> + </div> + <div id="both-auto" class="container gutter-both width-none"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="stable-thin" class="container gutter-stable width-auto"> + <div class="content"></div> + </div> + <div id="both-thin" class="container gutter-both width-auto"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="stable-none" class="container gutter-stable width-thin"> + <div class="content"></div> + </div> + <div id="both-none" class="container gutter-both width-thin"> + <div class="content"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-003.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-003.html new file mode 100644 index 0000000000..f92beaaa47 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-003.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Overflow: test scrollbar-gutter when dynamically update scrollbar-width</title> + <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="scrollbar-gutter-dynamic-003-ref.html"> + <script src="/common/reftest-wait.js"></script> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: ltr; + block-size: 200px; + inline-size: 200px; + overflow: hidden; + margin: 10px; + background: deepskyblue; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + + .width-auto { + scrollbar-width: auto; + } + + .width-thin { + scrollbar-width: thin; + } + + .width-none { + scrollbar-width: none; + } + + .gutter-stable { + scrollbar-gutter: stable; + } + + .gutter-both { + scrollbar-gutter: stable both-edges; + } + </style> + + <div class="line"> + <div id="stable-auto" class="container gutter-stable width-auto"> + <div class="content"></div> + </div> + <div id="both-auto" class="container gutter-both width-auto"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="stable-thin" class="container gutter-stable width-thin"> + <div class="content"></div> + </div> + <div id="both-thin" class="container gutter-both width-thin"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div id="stable-none" class="container gutter-stable width-none"> + <div class="content"></div> + </div> + <div id="both-none" class="container gutter-both width-none"> + <div class="content"></div> + </div> + </div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.getElementById('stable-auto').style.scrollbarWidth = 'none'; + document.getElementById('both-auto').style.scrollbarWidth = 'none'; + document.getElementById('stable-thin').style.scrollbarWidth = 'auto'; + document.getElementById('both-thin').style.scrollbarWidth = 'auto'; + document.getElementById('stable-none').style.scrollbarWidth = 'thin'; + document.getElementById('both-none').style.scrollbarWidth = 'thin'; + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-004-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-004-ref.html new file mode 100644 index 0000000000..edafd49e52 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-004-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset="utf-8"> +<style> +p { + background-color: purple; + color: white; +} +</style> +<p>Should not have space around me in the inline axis.</p> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-004.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-004.html new file mode 100644 index 0000000000..07b66eede7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-dynamic-004.html @@ -0,0 +1,26 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: scrollbar-gutter changing dynamically on the root element</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874093"> +<link rel="match" href="scrollbar-gutter-dynamic-004-ref.html"> +<style> +:root { + scrollbar-gutter: stable both-edges; +} +p { + background-color: purple; + color: white; +} +</style> +<p>Should not have space around me in the inline axis.</p> +<script> + document.documentElement.getBoundingClientRect(); + document.addEventListener("TestRendered", function() { + document.documentElement.style.scrollbarGutter = "initial"; + document.documentElement.className = ""; + }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-001-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-001-ref.html new file mode 100644 index 0000000000..939dfc8073 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Overflow Reference: Root element's scrollbar-gutter is accounted for in fixed-pos positioning</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<style> +:root { + scrollbar-gutter: stable; +} +body { + margin: 0; +} +.fixed { + width: 100px; + height: 100px; + background: green; + position: absolute; +} +</style> + +<div class="fixed" style="left: 0"></div> +<div class="fixed" style="right: 0"></div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-001.html new file mode 100644 index 0000000000..d7ba106249 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Overflow Test: Root element's scrollbar-gutter is accounted for in fixed-pos positioning</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://bugzilla.mozilla.org/show_bug.cgi?id=728807"> +<link rel="match" href="scrollbar-gutter-fixedpos-001-ref.html"> +<style> +:root { + scrollbar-gutter: stable; +} +body { + margin: 0; +} +.fixed { + width: 100px; + height: 100px; + background: green; + position: fixed; +} +</style> + +<div class="fixed" style="left: 0"></div> +<div class="fixed" style="right: 0"></div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-002-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-002-ref.html new file mode 100644 index 0000000000..4019f3f2d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-002-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Overflow Reference: Root element's scrollbar-gutter is accounted for in fixed-pos positioning</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<style> +:root { + scrollbar-gutter: stable both-edges; +} +body { + margin: 0; +} +.fixed { + width: 100px; + height: 100px; + background: green; + position: absolute; +} +</style> + +<div class="fixed" style="left: 0"></div> +<div class="fixed" style="right: 0"></div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-002.html new file mode 100644 index 0000000000..1776b8d735 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-fixedpos-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Overflow Test: Root element's scrollbar-gutter is accounted for in fixed-pos positioning</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://bugzilla.mozilla.org/show_bug.cgi?id=728807"> +<link rel="match" href="scrollbar-gutter-fixedpos-002-ref.html"> +<style> +:root { + scrollbar-gutter: stable both-edges; +} +body { + margin: 0; +} +.fixed { + width: 100px; + height: 100px; + background: green; + position: fixed; +} +</style> + +<div class="fixed" style="left: 0"></div> +<div class="fixed" style="right: 0"></div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-001.html new file mode 100644 index 0000000000..94391e3df6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-002.html new file mode 100644 index 0000000000..d55938e04d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-003.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-003.html new file mode 100644 index 0000000000..e9483946a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-004.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-004.html new file mode 100644 index 0000000000..699247111d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-005.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-005.html new file mode 100644 index 0000000000..e44811d279 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-006.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-006.html new file mode 100644 index 0000000000..e1084ff32b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-006.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-007.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-007.html new file mode 100644 index 0000000000..2f5e5596bd --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-001.html new file mode 100644 index 0000000000..0d553c87b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-001.html @@ -0,0 +1,261 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: test scrollbar-gutter with horizontal right to left content</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> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: rtl; + + height: 200px; + width: 200px; + margin: 10px; + padding: 0px; + border-width: 0px; + overflow-x: auto; + flex: none; + background: deepskyblue; + } + + .content { + width: 100%; + height: 100%; + padding: 0px; + border-width: 0px; + background: lightsalmon; + } + + /* scrollbar-gutter */ + .sg_auto { + scrollbar-gutter: auto; + } + + .sg_stable { + scrollbar-gutter: stable; + } + + .sg_stable_mirror { + scrollbar-gutter: stable both-edges; + } + + /* overflow */ + .container.ov_auto { + overflow-y: auto; + } + + .container.ov_scroll { + overflow-y: scroll; + } + + .container.ov_visible { + overflow: visible; + } + + .container.ov_hidden { + overflow-y: hidden; + } + + .container.ov_clip { + overflow: clip; + } +</style> +<body> + + <div class="line"> + <div class="container ov_auto sg_auto" id="container_auto_auto"> + <div class="content" id="content_auto_auto">auto/auto</div> + </div> + + <div class="container ov_scroll sg_auto" id="container_scroll_auto"> + <div class="content" id="content_scroll_auto">scroll/auto</div> + </div> + + <div class="container ov_visible sg_auto" id="container_visible_auto"> + <div class="content" id="content_visible_auto">visible/auto</div> + </div> + + <div class="container ov_hidden sg_auto" id="container_hidden_auto"> + <div class="content" id="content_hidden_auto">hidden/auto</div> + </div> + + <div class="container ov_clip sg_auto" id="container_clip_auto"> + <div class="content" id="content_clip_auto">clip/auto</div> + </div> + </div> + + <div class="line"> + <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_stable" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable">scroll/stable</div> + </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_stable" id="container_hidden_stable"> + <div class="content" id="content_hidden_stable">hidden/stable</div> + </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_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_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_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_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_stable_mirror" id="container_clip_stable_mirror"> + <div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div> + </div> + </div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + // scrollbar-gutter: auto + + test(function () { + let container = document.getElementById('container_auto_auto'); + let content = document.getElementById('content_auto_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow auto, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_scroll_auto'); + let content = document.getElementById('content_scroll_auto'); + assert_greater_than(container.offsetWidth, content.offsetWidth, "content width"); + assert_less_than(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow scroll, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_visible_auto'); + let content = document.getElementById('content_visible_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow visible, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_hidden_auto'); + let content = document.getElementById('content_hidden_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow hidden, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_clip_auto'); + let content = document.getElementById('content_clip_auto'); + assert_equals(container.offsetWidth, content.offsetWidth, "content width"); + assert_equals(container.offsetLeft, content.offsetLeft, "content position"); + }, "overflow clip, scrollbar-gutter auto"); + + // scrollbar-gutter: stable + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 clip, scrollbar-gutter stable"); + + // scrollbar-gutter: stable both-edges + + test(function () { + 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 visible, scrollbar-gutter stable both-edges"); + + test(function () { + 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_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_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 clip, scrollbar-gutter stable both-edges"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-002-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-002-ref.html new file mode 100644 index 0000000000..e6510a0813 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-002-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Reference: test scrollbar-gutter with horizontal right to left content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: rtl; + + box-sizing: border-box; + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-y: auto"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable"></div> + </div> + + <div class="container" style="overflow-y: hidden" id="container_hidden_stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-y: auto;" id="container_auto_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll" id="container_scroll_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: hidden;" id="container_hidden_stable_both_edges"> + <div class="content"></div> + </div> + </div> + + <script> + let container_scroll_stable = document.getElementById("container_scroll_stable"); + let content_scroll_stable = document.getElementById("content_scroll_stable"); + let vScrollbarWidth = (container_scroll_stable.offsetWidth - content_scroll_stable.offsetWidth); + let vScrollbarWidthStr = vScrollbarWidth + "px"; + + // Simulate scrollbar-gutter via padding on containers. + document.getElementById("container_hidden_stable").style.paddingInlineEnd = vScrollbarWidthStr; + document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; + document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = vScrollbarWidthStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = vScrollbarWidthStr; + </script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-002.html new file mode 100644 index 0000000000..8d0376defd --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-002.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow: test scrollbar-gutter with horizontal right to left content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="scrollbar-gutter-rtl-002-ref.html"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: horizontal-tb; + direction: rtl; + + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-y: auto; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: hidden; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-y: auto; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: scroll; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-y: hidden; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html new file mode 100644 index 0000000000..226004635e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html @@ -0,0 +1,259 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: test scrollbar-gutter with vertical left to right content</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> + .line { + display: flex; + } + + .container { + writing-mode: vertical-lr; + + height: 200px; + width: 200px; + margin: 10px; + padding: 0px; + border: none; + overflow-y: auto; + background: deepskyblue; + } + + .content { + width: 100%; + height: 100%; + padding: 0px; + border: none; + background: lightsalmon; + } + + /* scrollbar-gutter */ + .sg_auto { + scrollbar-gutter: auto; + } + + .sg_stable { + scrollbar-gutter: stable; + } + + .sg_stable_mirror { + scrollbar-gutter: stable both-edges; + } + + /* overflow */ + .container.ov_auto { + overflow-x: auto; + } + + .container.ov_scroll { + overflow-x: scroll; + } + + .container.ov_visible { + overflow: visible; + } + + .container.ov_hidden { + overflow-x: hidden; + } + + .container.ov_clip { + overflow: clip; + } +</style> +<body> + + <div class="line"> + <div class="container ov_auto sg_auto" id="container_auto_auto"> + <div class="content" id="content_auto_auto">auto/auto</div> + </div> + + <div class="container ov_scroll sg_auto" id="container_scroll_auto"> + <div class="content" id="content_scroll_auto">scroll/auto</div> + </div> + + <div class="container ov_visible sg_auto" id="container_visible_auto"> + <div class="content" id="content_visible_auto">visible/auto</div> + </div> + + <div class="container ov_hidden sg_auto" id="container_hidden_auto"> + <div class="content" id="content_hidden_auto">hidden/auto</div> + </div> + + <div class="container ov_clip sg_auto" id="container_clip_auto"> + <div class="content" id="content_clip_auto">clip/auto</div> + </div> + </div> + + <div class="line"> + <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_stable" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable">scroll/stable</div> + </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_stable" id="container_hidden_stable"> + <div class="content" id="content_hidden_stable">hidden/stable</div> + </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_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_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_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_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_stable_mirror" id="container_clip_stable_mirror"> + <div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div> + </div> + </div> + + <script type="text/javascript"> + setup({ explicit_done: true }); + + // scrollbar-gutter: auto + + test(function () { + let container = document.getElementById('container_auto_auto'); + let content = document.getElementById('content_auto_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow auto, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_scroll_auto'); + let content = document.getElementById('content_scroll_auto'); + assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow scroll, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_visible_auto'); + let content = document.getElementById('content_visible_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow visible, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_hidden_auto'); + let content = document.getElementById('content_hidden_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow hidden, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_clip_auto'); + let content = document.getElementById('content_clip_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow clip, scrollbar-gutter auto"); + + // scrollbar-gutter: stable + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 clip, scrollbar-gutter stable"); + + // scrollbar-gutter: stable both-edges + + test(function () { + 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 visible, scrollbar-gutter stable both-edges"); + + test(function () { + 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_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_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 clip, scrollbar-gutter stable both-edges"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002-ref.html new file mode 100644 index 0000000000..cb7c647da4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Reference: test scrollbar-gutter with vertical left to right content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: vertical-lr; + + box-sizing: border-box; + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-x: auto"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable"></div> + </div> + + <div class="container" style="overflow-x: hidden" id="container_hidden_stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-x: auto;" id="container_auto_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll" id="container_scroll_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: hidden;" id="container_hidden_stable_both_edges"> + <div class="content"></div> + </div> + </div> + + <script> + let container_scroll_stable = document.getElementById("container_scroll_stable"); + let content_scroll_stable = document.getElementById("content_scroll_stable"); + let hScrollbarHeight = (container_scroll_stable.offsetHeight - content_scroll_stable.offsetHeight); + let hScrollbarHeightStr = hScrollbarHeight + "px"; + + // Simulate scrollbar-gutter via padding on containers. + document.getElementById("container_hidden_stable").style.paddingInlineEnd = hScrollbarHeightStr; + document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; + document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = hScrollbarHeightStr; + </script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002.html new file mode 100644 index 0000000000..9e5dcd299e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow: test scrollbar-gutter with vertical left to right content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="scrollbar-gutter-vertical-lr-002-ref.html"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: vertical-lr; + + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-x: auto; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: hidden; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-x: auto; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: hidden; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html new file mode 100644 index 0000000000..642e380808 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html @@ -0,0 +1,260 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: test scrollbar-gutter with vertical right to left content</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> + .line { + display: flex; + } + + .container { + writing-mode: vertical-rl; + + height: 200px; + width: 200px; + margin: 10px; + padding: 0px; + border: none; + overflow-y: auto; + background: deepskyblue; + } + + .content { + width: 100%; + height: 100%; + padding: 0px; + border: none; + background: lightsalmon; + } + + /* scrollbar-gutter */ + .sg_auto { + scrollbar-gutter: auto; + } + + .sg_stable { + scrollbar-gutter: stable; + } + + .sg_stable_mirror { + scrollbar-gutter: stable both-edges; + } + + /* overflow */ + .container.ov_auto { + overflow-x: auto; + } + + .container.ov_scroll { + overflow-x: scroll; + } + + .container.ov_visible { + overflow: visible; + } + + .container.ov_hidden { + overflow-x: hidden; + } + + .container.ov_clip { + overflow: clip; + } +</style> +<body> + + <div class="line"> + <div class="container ov_auto sg_auto" id="container_auto_auto"> + <div class="content" id="content_auto_auto">auto/auto</div> + </div> + + <div class="container ov_scroll sg_auto" id="container_scroll_auto"> + <div class="content" id="content_scroll_auto">scroll/auto</div> + </div> + + <div class="container ov_visible sg_auto" id="container_visible_auto"> + <div class="content" id="content_visible_auto">visible/auto</div> + </div> + + <div class="container ov_hidden sg_auto" id="container_hidden_auto"> + <div class="content" id="content_hidden_auto">hidden/auto</div> + </div> + + <div class="container ov_clip sg_auto" id="container_clip_auto"> + <div class="content" id="content_clip_auto">clip/auto</div> + </div> + </div> + + <div class="line"> + <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_stable" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable">scroll/stable</div> + </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_stable" id="container_hidden_stable"> + <div class="content" id="content_hidden_stable">hidden/stable</div> + </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_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_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_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_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_stable_mirror" id="container_clip_stable_mirror"> + <div class="content" id="content_clip_stable_mirror">clip/stable both-edges</div> + </div> + </div> + + <script type="text/javascript"> + + setup({ explicit_done: true }); + + // scrollbar-gutter: auto + + test(function () { + let container = document.getElementById('container_auto_auto'); + let content = document.getElementById('content_auto_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow auto, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_scroll_auto'); + let content = document.getElementById('content_scroll_auto'); + assert_greater_than(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow scroll, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_visible_auto'); + let content = document.getElementById('content_visible_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow visible, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_hidden_auto'); + let content = document.getElementById('content_hidden_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow hidden, scrollbar-gutter auto"); + + test(function () { + let container = document.getElementById('container_clip_auto'); + let content = document.getElementById('content_clip_auto'); + assert_equals(container.offsetHeight, content.offsetHeight, "content height"); + assert_equals(container.offsetTop, content.offsetTop, "content position"); + }, "overflow clip, scrollbar-gutter auto"); + + // scrollbar-gutter: stable + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 stable"); + + test(function () { + 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 clip, scrollbar-gutter stable"); + + // scrollbar-gutter: stable both-edges + + test(function () { + 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 visible, scrollbar-gutter stable both-edges"); + + test(function () { + 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_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_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 clip, scrollbar-gutter stable both-edges"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-002-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-002-ref.html new file mode 100644 index 0000000000..7dbadf995e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-002-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow Reference: test scrollbar-gutter with vertical right to left content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: vertical-rl; + direction: ltr; + + box-sizing: border-box; + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-x: auto"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll" id="container_scroll_stable"> + <div class="content" id="content_scroll_stable"></div> + </div> + + <div class="container" style="overflow-x: hidden" id="container_hidden_stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-x: auto;" id="container_auto_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll" id="container_scroll_stable_both_edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: hidden;" id="container_hidden_stable_both_edges"> + <div class="content"></div> + </div> + </div> + + <script> + let container_scroll_stable = document.getElementById("container_scroll_stable"); + let content_scroll_stable = document.getElementById("content_scroll_stable"); + let hScrollbarHeight = (container_scroll_stable.offsetHeight - content_scroll_stable.offsetHeight); + let hScrollbarHeightStr = hScrollbarHeight + "px"; + + // Simulate scrollbar-gutter via padding on containers. + document.getElementById("container_hidden_stable").style.paddingInlineEnd = hScrollbarHeightStr; + document.getElementById("container_auto_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; + document.getElementById("container_scroll_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineStart = hScrollbarHeightStr; + document.getElementById("container_hidden_stable_both_edges").style.paddingInlineEnd = hScrollbarHeightStr; + </script> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-002.html new file mode 100644 index 0000000000..d68d4e5d3c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Overflow: test scrollbar-gutter with vertical right to left content</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> + <link rel="match" href="scrollbar-gutter-vertical-rl-002-ref.html"> + + <style> + .line { + display: flex; + } + + .container { + writing-mode: vertical-rl; + + block-size: 200px; + inline-size: 200px; + margin: 10px; + background: deepskyblue; + resize: both; + } + + .content { + inline-size: 100%; + block-size: 200%; + background: lightsalmon; + } + </style> + + <div class="line"> + <div class="container" style="overflow-x: auto; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: hidden; scrollbar-gutter: stable"> + <div class="content"></div> + </div> + </div> + + <div class="line"> + <div class="container" style="overflow-x: auto; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: scroll; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + + <div class="container" style="overflow-x: hidden; scrollbar-gutter: stable both-edges"> + <div class="content"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbars-chrome-bug-001-ref.html b/testing/web-platform/tests/css/css-overflow/scrollbars-chrome-bug-001-ref.html new file mode 100644 index 0000000000..1bf59f90e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbars-chrome-bug-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/926167"> +<style> + +#container { + width: 200px; + height: 150px; + border: 1px solid black; + overflow: scroll; +} +#target { + width: 100px; + height: 50px; + background: green; + transform: scale(4); +} +</style> +<!-- --> +<div id="container"> + <div id="target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/scrollbars-chrome-bug-001.html b/testing/web-platform/tests/css/css-overflow/scrollbars-chrome-bug-001.html new file mode 100644 index 0000000000..643781bac8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/scrollbars-chrome-bug-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Overflow: css-overflow-3</title> +<link rel="author" href="mailto:atotic@google.com"> +<link rel="help" href="https://crbug.com/926167"> +<link rel="match" href="scrollbars-chrome-bug-001-ref.html"> +<meta name="assert" content="scrollbars keep up to date with a changing transform"> +<style> + +#container { + width: 200px; + height: 150px; + border: 1px solid black; + overflow: scroll; +} +#target { + width: 100px; + height: 50px; + background: green; + transform: scale(1); +} +</style> +<!-- --> +<div id="container"> + <div id="target"></div> +</div> +<script> + // 1st transform triggers layer creation, and full layout. + // 2nd transform just updates overflow, which does not update scrollbars. + // This triggers the bug. + document.body.offsetTop; + document.querySelector("#target").style.transform = "scale(1.5)"; + document.body.offsetTop; + document.querySelector("#target").style.transform = "scale(4.0)"; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/select-size-overflow-001-ref.html b/testing/web-platform/tests/css/css-overflow/select-size-overflow-001-ref.html new file mode 100644 index 0000000000..2dc9c219a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/select-size-overflow-001-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test Reference</title> +<select size=3 style="scrollbar-width: none"> + <option>option 1</option> + <option>option 2</option> + <option>option 3</option> +</select> diff --git a/testing/web-platform/tests/css/css-overflow/select-size-overflow-001.html b/testing/web-platform/tests/css/css-overflow/select-size-overflow-001.html new file mode 100644 index 0000000000..a4cb1b6452 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/select-size-overflow-001.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1804812"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> +<link rel="match" href="select-size-overflow-001-ref.html"> +<select size=3 style="overflow: hidden"> + <option>option 1</option> + <option>option 2</option> + <option>option 3</option> +</select> diff --git a/testing/web-platform/tests/css/css-overflow/shrink-to-fit-auto-overflow-relayout-crash.html b/testing/web-platform/tests/css/css-overflow/shrink-to-fit-auto-overflow-relayout-crash.html new file mode 100644 index 0000000000..c0f0214ee1 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/shrink-to-fit-auto-overflow-relayout-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=919415"> +<div id="target" style="position:absolute; overflow:auto; height:100px; top:100px;"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + document.body.offsetTop; + target.style.top = "50px"; + }, "no crash"); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/table-header-group-overflow-crash.html b/testing/web-platform/tests/css/css-overflow/table-header-group-overflow-crash.html new file mode 100644 index 0000000000..1b0774129d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/table-header-group-overflow-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Crash test: table-header-group with default overflow/clip margin</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + +<style type="text/css"> +*:last-child{ + display: table-header-group; +} +</style> + +<object> + <table> + <caption>Text</caption> + <tbody></tbody> + </table> +</object> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-001.html new file mode 100644 index 0000000000..41c11d581e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-ellipsis-001-ref.html"> +<meta name="assert" content="Check that ellipsis is placed on the right position on the container boundaries in elements with 'text-overflow: ellipsis'."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + width: 400px; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + } +</style> +<p>The test passes if it matches the reference.</p> +<div>ppp</div> +<div>pppp</div> +<div>ppppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-002.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-002.html new file mode 100644 index 0000000000..e326967ca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-002.html @@ -0,0 +1,25 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow with visibility: hidden; and visibility: visible; descendant</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#ellipsing-details"> +<link rel="match" href="reference/text-overflow-ellipsis-002-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +#parent { + background-color: green; + display: inline-block; + vertical-align: top; + font-family: Ahem; +} +#element { + visibility: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 4ch; + overflow: hidden; +} +</style> +<div id="parent"> + <div id="element"><span style="visibility: visible">ABCABCABCABC</span></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-003-ref.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-003-ref.html new file mode 100644 index 0000000000..42349bbead --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-003-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<style> +.container { + display: flex; +} + +.cell { + white-space: nowrap; + overflow: hidden; + border: 1px solid red; + text-overflow: ellipsis; +} + +span { + display: inline-block; + background: green; + width: 30px; + height: 1em; + padding: 4px; + margin: 5px; +} +</style> +<div id="target" class="container" style="width: 150px;"> + <div class="cell"> + <span></span><span></span><span></span><span></span> + </div> + <div class="cell"> + <span></span><span></span><span></span><span></span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-003.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-003.html new file mode 100644 index 0000000000..a2570c558b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1062733"> +<link rel="match" href="text-overflow-ellipsis-003-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> +.container { + display: flex; +} + +.cell { + white-space: nowrap; + overflow: hidden; + border: 1px solid red; + text-overflow: ellipsis; +} + +span { + display: inline-block; + background: green; + width: 30px; + height: 1em; + padding: 4px; + margin: 5px; +} +</style> +<div id="target" class="container" style="width: 200px;"> + <div class="cell"> + <span></span><span></span><span></span><span></span> + </div> + <div class="cell"> + <span></span><span></span><span></span><span></span> + </div> +</div> +<script> +async function runTest() { + await new Promise(requestAnimationFrame); + document.getElementById('target').style.width = '150px'; + + await new Promise(requestAnimationFrame); + takeScreenshot(); +} +requestAnimationFrame(() => { requestAnimationFrame(() => runTest()) }); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input-ref.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input-ref.html new file mode 100644 index 0000000000..3902072bc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + input { + all: initial; + width: 100px; + } +</style> +<p>You should not see an ellipsis for the text below.</p> +<input id="input_element" value="xxxxxxxxxxxxxxxxxxxx"> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input.html new file mode 100644 index 0000000000..b235ca503a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-editing-input.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>CSS Overflow Test: text-overflow:ellipsis not rendered while editing</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow/#ellipsis-interaction"> +<link rel="match" href="text-overflow-ellipsis-editing-input-ref.html"> +<!-- The specification says it "may" render ellipsis as clip while editing, but + all current engines do for input elements. --> +<style> + input { + all: initial; + width: 100px; + text-overflow: ellipsis; + caret-color: transparent; + } +</style> +<p>You should not see an ellipsis for the text below.</p> +<input id="input_element" value="xxxxxxxxxxxxxxxxxxxx"> +<script> + input_element.offsetTop; + input_element.focus(); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-rtl-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-rtl-001.html new file mode 100644 index 0000000000..32284f89c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-rtl-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-ellipsis-rtl-001-ref.html"> +<meta name="assert" content="Check that ellipsis is placed on the right position on the container boundaries in elements with 'text-overflow: ellipsis' in RTL."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + width: 400px; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + direction: rtl; + } +</style> +<p>The test passes if it matches the reference.</p> +<div>ppp</div> +<div>pppp</div> +<div>ppppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-vertical-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-vertical-001.html new file mode 100644 index 0000000000..58c8f57dcf --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-vertical-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis vertical</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-ellipsis-vertical-001-ref.html"> +<meta name="assert" content="Check that ellipsis is placed on the right position on the container boundaries in elements with 'text-overflow: ellipsis' in vertical writing mode."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + height: 400px; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + writing-mode: vertical-lr; + } +</style> +<p>The test passes if it matches the reference.</p> +<div>ppp</div> +<div>pppp</div> +<div>ppppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-vertical-rtl-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-vertical-rtl-001.html new file mode 100644 index 0000000000..ac621026fd --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-ellipsis-vertical-rtl-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis vertical RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-ellipsis-vertical-rtl-001-ref.html"> +<meta name="assert" content="Check that ellipsis is placed on the right position on the container boundaries in elements with 'text-overflow: ellipsis' in vertical writing mode and RTL."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + height: 400px; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + writing-mode: vertical-lr; + direction: rtl; + } +</style> +<p>The test passes if it matches the reference.</p> +<div>ppp</div> +<div>pppp</div> +<div>ppppp</div> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-001.html new file mode 100644 index 0000000000..91c04fda47 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-scroll-001-ref.html"> +<meta name="flags" content="should"> +<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + white-space: pre; + width: 400px; + overflow: hidden; + text-overflow: ellipsis; + } +</style> + +<p>The test passes if it matches the reference.</p> + +<div id="test1">ppp pp p</div> +<div id="test2">ppp pp p</div> +<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> +<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + test1.scrollLeft = 200; + test2.scrollLeft = 400; + test3.scrollLeft = 200; + test4.scrollLeft = 1000; + document.documentElement.className = ""; + })); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-rtl-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-rtl-001.html new file mode 100644 index 0000000000..81f88085c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-rtl-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-scroll-rtl-001-ref.html"> +<meta name="flags" content="should"> +<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis' in RTL, the ellipsis should move to the new position."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font: 100px/1 Ahem; + white-space: pre; + width: 400px; + overflow: hidden; + text-overflow: ellipsis; + direction: rtl; + } +</style> + +<p>The test passes if it matches the reference.</p> + +<div id="test1">ppp pp p</div> +<div id="test2">ppp pp p</div> +<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> +<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + test1.scrollLeft = -200; + test2.scrollLeft = -400; + test3.scrollLeft = -200; + test4.scrollLeft = -1000; + document.documentElement.className = ""; + })); +</script> + diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-lr-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-lr-001.html new file mode 100644 index 0000000000..f555e8644f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-lr-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-lr</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-scroll-vertical-lr-001-ref.html"> +<meta name="flags" content="should"> +<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-lr writing mode too."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + display: inline-block; + writing-mode: vertical-lr; + font: 100px/1 Ahem; + white-space: pre; + height: 400px; + overflow: hidden; + text-overflow: ellipsis; + } +</style> + +<p>The test passes if it matches the reference.</p> + +<div id="test1">ppp pp p</div> +<div id="test2">ppp pp p</div> +<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> +<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + test1.scrollTop = 200; + test2.scrollTop = 400; + test3.scrollTop = 200; + test4.scrollTop = 1000; + document.documentElement.className = ""; + })); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-lr-rtl-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-lr-rtl-001.html new file mode 100644 index 0000000000..0d3e537fb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-lr-rtl-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-lr RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html"> +<meta name="flags" content="should"> +<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-lr writing mode and RTL too."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + display: inline-block; + writing-mode: vertical-lr; + font: 100px/1 Ahem; + white-space: pre; + height: 400px; + overflow: hidden; + text-overflow: ellipsis; + direction: rtl; + } +</style> + +<p>The test passes if it matches the reference.</p> + +<div id="test1">ppp pp p</div> +<div id="test2">ppp pp p</div> +<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> +<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + test1.scrollTop = -200; + test2.scrollTop = -400; + test3.scrollTop = -200; + test4.scrollTop = -1000; + document.documentElement.className = ""; + })); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-rl-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-rl-001.html new file mode 100644 index 0000000000..3c846e4f82 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-rl-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-rl</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-scroll-vertical-lr-001-ref.html"> +<meta name="flags" content="should"> +<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-rl writing mode too."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + display: inline-block; + writing-mode: vertical-rl; + font: 100px/1 Ahem; + white-space: pre; + height: 400px; + overflow: hidden; + text-overflow: ellipsis; + } +</style> + +<p>The test passes if it matches the reference.</p> + +<div id="test1">ppp pp p</div> +<div id="test2">ppp pp p</div> +<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> +<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + test1.scrollTop = 200; + test2.scrollTop = 400; + test3.scrollTop = 200; + test4.scrollTop = 1000; + document.documentElement.className = ""; + })); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-rl-rtl-001.html b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-rl-rtl-001.html new file mode 100644 index 0000000000..c21031d49c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/text-overflow-scroll-vertical-rl-rtl-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-rl RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html"> +<meta name="flags" content="should"> +<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-rl writing mode and RTL too."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + display: inline-block; + writing-mode: vertical-rl; + font: 100px/1 Ahem; + white-space: pre; + height: 400px; + overflow: hidden; + text-overflow: ellipsis; + direction: rtl; + } +</style> + +<p>The test passes if it matches the reference.</p> + +<div id="test1">ppp pp p</div> +<div id="test2">ppp pp p</div> +<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> +<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + test1.scrollTop = -200; + test2.scrollTop = -400; + test3.scrollTop = -200; + test4.scrollTop = -1000; + document.documentElement.className = ""; + })); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-001.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-001.html new file mode 100644 index 0000000000..bba3d1c49f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp when not display:-webkit-box</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="-webkit-line-clamp should not apply to an element that is not a flex item for a legacy -webkit-box or -webkit-inline-box flex container."> +<style> +.clamp { + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-002.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-002.html new file mode 100644 index 0000000000..a04b959942 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp when not -webkit-box-orient:vertical</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="-webkit-line-clamp should not apply to an element whose parent is not -webkit-box-orient:vertical."> +<style> +.clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-003.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-003.html new file mode 100644 index 0000000000..5ebe64675f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with fewer lines than specified</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="-webkit-line-clamp should not have an effect on an element with fewer lines than specified."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 6; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-004.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-004.html new file mode 100644 index 0000000000..d66d0bb62f --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with exactly as many lines as specified</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-001-ref.html"> +<meta name="assert" content="-webkit-line-clamp should not have an effect on an element with exactly as many lines as specified."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-005.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-005.html new file mode 100644 index 0000000000..73b4b8cfa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-005.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with more lines than specified</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<meta name="assert" content="-webkit-line-clamp should clamp to the specified number of lines."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-006.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-006.html new file mode 100644 index 0000000000..0d2c1f9c64 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-006.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: sizing of -webkit-line-clamp affected elements</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-006-ref.html"> +<meta name="assert" content="-webkit-line-clamp should size the element to the clamped number of lines."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-007.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-007.html new file mode 100644 index 0000000000..95c2db5165 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-007.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp applied to a non-anonymous flex item</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-007-ref.html"> +<meta name="assert" content="-webkit-line-clamp should apply to a flex item in a -webkit-box or -webkit-inline-box flex container."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-008.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-008.html new file mode 100644 index 0000000000..471333e666 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-008.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp applied to all flex items</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-008-ref.html"> +<meta name="assert" content="-webkit-line-clamp should apply to all flex items in a -webkit-box or -webkit-inline-box flex container independently."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; +} +div { + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3</div><div>Line A +Line B +Line C</div>Line 一 +Line 二 +Line 三</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-009.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-009.html new file mode 100644 index 0000000000..240f6b113b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-009.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with non-BFC block children in flex item</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-009-ref.html"> +<meta name="assert" content="-webkit-line-clamp should count lines in non-BFC block children of the flex items."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3 +Line 4</div></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-010.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-010.html new file mode 100644 index 0000000000..9ff23a2fe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-010.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with non-BFC block children in flex item</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-010-ref.html"> +<meta name="assert" content="-webkit-line-clamp should count lines in non-BFC block children of the flex items."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5 +Line 6</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-011.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-011.html new file mode 100644 index 0000000000..3a0016e9df --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-011.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with BFC child in flex item</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-011-ref.html"> +<meta name="assert" content="-webkit-line-clamp should skip lines in BFC children of the flex items."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.child { + overflow: auto; + font: 24px / 48px serif; + color: blue; + padding: 0 4px; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5 +Line 6</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-012.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-012.html new file mode 100644 index 0000000000..d46a7944fa --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-012.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with flex container child in flex item</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-012-ref.html"> +<meta name="assert" content="-webkit-line-clamp should skip lines in independent formatting contexts in the flex items."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.child { + display: flex; + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<div class="child">Line 3 +Line 4</div>Line 5 +Line 6</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-013.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-013.html new file mode 100644 index 0000000000..6db53906ac --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-013.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with table child in flex item</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-013-ref.html"> +<meta name="assert" content="-webkit-line-clamp should skip lines in independent formatting contexts in the flex items."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.child { + font: 24px / 48px serif; + color: blue; +} +</style> +<div class="clamp"><div>Line 1 +Line 2<table class="child" border="1"><tr><td>Line 3 +Line 4</td></tr></table>Line 5 +Line 6</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-014.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-014.html new file mode 100644 index 0000000000..948b247533 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-014.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp on RTL flex item</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-014-ref.html"> +<meta name="assert" content="-webkit-line-clamp should place the ellipsis appropriately in RTL content."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ + direction: rtl; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-015.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-015.html new file mode 100644 index 0000000000..c1817e04e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-015.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp on vertical writing mode flex item when -webkit-box-orient:horizontal</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-015-ref.html"> +<meta name="assert" content="-webkit-line-clamp should not apply to a -webkit-box-orient:horizontal flex item even if using a vertical writing mode."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-line-clamp: 2; + font: 16px / 32px serif; + white-space: pre; + padding: 4px 0; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ + writing-mode: vertical-rl; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-016.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-016.html new file mode 100644 index 0000000000..5b2d4593ae --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-016.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp value on flex child</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-016-ref.html"> +<meta name="assert" content="-webkit-line-clamp value on the flex child should be ignored."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.child { + -webkit-line-clamp: 3; +} +</style> +<div class="clamp"><div class="child">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-017.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-017.html new file mode 100644 index 0000000000..ece4d3123b --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-017.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-017-ref.html"> +<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from none to a number less than the number of lines should apply the clamping."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> +<script> +window.onload = function() { + document.querySelector(".clamp").style.webkitLineClamp = 3; + document.documentElement.className = ""; +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-018.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-018.html new file mode 100644 index 0000000000..d381c64546 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-018.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-018-ref.html"> +<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number to none remove the clamping."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> +<script> +window.onload = function() { + document.querySelector(".clamp").style.webkitLineClamp = "none"; + document.documentElement.className = ""; +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-019.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-019.html new file mode 100644 index 0000000000..ff6f7e3cf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-019.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-019-ref.html"> +<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number less than to a number greater than the number of lines."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> +<script> +window.onload = function() { + document.querySelector(".clamp").style.webkitLineClamp = 6; + document.documentElement.className = ""; +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-020.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-020.html new file mode 100644 index 0000000000..9d875d52de --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-020.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-020-ref.html"> +<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number greater than to a number less than the number of lines."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 6; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> +<script> +window.onload = function() { + document.querySelector(".clamp").style.webkitLineClamp = 3; + document.documentElement.className = ""; +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-021.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-021.html new file mode 100644 index 0000000000..44a196c9ba --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-021.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing contents of a -webkit-line-clamp affected element</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-021-ref.html"> +<meta name="assert" content="Dynamically changing contents of a -webkit-line-clamp element so that it exceeds the specified number of lines should start clamping."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2</div> +<p>Following content.</p> +<script> +window.onload = function() { + document.querySelector(".clamp").textContent = `Line 1 +Line 2 +Line 3 +Line 4 +Line 5`; + document.documentElement.className = ""; +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-022.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-022.html new file mode 100644 index 0000000000..2959a73441 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-022.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing contents of a -webkit-line-clamp affected element</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-022-ref.html"> +<meta name="assert" content="Dynamically changing contents of a -webkit-line-clamp element so that it no longer exceeds the specified number of lines should stop clamping."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> +<script> +window.onload = function() { + document.querySelector(".clamp").textContent = `Line 1 +Line 2`; + document.documentElement.className = ""; +}; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-023.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-023.html new file mode 100644 index 0000000000..7f03513baa --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-023.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing contents of a -webkit-line-clamp affected element</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-023-ref.html"> +<meta name="assert" content="Dynamically changing contents of a -webkit-line-clamp element so that it matches the specified number of lines should stop clamping."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> +<script> +requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector(".clamp").textContent = `Line 1 +Line 2 +Line 3`; + document.documentElement.className = ""; +})); +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-024.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-024.html new file mode 100644 index 0000000000..6ebf5a8958 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-024.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp on a display:-webkit-inline-box container</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-024-ref.html"> +<meta name="assert" content="-webkit-line-clamp should apply to display:-webkit-inline-box containers."> +<style> +.clamp { + display: -webkit-inline-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +Before <div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> After</div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-025.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-025.html new file mode 100644 index 0000000000..67804dedf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-025.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with floats</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-025-ref.html"> +<meta name="assert" content="A -webkit-line-clamp induced ellipsis is placed after shrinking the line due to floats."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + font: 16px / 32px monospace; + white-space: pre; + padding: 0 4px; + background-color: yellow; + width: 11ch; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.float { + float: right; + color: orange; +} +</style> +<div class="clamp"><div><div class="float">[f]</div>A B C D +E F G H</div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-026.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-026.html new file mode 100644 index 0000000000..741384f292 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-026.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: Dynamically changing -webkit-box-orient when -webkit-line-clamp applies</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-026-ref.html"> +<meta name="assert" content="Dynamically changing a -webkit-line-clamp affected element to be -webkit-box-orient:horizontal should cause the line clamp to be removed."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> +<p>Following content.</p> +<script> + document.body.offsetTop; + document.querySelector(".clamp").style.webkitBoxOrient = "horizontal"; +</script> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-027.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-027.html new file mode 100644 index 0000000000..93bfb0f4b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-027.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp and fieldset</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-027-ref.html"> +<meta name="assert" content="-webkit-line-clamp should skip over fieldsets."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp"><div>Line 1 +Line 2<fieldset>Line 3 +Line 4<legend>Line 5 +Line 6</legend></fieldset>Line 7 +Line 8</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-029.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-029.html new file mode 100644 index 0000000000..fc395d313e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-029.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp and scrollable items</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-029-ref.html"> +<meta name="assert" content="-webkit-line-clamp should apply to flex items that are scrollable."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.child { + overflow: hidden; +} +</style> +<div class="clamp"><div class="child">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-030.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-030.html new file mode 100644 index 0000000000..5e14a78a58 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-030.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp and scrollable container</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-030-ref.html"> +<meta name="assert" content="-webkit-line-clamp should apply to flex items when the container is scrollable."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px monospace; + white-space: pre; + background-color: yellow; + overflow: hidden; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-031.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-031.html new file mode 100644 index 0000000000..4f8c55301a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-031.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp and a line with inlines of different heights</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-031-ref.html"> +<meta name="assert" content="-webkit-line-clamp should clamp to the bottom of the line box."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +.big { + font-weight: bold; + border-top: 2px solid blue; + border-bottom: 2px solid blue; + padding: 20px 0; +} +</style> +<div class="clamp"><div>Line 1 +Line 2 +Line 3 <span class="big">BIG</span> +Line 4 +Line 5</div></div> +<p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-032.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-032.html new file mode 100644 index 0000000000..4d0731379d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-032.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with an ellipsis on a blank line</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-032-ref.html"> +<meta name="assert" content="-webkit-line-clamp should render an ellipsis on a blank line."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + font: 16px / 32px serif; + white-space: pre; + padding: 0 4px; + background-color: yellow; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 + +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-033.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-033.html new file mode 100644 index 0000000000..261cf5b6b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-033.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with an empty line</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="/css/reference/blank.html"> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div class="clamp"><div><span></span></div></div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-034.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-034.html new file mode 100644 index 0000000000..e0b31d544c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-034.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with visibility: hidden;</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="/css/reference/blank.html"> +<style> +#clamp { + visibility: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div id="clamp"> + AAAAAAAAA<br> + BBBBBBBBB<br> + CCCCCCCCC<br> + DDDDDDDDD<br> + EEEEEEEEE +</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-035.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-035.html new file mode 100644 index 0000000000..5a550e022e --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-035.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: -webkit-line-clamp with visibility: hidden; and visibility: visible; descendant</title> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-035-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +#parent { + display: inline-block; + background: green; +} +#clamp { + font-family: Ahem; + visibility: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + width: 4ch; + overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ +} +</style> +<div id="parent"> + <div id="clamp"> + <span style="visibility: visible"> + AAA<br> + BBB<br> + CCCCCCCCC<br> + DDDDDDDDD<br> + EEEEEEEEE + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-036.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-036.html new file mode 100644 index 0000000000..b8d7b194f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-036.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-036-ref.html"> +<meta name="assert" content="text-overflow: ellipsis shouldn't apply within a -webkit-line-clamp context."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + width: 10ch; + font: 16px / 32px monospace; + background-color: yellow; + padding: 4px; + overflow: hidden; + text-overflow: ellipsis; +} +</style> +<div class="clamp"> + supercalifragilisticexpialidocious + supercalifragilisticexpialidocious + supercalifragilisticexpialidocious +</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-037.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-037.html new file mode 100644 index 0000000000..86015228f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-037.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-037-ref.html"> +<meta name="assert" content="text-overflow: ellipsis shouldn't apply within a -webkit-line-clamp context."> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + width: 150px; + font: 16px / 32px monospace; + background-color: yellow; + padding: 4px; + overflow: hidden; + text-overflow: ellipsis; +} +</style> +<div class="clamp"> + supercalifragilisticexpialidocious + supercalifragilisticexpialidocious +</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-038.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-038.html new file mode 100644 index 0000000000..b50ae2764c --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-038.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-039.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-039.html new file mode 100644 index 0000000000..fe9436da53 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-039.html @@ -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> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-040.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-040.html new file mode 100644 index 0000000000..fa885c8088 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-040.html @@ -0,0 +1,23 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: line-clamp with explicit height</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-040-ref.html"> +<style> +.clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + height: 5em; +} +</style> +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +Line 5</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-041-crash.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-041-crash.html new file mode 100644 index 0000000000..3f4bf3c8ef --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-041-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1372637"> +<div style="columns:2; column-fill:auto; line-height:20px; height:40px; orphans:2; widows:2;"> + <div style="-webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical;"> + <br><br><br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-042-crash.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-042-crash.html new file mode 100644 index 0000000000..1a5fe2e246 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-042-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1372637"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-height:20px;"> + Line 1<br> + Line 2<br> + Line 3<br> + Line 4<br> + Line 5<br> + </div> + <div style="break-before:avoid; break-inside:avoid; height:50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-043.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-043.html new file mode 100644 index 0000000000..54f0ac538d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-043.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:3; column-fill:auto; gap:0; width:300px; height:250px;"> + <div style="display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:clip; line-height:50px; color:transparent; background:green;"> + <br> + <br> + <span style="color:red;"> + FAIL<br> + FAIL<br> + FAIL<br> + FAIL<br> + FAIL<br> + FAIL<br> + FAIL<br> + FAIL<br> + FAIL<br> + FAIL<br> + </span> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-block-in-inline-001.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-block-in-inline-001.html new file mode 100644 index 0000000000..75d1de3bf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-block-in-inline-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-block-in-inline-001-ref.html"> +<meta name="assert" content="-webkit-line-clamp correctly clamps a block-in-inline."> +<style> +.clamp { + display: -webkit-inline-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} +</style> +<body> + <div class="clamp"> + <span> + 1<br> + 2<br> + <div>3</div> + 4<br> + 5 + </span> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-dynamic-001.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-dynamic-001.html new file mode 100644 index 0000000000..fc4f2f9e4d --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-dynamic-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Overflow: appending to a box with -webkit-line-clamp</title> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-dynamic-001-ref.html"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +#container { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + font-size: 20px; + width: 10ch; +} +</style> +<body> + <div id="container"> + abc def ghi jkl mno pqr stu vwx yz + </div> +<script> +testAppend(); +function testAppend() { + document.body.offsetTop; + let span = document.createElement('span'); + span.textContent = '123 456 789'; + container.appendChild(span); +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-with-line-height.tentative.html b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-with-line-height.tentative.html new file mode 100644 index 0000000000..a82635f986 --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/webkit-line-clamp-with-line-height.tentative.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="match" href="reference/webkit-line-clamp-with-line-height-ref.html"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2847#issuecomment-468084957"> +<meta name="assert" content="This test checks that -webkit-line-clamp calculates respects line-height when calculating its block-size."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#test { + width: 100px; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + + border: solid thin grey; + font: 20px 'Ahem'; + line-height: 40px; +} +</style> +<p>This tests the -webkit-line-clamp property with line-height applied.</p> +<div id="test"> + XXXX XXX +</div> |