Change wpt tests for <meta name=color-scheme> to not depend on the co…

…lor-scheme computed value (before whatwg/html#7226)

This makes the tests valid both with and without the spec change
proposed above. Will send a follow-up PR to test the spec change.

This makes the assumption that the initial browser's color-scheme is
light, which I think is a reasonable assumption to run these tests
under.

An alternative would have to allow both "light" and "dark" wherever we
check for "normal" now (which loses test coverage in practice), or I
could complicate the test to compute the initial color-scheme using an
iframe or what not (but that complicates everything more).

html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-attribute-changes.html

@@ -9,20 +9,23 @@
   assert_root_color_scheme("dark", "Meta color-scheme initially 'dark'.");
 
   meta.removeAttribute("name");
-  assert_root_color_scheme("normal", "Removed name attribute from meta color-scheme.");
+  assert_root_color_scheme("light", "Removed name attribute from meta color-scheme.");
 
   meta.setAttribute("name", "color-scheme");
   assert_root_color_scheme("dark", "Set meta name to color-scheme.");
 
   meta.setAttribute("content", "");
-  assert_root_color_scheme("normal", "Set content attribute of meta color-scheme to empty string.");
+  assert_root_color_scheme("light", "Set content attribute of meta color-scheme to empty string.");
 
   meta.setAttribute("content", ",,invalid");
-  assert_root_color_scheme("normal", "Set content attribute of meta color-scheme to an invalid value.");
+  assert_root_color_scheme("light", "Set content attribute of meta color-scheme to an invalid value.");
 
   meta.setAttribute("content", "light");
   assert_root_color_scheme("light", "Set content attribute of meta color-scheme to 'light'.");
 
+  meta.setAttribute("content", "dark");
+  assert_root_color_scheme("dark", "Set content attribute of meta color-scheme to 'dark'.");
+
   meta.removeAttribute("content");
-  assert_root_color_scheme("normal", "Removed the content attribute of meta color-scheme.");
+  assert_root_color_scheme("light", "Removed the content attribute of meta color-scheme.");
 </script>

html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-empty-content-value.html

@@ -6,5 +6,5 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/compute-root-color-scheme.js"></script>
 <script>
-  assert_root_color_scheme("normal", "Meta color-scheme with empty content attribute has no effect.");
+  assert_root_color_scheme("light", "Meta color-scheme with empty content attribute has no effect.");
 </script>

html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-insert.html

@@ -12,11 +12,11 @@
     return meta;
   }
 
-  assert_root_color_scheme("normal", "Initial color-scheme");
+  assert_root_color_scheme("light", "Initial color-scheme");
 
-  document.head.appendChild(createMeta("light"));
-  assert_root_color_scheme("light", "Inserted meta color-scheme applies");
+  document.head.appendChild(createMeta("dark"));
+  assert_root_color_scheme("dark", "Inserted meta color-scheme applies");
 
-  document.head.insertBefore(createMeta("dark"), document.head.lastChild);
-  assert_root_color_scheme("dark", "Inserted meta color-scheme before existing in head applies");
+  document.head.insertBefore(createMeta("light"), document.head.lastChild);
+  assert_root_color_scheme("light", "Inserted meta color-scheme before existing in head applies");
 </script>

html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-no-content-value.html

@@ -6,5 +6,5 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/compute-root-color-scheme.js"></script>
 <script>
-  assert_root_color_scheme("normal", "Meta color-scheme without content attribute has no effect.");
+  assert_root_color_scheme("light", "Meta color-scheme without content attribute has no effect.");
 </script>

html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove-head.html

@@ -9,5 +9,5 @@
 <script>
   assert_root_color_scheme("dark", "Meta color-scheme applies.");
   document.head.remove();
-  assert_root_color_scheme("normal", "Initial value after removing head including meta color-scheme.");
+  assert_root_color_scheme("light", "Initial value after removing head including meta color-scheme.");
 </script>

html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove.html

@@ -11,5 +11,5 @@
   dark.remove();
   assert_root_color_scheme("light", "Second meta applies after first one is removed.");
   light.remove();
-  assert_root_color_scheme("normal", "Initial color-scheme with both meta elements removed.");
+  assert_root_color_scheme("light", "Initial color-scheme with both meta elements removed.");
 </script>

html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-shadow-tree.html

@@ -14,5 +14,5 @@
   meta.setAttribute("content", "dark");
   root.appendChild(meta);
 
-  assert_root_color_scheme("normal", "Meta color-scheme in shadow tree does not apply.");
+  assert_root_color_scheme("light", "Meta color-scheme in shadow tree does not apply.");
 </script>

html/semantics/document-metadata/the-meta-element/color-scheme/support/compute-root-color-scheme.js

@@ -1,7 +1,27 @@
 'use strict';
 
-function assert_root_color_scheme(expected, description) {
+function assert_root_color_scheme(expected_used_scheme, description) {
+  function get_used_root_color_scheme() {
+    let light = get_system_color("only light", "CanvasText");
+    let dark = get_system_color("only dark", "CanvasText");
+    assert_not_equals(light, dark, "CanvasText system color should be different with light and dark color schemes");
+    let root = getComputedStyle(document.documentElement).color;
+    assert_in_array(root, [light, dark], "Root color scheme should be either light or dark, or the text needs to be extended for newer color-schemes");
+    return root == light ? "light" : "dark";
+  }
+
+  function get_system_color(scheme, color) {
+    let div = document.createElement("div");
+    div.style.color = color;
+    div.style.colorScheme = scheme;
+
+    document.documentElement.appendChild(div);
+    let computed = getComputedStyle(div).color;
+    div.remove();
+    return computed;
+  }
+
   test(() => {
-    assert_equals(getComputedStyle(document.documentElement).colorScheme, expected), "Check root element color scheme";
+    assert_equals(get_used_root_color_scheme(), expected_used_scheme);
   }, description);
 }