diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-scrollbars | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scrollbars')
32 files changed, 1555 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scrollbars/META.yml b/testing/web-platform/tests/css/css-scrollbars/META.yml new file mode 100644 index 0000000000..f7c0439e20 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/META.yml @@ -0,0 +1,3 @@ +spec: https://drafts.csswg.org/css-scrollbars/ +suggested_reviewers: + - upsuper diff --git a/testing/web-platform/tests/css/css-scrollbars/auto-scrollbar-inline-children.html b/testing/web-platform/tests/css/css-scrollbars/auto-scrollbar-inline-children.html new file mode 100644 index 0000000000..149cf942fe --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/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-scrollbars/inheritance.html b/testing/web-platform/tests/css/css-scrollbars/inheritance.html new file mode 100644 index 0000000000..1a630786b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/inheritance.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Scrollbars properties</title> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#property-index"> +<meta name="assert" content="Properties inherit 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('scrollbar-color', 'auto', 'rgb(1, 2, 3) rgb(4, 5, 6)'); +assert_not_inherited('scrollbar-width', 'auto', 'thin'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scrollbars/multicol-in-orthogonal-writing-mode-crash.html b/testing/web-platform/tests/css/css-scrollbars/multicol-in-orthogonal-writing-mode-crash.html new file mode 100644 index 0000000000..5a7378de2e --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/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-scrollbars/scrollbar-width-001.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html new file mode 100644 index 0000000000..21dfd3d116 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html @@ -0,0 +1,174 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width with horizontal text and vertical scrollbar</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + /* Use scrollbar-gutter to reserve space for the scrollbar. */ + .container { + scrollbar-gutter: stable; + writing-mode: horizontal-tb; + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 100%; + background: lightsalmon; + } + + /* writing directions */ + .ltr { + direction: ltr; + } + + .rtl { + direction: rtl; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } +</style> +<script type="text/javascript"> + + function performTest() { + setup({ explicit_done: true }); + + // ltr + + test(function () { + let container = document.getElementById('container_ltr_auto'); + let content = document.getElementById('content_ltr_auto'); + assert_less_than(container.scrollWidth, container.offsetWidth, "ltr auto scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "ltr auto offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "ltr auto clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr auto offsetWidth"); + }, "horizontal-tb, ltr, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_ltr_thin'); + let content = document.getElementById('content_ltr_thin'); + assert_less_than(container.scrollWidth, container.offsetWidth, "ltr thin scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "ltr thin clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "ltr thin offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "ltr thin clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr thin offsetWidth"); + }, "horizontal-tb, ltr, scrollbar-width thin"); + + test(function () { + let auto_scrollbar_width = + document.getElementById('container_ltr_auto').offsetWidth - + document.getElementById('container_ltr_auto').clientWidth; + let thin_scrollbar_width = + document.getElementById('container_ltr_thin').offsetWidth - + document.getElementById('container_ltr_thin').clientWidth; + assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "ltr, thin <= auto"); + }, 'horizontal-tb, ltr, scrollbar-width "thin" is same or thinner than "auto"'); + + test(function () { + let container = document.getElementById('container_ltr_none'); + let content = document.getElementById('content_ltr_none'); + assert_equals(container.scrollWidth, 200, "ltr none scrollWidth"); + assert_equals(container.clientWidth, 200, "ltr none clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "ltr none offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "ltr none clientWidth"); + assert_equals(container.offsetWidth, content.offsetWidth, "ltr none offsetWidth"); + }, "horizontal-tb, ltr, scrollbar-width none"); + + // rtl + + test(function () { + let container = document.getElementById('container_rtl_auto'); + let content = document.getElementById('content_rtl_auto'); + assert_less_than(container.scrollWidth, container.offsetWidth, "rtl auto scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); + assert_less_than(container.offsetLeft, content.offsetLeft, "rtl auto offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "rtl auto clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl auto offsetWidth"); + }, "horizontal-tb, rtl, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_rtl_thin'); + let content = document.getElementById('content_rtl_thin'); + assert_less_than(container.scrollWidth, container.offsetWidth, "rtl thin scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "rtl thin clientWidth"); + assert_less_than(container.offsetLeft, content.offsetLeft, "rtl thin offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "rtl thin clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl thin offsetWidth"); + }, "horizontal-tb, rtl, scrollbar-width thin"); + + test(function () { + let auto_scrollbar_width = + document.getElementById('container_rtl_auto').offsetWidth - + document.getElementById('container_rtl_auto').clientWidth; + let thin_scrollbar_width = + document.getElementById('container_rtl_thin').offsetWidth - + document.getElementById('container_rtl_thin').clientWidth; + assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "rtl, thin < auto"); + }, 'horizontal-tb, rtl, scrollbar-width "thin" is same or thinner than "auto"'); + + test(function () { + let container = document.getElementById('container_rtl_none'); + let content = document.getElementById('content_rtl_none'); + assert_equals(container.scrollWidth, 200, "rtl none scrollWidth"); + assert_equals(container.clientWidth, 200, "rtl none clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "rtl none offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "rtl none clientWidth"); + assert_equals(container.offsetWidth, content.offsetWidth, "rtl none offsetWidth"); + }, "horizontal-tb, rtl, scrollbar-width none"); + + done(); + } + +</script> + +<body onload="performTest()"> + + Test scrollbar-width: vertical scrollbar, ltr direction + + <div class="container ltr auto" id="container_ltr_auto"> + <div class="content" id="content_ltr_auto">auto</div> + </div> + + <div class="container ltr thin" id="container_ltr_thin"> + <div class="content" id="content_ltr_thin">thin</div> + </div> + + <div class="container ltr none" id="container_ltr_none"> + <div class="content" id="content_ltr_none">none</div> + </div> + + Test scrollbar-width: vertical scrollbar, rtl direction + + <div class="container rtl auto" id="container_rtl_auto"> + <div class="content" id="content_rtl_auto">auto</div> + </div> + + <div class="container rtl thin" id="container_rtl_thin"> + <div class="content" id="content_rtl_thin">thin</div> + </div> + + <div class="container rtl none" id="container_rtl_none"> + <div class="content" id="content_rtl_none">none</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html new file mode 100644 index 0000000000..15e6af963b --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html @@ -0,0 +1,167 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width with vertical text and horizontal scrollbar</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + /* Use scrollbar-gutter to reserve space for the scrollbar. */ + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 100%; + width: 300px; + background: lightsalmon; + } + + /* writing directions */ + .vertical-lr { + writing-mode: vertical-lr; + } + + .vertical-rl { + writing-mode: vertical-rl; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } +</style> +<script type="text/javascript"> + + function performTest() { + setup({ explicit_done: true }); + + // vertical-lr + + test(function () { + let container = document.getElementById('container_vlr_auto'); + let content = document.getElementById('content_vlr_auto'); + assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr auto scrollHeight"); + assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr auto clientHeight"); + assert_equals(container.clientHeight, content.clientHeight, "vertical-lr auto clientHeight"); + assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr auto offsetHeight"); + }, "vertical-lr, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_vlr_thin'); + let content = document.getElementById('content_vlr_thin'); + assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr thin scrollHeight"); + assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr thin clientHeight"); + assert_equals(container.clientHeight, content.clientHeight, "vertical-lr thin clientHeight"); + assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr thin offsetHeight"); + }, "vertical-lr, scrollbar-width thin"); + + test(function () { + let auto_scrollbar_height = + document.getElementById('container_vlr_auto').offsetHeight - + document.getElementById('container_vlr_auto').clientHeight; + let thin_scrollbar_height = + document.getElementById('container_vlr_thin').offsetHeight - + document.getElementById('container_vlr_thin').clientHeight; + assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-lr, thin <= auto"); + }, 'vertical-lr, scrollbar-width "thin" is same or thinner than "auto"'); + + test(function () { + let container = document.getElementById('container_vlr_none'); + let content = document.getElementById('content_vlr_none'); + assert_equals(container.scrollHeight, 200, "vertical-lr none scrollHeight"); + assert_equals(container.clientHeight, 200, "vertical-lr none clientHeight"); + assert_equals(container.clientHeight, content.clientHeight, "vertical-lr none clientHeight"); + assert_equals(container.offsetHeight, content.offsetHeight, "vertical-lr none offsetHeight"); + }, "vertical-lr, scrollbar-width none"); + + // vertical-rl + + test(function () { + let container = document.getElementById('container_vrl_auto'); + let content = document.getElementById('content_vrl_auto'); + assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl auto scrollHeight"); + assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl auto clientHeight"); + assert_equals(container.clientHeight, content.clientHeight, "vertical-rl auto clientHeight"); + assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl auto offsetHeight"); + }, "vertical-rl, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_vrl_thin'); + let content = document.getElementById('content_vrl_thin'); + assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl thin scrollHeight"); + assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl thin clientHeight"); + assert_equals(container.clientHeight, content.clientHeight, "vertical-rl thin clientHeight"); + assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl thin offsetHeight"); + }, "vertical-rl, scrollbar-width thin"); + + test(function () { + let auto_scrollbar_height = + document.getElementById('container_vrl_auto').offsetHeight - + document.getElementById('container_vrl_auto').clientHeight; + let thin_scrollbar_height = + document.getElementById('container_vrl_thin').offsetHeight - + document.getElementById('container_vrl_thin').clientHeight; + assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-rl, thin <= auto"); + }, 'vertical-rl, scrollbar-width "thin" is same or thinner than "auto"'); + + test(function () { + let container = document.getElementById('container_vrl_none'); + let content = document.getElementById('content_vrl_none'); + assert_equals(container.scrollHeight, 200, "vertical-rl none scrollHeight"); + assert_equals(container.clientHeight, 200, "vertical-rl none clientHeight"); + assert_equals(container.clientHeight, content.clientHeight, "vertical-rl none clientHeight"); + assert_equals(container.offsetHeight, content.offsetHeight, "vertical-rl none offsetHeight"); + }, "vertical-rl, scrollbar-width none"); + + done(); + } + +</script> + +<body onload="performTest()"> + + Test scrollbar-width: horizontal scrollbar, vertical-lr direction + + <div class="container vertical-lr auto" id="container_vlr_auto"> + <div class="content" id="content_vlr_auto">auto</div> + </div> + + <div class="container vertical-lr thin" id="container_vlr_thin"> + <div class="content" id="content_vlr_thin">thin</div> + </div> + + <div class="container vertical-lr none" id="container_vlr_none"> + <div class="content" id="content_vlr_none">none</div> + </div> + + Test scrollbar-width: horizontal scrollbar, vertical-rl direction + + <div class="container vertical-rl auto" id="container_vrl_auto"> + <div class="content" id="content_vrl_auto">auto</div> + </div> + + <div class="container vertical-rl thin" id="container_vrl_thin"> + <div class="content" id="content_vrl_thin">thin</div> + </div> + + <div class="container vertical-rl none" id="container_vrl_none"> + <div class="content" id="content_vrl_none">none</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html new file mode 100644 index 0000000000..7574e8daf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html @@ -0,0 +1,154 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width with horizontal text, and vertical and horizontal scrollbars</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + /* Use scrollbar-gutter to reserve space for the scrollbar. */ + .container { + scrollbar-gutter: stable; + writing-mode: horizontal-tb; + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 300px; + background: lightsalmon; + } + + /* writing directions */ + .ltr { + direction: ltr; + } + + .rtl { + direction: rtl; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } +</style> +<script type="text/javascript"> + + function performTest() { + setup({ explicit_done: true }); + + // ltr + + test(function () { + let container = document.getElementById('container_ltr_auto'); + let content = document.getElementById('content_ltr_auto'); + assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); + assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); + }, "horizontal-tb, ltr, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_ltr_thin'); + let content = document.getElementById('content_ltr_thin'); + assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); + assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); + }, "horizontal-tb, ltr, scrollbar-width thin"); + + test(function () { + let container = document.getElementById('container_ltr_none'); + let content = document.getElementById('content_ltr_none'); + assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); + assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); + assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); + assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); + }, "horizontal-tb, ltr, scrollbar-width none"); + + // rtl + + test(function () { + let container = document.getElementById('container_rtl_auto'); + let content = document.getElementById('content_rtl_auto'); + assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); + assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); + }, "horizontal-tb, rtl, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_rtl_thin'); + let content = document.getElementById('content_rtl_thin'); + assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); + assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); + }, "horizontal-tb, rtl, scrollbar-width thin"); + + test(function () { + let container = document.getElementById('container_rtl_none'); + let content = document.getElementById('content_rtl_none'); + assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); + assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); + assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); + assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); + }, "horizontal-tb, rtl, scrollbar-width none"); + + done(); + } + +</script> + +<body onload="performTest()"> + + Test scrollbar-width: both scrollbars, horizontal ltr + + <div class="container ltr auto" id="container_ltr_auto"> + <div class="content" id="content_ltr_auto">auto</div> + </div> + + <div class="container ltr thin" id="container_ltr_thin"> + <div class="content" id="content_ltr_thin">thin</div> + </div> + + <div class="container ltr none" id="container_ltr_none"> + <div class="content" id="content_ltr_none">none</div> + </div> + + Test scrollbar-width: both scrollbars, horizontal rtl + + <div class="container rtl auto" id="container_rtl_auto"> + <div class="content" id="content_rtl_auto">auto</div> + </div> + + <div class="container rtl thin" id="container_rtl_thin"> + <div class="content" id="content_rtl_thin">thin</div> + </div> + + <div class="container rtl none" id="container_rtl_none"> + <div class="content" id="content_rtl_none">none</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html new file mode 100644 index 0000000000..bdd1cd61db --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html @@ -0,0 +1,154 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width with vertical text, and vertical and horizontal scrollbars</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + /* Use scrollbar-gutter to reserve space for the scrollbar. */ + .container { + scrollbar-gutter: stable; + writing-mode: horizontal-tb; + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 300px; + background: lightsalmon; + } + + /* writing directions */ + .vertical-lr { + writing-mode: vertical-lr; + } + + .vertical-rl { + writing-mode: vertical-rl; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } +</style> +<script type="text/javascript"> + + function performTest() { + setup({ explicit_done: true }); + + // vertical-lr + + test(function () { + let container = document.getElementById('container_vlr_auto'); + let content = document.getElementById('content_vlr_auto'); + assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); + assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); + }, "vertical-lr, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_vlr_thin'); + let content = document.getElementById('content_vlr_thin'); + assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); + assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); + }, "vertical-lr, scrollbar-width thin"); + + test(function () { + let container = document.getElementById('container_vlr_none'); + let content = document.getElementById('content_vlr_none'); + assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight"); + assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth"); + assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight"); + assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft"); + }, "vertical-lr, scrollbar-width none"); + + // vertical-rl + + test(function () { + let container = document.getElementById('container_vrl_auto'); + let content = document.getElementById('content_vrl_auto'); + assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); + assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); + }, "vertical-rl, scrollbar-width auto"); + + test(function () { + let container = document.getElementById('container_vrl_thin'); + let content = document.getElementById('content_vrl_thin'); + assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); + assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); + assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); + assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); + }, "vertical-rl, scrollbar-width thin"); + + test(function () { + let container = document.getElementById('container_vrl_none'); + let content = document.getElementById('content_vrl_none'); + assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth"); + assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight"); + assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth"); + assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight"); + assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft"); + }, "vertical-rl, scrollbar-width none"); + + done(); + } + +</script> + +<body onload="performTest()"> + + Test scrollbar-width: both scrollbars, vertical-lr + + <div class="container vertical-lr auto" id="container_vlr_auto"> + <div class="content" id="content_vlr_auto">auto</div> + </div> + + <div class="container vertical-lr thin" id="container_vlr_thin"> + <div class="content" id="content_vlr_thin">thin</div> + </div> + + <div class="container vertical-lr none" id="container_vlr_none"> + <div class="content" id="content_vlr_none">none</div> + </div> + + Test scrollbar-width: both scrollbars, vertical-rl + + <div class="container vertical-rl auto" id="container_vrl_auto"> + <div class="content" id="content_vrl_auto">auto</div> + </div> + + <div class="container vertical-rl thin" id="container_vrl_thin"> + <div class="content" id="content_vrl_thin">thin</div> + </div> + + <div class="container vertical-rl none" id="container_vrl_none"> + <div class="content" id="content_vrl_none">none</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html new file mode 100644 index 0000000000..62313f0216 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html @@ -0,0 +1,60 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width:auto on the root element</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + :root { + /* CSS scrollbar properties applied to the root element + will be propagated to the viewport. */ + scrollbar-width: auto; + /* Use scrollbar-gutter to reserve space for the scrollbar. */ + scrollbar-gutter: stable; + } + + :root, + body { + margin: 0; + padding: 0; + } + + #content { + height: 10vh; + width: 100%; + background: lightsalmon; + } + + #expander { + /* force vertical scroll */ + height: 200vh; + width: 300px; + background: gray; + } +</style> + +<body> + + <div id="content"></div> + + <div id="expander"></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.offsetWidth, window.innerWidth, "viewport has a scrollbar"); + assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); + assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); + }, "viewport displays a scrollbar"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html new file mode 100644 index 0000000000..488e24d554 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html @@ -0,0 +1,60 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width:thin on the root element</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + :root { + /* CSS scrollbar properties applied to the root element + will be propagated to the viewport. */ + scrollbar-width: thin; + /* Use scrollbar-gutter to reserve space for the scrollbar. */ + scrollbar-gutter: stable; + } + + :root, + body { + margin: 0; + padding: 0; + } + + #content { + height: 10vh; + width: 100%; + background: lightsalmon; + } + + #expander { + /* force vertical scroll */ + height: 200vh; + width: 300px; + background: gray; + } +</style> + +<body> + + <div id="content"></div> + + <div id="expander"></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.offsetWidth, window.innerWidth, "viewport has a scrollbar"); + assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); + assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); + }, "viewport displays a scrollbar"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html new file mode 100644 index 0000000000..500c7ef090 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html @@ -0,0 +1,60 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width:none on the root element</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + :root { + /* CSS scrollbar properties applied to the root element + will be propagated to the viewport. */ + scrollbar-width: none; + /* Use scrollbar-gutter to reserve space for the scrollbar. */ + scrollbar-gutter: stable; + } + + :root, + body { + margin: 0; + padding: 0; + } + + #content { + height: 10vh; + width: 100%; + background: lightsalmon; + } + + #expander { + /* force vertical scroll */ + height: 200vh; + width: 300px; + background: gray; + } +</style> + +<body> + + <div id="content"></div> + + <div id="expander"></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(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar"); + assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); + assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); + }, "viewport does not display a scrollbar"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html new file mode 100644 index 0000000000..91e2cc7f06 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html @@ -0,0 +1,66 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width on the body is not propagated</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + :root { + /* CSS scrollbar properties applied to the root element + will be propagated to the viewport. */ + scrollbar-width: thin; + overflow: visible; + } + + body { + /* overflow is propagated as well */ + overflow: scroll; + /* but CSS scrollbar properties applied to the body are not propagated */ + scrollbar-width: none; + } + + :root, + body { + margin: 0; + padding: 0; + } + + #content { + height: 10vh; + width: 100%; + background: lightsalmon; + } + + #expander { + /* force vertical scroll */ + height: 200vh; + width: 300px; + background: gray; + } +</style> + +<body> + + <div id="content"></div> + + <div id="expander"></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.offsetWidth, window.innerWidth, "viewport has a scrollbar"); + assert_equals(body.offsetWidth, root.offsetWidth, "body matches root"); + assert_equals(content.offsetWidth, body.offsetWidth, "content matches body"); + }, "viewport displays a scrollbar"); + + done(); + + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html new file mode 100644 index 0000000000..94ccd6ef6d --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="author" title="Xidorn Quan" href="mailto:me@upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .area { + width: 100px; + height: 100px; + overflow: auto; + display: inline-block; + } + .area::before { + content: ""; + display: block; + width: 200px; + height: 200px; + } +</style> +<div id="scrollbar-none" class="area" style="scrollbar-width: none"></div> +<div id="scrollbar-thin" class="area" style="scrollbar-width: thin"></div> +<div id="scrollbar-auto" class="area" style="scrollbar-width: auto"></div> +<script> +test(function() { + let elem = document.getElementById("scrollbar-none"); + assert_equals(elem.clientWidth, 100); + assert_equals(elem.clientHeight, 100); +}, "scrollbar-width: none should have no scrollbar"); + +test(function() { + let thin = document.getElementById("scrollbar-thin"); + let auto = document.getElementById("scrollbar-auto"); + assert_greater_than_equal(thin.clientWidth, auto.clientWidth); + assert_greater_than_equal(thin.clientHeight, auto.clientHeight); +}, "scrollbar-width: thin should have scrollbar no wider than auto"); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html new file mode 100644 index 0000000000..42295b1fb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html @@ -0,0 +1,62 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + } + + .container { + scrollbar-gutter: stable; + flex: 0 0; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 300px; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } + + .content.plain { + background: red; + } + + .content.gradient { + background: linear-gradient(135deg, red, blue); + } +</style> +<div id="one" class="container thin"> + <div class="content plain"></div> +</div> +<div id="two" class="container auto"> + <div class="content plain"></div> +</div> +<div id="three" class="container auto"> + <div class="content plain"></div> +</div> +<div id="four" class="container none"> + <div class="content gradient"></div> +</div> +<div id="five" class="container none"> + <div class="content gradient"></div> +</div> +<div id="six" class="container thin"> + <div class="content gradient"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html new file mode 100644 index 0000000000..3621a65b39 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html @@ -0,0 +1,80 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Scrollbars: paint test when updating scrollbar-width, with scrolling content</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="match" href="scrollbar-width-paint-001-ref.html" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/common/reftest-wait.js"></script> +<style> + body { + display: flex; + flex-wrap: wrap; + } + + .container { + scrollbar-gutter: stable; + overflow: auto; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 300px; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } + + .content.plain { + background: red; + } + + .content.gradient { + background: linear-gradient(135deg, red, blue); + } +</style> +<div id="one" class="container auto"> + <div class="content plain"></div> +</div> +<div id="two" class="container thin"> + <div class="content plain"></div> +</div> +<div id="three" class="container none"> + <div class="content plain"></div> +</div> +<div id="four" class="container auto"> + <div class="content gradient"></div> +</div> +<div id="five" class="container thin"> + <div class="content gradient"></div> +</div> +<div id="six" class="container none"> + <div class="content gradient"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.getElementById('one').style.scrollbarWidth = 'thin'; + document.getElementById('two').style.scrollbarWidth = 'auto'; + document.getElementById('three').style.scrollbarWidth = 'auto'; + document.getElementById('four').style.scrollbarWidth = 'none'; + document.getElementById('five').style.scrollbarWidth = 'none'; + document.getElementById('six').style.scrollbarWidth = 'thin'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html new file mode 100644 index 0000000000..001495767f --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html @@ -0,0 +1,62 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + } + + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 100%; + width: 100%; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } + + .content.plain { + background: red; + } + + .content.gradient { + background: linear-gradient(135deg, red, blue); + } +</style> +<div id="one" class="container thin"> + <div class="content plain"></div> +</div> +<div id="two" class="container auto"> + <div class="content plain"></div> +</div> +<div id="three" class="container auto"> + <div class="content plain"></div> +</div> +<div id="four" class="container none"> + <div class="content gradient"></div> +</div> +<div id="five" class="container none"> + <div class="content gradient"></div> +</div> +<div id="six" class="container thin"> + <div class="content gradient"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html new file mode 100644 index 0000000000..1b3965032b --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html @@ -0,0 +1,80 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Scrollbars: paint test when updating scrollbar-width, with overflow:auto</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" /> +<link rel="match" href="scrollbar-width-paint-002-ref.html" /> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" /> +<script src="/common/reftest-wait.js"></script> +<style> + body { + display: flex; + flex-wrap: wrap; + } + + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 100%; + width: 100%; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.thin { + scrollbar-width: thin; + } + + .container.none { + scrollbar-width: none; + } + + .content.plain { + background: red; + } + + .content.gradient { + background: linear-gradient(135deg, red, blue); + } +</style> +<div id="one" class="container auto"> + <div class="content plain"></div> +</div> +<div id="two" class="container thin"> + <div class="content plain"></div> +</div> +<div id="three" class="container none"> + <div class="content plain"></div> +</div> +<div id="four" class="container auto"> + <div class="content gradient"></div> +</div> +<div id="five" class="container thin"> + <div class="content gradient"></div> +</div> +<div id="six" class="container none"> + <div class="content gradient"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.getElementById('one').style.scrollbarWidth = 'thin'; + document.getElementById('two').style.scrollbarWidth = 'auto'; + document.getElementById('three').style.scrollbarWidth = 'auto'; + document.getElementById('four').style.scrollbarWidth = 'none'; + document.getElementById('five').style.scrollbarWidth = 'none'; + document.getElementById('six').style.scrollbarWidth = 'thin'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html new file mode 100644 index 0000000000..b7acab4a8f --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + :root { overflow: scroll; scrollbar-color: green green; } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html new file mode 100644 index 0000000000..516c620551 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html @@ -0,0 +1,22 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width correctly updates with overflow: scroll</title> +<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="scrollbar-width-paint-003-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/"> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + overflow: scroll; + scrollbar-width: thin; + scrollbar-color: green green; + } +</style> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.scrollbarWidth = 'auto'; + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html new file mode 100644 index 0000000000..2d45fe230a --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Overflow: parsing scrollbar-width declarations</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/"/> +<meta name="assert" content="Parsing scrollbar-width 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-width", "auto"); + test_valid_value("scrollbar-width", "thin"); + test_valid_value("scrollbar-width", "none"); + + test_invalid_value("scrollbar-width", ""); + test_invalid_value("scrollbar-width", "auto none"); + test_invalid_value("scrollbar-width", "thin auto"); + test_invalid_value("scrollbar-width", "none thin"); + test_invalid_value("scrollbar-width", "auto thin none"); + test_invalid_value("scrollbar-width", "tiny"); + test_invalid_value("scrollbar-width", "enormous"); + test_invalid_value("scrollbar-width", "12px"); + test_invalid_value("scrollbar-width", "3em"); + test_invalid_value("scrollbar-width", "20%"); + test_invalid_value("scrollbar-width", "#FF0000"); + test_invalid_value("scrollbar-width", "red green"); + +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001-ref.html new file mode 100644 index 0000000000..1bf59f90e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/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-scrollbars/scrollbars-chrome-bug-001.html b/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001.html new file mode 100644 index 0000000000..643781bac8 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/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-scrollbars/support/viewport-scrollbar-body-frame.html b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html new file mode 100644 index 0000000000..8dacffefb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<style> +body { + scrollbar-color: yellow blue; +} +html, body { + margin: 0; + padding: 0; +} +#inner { + width: 400px; + height: 400px; +} +</style> +<body> +<div id="inner"></div> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html new file mode 100644 index 0000000000..04a4a2fa2d --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<style> +html { + scrollbar-color: yellow blue; +} +html, body { + margin: 0; + padding: 0; +} +#inner { + width: 400px; + height: 400px; +} +</style> +<div id="inner"></div> diff --git a/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html new file mode 100644 index 0000000000..9f505dd7f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> + textarea { + overflow: hidden; + white-space: pre; + } +</style> +<textarea cols="10" rows="10"></textarea> +<script> + let textarea = document.querySelector("textarea"); + textarea.value = ('X'.repeat(100) + '\n').repeat(100); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html new file mode 100644 index 0000000000..dcfaf5b627 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Test: scrollbar-width should apply on <textarea></title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width"> +<link rel="match" href="textarea-scrollbar-width-none-ref.html"> +<style> + textarea { + scrollbar-width: none; + white-space: pre; + } +</style> +<textarea cols="10" rows="10"></textarea> +<script> + let textarea = document.querySelector("textarea"); + textarea.value = ('X'.repeat(100) + '\n').repeat(100); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html new file mode 100644 index 0000000000..a5b2de4f00 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: non-opaque scrollbar-color should work on the root</title> +<style> +:root { + background-color: black; +} +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html new file mode 100644 index 0000000000..fcab71127d --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: non-opaque scrollbar-color should work on the root</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties"> +<link rel="match" href="transparent-on-root-ref.html"> +<style> +:root { + overflow: scroll; + scrollbar-color: transparent transparent; + background-color: black; +} +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html new file mode 100644 index 0000000000..4e07903e2c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference: unstyled scrollbars</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties"> +<style> +#outer { + border: 1px solid black; + width: 200px; height: 200px; + overflow: scroll; +} +#inner { + width: 400px; height: 400px; +} +</style> +<p>Test passes if the scrollbars in the following box are NOT styled:</p> +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html new file mode 100644 index 0000000000..a1b3aee871 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Test: scrollbar style on body element should not be propagated to the viewport</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties"> +<link rel="match" href="viewport-scrollbar-body-ref.html"> +<style> +iframe { + border: 1px solid black; + width: 200px; height: 200px; +} +</style> +<p>Test passes if the scrollbars in the following box are NOT styled:</p> +<iframe src="support/viewport-scrollbar-body-frame.html"></iframe> diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html new file mode 100644 index 0000000000..d6df3b49e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference: styled scrollbars</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties"> +<style> +#outer { + border: 1px solid black; + width: 200px; height: 200px; + overflow: scroll; + scrollbar-color: yellow blue; +} +#inner { + width: 400px; height: 400px; +} +</style> +<p>Test passes if the scrollbars in the following box are styled:</p> +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html new file mode 100644 index 0000000000..500da7a9f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Test: scrollbar style on root element should be propagated to the viewport</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties"> +<link rel="match" href="viewport-scrollbar-ref.html"> +<style> +iframe { + border: 1px solid black; + width: 200px; height: 200px; +} +</style> +<p>Test passes if the scrollbars in the following box are styled:</p> +<iframe src="support/viewport-scrollbar-frame.html"></iframe> |