Bug 1612113 [wpt PR 21491] - Let color-scheme affect the initial color value., a=testonly

Automatic update from web-platform-tests
Let color-scheme affect the initial color value.

We used to have a root element color value based on an internal UA sheet
value, but this is not according to spec since it affects the initial
value for the color property, hence setting the color value to 'initial'
should result in a used value that depends on the color-scheme for that
element.

Initial value for the color property is canvastext, but we do not yet
ship color-scheme aware system colors, so instead we implement this as a
method on ComputedStyle which is color-scheme aware and currently return
black for light and white for dark.

The devtools test changes are basically a revert of the necessary
changes done when we introduced -internal-root-color.

Bug: 939811
Change-Id: I63477751e1fe4aa3ce8292e8a3fc2cdb1dd3afbd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2027469
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#736763}

--

wpt-commits: 6a7bdc42ab3688499203b154772cccc3f01c0f5b
wpt-pr: 21491
This commit is contained in:
Rune Lillesveen 2020-02-04 13:16:53 +00:00 committed by moz-wptsync-bot
parent 20b3280647
commit 092d9b1e13
3 changed files with 45 additions and 0 deletions

View File

@ -0,0 +1,30 @@
<!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">
<link rel="stylesheet" href="support/assert-preferred-dark.css">
<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>

View File

@ -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.

View File

@ -0,0 +1,11 @@
<!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="stylesheet" href="support/assert-preferred-dark.css">
<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>