Update and complete tests for using reserved keywords as media types (#32422)

frivoal · web-flow · commit ea1821d4bd24 · 2022-01-18T15:27:10.000+09:00
diff --git a/css/mediaqueries/mq-invalid-media-type-001.html b/css/mediaqueries/mq-invalid-media-type-001.html
@@ -18,6 +18,9 @@
 			@media not and {
 				div { background-color: red; }
 			}
+			@media and {
+				div { background-color: red; }
+			}
 	</style>
 	</head>
 	<body>
diff --git a/css/mediaqueries/mq-invalid-media-type-002.html b/css/mediaqueries/mq-invalid-media-type-002.html
@@ -18,6 +18,9 @@
 			@media not or {
 				div { background-color: red; }
 			}
+			@media or {
+				div { background-color: red; }
+			}
 	</style>
 	</head>
 	<body>
diff --git a/css/mediaqueries/mq-invalid-media-type-003.html b/css/mediaqueries/mq-invalid-media-type-003.html
@@ -18,6 +18,9 @@
 			@media not not {
 				div { background-color: red; }
 			}
+			@media not {
+				div { background-color: red; }
+			}
 	</style>
 	</head>
 	<body>
diff --git a/css/mediaqueries/mq-invalid-media-type-004.html b/css/mediaqueries/mq-invalid-media-type-004.html
@@ -18,6 +18,9 @@
 			@media not only {
 				div { background-color: red; }
 			}
+			@media only {
+				div { background-color: red; }
+			}
 	</style>
 	</head>
 	<body>
diff --git a/css/mediaqueries/mq-invalid-media-type-005.html b/css/mediaqueries/mq-invalid-media-type-005.html
@@ -0,0 +1,45 @@
+<!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="media types ''not'', ''and'', ''only'' and ''or'' must not be treated as unknown media types, but rather trigger the malformed query clause.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    @media not and {
+        div { background-color: red; }
+    }
+    @media and {
+        div { background-color: red; }
+    }
+    @media not or {
+        div { background-color: red; }
+    }
+    @media or {
+        div { background-color: red; }
+    }
+    @media not not {
+        div { background-color: red; }
+    }
+    @media not {
+        div { background-color: red; }
+    }
+    @media not only {
+        div { background-color: red; }
+    }
+    @media only {
+        div { 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, 8, "invalid rules must be treated as 'not all', not dropped");
+    }, "syntactical MQ keywords used as media types are a syntax error");
+</script>
