diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-color-adjust')
37 files changed, 602 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-color-adjust/META.yml b/testing/web-platform/tests/css/css-color-adjust/META.yml new file mode 100644 index 0000000000..e72f837c95 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/META.yml @@ -0,0 +1 @@ +spec: https://drafts.csswg.org/css-color-adjust/ diff --git a/testing/web-platform/tests/css/css-color-adjust/animation/color-scheme-no-interpolation.html b/testing/web-platform/tests/css/css-color-adjust/animation/color-scheme-no-interpolation.html new file mode 100644 index 0000000000..c2f7f91b68 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/animation/color-scheme-no-interpolation.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'color-scheme', + from: 'initial', + to: 'dark' +}); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/animation/forced-color-adjust-no-interpolation.html b/testing/web-platform/tests/css/css-color-adjust/animation/forced-color-adjust-no-interpolation.html new file mode 100644 index 0000000000..3e1fcc22b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/animation/forced-color-adjust-no-interpolation.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-color-adjust/#forced-color-adjust-prop"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'forced-color-adjust', + from: 'initial', + to: 'none' +}); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/inheritance.html b/testing/web-platform/tests/css/css-color-adjust/inheritance.html new file mode 100644 index 0000000000..f834d7bb54 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/inheritance.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Inheritance of CSS Color Adjust properties</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#property-index"> +<meta name="assert" content="Properties inherit according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +<div id="container"> + <div id="target"></div> +</div> +<script> + assert_inherited('color-scheme', 'normal', 'light dark'); + assert_inherited('color-adjust', 'economy', 'exact'); + assert_inherited('forced-color-adjust', 'auto', 'preserve-parent-color'); + assert_inherited('print-color-adjust', 'economy', 'exact'); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-computed.html b/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-computed.html new file mode 100644 index 0000000000..5b6d8224d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Color Adjust: getComputedStyle for color-scheme</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> + test_computed_value("color-scheme", "normal"); + test_computed_value("color-scheme", "light dark"); + test_computed_value("color-scheme", "dark light"); + test_computed_value("color-scheme", "light unknown"); + test_computed_value("color-scheme", "only light", "light only"); + test_computed_value("color-scheme", "only light dark", "light dark only"); + test_computed_value("color-scheme", "light light"); + test_computed_value("color-scheme", "light only"); + test_computed_value("color-scheme", "none"); + // reserved and css-wide keywords. + test_computed_value("color-scheme", "initial", "normal"); + test_computed_value("color-scheme", "inherit", "normal"); + test_computed_value("color-scheme", "unset", "normal"); + test_computed_value("color-scheme", "revert", "normal"); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-invalid.html b/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-invalid.html new file mode 100644 index 0000000000..e2eb0098dc --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Color Adjust: parsing color-scheme with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + test_invalid_value("color-scheme", "only normal"); + test_invalid_value("color-scheme", "normal dark"); + test_invalid_value("color-scheme", "normal purple"); + test_invalid_value("color-scheme", "light normal"); + test_invalid_value("color-scheme", "light, dark"); + test_invalid_value("color-scheme", "light inherit"); + test_invalid_value("color-scheme", "light initial"); + test_invalid_value("color-scheme", "light unset"); + test_invalid_value("color-scheme", "light revert"); + test_invalid_value("color-scheme", "light revert-layer"); + test_invalid_value("color-scheme", "default"); + test_invalid_value("color-scheme", "light default"); + test_invalid_value("color-scheme", "only"); + test_invalid_value("color-scheme", "only only"); + test_invalid_value("color-scheme", "light only dark"); + test_invalid_value("color-scheme", "only light only"); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-valid.html b/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-valid.html new file mode 100644 index 0000000000..b2df1e8652 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/parsing/color-scheme-valid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Color Adjust: parsing color-scheme with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + test_valid_value("color-scheme", "normal"); + test_valid_value("color-scheme", "light"); + test_valid_value("color-scheme", "dark"); + test_valid_value("color-scheme", "light dark"); + test_valid_value("color-scheme", "dark light"); + test_valid_value("color-scheme", "only light", "light only"); + test_valid_value("color-scheme", "light only"); + test_valid_value("color-scheme", "light dark only"); + test_valid_value("color-scheme", "light light"); + test_valid_value("color-scheme", "dark dark"); + test_valid_value("color-scheme", "light purple"); + test_valid_value("color-scheme", "purple dark interesting"); + test_valid_value("color-scheme", "none"); + test_valid_value("color-scheme", "light none"); + test_valid_value("color-scheme", "inherit"); + test_valid_value("color-scheme", "initial"); + test_valid_value("color-scheme", "unset"); + test_valid_value("color-scheme", "revert"); + test_valid_value("color-scheme", "only light dark", "light dark only"); + test_valid_value("color-scheme", "only light light", "light light only"); + test_valid_value("color-scheme", "only light purple", "light purple only"); + test_valid_value("color-scheme", "only none", "none only"); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/parsing/print-color-adjust.html b/testing/web-platform/tests/css/css-color-adjust/parsing/print-color-adjust.html new file mode 100644 index 0000000000..03522bc32d --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/parsing/print-color-adjust.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>print-color-adjust Parsing</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<link rel=help href="https://www.w3.org/TR/css-color-adjust-1/#perf"> +<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> + +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value('print-color-adjust', 'exact', 'exact'); +test_valid_value('print-color-adjust', 'economy', 'economy'); +test_valid_value('color-adjust', 'exact', 'exact'); +test_valid_value('color-adjust', 'economy', 'economy'); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-change-checkbox-notref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-change-checkbox-notref.html new file mode 100644 index 0000000000..921482afcd --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-change-checkbox-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="checkbox"> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-change-checkbox.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-change-checkbox.html new file mode 100644 index 0000000000..b163b4a40c --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-change-checkbox.html @@ -0,0 +1,20 @@ +<!doctype html> +<html class="reftest-wait"> +<head> + <title>CSS Color Adjustment Test: Checkbox rendering should change between dark and light schemes</title> + <link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-processing"> + <link rel="mismatch" href="color-scheme-change-checkbox-notref.html"> + <script src="/common/reftest-wait.js"></script> +</head> +<body> + <input type="checkbox"> +</body> +<script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.querySelector("input").style.colorScheme = "dark"; + takeScreenshot(); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-color-property.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-color-property.html new file mode 100644 index 0000000000..4cb02d950b --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-color-property.html @@ -0,0 +1,29 @@ +<!doctype html> +<html class="dark"> +<head> + <title>CSS Color Adjustment Test: the initial color is affected by color-scheme</title> + <link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-processing"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + .dark { color-scheme: dark } + .light { color-scheme: light } + .initial { color: initial } + </style> +</head> +<body> + <div id="dark" class="dark initial"></div> + <div id="light" class="light initial"></div> +</body> +<script> + test(() => { + assert_equals(getComputedStyle(dark).color, getComputedStyle(document.documentElement).color); + assert_not_equals(getComputedStyle(light).color, getComputedStyle(document.documentElement).color); + }, "Check that color:initial resolves to the intial color for the dark color-scheme."); + + test(() => { + document.documentElement.className = "light"; + assert_equals(getComputedStyle(light).color, getComputedStyle(document.documentElement).color); + assert_not_equals(getComputedStyle(dark).color, getComputedStyle(document.documentElement).color); + }, "Check that color:initial resolves to the intial color for the light color-scheme."); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank-ref.html new file mode 100644 index 0000000000..79c882fbda --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style>:root { color-scheme: dark }</style> +<p>Should not see a white frame below</p> +<iframe width="600" height="400" src="support/dark-frame-blank.html"></iframe> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank.tentative.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank.tentative.html new file mode 100644 index 0000000000..a5a9843ac8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank.tentative.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>CSS Color Adjustment Test: about:blank doesn't cause a white backdrop in dark mode even though technically its color-scheme is mismatched</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9624"> +<link rel="match" href="color-scheme-iframe-background-about-blank-ref.html"> +<style> +:root { color-scheme: dark } +</style> +<p>Should not see a white frame below</p> +<iframe width="600" height="400"></iframe> +<script> + document.querySelector("iframe").contentWindow.stop(); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-alpha.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-alpha.html new file mode 100644 index 0000000000..bab634cfda --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-alpha.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Color Adjustment Test: iframe element with light color-scheme, frame document with dark color-scheme, :root background with alpha</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="match" href="support/dark-frame-alpha.html"> +<style> + html, body { + margin: 0; + height: 100%; + } + iframe { + margin: 0; + border: 0; + padding: 0; + width: 100%; + height: 100%; + display: block; + } +</style> +<iframe src="support/dark-frame-alpha.html"></iframe> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-opaque-cross-origin.sub.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-opaque-cross-origin.sub.html new file mode 100644 index 0000000000..0485044ca4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-opaque-cross-origin.sub.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Color Adjustment Test: Frames with a dark color-scheme should get an opaque background when embedding element and embedded root color-schemes do not match (cross origin)</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="match" href="support/dark-frame-opaque.html"> +<style> + html, body { + margin: 0; + height: 100%; + } + iframe { + margin: 0; + border: 0; + padding: 0; + width: 100%; + height: 100%; + display: block; + } +</style> +<iframe src="http://{{domains[www]}}:{{ports[http][0]}}/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-opaque.html"></iframe> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-opaque.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-opaque.html new file mode 100644 index 0000000000..d984fdd245 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-opaque.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Color Adjustment Test: Frames with a dark color-scheme should get an opaque background when embedding element and embedded root color-schemes do not match</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="match" href="support/dark-frame-opaque.html"> +<style> + html, body { + margin: 0; + height: 100%; + } + iframe { + margin: 0; + border: 0; + padding: 0; + width: 100%; + height: 100%; + display: block; + } +</style> +<iframe src="support/dark-frame-opaque.html"></iframe> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-used-preferred-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-used-preferred-ref.html new file mode 100644 index 0000000000..4eb06f35fd --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-used-preferred-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>CSS Test Reference</title> +<div style="background-color: green; height: 150px; width: 300px"></div> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-used-preferred.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-used-preferred.html new file mode 100644 index 0000000000..fb774c3564 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-mismatch-used-preferred.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Used (not preferred) color-scheme is used for iframe backplate decisions</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1787127"> +<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="color-scheme-iframe-background-mismatch-used-preferred-ref.html"> +<iframe frameborder=0 scrolling=no style="color-scheme: dark" srcdoc="<style>:root { background-color: green }</style><iframe frameborder=0 srcdoc="<font color=green>This text should <em>not</em> be visible</font>"></iframe>"> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-ref.html new file mode 100644 index 0000000000..8cc4618ede --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>CSS Test Reference</title> +<iframe width="600" height="400" src="support/dark-frame-ref.html"></iframe> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background.html new file mode 100644 index 0000000000..caef99cf2d --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Color Adjustment Test: Frames with a dark color-scheme should still be transparent when embedding element and embedded root color-schemes match</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="match" href="color-scheme-iframe-background-ref.html"> +<iframe width="600" height="400" style="color-scheme:dark" src="support/dark-frame.html"></iframe> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-preferred-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-preferred-ref.html new file mode 100644 index 0000000000..ff2683bbd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-preferred-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + div { + width: 100px; + height: 100px; + } +</style> +<div style="background-color: purple"></div> +<div style="background-color: blue"></div> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-preferred.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-preferred.html new file mode 100644 index 0000000000..1c8814b112 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-preferred.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>prefers-color-scheme propagation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4772"> +<link rel="match" href="color-scheme-iframe-preferred-ref.html"> +<style> + iframe { + display: block; + border: none; + width: 100px; + height: 100px; + } +</style> +<iframe style="color-scheme: dark" src="support/prefers-color-scheme-blue-purple.html"></iframe> +<iframe style="color-scheme: light" src="support/prefers-color-scheme-blue-purple.html"></iframe> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-root-background.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-root-background.html new file mode 100644 index 0000000000..c5766c7f99 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-root-background.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>CSS Color Adjustment Test: color-scheme does not affect :root background</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-processing"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + :root { color-scheme: dark } +</style> +<body></body> +<script> + test(() => { + assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgba(0, 0, 0, 0)"); + }, "Root element background should be transparent for dark color-scheme."); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-system-colors.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-system-colors.html new file mode 100644 index 0000000000..7509dd04b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-system-colors.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #dark { color-scheme: dark } + #light { color-scheme: light } + .canvas { color: CanvasText; background-color: Canvas; } +</style> +<div id="dark" class="canvas"></div> +<div id="light" class="canvas"></div> +<script> + test(() => { + assert_not_equals(getComputedStyle(light).color, getComputedStyle(dark).color); + assert_not_equals(getComputedStyle(light).backgroundColor, getComputedStyle(dark).backgroundColor); + }, "Check that the system colors are properly affected by the color-scheme."); +</script> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-table-border-currentcolor-responsive-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-table-border-currentcolor-responsive-ref.html new file mode 100644 index 0000000000..613ef03229 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-table-border-currentcolor-responsive-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<title>CSS Color Adjust: border-color:currentColor is responsive to color-scheme for collapsed table borders</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust"> +<link rel="help" href="https://crbug.com/1256758"> +<style> + :root { + background-color: gray; + } + + table { + border-collapse: collapse; + } + table, table * { + border: none; + } + + * { + color-scheme: initial; + } + + #table, #col, #tr, #th, #td, #tbody { + border: 5px solid currentColor; + color: CanvasText; + color-scheme: dark; + } + +</style> + +<!-- <table> --> +<table id=table> + <tr> + <td>X</td> + </tr> +</table> + +<!-- <col> --> +<table> + <colgroup> + <col id=col></col> + </colgroup> + <tr> + <td>X</td> + </tr> +</table> + +<!-- <tr> --> +<table> + <tr id=tr> + <td>X</td> + </tr> +</table> + +<!-- <th> --> +<table> + <tr> + <th id=th>X</th> + </tr> +</table> + +<!-- <td> --> +<table> + <tr> + <td id=td>X</td> + </tr> +</table> + +<!-- <tbody> --> +<table> + <tbody id=tbody> + <tr> + <td>X</td> + </tr> + </tbody> +</table> + +</html> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-table-border-currentcolor-responsive.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-table-border-currentcolor-responsive.html new file mode 100644 index 0000000000..1d42a4fdda --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-table-border-currentcolor-responsive.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS Color Adjust: border-color:currentColor is responsive to color-scheme for collapsed table borders</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust"> +<link rel="help" href="https://crbug.com/1256758"> +<link rel="match" href="color-scheme-table-border-currentcolor-responsive-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> + :root { + background-color: gray; + } + + table { + border-collapse: collapse; + } + table, table * { + border: none; + } + + #table, #col, #tr, #th, #td, #tbody { + border: 5px solid currentColor; + color: CanvasText; + } + + * { + color-scheme: initial; + } + + .dark { + color-scheme: dark; + } + +</style> + +<!-- <table> --> +<table id=table> + <tr> + <td>X</td> + </tr> +</table> + +<!-- <col> --> +<table> + <colgroup> + <col id=col></col> + </colgroup> + <tr> + <td>X</td> + </tr> +</table> + +<!-- <tr> --> +<table> + <tr id=tr> + <td>X</td> + </tr> +</table> + +<!-- <th> --> +<table> + <tr> + <th id=th>X</th> + </tr> +</table> + +<!-- <td> --> +<table> + <tr> + <td id=td>X</td> + </tr> +</table> + +<!-- <tbody> --> +<table> + <tbody id=tbody> + <tr> + <td>X</td> + </tr> + </tbody> +</table> + +<script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + for (let e of [table, col, tr, th, td, tbody]) + e.classList.toggle('dark'); + takeScreenshot(); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-visited-link-initial-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-visited-link-initial-ref.html new file mode 100644 index 0000000000..6c39b446e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-visited-link-initial-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<html style="color-scheme:dark"> +<title>CSS Test Reference</title> +This text should be rendered with canvastext for the dark color-scheme. diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-visited-link-initial.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-visited-link-initial.html new file mode 100644 index 0000000000..6412acdb9f --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-visited-link-initial.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS Color Adjustment Test: initial color on visited link affected by color-scheme</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-processing"> +<link rel="match" href="color-scheme-visited-link-initial-ref.html"> +<style> + :root { color-scheme: dark } + a { text-decoration: none } + a:visited { color: initial } +</style> +<a href="">This text should be rendered with canvastext for the dark color-scheme.</a> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-alpha.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-alpha.html new file mode 100644 index 0000000000..cb5e6d6691 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-alpha.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + :root { + color-scheme: dark; + background-color: rgba(0, 128, 0, 0.5); + } + p { color: lime } +</style> +<p>This text should be lime and the background should be green blended with a dark canvas.</p> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-blank.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-blank.html new file mode 100644 index 0000000000..dd540f41a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-blank.html @@ -0,0 +1,4 @@ +<!doctype html> +<style> + :root { color-scheme: dark } +</style> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-opaque.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-opaque.html new file mode 100644 index 0000000000..ca845ea13c --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-opaque.html @@ -0,0 +1,6 @@ +<!doctype html> +<style> + :root { color-scheme: dark } + p { color: green } +</style> +<p>This text should be green and the background should be dark opaque.</p> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-ref.html new file mode 100644 index 0000000000..0975119f56 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<style> + p { color: green } +</style> +<p>This text should be green and the background should be the same as the top document.</p> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame.html new file mode 100644 index 0000000000..11f88db4a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/dark-frame.html @@ -0,0 +1,6 @@ +<!doctype html> +<style> + :root { color-scheme: dark } + p { color: green } +</style> +<p>This text should be green and the background should be the same as the top document.</p> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme-blue-purple.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme-blue-purple.html new file mode 100644 index 0000000000..99d687b47f --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme-blue-purple.html @@ -0,0 +1,7 @@ +<!doctype html> +<style> +:root { background-color: blue } +@media (prefers-color-scheme: dark) { + :root { background-color: purple } +} +</style> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme.svg b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme.svg new file mode 100644 index 0000000000..3afcac70fe --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" width='100px' height='100px'> + <style> + @media (prefers-color-scheme: dark) { + rect { + fill: green; + } + } + </style> + <rect fill='blue' width='100px' height='100px' /> +</svg> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image-ref.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image-ref.html new file mode 100644 index 0000000000..1ff9d88f30 --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<head> + <title>prefers-color-scheme inside an SVG image</title> + <link rel="help" href="https://www.w3.org/TR/mediaqueries-5/#descdef-media-prefers-color-scheme"> +</head> +<style> + div { + background-color: blue; + height: 100px; + width: 100px; + } + @media (prefers-color-scheme: dark) { + div { + background-color: green; + } + } +</style> +<p>There should be green square below when the preferred color-scheme is dark, and blue otherwise.</p> +<div></div> diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image.html new file mode 100644 index 0000000000..6fc33f56ce --- /dev/null +++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image.html @@ -0,0 +1,8 @@ +<!doctype html> +<head> + <title>prefers-color-scheme inside an SVG image</title> + <link rel="help" href="https://www.w3.org/TR/mediaqueries-5/#descdef-media-prefers-color-scheme"> + <link rel="match" href="svg-as-image-ref.html"> +</head> +<p>There should be green square below when the preferred color-scheme is dark, and blue otherwise.</p> +<img src='support/prefers-color-scheme.svg'> |
