diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme')
12 files changed, 233 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-attribute-changes.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-attribute-changes.html new file mode 100644 index 0000000000..6f877ee416 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-attribute-changes.html @@ -0,0 +1,35 @@ +<!doctype html> +<title>Meta color-scheme - attribute changes</title> +<meta id="meta" name="color-scheme" content="dark"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<!-- + NOTE: This test assumes that the browser's default color-scheme is "light", + see https://github.com/web-platform-tests/wpt/pull/31268 for reasoning +--> +<script> + assert_root_color_scheme("dark", "Meta color-scheme initially 'dark'."); + + meta.removeAttribute("name"); + 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("light", "Set content attribute of meta color-scheme to empty string."); + + meta.setAttribute("content", ",,invalid"); + 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("light", "Removed the content attribute of meta color-scheme."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-empty-content-value.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-empty-content-value.html new file mode 100644 index 0000000000..8a3cf18af8 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-empty-content-value.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>Meta color-scheme - empty content value</title> +<meta name="color-scheme" content=""> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<!-- + NOTE: This test assumes that the browser's default color-scheme is "light", + see https://github.com/web-platform-tests/wpt/pull/31268 for reasoning +--> +<script> + assert_root_color_scheme("light", "Meta color-scheme with empty content attribute has no effect."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-first-valid-applies.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-first-valid-applies.html new file mode 100644 index 0000000000..095d0f360d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-first-valid-applies.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Multiple color-scheme meta tags - first valid applies</title> +<meta name="color-scheme"> +<meta name="color-scheme" content> +<meta name="color-scheme" content=""> +<meta name="color-scheme" content="light,dark"> +<!-- This is first with a valid content value --> +<meta name="color-scheme" content="dark"> +<meta name="color-scheme" content="light"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<script> + assert_root_color_scheme("dark", "Tree order decides which meta color-scheme applies."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-insert.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-insert.html new file mode 100644 index 0000000000..463c318105 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-insert.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>Insert color-scheme meta tags</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<!-- + NOTE: This test assumes that the browser's default color-scheme is "light", + see https://github.com/web-platform-tests/wpt/pull/31268 for reasoning +--> +<script> + function createMeta(content) { + const meta = document.createElement("meta"); + meta.setAttribute("name", "color-scheme"); + meta.setAttribute("content", content); + return meta; + } + + assert_root_color_scheme("light", "Initial color-scheme"); + + document.head.appendChild(createMeta("dark")); + assert_root_color_scheme("dark", "Inserted meta color-scheme applies"); + + document.head.insertBefore(createMeta("light"), document.head.lastChild); + assert_root_color_scheme("light", "Inserted meta color-scheme before existing in head applies"); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-no-content-value.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-no-content-value.html new file mode 100644 index 0000000000..0d22e44b26 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-no-content-value.html @@ -0,0 +1,14 @@ +<!doctype html> +<title>Meta color-scheme - no content value</title> +<meta name="color-scheme"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<!-- + NOTE: This test assumes that the browser's default color-scheme is "light", + see https://github.com/web-platform-tests/wpt/pull/31268 for reasoning +--> +<script> + assert_root_color_scheme("light", "Meta color-scheme without content attribute has no effect."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-normal-descendant-change.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-normal-descendant-change.html new file mode 100644 index 0000000000..136f4c371b --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-normal-descendant-change.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Change color-scheme meta tag affecting normal descendant</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta id="meta" name="color-scheme" content="dark"> +<div style="color-scheme: dark; color: CanvasText" id="dark"> + <div style="color-scheme: normal; color: CanvasText" id="normal"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(dark).color, getComputedStyle(normal).color); + }, "Normal initially dark"); + + meta.content = "light"; + + test(() => { + assert_not_equals(getComputedStyle(dark).color, getComputedStyle(normal).color); + }, "Normal should change to light from page color schemes"); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove-head.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove-head.html new file mode 100644 index 0000000000..587e2fa596 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove-head.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>Remove head with meta color-scheme</title> +<meta name="color-scheme" content="dark"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<!-- + NOTE: This test assumes that the browser's default color-scheme is "light", + see https://github.com/web-platform-tests/wpt/pull/31268 for reasoning +--> +<body></body> +<script> + assert_root_color_scheme("dark", "Meta color-scheme applies."); + document.head.remove(); + assert_root_color_scheme("light", "Initial value after removing head including meta color-scheme."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove.html new file mode 100644 index 0000000000..a89a520791 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-remove.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>Remove color-scheme meta tag</title> +<meta id="dark" name="color-scheme" content="dark"> +<meta id="light" name="color-scheme" content="light"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<!-- + NOTE: This test assumes that the browser's default color-scheme is "light", + see https://github.com/web-platform-tests/wpt/pull/31268 for reasoning +--> +<script> + assert_root_color_scheme("dark", "First meta applies."); + dark.remove(); + assert_root_color_scheme("light", "Second meta applies after first one is removed."); + light.remove(); + assert_root_color_scheme("light", "Initial color-scheme with both meta elements removed."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-body.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-body.html new file mode 100644 index 0000000000..19f8d53994 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-body.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Meta color-scheme in body should apply</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<body> + <meta name="color-scheme" content="dark"> +</body> +<script> + assert_root_color_scheme("dark", "Meta color-scheme in body should apply."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-head.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-head.html new file mode 100644 index 0000000000..b9fd2c4384 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-head.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>Single meta color-scheme in head</title> +<meta name="color-scheme" content="dark"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<script> + assert_root_color_scheme("dark", "Meta color-scheme in head applies."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-shadow-tree.html b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-shadow-tree.html new file mode 100644 index 0000000000..7ccafc8419 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/meta-color-scheme-single-value-in-shadow-tree.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>Meta color-scheme in shadow-tree should not apply</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/compute-root-color-scheme.js"></script> +<!-- + NOTE: This test assumes that the browser's default color-scheme is "light", + see https://github.com/web-platform-tests/wpt/pull/31268 for reasoning +--> +<script> + const host = document.createElement("div"); + host.id = "host"; + document.head.appendChild(host); + const root = host.attachShadow({mode:"open"}); + const meta = document.createElement("meta"); + meta.setAttribute("name", "color-scheme"); + meta.setAttribute("content", "dark"); + root.appendChild(meta); + + assert_root_color_scheme("light", "Meta color-scheme in shadow tree does not apply."); +</script> diff --git a/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/support/compute-root-color-scheme.js b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/support/compute-root-color-scheme.js new file mode 100644 index 0000000000..74cbf895ce --- /dev/null +++ b/testing/web-platform/tests/html/semantics/document-metadata/the-meta-element/color-scheme/support/compute-root-color-scheme.js @@ -0,0 +1,28 @@ +'use strict'; + +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(get_used_root_color_scheme(), expected_used_scheme); + assert_equals(getComputedStyle(document.documentElement).colorScheme, "normal", "Root element's color-scheme should be 'normal'"); + }, description); +} |