Bug 1642560 [wpt PR 23906] - Set color-scheme-senstive initial color via cascade, a=testonly

andruud · andruud · commit 7838708ceca1 · 2020-06-08T20:01:21.000Z
Automatic update from web-platform-tests Set color-scheme-senstive initial color via cascade We currently adjust the computed value of 'color' on the document element to simulate 'canvastext' behavior. However, there's an incorrect assumption that it's safe to adjust whenever there are no 'color' declarations in the cascade. During a transition, the base ComputedStyle is the destination style for the transitioning element, and on the final frame of the transition, the StyleEngine simply emits a copy of the base style, without adding any declaration to the cascade. This causes color- transitions on the document element to "snap back" to black (or white, depending on color-scheme) when the transition ends. This CL fixes this by adding an explicit value (CSSInitialColorValue) which represents this behavior to the cascade. The value is added only when computing the base style, which prevents incorrect adjustments on top of the final transition frame. Bug: 1087188 Change-Id: Ie0d95aaab5b93f1749e461fad0baf41a184f7cb6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2224222 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#774178} -- wpt-commits: c20b45a0352c65db0ef7f141edfd68d01f1516e2 wpt-pr: 23906 Differential Revision: https://phabricator.services.mozilla.com/D78786
diff --git a/testing/web-platform/tests/css/css-transitions/root-color-transition-ref.html b/testing/web-platform/tests/css/css-transitions/root-color-transition-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+  <h1 style="color:green">PASS if green</h1>
+</html>
diff --git a/testing/web-platform/tests/css/css-transitions/root-color-transition.html b/testing/web-platform/tests/css/css-transitions/root-color-transition.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html id=html class="reftest-wait">
+  <title>Verifies that 'color' stays the color it's transitioned to on :root</title>
+  <link rel="help" href="https://crbug.com/1087188">
+  <link rel="match" href="root-color-transition-ref.html">
+  <script src="support/helper.js"></script>
+  <h1 id=h1>PASS if green</h1>
+  <style>
+    html {
+      color: red;
+      transition: color 1s linear;
+    }
+    html.green {
+      color: green;
+    }
+  </style>
+  <script>
+    getComputedStyle(h1).color;
+
+    async function run() {
+      let transitionEnd = new Promise((resolve) => {
+        html.addEventListener('transitionend', resolve);
+      });
+      // Trigger transition:
+      html.classList.toggle('green');
+
+      const transition = html.getAnimations()[0];
+      await transition.ready;
+      await waitForFrame();
+
+      // Expedite transition, but let it finish naturally.
+      transition.currentTime = transition.effect.getTiming().duration - 1;
+      await transitionEnd;
+
+      await waitForFrame();
+    }
+
+    run().then(() => html.classList.toggle('reftest-wait'));
+  </script>
+</html>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +<!DOCTYPE html>
 +<html>
 +  <h1 style="color:green">PASS if green</h1>
 +</html>