diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-scrollbars | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scrollbars')
105 files changed, 4198 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/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/input-scrollbar-color-ref.html b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color-ref.html new file mode 100644 index 0000000000..389cf34b71 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Reference</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> +<input> diff --git a/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html new file mode 100644 index 0000000000..fa03b1391e --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS Test: scrollbar-color shouldn't cause scrollbars in inputs</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color"> +<link rel="match" href="input-scrollbar-color-ref.html"> +<style> + :root { + scrollbar-color: red yellow; + } +</style> +<input> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html new file mode 100644 index 0000000000..c056990934 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html @@ -0,0 +1,62 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-color auto on the root defers to ::-webkit-scrollbar</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/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 { + scrollbar-color: auto; + } + + :root::-webkit-scrollbar { + display: none; + } + + /* This is so that browsers that don't implement the WebKit prefix still pass the test */ + @supports not selector(::-webkit-scrollbar) { + :root { + overflow: hidden; + } + } + + :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> + 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"); + }, "scrollbar-color auto on the root defers to ::-webkit-scrollbar"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html new file mode 100644 index 0000000000..70bfa5586d --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html @@ -0,0 +1,55 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-color non-auto on the root overrides ::-webkit-scrollbar</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/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 { + scrollbar-color: yellow blue; + } + + :root::-webkit-scrollbar { + display: 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> + 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"); + }, "scrollbar-color non-auto on the root overrides ::-webkit-scrollbar"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html new file mode 100644 index 0000000000..3fb42bedea --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html @@ -0,0 +1,89 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-color on scrollable areas correctly interacts with ::-webkit-scrollbar on container</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + .container { + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 100%; + background: lightsalmon; + } + + .container.auto { + scrollbar-color: auto; + } + + .container.auto::-webkit-scrollbar { + display: none; + } + + /* This is so that browsers that don't implement the WebKit prefix still pass the test */ + @supports not selector(::-webkit-scrollbar) { + .container.auto { + overflow: hidden; + } + } + + .container.themed { + scrollbar-color: yellow blue; + } + + .container.themed::-webkit-scrollbar { + display: none; + } +</style> +<script> + function performTest() { + setup({ explicit_done: true }); + + test(function () { + let container = document.getElementById('container_auto'); + let content = document.getElementById('content_auto'); + assert_equals(container.scrollWidth, 200, "auto scrollWidth"); + assert_equals(container.clientWidth, 200, "auto clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "auto offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "auto clientWidth"); + assert_equals(container.offsetWidth, content.offsetWidth, "auto offsetWidth"); + }, "scrollbar-color auto defers to ::-webkit-scrollbar"); + + test(function () { + let container = document.getElementById('container_themed'); + let content = document.getElementById('content_themed'); + assert_less_than(container.scrollWidth, container.offsetWidth, "themed scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "themed clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "themed offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "themed clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "themed offsetWidth"); + }, "scrollbar-color yellow blue overrides ::-webkit-scrollbar"); + + done(); + } +</script> + +<body onload="performTest()"> + + Test scrollbar-color: vertical scrollbar + + <div class="container auto" id="container_auto"> + <div class="content" id="content_auto">auto</div> + </div> + + <div class="container themed" id="container_themed"> + <div class="content" id="content_themed">themed</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html new file mode 100644 index 0000000000..5932cc5d4e --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html @@ -0,0 +1,60 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + .container { + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 100%; + background: lightsalmon; + } + + body { + scrollbar-color: yellow blue; + } + + ::-webkit-scrollbar { + display: none; + } +</style> +<script> + function performTest() { + setup({ explicit_done: true }); + + test(function () { + let container = document.getElementById('container_themed'); + let content = document.getElementById('content_themed'); + assert_less_than(container.scrollWidth, container.offsetWidth, "themed scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "themed clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "themed offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "themed clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "themed offsetWidth"); + }, "scrollbar-color yellow blue on body overrides ::-webkit-scrollbar"); + + done(); + } +</script> + +<body onload="performTest()"> + + Test scrollbar-color: vertical scrollbar + + <div class="container themed" id="container_themed"> + <div class="content" id="content_themed">themed</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html new file mode 100644 index 0000000000..52d0027fba --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html @@ -0,0 +1,60 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar on scrollable area</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + .container { + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 100%; + background: lightsalmon; + } + + body { + scrollbar-color: yellow blue; + } + + .container::-webkit-scrollbar { + display: none; + } +</style> +<script> + function performTest() { + setup({ explicit_done: true }); + + test(function () { + let container = document.getElementById('container_themed'); + let content = document.getElementById('content_themed'); + assert_less_than(container.scrollWidth, container.offsetWidth, "themed scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "themed clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "themed offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "themed clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "themed offsetWidth"); + }, "scrollbar-color yellow blue on body overrides ::-webkit-scrollbar on scrollable area"); + + done(); + } +</script> + +<body onload="performTest()"> + + Test scrollbar-color: vertical scrollbar + + <div class="container themed" id="container_themed"> + <div class="content" id="content_themed">themed</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html new file mode 100644 index 0000000000..2fc46863e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html new file mode 100644 index 0000000000..f1822b8184 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: yellow blue; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html new file mode 100644 index 0000000000..11f0de750b --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html @@ -0,0 +1,33 @@ +<!doctype html> +<html> +<title>CSS Scrollbars: scrollbar-color on scrollable areas correctly interacts with ::-webkit-scrollbar-corner</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="match" href="scrollbar-color-006-ref.html" /> +<link rel="mismatch" href="scrollbar-color-006-mis-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: yellow blue; + } + + ::-webkit-scrollbar-corner { + background-color: purple; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html new file mode 100644 index 0000000000..2fc46863e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html new file mode 100644 index 0000000000..f1822b8184 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: yellow blue; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html new file mode 100644 index 0000000000..75358fdf68 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html @@ -0,0 +1,33 @@ +<!doctype html> +<html> +<title>CSS Scrollbars: scrollbar-color on scrollable areas correctly interacts with ::-webkit-scrollbar-corner on container</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="match" href="scrollbar-color-007-ref.html" /> +<link rel="mismatch" href="scrollbar-color-007-mis-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: yellow blue; + } + + .container::-webkit-scrollbar-corner { + background-color: purple; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html new file mode 100644 index 0000000000..2fc46863e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html new file mode 100644 index 0000000000..f1822b8184 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> +<style> + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: yellow blue; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html new file mode 100644 index 0000000000..576193814c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> +<title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar-corner on container</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="match" href="scrollbar-color-008-ref.html" /> +<link rel="mismatch" href="scrollbar-color-008-mis-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<style> + body { + scrollbar-color: yellow blue; + } + + .container { + scrollbar-gutter: stable; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .container::-webkit-scrollbar-corner { + background-color: purple; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div id="one" class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html new file mode 100644 index 0000000000..2b611afbe2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<html> +<style> + body { + overflow: scroll; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html new file mode 100644 index 0000000000..890179a21c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<html> +<style> + :root { + scrollbar-color: yellow blue; + } + + body { + overflow: scroll; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html new file mode 100644 index 0000000000..312bbc731b --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html @@ -0,0 +1,20 @@ +<!doctype html> +<html> +<title>CSS Scrollbars: scrollbar-color on root correctly interacts with ::-webkit-scrollbar-corner</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="match" href="scrollbar-color-009-ref.html" /> +<link rel="mismatch" href="scrollbar-color-009-mis-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<style> + :root { + scrollbar-color: yellow blue; + } + + body { + overflow: scroll; + } + + ::-webkit-scrollbar-corner { + background-color: purple; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html new file mode 100644 index 0000000000..2b611afbe2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<html> +<style> + body { + overflow: scroll; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html new file mode 100644 index 0000000000..890179a21c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<html> +<style> + :root { + scrollbar-color: yellow blue; + } + + body { + overflow: scroll; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html new file mode 100644 index 0000000000..9f560613e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html @@ -0,0 +1,20 @@ +<!doctype html> +<html> +<title>CSS Scrollbars: scrollbar-color on root correctly interacts with ::-webkit-scrollbar-corner on body</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="match" href="scrollbar-color-010-ref.html" /> +<link rel="mismatch" href="scrollbar-color-010-mis-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<style> + :root { + scrollbar-color: yellow blue; + } + + body { + overflow: scroll; + } + + body::-webkit-scrollbar-corner { + background-color: purple; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html new file mode 100644 index 0000000000..58626ef982 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<html> +<style> + :root { + color: blue; + } + + body { + overflow: scroll; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-ref.html new file mode 100644 index 0000000000..a4db731eb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> +<style> + :root { + scrollbar-color: blue blue; + color: blue; + } + + body { + overflow: scroll; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html new file mode 100644 index 0000000000..3df5f843e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html @@ -0,0 +1,17 @@ +<!doctype html> +<html> +<title>CSS Scrollbars: scrollbar-color with current color works correctly</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="match" href="scrollbar-color-011-ref.html" /> +<link rel="mismatch" href="scrollbar-color-011-mis-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<style> + :root { + scrollbar-color: currentColor currentColor; + color: blue; + } + + body { + overflow: scroll; + } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html new file mode 100644 index 0000000000..1effaf3922 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<html> +<style> + .container { + overflow: auto; + height: 200px; + width: 200px; + background-color: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html new file mode 100644 index 0000000000..974c6012b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> +<title>scrollbar-color with transparent colors works</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="match" href="scrollbar-color-012-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars" /> +<style> + html {scrollbar-color: transparent transparent;} + body {height: 200vh} + .container { + overflow: auto; + height: 200px; + width: 200px; + background-color: red; + } + + .content { + height: 300px; + width: 300px; + } +</style> +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html new file mode 100644 index 0000000000..a37205392c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html new file mode 100644 index 0000000000..b431edf424 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<style> + :root { + scrollbar-color: blue green; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html new file mode 100644 index 0000000000..9a03bcddc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html @@ -0,0 +1,47 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set scrollbar-colors and ensure scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars" /> +<link rel="match" href="scrollbar-color-dynamic-1-ref.html" /> +<link rel="mismatch" href="scrollbar-color-dynamic-1-mis-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + scrollbar-color: red yellow; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.scrollbarColor = 'blue green'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html new file mode 100644 index 0000000000..58b50991c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html @@ -0,0 +1,20 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html new file mode 100644 index 0000000000..94e5841ef2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<style> + :root { + scrollbar-color: blue green; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html new file mode 100644 index 0000000000..f2faeb3921 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html @@ -0,0 +1,37 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set scrollbar-color and ensure overflow scroll scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> +<link rel="match" href="scrollbar-color-dynamic-2-ref.html" /> +<link rel="mismatch" href="scrollbar-color-dynamic-2-mis-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + scrollbar-color: red yellow; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.scrollbarColor = 'blue green'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html new file mode 100644 index 0000000000..8624c0526c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html @@ -0,0 +1,32 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .container { + scrollbar-color: blue green; + 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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html new file mode 100644 index 0000000000..3551f3bbaa --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<style> + :root { + scrollbar-color: red yellow; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .container { + scrollbar-color: blue green; + 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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html new file mode 100644 index 0000000000..91bc4692ae --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html @@ -0,0 +1,47 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set scrollbar-color on container and ensure scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> +<link rel="match" href="scrollbar-color-dynamic-3-ref.html" /> +<link rel="mismatch" href="scrollbar-color-dynamic-3-mis-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + scrollbar-color: red yellow; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector(".container").style.scrollbarColor = 'blue green'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html new file mode 100644 index 0000000000..4cf26154b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-color: blue green; + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html new file mode 100644 index 0000000000..b10df54148 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<style> + :root { + scrollbar-color: red yellow; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-color: blue green; + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html new file mode 100644 index 0000000000..c2a5a8b844 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html @@ -0,0 +1,37 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set scrollbar-color on container with overflow scroll and ensure scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> +<link rel="match" href="scrollbar-color-dynamic-4-ref.html" /> +<link rel="mismatch" href="scrollbar-color-dynamic-4-mis-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + scrollbar-color: red yellow; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector(".container").style.scrollbarColor = 'blue green'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html new file mode 100644 index 0000000000..a37205392c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html new file mode 100644 index 0000000000..667d5b3be3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<style> + :root { + scrollbar-color: green green; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html new file mode 100644 index 0000000000..42648850b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html @@ -0,0 +1,48 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set color and ensure scrollbars using currentcolor update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars" /> +<link rel="match" href="scrollbar-color-dynamic-5-ref.html" /> +<link rel="mismatch" href="scrollbar-color-dynamic-5-mis-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + scrollbar-color: currentColor currentColor; + color: blue; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.color = 'green'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html new file mode 100644 index 0000000000..ed0790acde --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html @@ -0,0 +1,32 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .container { + scrollbar-gutter: stable; + flex: 0 0; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: green green; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html new file mode 100644 index 0000000000..d4c6a16981 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<style> + :root { + scrollbar-color: blue blue; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .container { + scrollbar-gutter: stable; + flex: 0 0; + overflow: auto; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: green green; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html new file mode 100644 index 0000000000..63b1e36942 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html @@ -0,0 +1,50 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set color on container and ensure scrollbars using currentcolor update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars" /> +<link rel="match" href="scrollbar-color-dynamic-6-ref.html" /> +<link rel="mismatch" href="scrollbar-color-dynamic-6-mis-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + scrollbar-color: currentColor currentColor; + color: blue; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .container { + scrollbar-gutter: stable; + overflow: auto; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + scrollbar-color: currentColor currentColor; + color: blue; + } + + .content { + height: 300px; + width: 300px; + background: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector(".container").style.color = 'green'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html new file mode 100644 index 0000000000..a37205392c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<style> + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-ref.html new file mode 100644 index 0000000000..b431edf424 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<style> + :root { + scrollbar-color: blue green; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html new file mode 100644 index 0000000000..71bb93fb72 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html @@ -0,0 +1,47 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set scrollbar-colors when starts auto and ensure scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars" /> +<link rel="match" href="scrollbar-color-dynamic-7-ref.html" /> +<link rel="mismatch" href="scrollbar-color-dynamic-7-mis-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + scrollbar-color: auto; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.scrollbarColor = 'blue green'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html new file mode 100644 index 0000000000..17b649d54c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html @@ -0,0 +1,26 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: parsing scrollbar-color declarations</title> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/"/> +<meta name="assert" content="Parsing scrollbar-color 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-color', 'initial'); + test_valid_value('scrollbar-color', 'inherit'); + test_valid_value('scrollbar-color', 'unset'); + test_valid_value('scrollbar-color', 'revert'); + test_valid_value('scrollbar-color', 'auto'); + test_valid_value("scrollbar-color", "red green"); + test_valid_value("scrollbar-color", "#FF0000 #00FF00", "rgb(255, 0, 0) rgb(0, 255, 0)"); + test_valid_value("scrollbar-color", "currentcolor currentcolor"); + + test_invalid_value("scrollbar-color", ""); + test_invalid_value("scrollbar-color", "auto auto"); + test_invalid_value("scrollbar-color", "auto currentcolor"); + test_invalid_value("scrollbar-color", "red"); + test_invalid_value("scrollbar-color", "#FF0000"); + +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html new file mode 100644 index 0000000000..ec54bc08a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html @@ -0,0 +1,34 @@ +<!doctype html> +<style> + :root { + color-scheme: dark; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html new file mode 100644 index 0000000000..71fd97f274 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html @@ -0,0 +1,46 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set color-scheme and ensure scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> +<link rel="match" href="scrollbar-color-scheme-dynamic-1-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + color-scheme: light; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.colorScheme = 'dark'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html new file mode 100644 index 0000000000..906fb11cd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<style> + :root { + color-scheme: dark; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html new file mode 100644 index 0000000000..111219c7d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html @@ -0,0 +1,36 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set color-scheme and ensure viewport scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> +<link rel="match" href="scrollbar-color-scheme-dynamic-2-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + color-scheme: light; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.colorScheme = 'dark'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html new file mode 100644 index 0000000000..e9e842caea --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<style> + :root { + color-scheme: light; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .container { + color-scheme: dark; + 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; + background: red; + } +</style> + +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html new file mode 100644 index 0000000000..47105f0c6d --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html @@ -0,0 +1,46 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set color-scheme and ensure scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> +<link rel="match" href="scrollbar-color-scheme-dynamic-3-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + color-scheme: light; + } + body { + display: flex; + flex-wrap: wrap; + width: 200vw; + height: 200vh; + } + + .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; + background: red; + } +</style> +<div class="container"> + <div class="content"></div> +</div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector(".container").style.colorScheme = 'dark'; + + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html new file mode 100644 index 0000000000..0456198235 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<style> + :root { + color-scheme: light; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + color-scheme: dark; + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html new file mode 100644 index 0000000000..9655a0ebb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html @@ -0,0 +1,36 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Dynamically set color-scheme and ensure viewport scrollbars update</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> +<link rel="match" href="scrollbar-color-scheme-dynamic-4-ref.html" /> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + color-scheme: light; + } + body { + display: flex; + flex-wrap: wrap; + overflow: scroll; + } + .container { + scrollbar-gutter: stable; + overflow: scroll; + flex: 0 0; + height: 200px; + min-width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } +</style> +<div class="container"></div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.querySelector(".container").style.colorScheme = 'dark'; + + takeScreenshot(); + })); +</script> 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-009.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-009.html new file mode 100644 index 0000000000..494ffe3446 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-009.html @@ -0,0 +1,60 @@ +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width on the body is not propagated quirks mode</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/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> + 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"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html new file mode 100644 index 0000000000..ea11703067 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html @@ -0,0 +1,62 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width auto on the root defers to ::-webkit-scrollbar on the root</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/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 { + scrollbar-width: auto; + } + + :root::-webkit-scrollbar { + display: none; + } + + /* This is so that browsers that don't implement the WebKit prefix still pass the test */ + @supports not selector(::-webkit-scrollbar) { + :root { + overflow: hidden; + } + } + + :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> + 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"); + }, "scrollbar-width auto on the root defers to ::-webkit-scrollbar"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html new file mode 100644 index 0000000000..a5f60dc28b --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html @@ -0,0 +1,55 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width thin on the root overrides ::-webkit-scrollbar on the root</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/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 { + scrollbar-width: thin; + } + + :root::-webkit-scrollbar { + display: 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> + 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"); + }, "scrollbar-width thin on the root overrides ::-webkit-scrollbar"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html new file mode 100644 index 0000000000..a685d6c05b --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html @@ -0,0 +1,56 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width none on the root overrides ::-webkit-scrollbar on the root</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/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 { + scrollbar-width: none; + } + + :root::-webkit-scrollbar { + width: 20px; + background-color: lightgray; + } + + :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> + 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"); + }, "scrollbar-width none on the root overrides ::-webkit-scrollbar"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html new file mode 100644 index 0000000000..f6460a4797 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html @@ -0,0 +1,55 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width thin on the root overridess ::-webkit-scrollbar</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/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 { + scrollbar-width: thin; + } + + ::-webkit-scrollbar { + display: 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> + 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"); + }, "scrollbar-width thin on the root overridess ::-webkit-scrollbar"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html new file mode 100644 index 0000000000..b3702015d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html @@ -0,0 +1,62 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width thin on the body doesn't override ::-webkit-scrollbar on root</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + body { + scrollbar-width: thin; + } + + :root::-webkit-scrollbar { + display: none; + } + + /* This is so that browsers that don't implement the WebKit prefix still pass the test */ + @supports not selector(::-webkit-scrollbar) { + :root { + overflow: hidden; + } + } + + :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> + 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"); + }, "scrollbar-width thin on the body doesn't override ::-webkit-scrollbar on root"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html new file mode 100644 index 0000000000..88a6af27ba --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html @@ -0,0 +1,87 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width on scrollable areas correctly interacts with ::-webkit-scrollbar</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + .container { + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 100%; + background: lightsalmon; + } + + .container.auto { + scrollbar-width: auto; + } + + /* This is so that browsers that don't implement the WebKit prefix still pass the test */ + @supports not selector(::-webkit-scrollbar) { + .container.auto { + overflow: hidden; + } + } + + ::-webkit-scrollbar { + display: none; + } + + .container.thin { + scrollbar-width: thin; + } +</style> +<script> + function performTest() { + setup({ explicit_done: true }); + + // ltr + + test(function () { + let container = document.getElementById('container_auto'); + let content = document.getElementById('content_auto'); + assert_equals(container.scrollWidth, 200, "auto scrollWidth"); + assert_equals(container.clientWidth, 200, "auto clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "auto offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "auto clientWidth"); + assert_equals(container.offsetWidth, content.offsetWidth, "auto offsetWidth"); + }, "scrollbar-width auto defers to ::-webkit-scrollbar"); + + test(function () { + let container = document.getElementById('container_thin'); + let content = document.getElementById('content_thin'); + assert_less_than(container.scrollWidth, container.offsetWidth, "thin scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "thin clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "thin offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "thin clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "thin offsetWidth"); + }, "scrollbar-width thin overrides ::-webkit-scrollbar"); + + done(); + } +</script> + +<body onload="performTest()"> + + Test scrollbar-width: vertical scrollbar + + <div class="container auto" id="container_auto"> + <div class="content" id="content_auto">auto</div> + </div> + + <div class="container thin" id="container_thin"> + <div class="content" id="content_thin">thin</div> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html new file mode 100644 index 0000000000..7d64131743 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html @@ -0,0 +1,114 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width on scrollable areas correctly interacts with ::-webkit-scrollbar on container</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> +<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> + .container { + overflow: auto; + height: 200px; + width: 200px; + margin: 1px; + padding: 0px; + border: none; + background: deepskyblue; + } + + .content { + height: 300px; + width: 100%; + background: lightsalmon; + } + + .container.auto { + scrollbar-width: auto; + } + + .container.auto::-webkit-scrollbar { + display: none; + } + + /* This is so that browsers that don't implement the WebKit prefix still pass the test */ + @supports not selector(::-webkit-scrollbar) { + .container.auto { + overflow: hidden; + } + } + + .container.thin { + scrollbar-width: thin; + } + + .container.thin::-webkit-scrollbar { + display: none; + } + + .container.none { + scrollbar-width: none; + } + + .container.none::-webkit-scrollbar { + width: 20px; + background-color: lightgray; + } +</style> +<script> + function performTest() { + setup({ explicit_done: true }); + + // ltr + + test(function () { + let container = document.getElementById('container_auto'); + let content = document.getElementById('content_auto'); + assert_equals(container.scrollWidth, 200, "auto scrollWidth"); + assert_equals(container.clientWidth, 200, "auto clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "auto offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "auto clientWidth"); + assert_equals(container.offsetWidth, content.offsetWidth, "auto offsetWidth"); + }, "scrollbar-width auto defers to ::-webkit-scrollbar"); + + test(function () { + let container = document.getElementById('container_thin'); + let content = document.getElementById('content_thin'); + assert_less_than(container.scrollWidth, container.offsetWidth, "thin scrollWidth"); + assert_less_than(container.clientWidth, container.offsetWidth, "thin clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "thin offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "thin clientWidth"); + assert_not_equals(container.offsetWidth, content.offsetWidth, "thin offsetWidth"); + }, "scrollbar-width thin overrides ::-webkit-scrollbar"); + + test(function () { + let container = document.getElementById('container_none'); + let content = document.getElementById('content_none'); + assert_equals(container.scrollWidth, 200, "none scrollWidth"); + assert_equals(container.clientWidth, 200, "none clientWidth"); + assert_equals(container.offsetLeft, content.offsetLeft, "none offsetLeft"); + assert_equals(container.clientWidth, content.clientWidth, "none clientWidth"); + assert_equals(container.offsetWidth, content.offsetWidth, "none offsetWidth"); + }, "scrollbar-width none overrides ::-webkit-scrollbar"); + + done(); + } +</script> + +<body onload="performTest()"> + + Test scrollbar-width: vertical scrollbar + + <div class="container auto" id="container_auto"> + <div class="content" id="content_auto">auto</div> + </div> + + <div class="container thin" id="container_thin"> + <div class="content" id="content_thin">thin</div> + </div> + + <div class="container none" id="container_none"> + <div class="content" id="content_none">none</div> + </div> + +</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-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-mis-ref.html new file mode 100644 index 0000000000..5f7d95bc6f --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-mis-ref.html @@ -0,0 +1,50 @@ +<!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; + } + + .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-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..320af26464 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html @@ -0,0 +1,81 @@ +<!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="mismatch" href="scrollbar-width-paint-001-mis-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-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-mis-ref.html new file mode 100644 index 0000000000..dd3a817908 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-mis-ref.html @@ -0,0 +1,50 @@ +<!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%; + } + + .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-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..a163aef37f --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html @@ -0,0 +1,81 @@ +<!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="mismatch" href="scrollbar-width-paint-002-mis-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-paint-004-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-mis-ref.html new file mode 100644 index 0000000000..f4d7f263ad --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-mis-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + :root { overflow: scroll; scrollbar-width: none; } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-ref.html new file mode 100644 index 0000000000..b2b2d7f284 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + :root { overflow: scroll; scrollbar-width: thin; } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html new file mode 100644 index 0000000000..6f5b4d300c --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html @@ -0,0 +1,21 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width on viewport none -> thin</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> +<link rel="match" href="scrollbar-width-paint-004-ref.html"> +<link rel="mismatch" href="scrollbar-width-paint-004-mis-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: none; + } +</style> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.scrollbarWidth = 'thin'; + takeScreenshot(); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005-ref.html new file mode 100644 index 0000000000..e5c325b854 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + :root { overflow: hidden; } +</style> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005.html new file mode 100644 index 0000000000..9ce46d296a --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005.html @@ -0,0 +1,25 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Scrollbars: scrollbar-width multiple-updates on viewport thin -> auto -> none</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> +<link rel="match" href="scrollbar-width-paint-005-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; + } +</style> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.scrollbarWidth = 'auto'; + + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.scrollbarWidth = 'none'; + + takeScreenshot(); + })); + })); +</script> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html new file mode 100644 index 0000000000..c3f156a421 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html @@ -0,0 +1,50 @@ +<!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; + } + + .content.plain { + background: red; + } + + .content.gradient { + background: linear-gradient(135deg, red, blue); + } +</style> +<div id="one" class="container none"> + <div class="content plain"></div> +</div> +<div id="two" class="container none"> + <div class="content plain"></div> +</div> +<div id="three" class="container thin"> + <div class="content plain"></div> +</div> +<div id="four" class="container thin"> + <div class="content gradient"></div> +</div> +<div id="five" class="container auto"> + <div class="content gradient"></div> +</div> +<div id="six" class="container auto"> + <div class="content gradient"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-ref.html new file mode 100644 index 0000000000..7314307353 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-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 none"> + <div class="content plain"></div> +</div> +<div id="two" class="container none"> + <div class="content plain"></div> +</div> +<div id="three" class="container thin"> + <div class="content plain"></div> +</div> +<div id="four" class="container thin"> + <div class="content gradient"></div> +</div> +<div id="five" class="container auto"> + <div class="content gradient"></div> +</div> +<div id="six" class="container auto"> + <div class="content gradient"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html new file mode 100644 index 0000000000..2273575950 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html @@ -0,0 +1,90 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Scrollbars: paint test when updating scrollbar-width twice, with scrolling content</title> +<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> +<link rel="match" href="scrollbar-width-paint-006-ref.html"> +<link rel="mismatch" href="scrollbar-width-paint-006-mis-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'; + + requestAnimationFrame(() => requestAnimationFrame(() => { + document.getElementById('one').style.scrollbarWidth = 'none'; + document.getElementById('two').style.scrollbarWidth = 'none'; + document.getElementById('three').style.scrollbarWidth = 'thin'; + document.getElementById('four').style.scrollbarWidth = 'thin'; + document.getElementById('five').style.scrollbarWidth = 'auto'; + document.getElementById('six').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/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-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-mis-ref.html new file mode 100644 index 0000000000..f3ad07fe56 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-mis-ref.html @@ -0,0 +1,22 @@ +<!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; + scrollbar-color: yellow blue; +} +#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-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..5afd103892 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html @@ -0,0 +1,16 @@ +<!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"> +<link rel="mismatch" href="viewport-scrollbar-body-mis-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-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-mis-ref.html new file mode 100644 index 0000000000..05babbd2dd --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-mis-ref.html @@ -0,0 +1,21 @@ +<!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; +} +#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-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..aac43f12e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html @@ -0,0 +1,16 @@ +<!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"> +<link rel="mismatch" href="viewport-scrollbar-mis-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> |