Set forced colors at root html element

We were previously setting forced colors at the body element. However, we should instead set these at the root html element. Bug: 970285 Change-Id: I0719d09fb7993a02162cca24a266c6a0c8eb70fd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2211124Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/master@{#771148}

Set forced colors at root html element
We were previously setting forced colors at the body element. However, we should instead set these at the root html element. Bug: 970285 Change-Id: I0719d09fb7993a02162cca24a266c6a0c8eb70fd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2211124Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/master@{#771148}
8d3658c1 · Alison Maher · Commit Bot · b1abfa46 · 8d3658c1 · 8d3658c1
Commit 8d3658c1 authored May 21, 2020 by Alison Maher Committed by Commit Bot May 21, 2020
2 changed files
--- a/third_party/blink/renderer/core/html/resources/forced_colors.css
+++ b/third_party/blink/renderer/core/html/resources/forced_colors.css
@@ -15,12 +15,15 @@
 */

 @media forced-colors {
-  body {
-    background-color: Canvas;
+  html {
    color: CanvasText;
    fill: currentColor;
  }

+  body {
+    background-color: Canvas;
+  }
+
  :focus {
    outline-color: Highlight;
  }

--- a/third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-27.html
+++ b/third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-27.html
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - html/head elements.
+  Tests that the color properties are overridden for html/head elements and not
+  just for the body.
+</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/testharnessreport.js"></script>
+<style>
+  html {
+    color: red;
+  }
+  head {
+    color: blue;
+  }
+  div {
+    color: CanvasText;
+    forced-color-adjust: none;
+  }
+</style>
+<div>
+  The color properties for the head and html elements should get updated in
+  Forced Colors Mode.
+</div>
+<script>
+  var div_color = getComputedStyle(document.querySelector('div')).color;
+  var html_color = getComputedStyle(document.querySelector('html')).color;
+  var head_color = getComputedStyle(document.querySelector('head')).color;
+
+  test(function(){
+    assert_equals(html_color, div_color);
+    assert_equals(head_color, div_color);
+  }, "Checks that html/head color is overridden to CanvasText.");
+</script>