Commit d8d7248d authored by Alison Maher's avatar Alison Maher Committed by Commit Bot

Move forced colors tests to wpt

This change moves forced colors web tests to external/wpt. Having
separate reference files in wpt is not possible, so the tests are
written assuming the virtual flags are used, with the expectation
that the tests will fail in the non-virtual case.

Tests that used layout test APIs, such as testRunner and internals,
were not able to be moved to external/wpt and remain in fast/css.

Bug: 970285
Change-Id: Id7410f7d4e9f009e848807b811611051320f23ee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1789923
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#694796}
parent 2e5c0a7c
...@@ -301,10 +301,10 @@ crbug.com/591099 http/tests/devtools/elements/highlight/highlight-node-vertical- ...@@ -301,10 +301,10 @@ crbug.com/591099 http/tests/devtools/elements/highlight/highlight-node-vertical-
crbug.com/591099 inspector-protocol/layout-fonts/languages-emoji-rare-glyphs.js [ Failure ] crbug.com/591099 inspector-protocol/layout-fonts/languages-emoji-rare-glyphs.js [ Failure ]
# Newline painting difference with LayoutNG disabled. # Newline painting difference with LayoutNG disabled.
crbug.com/591099 fast/css/forced-colors-mode/forced-colors-mode-14.html [ Failure ] crbug.com/591099 external/wpt/forced-colors-mode/forced-colors-mode-14.html [ Failure ]
crbug.com/591099 fast/css/forced-colors-mode/forced-colors-mode-15.html [ Failure ] crbug.com/591099 external/wpt/forced-colors-mode/forced-colors-mode-15.html [ Failure ]
crbug.com/591099 virtual/forced-colors/fast/css/forced-colors-mode/forced-colors-mode-14.html [ Failure ] crbug.com/591099 virtual/forced-colors/external/wpt/forced-colors-mode/forced-colors-mode-14.html [ Failure ]
crbug.com/591099 virtual/forced-colors/fast/css/forced-colors-mode/forced-colors-mode-15.html [ Failure ] crbug.com/591099 virtual/forced-colors/external/wpt/forced-colors-mode/forced-colors-mode-15.html [ Failure ]
### http/tests/credentialmanager/ ### http/tests/credentialmanager/
crbug.com/874695 http/tests/credentialmanager/credentialscontainer-create-with-virtual-authenticator.html [ Failure ] crbug.com/874695 http/tests/credentialmanager/credentialscontainer-create-with-virtual-authenticator.html [ Failure ]
......
...@@ -6122,6 +6122,10 @@ crbug.com/991243 [ Linux ] virtual/omt-worker-fetch/external/wpt/workers/semanti ...@@ -6122,6 +6122,10 @@ crbug.com/991243 [ Linux ] virtual/omt-worker-fetch/external/wpt/workers/semanti
# BlinkSchedulerDisableAntiStarvationForPriorities feature. # BlinkSchedulerDisableAntiStarvationForPriorities feature.
crbug.com/979017 wpt_internal/scheduler/task_order.html [ Failure ] crbug.com/979017 wpt_internal/scheduler/task_order.html [ Failure ]
# Expected failures for forced colors mode tests when the corresponding flags
# are not enabled.
crbug.com/970285 external/wpt/forced-colors-mode [ Failure ]
# Sheriff 2019-08-14 # Sheriff 2019-08-14
crbug.com/993671 [ Win ] http/tests/media/video-frame-size-change.html [ Pass Failure ] crbug.com/993671 [ Win ] http/tests/media/video-frame-size-change.html [ Pass Failure ]
crbug.com/993671 [ Win ] virtual/audio-service/http/tests/media/video-frame-size-change.html [ Pass Failure ] crbug.com/993671 [ Win ] virtual/audio-service/http/tests/media/video-frame-size-change.html [ Pass Failure ]
......
...@@ -1009,6 +1009,11 @@ ...@@ -1009,6 +1009,11 @@
"base": "external/wpt/css/css-forced-color-adjust", "base": "external/wpt/css/css-forced-color-adjust",
"args": ["--enable-blink-features=ForcedColors"] "args": ["--enable-blink-features=ForcedColors"]
}, },
{
"prefix": "forced-colors",
"base": "external/wpt/forced-colors-mode",
"args": ["--force-high-contrast", "--enable-blink-features=ForcedColors"]
},
{ {
"prefix": "forced-colors", "prefix": "forced-colors",
"base": "fast/css/forced-colors-mode", "base": "fast/css/forced-colors-mode",
......
This directory is for testing Forced Colors mode implementation.
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-01-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-01-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests that the backplate feature with a varying number of line breaks.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests that the backplate feature with a varying number of line breaks. Tests that the backplate feature with a varying number of line breaks.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-02-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-02-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests the backplate feature behind lists.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests the backplate feature behind lists. Tests the backplate feature behind lists.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-03-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-03-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests the backplate feature behind links.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests the backplate feature behind links. Tests the backplate feature behind links.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-04-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-04-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests the backplate feature for display inline/relative position.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests the backplate feature for display inline/relative position. Tests the backplate feature for display inline/relative position.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-05-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-05-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests that inline spans with different forced-color-adjust values from their
parent element follow the backplate behavior of that parent in forced colors
mode.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests that inline spans with different forced-color-adjust values from their Tests that inline spans with different forced-color-adjust values from their
parent element follow the backplate behavior of that parent in forced colors parent element follow the backplate behavior of that parent in forced colors
mode. mode.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-06-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-06-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests backplate is drawn when text is located outside the cull rect.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
...@@ -45,4 +50,4 @@ ...@@ -45,4 +50,4 @@
window.scrollBy(0, 5000); window.scrollBy(0, 5000);
} }
onload = scroll; onload = scroll;
</script> </script>
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests backplate is drawn when text is located outside the cull rect. Tests backplate is drawn when text is located outside the cull rect.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-08-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-08-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
...@@ -40,4 +42,4 @@ ...@@ -40,4 +42,4 @@
window.scrollBy(0, 5000); window.scrollBy(0, 5000);
} }
onload = scroll; onload = scroll;
</script> </script>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>
Forced colors mode - backplate reference.
Tests that backplate is not drawn above floats.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
...@@ -21,7 +24,6 @@ ...@@ -21,7 +24,6 @@
background-color: Window; background-color: Window;
} }
</style> </style>
</head>
<body> <body>
<div> <div>
<img src="../resources/float-image.jpg" style="width:50px;height:50px;"> <img src="../resources/float-image.jpg" style="width:50px;height:50px;">
...@@ -29,4 +31,3 @@ ...@@ -29,4 +31,3 @@
the floating image. the floating image.
</div> </div>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests that backplate is not drawn above floats. Tests that backplate is not drawn above floats.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-09-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-09-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
...@@ -19,12 +19,10 @@ ...@@ -19,12 +19,10 @@
float: left; float: left;
} }
</style> </style>
</head>
<body> <body>
<div> <div>
<img src="../resources/float-image.jpg" style="width:50px;height:50px;"> <img src="../resources/float-image.jpg" style="width:50px;height:50px;">
In forced colors mode, the backplate for this paragraph should lie below the In forced colors mode, the backplate for this paragraph should lie below the
the floating image. the floating image.
</div> </div>
</body> </body>
</html> \ No newline at end of file
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>
Forced colors mode - backplate reference.
Tests that backplates of overlapping inline boxes do not overlap.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
...@@ -18,7 +21,6 @@ ...@@ -18,7 +21,6 @@
background-color: Window; background-color: Window;
} }
</style> </style>
</head>
<body> <body>
<div> <div>
<div> <div>
...@@ -30,4 +32,3 @@ ...@@ -30,4 +32,3 @@
</div> </div>
</div> </div>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests that backplates of overlapping inline boxes do not overlap. Tests that backplates of overlapping inline boxes do not overlap.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-10-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-10-ref.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
width: 100px; width: 100px;
} }
</style> </style>
</head>
<body> <body>
<div> <div>
<div> <div>
...@@ -28,4 +27,3 @@ ...@@ -28,4 +27,3 @@
</div> </div>
</div> </div>
</body> </body>
</html>
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Test forced colors mode on table styles reference</title>
<style type="text/css"> <style>
body {
forced-color-adjust: none;
}
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
td, th { td, th {
border: 1px solid; border: 1px solid;
border-bottom-color: WindowText; border-bottom-color: WindowText;
...@@ -16,14 +18,12 @@ ...@@ -16,14 +18,12 @@
padding: 8px; padding: 8px;
text-align: left; text-align: left;
} }
tr:nth-child(even) { tr:nth-child(even) {
background-color: Window; background-color: Window;
color: WindowText; color: WindowText;
forced-color-adjust: none; forced-color-adjust: none;
} }
</style> </style>
</head>
<body> <body>
<table> <table>
<tr> <tr>
...@@ -43,4 +43,3 @@ ...@@ -43,4 +43,3 @@
</tr> </tr>
</table> </table>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<title>Test forced colors mode on table styles</title> <title>Test forced colors mode on table styles</title>
<link rel=match href=forced-colors-mode-01-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<style type="text/css"> <link rel=match href="forced-colors-mode-01-ref.html">
<style>
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
...@@ -22,7 +23,6 @@ ...@@ -22,7 +23,6 @@
color: red; color: red;
} }
</style> </style>
<body> <body>
<table> <table>
<tr> <tr>
...@@ -42,4 +42,3 @@ ...@@ -42,4 +42,3 @@
</tr> </tr>
</table> </table>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - style overrides for text reference.</title>
<style type="text/css"> <style>
body { body {
background-color: lightblue; background-color: lightblue;
} }
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
width: 300px; width: 300px;
} }
</style> </style>
</head>
<body> <body>
<div id="a"> <div id="a">
The colors and shadows of this text and text box should be overridden when in The colors and shadows of this text and text box should be overridden when in
...@@ -39,4 +38,3 @@ ...@@ -39,4 +38,3 @@
forced colors mode (forced-color-adjust is set to none.) forced colors mode (forced-color-adjust is set to none.)
</div> </div>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - style overrides for text.</title> <title>Forced colors mode - style overrides for text.</title>
<link rel=match href=forced-colors-mode-02-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<style type="text/css"> <link rel=match href="forced-colors-mode-02-ref.html">
<style>
body { body {
background-color: lightblue; background-color: lightblue;
} }
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
width: 300px; width: 300px;
} }
</style> </style>
</head>
<body> <body>
<div id="a"> <div id="a">
The colors and shadows of this text and text box should be overridden when in The colors and shadows of this text and text box should be overridden when in
...@@ -41,4 +40,3 @@ ...@@ -41,4 +40,3 @@
forced colors mode (forced-color-adjust is set to none.) forced colors mode (forced-color-adjust is set to none.)
</div> </div>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - highlighted text.</title> <title>Forced colors mode - highlighted text.</title>
<style type="text/css"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#a { #a {
color: orange; color: orange;
forced-color-adjust: auto; forced-color-adjust: auto;
...@@ -12,7 +14,6 @@ ...@@ -12,7 +14,6 @@
forced-color-adjust: none; forced-color-adjust: none;
} }
</style> </style>
</head>
<body> <body>
<mark id="a"> <mark id="a">
This text should be black in forced colors mode because forced-color-adjust This text should be black in forced colors mode because forced-color-adjust
...@@ -27,8 +28,6 @@ ...@@ -27,8 +28,6 @@
</mark> </mark>
</body> </body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script> <script>
test(function(){ test(function(){
assert_equals(getComputedStyle(a).color, "rgb(0, 0, 0)"); assert_equals(getComputedStyle(a).color, "rgb(0, 0, 0)");
...@@ -41,4 +40,3 @@ ...@@ -41,4 +40,3 @@
}, "Checks that default highlighted text style does not get overridden in forced colors mode."); }, "Checks that default highlighted text style does not get overridden in forced colors mode.");
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - webkit-tap-highlight-color.</title> <title>Forced colors mode - webkit-tap-highlight-color.</title>
<style type="text/css"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
a { a {
-webkit-tap-highlight-color: rgb(0, 0, 255); -webkit-tap-highlight-color: rgb(0, 0, 255);
} }
</style> </style>
</head>
<body> <body>
<p> <p>
<a href="https://www.wikipedia.org" id="link"> <a href="https://www.wikipedia.org" id="link">
...@@ -16,11 +17,8 @@ ...@@ -16,11 +17,8 @@
</p> </p>
</body> </body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script> <script>
test(function(){ test(function(){
assert_equals(getComputedStyle(link).webkitTapHighlightColor, "rgba(0, 0, 0, 0.18)"); assert_equals(getComputedStyle(link).webkitTapHighlightColor, "rgba(0, 0, 0, 0.18)");
}, "Checks hyperlinks are overridden in forced colors mode."); }, "Checks hyperlinks are overridden in forced colors mode.");
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - link color reference.</title>
<style type="text/css"> <style>
a { a {
color: LinkText; color: LinkText;
forced-color-adjust: none; forced-color-adjust: none;
} }
</style> </style>
</head>
<body> <body>
<p> <p>
<a href="https://www.wikipedia.org" id="link"> <a href="https://www.wikipedia.org" id="link">
...@@ -15,4 +14,3 @@ ...@@ -15,4 +14,3 @@
</a> </a>
</p> </p>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - link color.</title> <title>Forced colors mode - link color.</title>
<link rel=match href=forced-colors-mode-05-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<style type="text/css"> <link rel=match href="forced-colors-mode-05-ref.html">
<style>
a { a {
color: rgb(255, 0, 0); color: rgb(255, 0, 0);
} }
</style> </style>
</head>
<body> <body>
<p> <p>
<a href="https://www.wikipedia.org" id="link"> <a href="https://www.wikipedia.org" id="link">
...@@ -16,4 +15,3 @@ ...@@ -16,4 +15,3 @@
</a> </a>
</p> </p>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - iframe reference.
<title>Forced colors mode - iframe.
Test that styles are overridden inside iframes in forced colors mode. Test that styles are overridden inside iframes in forced colors mode.
</title> </title>
<link rel=match href=forced-colors-mode-06-expected.html>
<body> <body>
<iframe src="forced-colors-mode-02.html" width="500" height="500"></iframe> <iframe src="forced-colors-mode-02-ref.html" width="500" height="500"></iframe>
</body> </body>
</html> </html>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - iframe.
Test that styles are overridden inside iframes in forced colors mode.
</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-06-ref.html">
<body>
<iframe src="forced-colors-mode-02.html" width="500" height="500"></iframe>
</body>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - transparent colors reference.</title>
<style> <style>
p { p {
color: WindowText; color: WindowText;
...@@ -30,4 +30,3 @@ ...@@ -30,4 +30,3 @@
</p> </p>
</div> </div>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - transparent colors.</title> <title>Forced colors mode - transparent colors.</title>
<link rel=match href=forced-colors-mode-07-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-07-ref.html">
<style> <style>
p { p {
color: transparent; color: transparent;
...@@ -28,4 +28,3 @@ ...@@ -28,4 +28,3 @@
</p> </p>
</div> </div>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - outline and column color reference.</title>
<style> <style>
h1 { h1 {
forced-color-adjust: none; forced-color-adjust: none;
...@@ -12,11 +12,9 @@ ...@@ -12,11 +12,9 @@
-webkit-column-rule-style: solid; -webkit-column-rule-style: solid;
} }
</style> </style>
</head>
<body> <body>
<h1> <h1>
The outline-color and column-rule-color should be blue when forced colors The outline-color and column-rule-color should be blue when forced colors
mode is off and WindowText in forced colors mode. mode is off and WindowText in forced colors mode.
</h1> </h1>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - outline and column color.</title> <title>Forced colors mode - outline and column color.</title>
<link rel=match href=forced-colors-mode-08-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-08-ref.html">
<style> <style>
h1 { h1 {
outline-color: rgb(0, 0, 255); outline-color: rgb(0, 0, 255);
...@@ -13,11 +13,9 @@ ...@@ -13,11 +13,9 @@
-webkit-column-rule-style: solid; -webkit-column-rule-style: solid;
} }
</style> </style>
</head>
<body> <body>
<h1> <h1>
The outline-color and column-rule-color should be blue when forced colors The outline-color and column-rule-color should be blue when forced colors
mode is off and WindowText in forced colors mode. mode is off and WindowText in forced colors mode.
</h1> </h1>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title> <title>
Forced colors mode - forced-colors media query. Forced colors mode - forced-colors media query.
Tests that styles defined inside or outside a forced-colors media query are Tests that styles defined inside or outside a forced-colors media query are
overridden in forced colors mode. overridden in forced colors mode.
</title> </title>
<style type="text/css"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@media (forced-colors) { @media (forced-colors) {
p { p {
color: rgb(0, 0, 255); color: rgb(0, 0, 255);
...@@ -16,18 +18,14 @@ ...@@ -16,18 +18,14 @@
color: rgb(0, 0, 255); color: rgb(0, 0, 255);
} }
</style> </style>
</head>
<body> <body>
<p id="p"> <p id="p">
This text should NOT be blue forced colors mode. This text should NOT be blue forced colors mode.
</p> </p>
</body> </body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script> <script>
test(function() { test(function() {
assert_not_equals(getComputedStyle(p).color, "rgb(0, 0, 255)"); assert_not_equals(getComputedStyle(p).color, "rgb(0, 0, 255)");
}, "Checks that styles defined inside/outside forced-colors are overridden in forced colors mode."); }, "Checks that styles defined inside/outside forced-colors are overridden in forced colors mode.");
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title> <title>
Forced colors mode - forced-colors media query. Forced colors mode - forced-colors media query.
Tests that styles defined inside/outside forced-color media query Tests that styles defined inside/outside forced-color media query
are preserved in forced colors mode if forced-color-adjust is none are preserved in forced colors mode if forced-color-adjust is none
and that the ordering of styles is preserved. and that the ordering of styles is preserved.
</title> </title>
<style type="text/css"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
p { p {
background-color: rgb(0, 128, 0); background-color: rgb(0, 128, 0);
color: rgb(0, 0, 255); color: rgb(0, 0, 255);
...@@ -20,19 +22,15 @@ ...@@ -20,19 +22,15 @@
} }
} }
</style> </style>
</head>
<body> <body>
<p id="p"> <p id="p">
This text should be green in forced colors mode. This text should be green in forced colors mode.
</p> </p>
</body> </body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script> <script>
test(function() { test(function() {
assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 0, 255)"); assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 0, 255)");
assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)"); assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)");
}, "Checks that styles defined inside/outside forced-colors are preserved in forced colors mode if forced-color-ajust is none."); }, "Checks that styles defined inside/outside forced-colors are preserved in forced colors mode if forced-color-ajust is none.");
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title> <title>
Forced colors mode - forced-colors media query. Forced colors mode - forced-colors media query.
Tests that styles defined inside forced-color media query Tests that styles defined inside forced-color media query
are preserved in forced colors mode if forced-color-adjust are preserved in forced colors mode if forced-color-adjust
is none. is none.
</title> </title>
<style type="text/css"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@media (forced-colors: none) { @media (forced-colors: none) {
p { p {
background-color: rgb(255, 0, 0); background-color: rgb(255, 0, 0);
...@@ -29,12 +31,9 @@ ...@@ -29,12 +31,9 @@
</p> </p>
</body> </body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script> <script>
test(function() { test(function() {
assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 0, 255)"); assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 0, 255)");
assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)"); assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)");
}, "Checks that styles defined in forced-colors are preserved in forced colors mode."); }, "Checks that styles defined in forced-colors are preserved in forced colors mode.");
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - active selection reference.
</title>
<style> <style>
span { span {
background-color: Highlight; background-color: Highlight;
......
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - active selection. Forced colors mode - active selection.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-14-ref.html">
<style> <style>
br::selection { br::selection {
background-color: transparent; background-color: transparent;
......
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - text decoration and emphasis color reference.</title>
<style> <style>
p { p {
forced-color-adjust: none; forced-color-adjust: none;
...@@ -15,4 +15,3 @@ ...@@ -15,4 +15,3 @@
WindowText color in forced colors mode. WindowText color in forced colors mode.
</p> </p>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - text decoration and emphasis color.</title> <title>Forced colors mode - text decoration and emphasis color.</title>
<link rel=match href=forced-colors-mode-17-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-17-ref.html">
<style> <style>
p { p {
text-decoration: underline; text-decoration: underline;
...@@ -16,4 +16,3 @@ ...@@ -16,4 +16,3 @@
WindowText color in forced colors mode. WindowText color in forced colors mode.
</p> </p>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - fill and stroke reference.
Only text and foreignObject svg elements should have fill and stroke
overridden in forced colors mode.
</title>
<style> <style>
svg, text, foreignObject { svg, text, foreignObject {
forced-color-adjust: none; forced-color-adjust: none;
...@@ -23,4 +26,3 @@ ...@@ -23,4 +26,3 @@
</foreignObject> </foreignObject>
</svg> </svg>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - fill and stroke. <title>Forced colors mode - fill and stroke.
Only text and foreignObject svg elements should have fill and stroke Only text and foreignObject svg elements should have fill and stroke
overridden in forced colors mode. overridden in forced colors mode.
</title> </title>
<link rel=match href=forced-colors-mode-18-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-18-ref.html">
<body> <body>
<svg height="600" width="600"> <svg height="600" width="600">
<text x="0" y="15" fill="red" stroke="blue"> <text x="0" y="15" fill="red" stroke="blue">
...@@ -23,4 +23,3 @@ ...@@ -23,4 +23,3 @@
</foreignObject> </foreignObject>
</svg> </svg>
</body> </body>
</html>
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode. Forced colors mode reference.
Tests that inline images are ignored in forced colors mode when Tests that inline images are ignored in forced colors mode when
forced-color-adjust is auto. forced-color-adjust is auto.
</title> </title>
<style> <style>
body {
forced-color-adjust: none;
}
div { div {
background-image: url("resources/test-image.jpg");
display: inline; display: inline;
} }
#adjustnone { #adjustnone {
forced-color-adjust: none; background-image:
url("resources/test-image.jpg");
} }
</style> </style>
<body> <body>
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode.
Tests that inline images are ignored in forced colors mode when
forced-color-adjust is auto.
</title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-19-ref.html">
<style> <style>
div { div {
background-image: url("resources/test-image.jpg"); background-image: url("resources/test-image.jpg");
......
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - alpha channel. <title>Forced colors mode - alpha channel.
Tests that the alpha channel for background colors are preserved in forced Tests that the alpha channel for background colors are preserved in forced
colors mode. colors mode.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="../../../../../resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
div { div {
background-color: rgba(114, 173, 218, .3); background-color: rgba(114, 173, 218, .3);
...@@ -27,4 +26,3 @@ ...@@ -27,4 +26,3 @@
assert_equals(getComputedStyle(div).backgroundColor, expected_div_color); assert_equals(getComputedStyle(div).backgroundColor, expected_div_color);
}, "Checks that background color alpha channels are preserved in forced colors mode."); }, "Checks that background color alpha channels are preserved in forced colors mode.");
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - alpha channel. <title>Forced colors mode - alpha channel.
Tests that the alpha channel for background colors are preserved in forced Tests that the alpha channel for background colors are preserved in forced
colors mode at the root node. colors mode at the root node.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="../../../../../resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<style> <style>
body { body {
background-color: rgba(114, 173, 218, .3); background-color: rgba(114, 173, 218, .3);
...@@ -30,4 +29,3 @@ ...@@ -30,4 +29,3 @@
assert_equals(getComputedStyle(body).backgroundColor, expected_div_color); assert_equals(getComputedStyle(body).backgroundColor, expected_div_color);
}, "Checks that background color alpha channels are preserved in forced colors mode at the root node."); }, "Checks that background color alpha channels are preserved in forced colors mode at the root node.");
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <title>Forced colors mode - non-inherited cache reference.
Ensures that forced colors styles don't get overridden by non-inherited
cached values.
</title>
<style> <style>
body { body {
forced-color-adjust: none; forced-color-adjust: none;
...@@ -14,7 +17,6 @@ ...@@ -14,7 +17,6 @@
color: rgb(0, 0, 255); color: rgb(0, 0, 255);
} }
</style> </style>
</head>
<body> <body>
<div> <div>
<span id="a">text</span> <span id="a">text</span>
...@@ -23,4 +25,3 @@ ...@@ -23,4 +25,3 @@
<span id="b">text</span> <span id="b">text</span>
</div> </div>
</body> </body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - non-inherited cache. <title>Forced colors mode - non-inherited cache.
Ensures that forced colors styles don't get overridden by non-inherited Ensures that forced colors styles don't get overridden by non-inherited
cached values. cached values.
</title> </title>
<link rel=match href=forced-colors-mode-23-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-23-ref.html">
<style> <style>
div span{ div span{
background: rgb(0, 128, 0); background: rgb(0, 128, 0);
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
forced-color-adjust: none; forced-color-adjust: none;
} }
</style> </style>
</head>
<body> <body>
<div id="a"> <div id="a">
<span>text</span> <span>text</span>
...@@ -28,4 +27,3 @@ ...@@ -28,4 +27,3 @@
<span>text</span> <span>text</span>
</div> </div>
</body> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
}
td, th {
border: 1px solid;
border-bottom-color: black;
border-left-color: purple;
border-right-color: orange;
border-top-color: green;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: blue;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Entry1</td>
<td>Entry1</td>
<td>Entry1</td>
</tr>
<tr>
<td>Entry2</td>
<td>Entry2</td>
<td>Entry2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: lightblue;
}
#a {
background-color: lightgreen;
border: 25px solid green;
box-shadow: 2px 2px purple;
color: orange;
forced-color-adjust: auto;
margin: 25px;
padding: 25px;
text-shadow: 1px 1px gray;
width: 300px;
}
#b {
background-color: lightgreen;
border: 25px solid green;
box-shadow: 2px 2px purple;
color: orange;
forced-color-adjust: none;
margin: 25px;
padding: 25px;
text-shadow: 1px 1px gray;
width: 300px;
}
</style>
</head>
<body>
<div id="a">
The colors and shadows of this text and text box should be overridden when in
forced colors mode (forced-color-adjust is set to auto.)
</div>
<div id="b">
The colors and shadows of this text and text box should NOT be overridden when in
forced colors mode (forced-color-adjust is set to none.)
</div>
</body>
</html>
This is a testharness.js-based test.
FAIL Checks that default highlighted text style does not get overridden in forced colors mode. assert_equals: expected "rgb(0, 0, 0)" but got "rgb(255, 165, 0)"
Harness: the test ran to completion.
This is a testharness.js-based test.
FAIL Checks hyperlinks are overridden in forced colors mode. assert_equals: expected "rgba(0, 0, 0, 0.18)" but got "rgb(0, 0, 255)"
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<p>
<a href="https://www.wikipedia.org" id="link">
This link color should be overridden when forced colors mode is enabled.
</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<body>
<iframe src="forced-colors-mode-02-expected.html" width="500" height="500"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: transparent;
}
</style>
<body>
<div style="background-color: rgb(0, 0, 255);">
<p>
The text color should be overridden, and the background color of the
div element should also be overridden in forced colors mode.
</p>
</div>
<div style="background-color: transparent;">
<p>
The text color should be overridden, but the background color of the
div element should remain transparent in forced colors mode.
</p>
</div>
<div style="background-color: rgba(0, 0, 0, 0);">
<p>
The text color should be overridden, but the background color of the
div element should remain transparent in forced colors mode.
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline-color: rgb(0, 0, 255);
outline-style: solid;
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule-color: rgb(0, 0, 255);
-webkit-column-rule-style: solid;
}
</style>
</head>
<body>
<h1>
The outline-color and column-rule-color should be blue when forced colors
mode is off and WindowText in forced colors mode.
</h1>
</body>
</html>
This is a testharness.js-based test.
FAIL Checks that styles defined inside/outside forced-colors are overridden in forced colors mode. assert_not_equals: got disallowed value "rgb(0, 0, 255)"
Harness: the test ran to completion.
This is a testharness.js-based test.
FAIL Checks that styles defined inside/outside forced-colors are preserved in forced colors mode if forced-color-ajust is none. assert_equals: expected "rgb(0, 0, 255)" but got "rgb(0, 128, 0)"
Harness: the test ran to completion.
This is a testharness.js-based test.
FAIL Checks that styles defined in forced-colors are preserved in forced colors mode. assert_equals: expected "rgb(0, 0, 255)" but got "rgba(0, 0, 0, 0)"
Harness: the test ran to completion.
<!DOCTYPE html>
<style>
span {
background-color: rgba(255, 0, 0, 0.99);
color: blue;
display: inline-block;
forced-color-adjust: none;
}
</style>
<body>
<span class="select">AAA</span>
<br>
<span class="select" id="adjust-none">AAA</span>
</body>
<!DOCTYPE html>
<style>
span {
background-color: rgba(255, 0, 0, 0.99);
color: blue;
display: inline-block;
forced-color-adjust: none;
}
</style>
<body>
<span class="select">AAA</span>
<br>
<span class="select" id="adjust-none">AAA</span>
</body>
<!DOCTYPE html>
<div>
<br><span style="background-color: rgb(255, 255, 0)">AAA</span>
</div>
<div>
<br><span style="background-color: rgb(255, 150, 50)">AAA</span>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-decoration-color: red;
-webkit-text-emphasis: '*' blue;
}
</style>
<body>
<p>
The text decoration and emphasis color for this text should have a
WindowText color in forced colors mode.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<body>
<svg height="600" width="600">
<text x="0" y="15" fill="red" stroke="blue">
This text should have a WindowText fill and transparent stroke color in
forced colors mode.
</text>
<rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/>
<foreignObject x="20" y="100" width="160" height="160">
<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue;">
This text should be WindowText color in forced colors mode.
</div>
<svg height="20" width="20">
<rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/>
</svg>
</foreignObject>
</svg>
</body>
</html>
This directory is for testing Forced Colors mode implementation.
This directory is for testing Forced Colors mode implementation.
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - backplate reference.
Tests backplate invalidation.
</title>
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests backplate invalidation. Tests backplate invalidation.
</title> </title>
<link rel=match href=forced-colors-mode-backplate-07-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<link rel=match href="forced-colors-mode-backplate-07-expected.html">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - backplate. Forced colors mode - backplate.
Tests backplate is drawn behind SVG text. Tests backplate is drawn behind SVG text.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced">
<style> <style>
body { body {
background-image: url("../resources/test-image.jpg"); background-image: url("../resources/test-image.jpg");
......
This is a testharness.js-based test.
PASS Checks that default highlighted text style does not get overridden in forced colors mode.
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS Checks hyperlinks are overridden in forced colors mode.
Harness: the test ran to completion.
<!DOCTYPE html>
<html>
<head>
<body>
<iframe src="forced-colors-mode-02-expected.html" width="500" height="500"></iframe>
</body>
</html>
This is a testharness.js-based test.
PASS Checks that styles defined inside/outside forced-colors are overridden in forced colors mode.
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS Checks that styles defined inside/outside forced-colors are preserved in forced colors mode if forced-color-ajust is none.
Harness: the test ran to completion.
This is a testharness.js-based test.
PASS Checks that styles defined in forced-colors are preserved in forced colors mode.
Harness: the test ran to completion.
<!DOCTYPE html> <!DOCTYPE html>
<head> <meta charset="utf-8">
<title> <title>
Forced colors mode - animations. Forced colors mode - animations.
For properties affected by forced colors mode, animations should not run Tests that animation colors are overridden in forced colors mode.
unless forced-color-adjust is none. </title>
</title> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<style type="text/css" media="screen"> <script src="../../../../../animations/resources/animation-test-helpers.js"></script>
#box { <style media="screen">
animation-duration: 1s; #box {
animation-iteration-count: infinite; animation-duration: 1s;
animation-timing-function: linear; animation-iteration-count: infinite;
animation-name: anim; animation-timing-function: linear;
} animation-name: anim;
@keyframes anim { }
from { color: red; } @keyframes anim {
to { color: green; } from { color: red; }
} to { color: green; }
</style> }
<script src="../../../../../animations/resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script> </style>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
const expectedValues = [ const expectedValues = [
// [time, element-id, property, expected-value, tolerance] // [time, element-id, property, expected-value, tolerance]
[0.0, "box", "color", "rgb(0, 0, 0)", 1], [0.0, "box", "color", "rgb(0, 0, 0)", 1],
[0.5, "box", "color", "rgb(0, 0, 0)", 1], [0.5, "box", "color", "rgb(0, 0, 0)", 1],
[1.0, "box", "color", "rgb(0, 0, 0)", 1], [1.0, "box", "color", "rgb(0, 0, 0)", 1],
]; ];
runAnimationTest(expectedValues); runAnimationTest(expectedValues);
</script> </script>
</head>
<body> <body>
<div id="box"></div> <div id="box"></div>
</body> </body>
<!doctype html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - transitions. Forced colors mode - transitions.
Tests that color transitions work in forced colors mode. Tests that color transitions work in forced colors mode.
...@@ -6,6 +7,8 @@ ...@@ -6,6 +7,8 @@
forced-color-adjust is none. Otherwise, the color will always be forced-color-adjust is none. Otherwise, the color will always be
overridden upon transition, and no transition will actually happen. overridden upon transition, and no transition will actually happen.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="../../../../../animations/resources/animation-test-helpers.js"></script>
<style> <style>
#target { #target {
color: black; color: black;
...@@ -13,10 +16,10 @@ ...@@ -13,10 +16,10 @@
forced-color-adjust: none; forced-color-adjust: none;
transition: all 1s linear; transition: all 1s linear;
} }
#target.final {
#target.final { color: red; } color: red;
}
</style> </style>
<script src="../../../animations/resources/animation-test-helpers.js" type="text/javascript"></script>
<script> <script>
const expectedValues = [ const expectedValues = [
// [time, element-id, property, expected-value, tolerance] // [time, element-id, property, expected-value, tolerance]
......
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - inactive selection reference.
</title>
<style> <style>
span { span {
background-color: Highlight; background-color: Highlight;
......
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - inactive selection. Forced colors mode - inactive selection.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-15-expected.html">
<style> <style>
br::selection:window-inactive { br::selection:window-inactive {
background-color: transparent; background-color: transparent;
......
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8">
<title>
Forced colors mode - search reference.
</title>
<style> <style>
span { span {
forced-color-adjust: none; forced-color-adjust: none;
......
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8">
<title> <title>
Forced colors mode - search. Forced colors mode - search.
</title> </title>
<link rel=match href=forced-colors-mode-16-expected.html> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<link rel=match href="forced-colors-mode-16-expected.html">
<div> <div>
<br id='b1'>AAA <br id='b1'>AAA
</div> </div>
......
<!doctype html>
<style>
body {
forced-color-adjust: none;
}
div {
display: inline;
}
#adjustnone {
background-image:
url("../../../../../fast/css/forced-colors-mode/resources/test-image.jpg");
}
</style>
<body>
<div>
The background image behind this text should be ignored in forced colors
mode.
</div>
<div id="adjustnone">
The background image behind this text should NOT be ignored in forced
colors mode.
</div>
</body>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head>
<title>Forced colors mode - video control. <title>Forced colors mode - video control.
Ensures that the video control is usable in forced colors mode. Ensures that the video control is usable in forced colors mode.
</title> </title>
<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
<script src="../../../../../resources/testharness.js"></script> <script src="../../../../../resources/testharness.js"></script>
<script src="../../../../../resources/testharnessreport.js"></script> <script src="../../../../../resources/testharnessreport.js"></script>
<script src="../../../../../media/media-controls.js"></script> <script src="../../../../../media/media-controls.js"></script>
...@@ -22,4 +22,3 @@ ...@@ -22,4 +22,3 @@
video.src = "../../../../../media/content/test.ogv"; video.src = "../../../../../media/content/test.ogv";
}); });
</script> </script>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<head> <meta charset="utf-8">
<title> <title>
Forced colors mode - animations. Forced colors mode - animations.
For properties affected by forced colors mode, animations should run if For properties affected by forced colors mode, animations should run if
forced-color-adjust is none. forced-color-adjust is none.
</title> </title>
<style type="text/css" media="screen"> <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
#box { <script src="/resources/testharness.js"></script>
animation-duration: 1s; <script src="/resources/testharnessreport.js"></script>
animation-iteration-count: infinite; <script src="../../../../../animations/resources/animation-test-helpers.js"></script>
animation-timing-function: linear; <style media="screen">
animation-name: anim; #box {
forced-color-adjust: none; animation-duration: 1s;
} animation-iteration-count: infinite;
@keyframes anim { animation-timing-function: linear;
from { color: red; } animation-name: anim;
to { color: green; } forced-color-adjust: none;
} }
</style> @keyframes anim {
<script src="../../../../../animations/resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script> from { color: red; }
<script type="text/javascript" charset="utf-8"> to { color: green; }
const expectedValues = [ }
// [time, element-id, property, expected-value, tolerance] </style>
[0.0, "box", "color", "rgb(255, 0, 0)", 1], <script type="text/javascript" charset="utf-8">
[0.5, "box", "color", "rgb(128, 64, 0)", 1], const expectedValues = [
[1.0, "box", "color", "rgb(255, 0, 0)", 1], // [time, element-id, property, expected-value, tolerance]
]; [0.0, "box", "color", "rgb(255, 0, 0)", 1],
runAnimationTest(expectedValues); [0.5, "box", "color", "rgb(128, 64, 0)", 1],
</script> [1.0, "box", "color", "rgb(255, 0, 0)", 1],
</head> ];
runAnimationTest(expectedValues);
</script>
<body> <body>
<div id="box"></div> <div id="box"></div>
</body> </body>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment