Bug 1860838 [wpt PR 42718] - Add a test for system color support, a=t…

…estonly Automatic update from web-platform-tests Add a test for system color support (#42718) -- wpt-commits: d349a1f1a195c840946f18551d2d2e3e0c65b8cd wpt-pr: 42718
mozilla · Nov 6, 2023 · 22ff313 · 22ff313
1 parent 08c668b
commit 22ff313
Showing 1 changed file with 74 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-color/system-color-support.html b/testing/web-platform/tests/css/css-color/system-color-support.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Color 4: System color support</title>
+  <link rel="author" title="Luuk Lamers" href="mailto:[email protected]">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors">
+  <meta name="assert" content="system colors as defined are supported by the browser">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+	<style>
+		.group {
+			display: flex;
+			margin-bottom: 2px;
+			gap: 1em;
+		}
+		.group > div {
+			height: 1em;
+			width: 50%;
+		}
+	</style>
+</head>
+<body>
+  <div style="display: none">
+	  <div id="test"></div>
+  </div>
+  <script>
+	  const testRoot = document.getElementById('test')
+	  const systemColors = [
+		  'Canvas',
+		  'CanvasText',
+		  'LinkText',
+		  'VisitedText',
+		  'ActiveText',
+		  'ButtonFace',
+		  'ButtonText',
+		  'ButtonBorder',
+		  'Field',
+		  'FieldText',
+		  'Highlight',
+		  'HighlightText',
+		  'SelectedItem',
+		  'SelectedItemText',
+		  'Mark',
+		  'MarkText',
+		  'GrayText',
+		  'AccentColor',
+		  'AccentColorText'
+	  ]
+
+	  systemColors.forEach(systemColor => {
+		  const testGroup = document.createElement('div')
+		  testGroup.id = systemColor
+		  testGroup.className = 'group'
+		  testGroup.innerHTML = `
+			<div style="background-color: black; background-color: ${systemColor}"></div>
+			<div style="background-color: white; background-color: ${systemColor}"></div>`
+		  testRoot.appendChild(testGroup)
+	  })
+
+	  systemColors.forEach(systemColor => {
+		  let group = document.getElementById(systemColor)
+		  let blackElement = group.firstElementChild
+		  let whiteElement = group.lastElementChild
+		  test(function() {
+			  let blackValue = getComputedStyle(blackElement).getPropertyValue('background-color');
+			  let whiteValue = getComputedStyle(whiteElement).getPropertyValue('background-color');
+			  assert_equals(blackValue, whiteValue);
+		  }, `System color ${systemColor} works`);
+	  })
+  </script>
+</body>
+</html>