tests for error handling of layer as a media type

frivoal · frivoal · commit bed0261ca3f7 · 2022-05-05T16:20:58.000+09:00
Based on w3c/csswg-drafts#7225
diff --git a/css/mediaqueries/mq-invalid-media-type-layer-001.html b/css/mediaqueries/mq-invalid-media-type-layer-001.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Test: syntax error handling in Media Queries</title>
+		<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+		<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
+		<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+		<meta name="assert" content="'layer' is an invalid media type">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				width: 100px;
+				height: 100px;
+			}
+			@media all {
+				div { background-color: green; }
+			}
+			@media not layer {
+				div { background-color: red; }
+			}
+			@media layer {
+				div { background-color: red; }
+			}
+	</style>
+	</head>
+	<body>
+		<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
+
diff --git a/css/mediaqueries/mq-invalid-media-type-layer-002.html b/css/mediaqueries/mq-invalid-media-type-layer-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>Mediaqueries-3 test: parsing hanging-punctuation with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#error-handling">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<meta name="flags" content="invalid">
+<meta name="assert" content="'layer' must not be treated as an unknown media type, but rather trigger the malformed query clause.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    @media not layer {
+        body { background-color: red; }
+    }
+    @media layer {
+        body { background-color: red; }
+    }
+</style>
+<script>
+var queries = document.styleSheets[0].cssRules;
+test(() => {
+        for (const query of queries) {
+                assert_equals(query.conditionText, "not all");
+        }
+        assert_equals(queries.length, 2, "invalid rules must be treated as 'not all', not dropped");
+    }, "'layer' used as media types is a syntax error");
+</script>
