summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-conditional
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-conditional
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-conditional')
-rw-r--r--testing/web-platform/tests/css/css-conditional/META.yml5
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-001.html37
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-002.html37
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-003.html38
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-content-001.html51
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-content-002.html38
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-content-003.html46
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-content-004.html43
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-dynamic-001.html27
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-001.html17
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-002.html17
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-001-ref.html19
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-001.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-002.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-003.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-004.html27
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-005.html27
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-006.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-007.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-008.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-009.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-010.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-011.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-012.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-013.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-014.html28
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-015.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-016.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-017.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-018.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-019.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-020.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-021.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-022.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-023.html27
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-024.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-025.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-026.html26
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-027-ref.html19
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-027.html23
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-028.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-029.html23
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-030.html25
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-031.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-032.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-033.html24
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-034.html42
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-035.html42
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-036.html45
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-037.html43
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-038.html42
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-039.html42
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-043.html32
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-044.html58
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-045.html38
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-046.html72
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-047.html23
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-content-001.html51
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-content-002.html38
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-content-003.html46
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-content-004.html43
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-font-format-001.html56
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-font-tech-001.html56
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-namespace-001.html54
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-namespace-002.html49
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-selector-001.html19
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-selector-002.html18
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-selector-003.html18
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-selector-004.html18
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations-ref.html19
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations.html50
-rw-r--r--testing/web-platform/tests/css/css-conditional/at-supports-whitespace.html39
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-001.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-002.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-003.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-004.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-005.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-006.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-007.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-008.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-009.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-010.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-011.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-012.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-013.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-014.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-015.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-016.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-017.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-018.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-019.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-020.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-021.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-022.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-023.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-024.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-025.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-026.xht20
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-029.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-030.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-031.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-032.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-033.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-034.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-035.xht21
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-036.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-037.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-038.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-039.xht19
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-040.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-041.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-042.xht17
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-043.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-044.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-045.xht18
-rw-r--r--testing/web-platform/tests/css/css-conditional/css-supports-046.xht21
-rw-r--r--testing/web-platform/tests/css/css-conditional/idlharness.html47
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/001.html216
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/CSS-supports-CSSStyleDeclaration.html761
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/CSS-supports-L3.html80
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/CSS-supports-L4.html79
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/CSS-supports-L5.html43
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/CSS-supports-selector-detecting-invalid-in-logical-combinations.html58
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/conditional-CSSGroupingRule.html244
-rw-r--r--testing/web-platform/tests/css/css-conditional/js/supports-conditionText.html41
-rw-r--r--testing/web-platform/tests/css/css-conditional/reference/background-lime.html14
-rw-r--r--testing/web-platform/tests/css/css-conditional/support/at-media-dynamic-001-inner.html8
-rw-r--r--testing/web-platform/tests/css/css-conditional/support/fail.css1
-rw-r--r--testing/web-platform/tests/css/css-conditional/support/pass.xht12
129 files changed, 4667 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-conditional/META.yml b/testing/web-platform/tests/css/css-conditional/META.yml
new file mode 100644
index 0000000000..0b9cc5ac3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/META.yml
@@ -0,0 +1,5 @@
+spec: https://drafts.csswg.org/css-conditional/
+suggested_reviewers:
+ - arkhi
+ - dbaron
+ - frivoal \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-001.html b/testing/web-platform/tests/css/css-conditional/at-media-001.html
new file mode 100644
index 0000000000..b2f4781d0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-001.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Support for simple passing conditions in @media</title>
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#use">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if rules under a true @media condition are applied in place.">
+ <style>
+ div {
+ background: red;
+ height: 25px;
+ width: 100px;
+ }
+
+ @media all {
+ .test1 { background: green; }
+ .test2 { background: red; }
+ }
+ .test2 { background: green; }
+
+ @media not unknown {
+ .test3 { background: green; }
+ .test4 { background: red; }
+ }
+ .test4 { background: green; }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+ <div class="test3"></div>
+ <div class="test4"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-002.html b/testing/web-platform/tests/css/css-conditional/at-media-002.html
new file mode 100644
index 0000000000..7ba46b3291
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-002.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Support for simple failing conditions in @media</title>
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#use">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if rules under a false @media condition are not applied.">
+ <style>
+ div {
+ background: green;
+ height: 25px;
+ width: 100px;
+ }
+ @media not all {
+ .test1 { background: red; }
+ }
+ @media unknown {
+ .test2 { background: red; }
+ }
+ @media (unknown) {
+ .test3 { background: red; }
+ }
+ @media not (unknown) {
+ .test4 { background: red; }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+ <div class="test3"></div>
+ <div class="test4"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-003.html b/testing/web-platform/tests/css/css-conditional/at-media-003.html
new file mode 100644
index 0000000000..1b21765363
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-003.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Invalid rules after @media</title>
+ <!-- This test is paired with at-supports-045.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if rules required to occur before all style rules are invalid after @media.">
+ <style>
+ @namespace x "http://www.w3.org/";
+ @media { /* invalidates later rules even if empty */ }
+ @import "support/fail.css";
+ @namespace y "http://www.w3.org/";
+
+ .test1, x|div { background: green; }
+ .test1, y|div { background: red; }
+
+ div {
+ background: red;
+ height: 50px;
+ width: 100px;
+ }
+ </style>
+ <style>
+ @media all {
+ /* @supports isn't invalidated, only misordered stuff after it is */
+ .test2 { background: green; }
+ }
+ @import "support/fail.css";
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-content-001.html b/testing/web-platform/tests/css/css-conditional/at-media-content-001.html
new file mode 100644
index 0000000000..8ad16b4f2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-content-001.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Invalid rules inside @media</title>
+ <!-- This test is paired with at-supports-content-001.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if invalid rules within @media do not invalidate the @media rule.">
+ <style>
+ div {
+ background: red;
+ height: 20px;
+ width: 100px;
+ }
+
+ @media all {
+ @import "support/fail.css";
+ .test1 { background: green; }
+ }
+ @media all {
+ @namespace foo "http://www.w3.org/";
+ .test2 { background: green; }
+ .test2:not(foo|div) { background: red; }
+ }
+ @media all {
+ @charset "utf-8";
+ .test3 { background: green; }
+ }
+ @media all {
+ @unknown;
+ .test4 { background: green; }
+ }
+ @media all {
+ .test5 { background: green; }
+ @unknown {
+ .test5 { background: red; }
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+ <div class="test3"></div>
+ <div class="test4"></div>
+ <div class="test5"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-content-002.html b/testing/web-platform/tests/css/css-conditional/at-media-content-002.html
new file mode 100644
index 0000000000..9e5cf43052
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-content-002.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): @font-face rules inside @media</title>
+ <!-- This test is paired with at-supports-content-002.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
+ <link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-face-rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if @font-face rules within @media are supported.">
+ <style>
+ div {
+ background: red;
+ color: green;
+ font: 100px/1 Blockify, sans-serif;
+ width: 100px;
+ }
+
+ @media all {
+ @font-face {
+ font-family: 'Blockify';
+ src: url('/fonts/Ahem.ttf');
+ }
+ }
+ @media not all {
+ @font-face {
+ font-family: 'Blockify';
+ src: local('Arial'), url('/fonts/fail.woff');
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1">X</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-content-003.html b/testing/web-platform/tests/css/css-conditional/at-media-content-003.html
new file mode 100644
index 0000000000..7d867a5b7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-content-003.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): @keyframes rules inside @media</title>
+ <!-- This test is paired with at-supports-content-003.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
+ <link rel="help" href="https://www.w3.org/TR/css-animations-1/">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if @keyframes rules within @media are supported.">
+ <style>
+ div {
+ background: red;
+ width: 100px;
+ height: 100px;
+ animation: green 4s both;
+ }
+
+ @media all {
+ @keyframes green {
+ from {
+ background: green;
+ }
+ to {
+ background: green;
+ }
+ }
+ }
+ @media not all {
+ @keyframes green {
+ from {
+ background: red;
+ }
+ to {
+ background: red;
+ }
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-content-004.html b/testing/web-platform/tests/css/css-conditional/at-media-content-004.html
new file mode 100644
index 0000000000..bfd3e83432
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-content-004.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): @counter-style rules inside @media</title>
+ <!-- This test is paired with at-supports-content-004.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
+ <link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-counter-style-rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if @counter-style rules within @media are supported.">
+ <link rel="stylesheet" href="/fonts/ahem.css">
+ <style>
+ div {
+ background: red;
+ color: green;
+ font: 100px/1 Ahem, sans-serif;
+ width: 100px;
+ height: 100px;
+ }
+ div::before {
+ content: counter(test, x);
+ }
+
+ @media all {
+ @counter-style x {
+ system: cyclic;
+ symbols: 'X';
+ }
+ }
+ @media not all {
+ @counter-style x {
+ system: cyclic;
+ symbols: ' ';
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-dynamic-001.html b/testing/web-platform/tests/css/css-conditional/at-media-dynamic-001.html
new file mode 100644
index 0000000000..8a1c93e4d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-dynamic-001.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>CSS Test (Conditional Rules): Rule application is immediate on condition change</title>
+<meta name="assert"
+ content="Test passes if rules within @media are applied when its condition changes to match.">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#processing">
+<link rel="match" href="at-supports-001-ref.html">
+
+<style>
+iframe {
+ border: none;
+ width: 200px;
+ height: 100px;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<iframe id=frame src="support/at-media-dynamic-001-inner.html"></iframe>
+
+<script>
+ var handler = function () {
+ document.getElementById("frame").style.width = "100px";
+ document.documentElement.classList = "";
+ };
+ document.addEventListener("TestRendered", handler);
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-001.html b/testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-001.html
new file mode 100644
index 0000000000..49fd608dd7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: DESCRIPTION OF TEST</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+ <link rel="match" href="reference/background-lime.html">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media">
+ <meta name="assert" content="Whitespace after the MEDIA_SYM token is optional (S*).">
+ <style>
+ @media{ body { background: lime; color: black; } }
+ </style>
+ </head>
+ <body>
+ This page should have a light green background.
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-002.html b/testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-002.html
new file mode 100644
index 0000000000..7ae37f5bf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-media-whitespace-optional-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: DESCRIPTION OF TEST</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+ <link rel="match" href="reference/background-lime.html">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media">
+ <meta name="assert" content="Whitespace after the MEDIA_SYM token is optional (S*).">
+ <style>
+ @media(min-width:0px){ body { background: lime; color: black; } }
+ </style>
+ </head>
+ <body>
+ This page should have a light green background.
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-001-ref.html b/testing/web-platform/tests/css/css-conditional/at-supports-001-ref.html
new file mode 100644
index 0000000000..a8157aa752
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-001-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <style>
+ div {
+ background-color:green;
+ height:100px;
+ width:100px;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-001.html b/testing/web-platform/tests/css/css-conditional/at-supports-001.html
new file mode 100644
index 0000000000..6ba1bd3e2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-001.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Support for simple passing conditions in @supports</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:50px;
+ width:100px;
+ }
+ @supports (margin: 0) {
+ .test1 { background:green; }
+ .test2 { background: red; }
+ }
+ .test2 { background: green; }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-002.html b/testing/web-platform/tests/css/css-conditional/at-supports-002.html
new file mode 100644
index 0000000000..4b703951e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-002.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Support for @supports within @media</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @media all {
+ @supports (margin: 0) {
+ div { background-color:green; }
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-003.html b/testing/web-platform/tests/css/css-conditional/at-supports-003.html
new file mode 100644
index 0000000000..029ce3744c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-003.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Support for @media within @supports</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: 0) {
+ @media all{
+ div { background-color:green; }
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-004.html b/testing/web-platform/tests/css/css-conditional/at-supports-004.html
new file mode 100644
index 0000000000..f2cdfe3f16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-004.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): @supports within non-matching @media should not apply</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ @media not all {
+ @supports (margin: 0) {
+ div { background-color:red; }
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-005.html b/testing/web-platform/tests/css/css-conditional/at-supports-005.html
new file mode 100644
index 0000000000..62475029b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-005.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): non-matching @media within @supports should not apply</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ @supports (margin: 0) {
+ @media not all {
+ div { background-color:red; }
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-006.html b/testing/web-platform/tests/css/css-conditional/at-supports-006.html
new file mode 100644
index 0000000000..4e6ea9bcf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-006.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Nested parens around conditions in @supports should work</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ((margin: 0)) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-007.html b/testing/web-platform/tests/css/css-conditional/at-supports-007.html
new file mode 100644
index 0000000000..975a84726d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-007.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Conjunctions of passing simple conditions in @supports should pass</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ((margin: 0) and (display:inline-block !important)) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-008.html b/testing/web-platform/tests/css/css-conditional/at-supports-008.html
new file mode 100644
index 0000000000..f133c37251
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-008.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Disjunctions with at least a passing simple condition in @supports should pass</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ((margin: 0) or (foo: 15em)) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-009.html b/testing/web-platform/tests/css/css-conditional/at-supports-009.html
new file mode 100644
index 0000000000..2d53fd8a5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-009.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Negations of failing simple conditions in @supports should pass</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (not (yadayada: x, calc( 2/3 ))) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-010.html b/testing/web-platform/tests/css/css-conditional/at-supports-010.html
new file mode 100644
index 0000000000..468afe7e3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-010.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Combinations of conjuctions, disjunctions, and negations of simple conditions in @supports should work</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ((yada: 2kg !trivial) or ((not (foo:bar)) and (((visibility:hidden))))) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-011.html b/testing/web-platform/tests/css/css-conditional/at-supports-011.html
new file mode 100644
index 0000000000..02e744e4b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-011.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Conditions not enclosed in parens in @supports should not work</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ @supports margin: 0 {
+ div { background-color:red; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-012.html b/testing/web-platform/tests/css/css-conditional/at-supports-012.html
new file mode 100644
index 0000000000..e46e5a367d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-012.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Conjunctions with more than two terms in @supports should work</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ((margin: 0) and (background: blue) and (padding:inherit)) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-013.html b/testing/web-platform/tests/css/css-conditional/at-supports-013.html
new file mode 100644
index 0000000000..1c5f633614
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-013.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Disjunction with more than two terms in @supports should work</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ((yoyo: yaya) or (margin: 0) or (answer: 42)) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-014.html b/testing/web-platform/tests/css/css-conditional/at-supports-014.html
new file mode 100644
index 0000000000..c26d8057d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-014.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Negations in @supports should not work if "not" isn't follow by a space</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (width: 0) {
+ div { background-color:green; }
+ }
+ @supports not(foo: baz) {
+ div { background-color:red; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-015.html b/testing/web-platform/tests/css/css-conditional/at-supports-015.html
new file mode 100644
index 0000000000..a8a9019f25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-015.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Bizarre syntax that still conforms to the core grammar should succesfully parse in @supports</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (not (foo: baz !unrelated $ ,/[&])) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-016.html b/testing/web-platform/tests/css/css-conditional/at-supports-016.html
new file mode 100644
index 0000000000..f8feaa4700
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-016.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): In @supports, parens are required to mix conjunctions with disjunctions</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div{
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ @supports ((margin: 0) and (display: inline) or (width:1em)) {
+ div { background-color:red; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-017.html b/testing/web-platform/tests/css/css-conditional/at-supports-017.html
new file mode 100644
index 0000000000..42ca8c103b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-017.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): In @supports, functions can be parsed successfully</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (background: url("http://www.example.com/foo.jpg")) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-018.html b/testing/web-platform/tests/css/css-conditional/at-supports-018.html
new file mode 100644
index 0000000000..024c232f10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-018.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): In @supports conditions, the arguments of a function can begin with spaces</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (not (width:compute( 2px + 2px ))) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-019.html b/testing/web-platform/tests/css/css-conditional/at-supports-019.html
new file mode 100644
index 0000000000..7e6bf448d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-019.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: ) {
+ div { background-color:red !important; }
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-020.html b/testing/web-platform/tests/css/css-conditional/at-supports-020.html
new file mode 100644
index 0000000000..eed31e5ead
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-020.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: 2px) ) {
+ div { background-color:red !important; }
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-021.html b/testing/web-platform/tests/css/css-conditional/at-supports-021.html
new file mode 100644
index 0000000000..a3fdc83ccb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-021.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin:0 );
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-022.html b/testing/web-platform/tests/css/css-conditional/at-supports-022.html
new file mode 100644
index 0000000000..ec41734b42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-022.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports [margin: 0] {
+ div { background-color:red !important; }
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-023.html b/testing/web-platform/tests/css/css-conditional/at-supports-023.html
new file mode 100644
index 0000000000..e3df4f6f70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-023.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in nested @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @media all {
+ @supports (width: 0)) {}
+ @supports (margin:0) { div { background-color:green !important; } }
+ }
+ div { background-color:red; }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-024.html b/testing/web-platform/tests/css/css-conditional/at-supports-024.html
new file mode 100644
index 0000000000..94827ff53b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-024.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports;
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-025.html b/testing/web-platform/tests/css/css-conditional/at-supports-025.html
new file mode 100644
index 0000000000..e7079ee5cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-025.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ((margin:0) and [padding:0]) {
+ div { background-color:red !important; }
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-026.html b/testing/web-platform/tests/css/css-conditional/at-supports-026.html
new file mode 100644
index 0000000000..842a0ad663
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-026.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: 0]) {
+ div { background-color:red !important; }
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-027-ref.html b/testing/web-platform/tests/css/css-conditional/at-supports-027-ref.html
new file mode 100644
index 0000000000..9d1fbaaf47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-027-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <style>
+ div {
+ background-color:green;
+ height:100px;
+ width:100px;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-027.html b/testing/web-platform/tests/css/css-conditional/at-supports-027.html
new file mode 100644
index 0000000000..11a0ed1f0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-027.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-027-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ @supports (margin:0) { div { background-color:green; } }
+ div {
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: 0)
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-028.html b/testing/web-platform/tests/css/css-conditional/at-supports-028.html
new file mode 100644
index 0000000000..3abc95ebd0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-028.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: 0)) {}
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-029.html b/testing/web-platform/tests/css/css-conditional/at-supports-029.html
new file mode 100644
index 0000000000..b78a711fe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-029.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-027-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ @supports (margin:0) { div { background-color:green; } }
+ div {
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: 0) !
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-030.html b/testing/web-platform/tests/css/css-conditional/at-supports-030.html
new file mode 100644
index 0000000000..a2b66cfa63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-030.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin:0) { div { background-color:green; } }
+ @supports ((margin: 0) and ;
+ div { background-color:red; }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-031.html b/testing/web-platform/tests/css/css-conditional/at-supports-031.html
new file mode 100644
index 0000000000..2b4621d494
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-031.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports (margin: 0)) ;
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-032.html b/testing/web-platform/tests/css/css-conditional/at-supports-032.html
new file mode 100644
index 0000000000..d53deb1757
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-032.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports {}
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-033.html b/testing/web-platform/tests/css/css-conditional/at-supports-033.html
new file mode 100644
index 0000000000..d2c682fb8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-033.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+ <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+ <link rel="author" href="http://opera.com" title="Opera Software ASA">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports ;
+ @supports (margin:0) { div { background-color:green; } }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-034.html b/testing/web-platform/tests/css/css-conditional/at-supports-034.html
new file mode 100644
index 0000000000..d9b9612eec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-034.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+ <!--
+
+ supports_condition_in_parens
+ : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+ general_enclosed
+ ;
+
+ -->
+
+ <style>
+ div
+ {
+ background-color: red;
+ height: 100px;
+ width: 100px;
+ }
+
+ @supports (margin: 0 or padding: 0) { div {background-color: red !important;} }
+
+ @supports (margin: 0) { div {background-color: green;} }
+ </style>
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+ <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-035.html b/testing/web-platform/tests/css/css-conditional/at-supports-035.html
new file mode 100644
index 0000000000..23a706b32b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-035.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+ <!--
+
+ supports_condition_in_parens
+ : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+ general_enclosed
+ ;
+
+ -->
+
+ <style>
+ div
+ {
+ background-color: red;
+ height: 100px;
+ width: 100px;
+ }
+
+ @supports (margin: 0) { div {background-color: green;} }
+
+ @supports (margin: 0 or padding: 0) { div {background-color: red;} }
+ </style>
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+ <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-036.html b/testing/web-platform/tests/css/css-conditional/at-supports-036.html
new file mode 100644
index 0000000000..f352d5dbcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-036.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+ <!--
+
+ supports_condition_in_parens
+ : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+ general_enclosed
+ ;
+
+ -->
+
+ <style>
+ div
+ {
+ background-color: red;
+ height: 100px;
+ width: 100px;
+ }
+
+ @supports (margin: 0 and padding: 0)
+ {
+ div {background-color: red !important;}
+ }
+
+ @supports (margin: 0) { div {background-color: green;} }
+ </style>
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+ <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-037.html b/testing/web-platform/tests/css/css-conditional/at-supports-037.html
new file mode 100644
index 0000000000..7f23db6fdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-037.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+ <!--
+
+ supports_condition_in_parens
+ : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+ general_enclosed
+ ;
+
+ -->
+
+ <style>
+ div
+ {
+ background-color: red;
+ height: 100px;
+ width: 100px;
+ }
+
+ @supports (margin: 0) { div {background-color: green;} }
+
+ @supports (margin: 0 and padding: 0) { div {background-color: red;} }
+
+ </style>
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+ <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-038.html b/testing/web-platform/tests/css/css-conditional/at-supports-038.html
new file mode 100644
index 0000000000..868a1e1f98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-038.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test (Conditional Rules): a supports condition declaration can not end with a semi-colon</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="Each individual single supports condition declaration can not end up with a semi-colon ';'. A semi-colon is a punctuation separator of multiple CSS declarations and thus is not part of an individual CSS declaration per se.">
+
+ <!--
+
+ supports_condition_in_parens
+ : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+ general_enclosed
+ ;
+
+ -->
+
+ <style>
+ div
+ {
+ background-color: red;
+ height: 100px;
+ width: 100px;
+ }
+
+ @supports (margin: 0;) { div {background-color: red !important;} }
+
+ @supports (margin: 0) { div {background-color: green;} }
+ </style>
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+ <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-039.html b/testing/web-platform/tests/css/css-conditional/at-supports-039.html
new file mode 100644
index 0000000000..58e7ac2f00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-039.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test (Conditional Rules): a supports condition declaration can not end with a semi-colon</title>
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="Each individual single supports condition declaration can not end up with a semi-colon ';'. A semi-colon is a punctuation separator of multiple CSS declarations and thus is not part of an individual CSS declaration per se.">
+
+ <!--
+
+ supports_condition_in_parens
+ : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+ general_enclosed
+ ;
+
+ -->
+
+ <style>
+ div
+ {
+ background-color: red;
+ height: 100px;
+ width: 100px;
+ }
+
+ @supports (margin: 0) { div {background-color: green;} }
+
+ @supports (margin: 0;) { div {background-color: red;} }
+ </style>
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+ <div></div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-043.html b/testing/web-platform/tests/css/css-conditional/at-supports-043.html
new file mode 100644
index 0000000000..bf74ca6614
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-043.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+
+ <title>CSS Conditional Test: Disjunction token `or` should not immediately precede its following opening paren.</title>
+
+ <link rel="author" title="Fabien Basmaison" href="https://arkhi.org/">
+ <link rel="help" href="https://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+
+ <meta name="flags" content="invalid">
+ <meta name="assert" content="This tests that the `or` token requires at least one whitespace on its right hand. A string followed immediately by an opening paren is reserved for the functional notation syntax.">
+
+ <style>
+ div {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+
+ @supports ( ( background-color: red ) or( background-color: green ) ) {
+ div { background-color: red; }
+ }
+ </style>
+ </head>
+
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-044.html b/testing/web-platform/tests/css/css-conditional/at-supports-044.html
new file mode 100644
index 0000000000..e0fd6c0b02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-044.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="UTF-8">
+
+<title>CSS Conditional Test: Custom Properties in @supports</title>
+<meta name="assert"
+ content="Test passes if custom properties are supported and correctly detected in @supports,
+ or unsupported and correctly detected in @supports.">
+<link rel="help" href="https://www.w3.org/TR/css3-conditional/#at-supports">
+<link rel="help" href="https://www.w3.org/TR/css-variables-1/">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="at-supports-001-ref.html">
+
+<style>
+ div {
+ background: green;
+ height: 20px;
+ width: 100px;
+ }
+
+ body {
+ --badcolor: red;
+ --goodcolor: green;
+ }
+ div {
+ background: var(--badcolor);
+ }
+ @supports (--foo: whatever) {
+ .test1 { background: green; }
+ }
+
+ @supports (--foo: whatever !important) {
+ .test2 { background: var(--goodcolor); }
+ }
+
+ .test3 { background: green; }
+ @supports (--foo: whatever !bogus) {
+ .test3 { background: red; }
+ }
+
+ @supports (color: var(--anything) invalid-value) {
+ .test4 { background: green; }
+ }
+
+ .test5 { background: red; }
+ @supports not (--goodcolor: green) {
+ .test5 { background: green; }
+ }
+ .test5 { background: var(--goodcolor) }
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+<div class="test1"></div>
+<div class="test2"></div>
+<div class="test3"></div>
+<div class="test4"></div>
+<div class="test5"></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-045.html b/testing/web-platform/tests/css/css-conditional/at-supports-045.html
new file mode 100644
index 0000000000..8beeadf206
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-045.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Invalid rules after @supports</title>
+ <!-- This test is paired with at-media-003.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if rules required to occur before all style rules are invalid after @supports.">
+ <style>
+ @namespace x "http://www.w3.org/";
+ @supports (background: blue) { /* invalidates later rules even if empty */ }
+ @import "support/fail.css";
+ @namespace y "http://www.w3.org/";
+
+ .test1, x|div { background: green; }
+ .test1, y|div { background: red; }
+
+ div {
+ background: red;
+ height: 50px;
+ width: 100px;
+ }
+ </style>
+ <style>
+ @supports (background: blue) {
+ /* @supports isn't invalidated, only misordered stuff after it is */
+ .test2 { background: green; }
+ }
+ @import "support/fail.css";
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-046.html b/testing/web-platform/tests/css/css-conditional/at-supports-046.html
new file mode 100644
index 0000000000..a239a11796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-046.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="UTF-8">
+
+<title>CSS Conditional Test: Unknown Functional Notation as False in @supports</title>
+<meta name="assert"
+ content="Test passes if unknown but grammatical functional notations are treated as false in @supports.">
+<link rel="help" href="https://www.w3.org/TR/css3-conditional/#at-supports">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="match" href="at-supports-001-ref.html">
+
+<style>
+ div {
+ background: green;
+ height: 10px;
+ width: 100px;
+ }
+
+ div {
+ background: red;
+ }
+
+ @supports not unknown() {
+ .test1.bare { background: green; }
+ }
+ @supports (not (unknown())) {
+ .test1.wrapped { background: green; }
+ }
+
+ @supports not unknown(with stuff) {
+ .test2.bare { background: green; }
+ }
+ @supports (not (unknown(with stuff))) {
+ .test2.wrapped { background: green; }
+ }
+
+ @supports not unknown(!@#% { ... } more() @stuff [ ]) {
+ .test3.bare { background: green; }
+ }
+ @supports (not (unknown(!@#% { ... } more() @stuff [ ]))) {
+ .test3.wrapped { background: green; }
+ }
+
+ .test4, .test5 { background: green; }
+
+ @supports unknown() {
+ .test4.bare { background: red; }
+ }
+ @supports (unknown()) {
+ .test4.wrapped { background: red; }
+ }
+
+ @supports unknown(with stuff) {
+ .test5.bare { background: red; }
+ }
+ @supports (unknown(with stuff)) {
+ .test5.wrapped { background: red; }
+ }
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+<div class="test1 bare"></div>
+<div class="test2 bare"></div>
+<div class="test3 bare"></div>
+<div class="test4 bare"></div>
+<div class="test5 bare"></div>
+<div class="test1 wrapped"></div>
+<div class="test2 wrapped"></div>
+<div class="test3 wrapped"></div>
+<div class="test4 wrapped"></div>
+<div class="test5 wrapped"></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-047.html b/testing/web-platform/tests/css/css-conditional/at-supports-047.html
new file mode 100644
index 0000000000..8ad8585814
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-047.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CSS Test (Conditional Rules): In @supports, pseudo elements can be parsed successfully</title>
+ <link rel="author" title="Jan Nicklas" href="https://twitter.com/jantimon">
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <style>
+ div {
+ background:red;
+ height:100px;
+ width:100px;
+ }
+ @supports selector(input::placeholder) {
+ div { background-color:green; }
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-content-001.html b/testing/web-platform/tests/css/css-conditional/at-supports-content-001.html
new file mode 100644
index 0000000000..19c99f504b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-content-001.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Invalid rules inside @supports</title>
+ <!-- This test is paired with at-media-content-001.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if invalid rules within @media do not invalidate the @media rule.">
+ <style>
+ div {
+ background: red;
+ height: 20px;
+ width: 100px;
+ }
+
+ @supports (background: blue) {
+ @import "support/fail.css";
+ .test1 { background: green; }
+ }
+ @supports (background: blue) {
+ @namespace foo "http://www.w3.org/";
+ .test2 { background: green; }
+ .test2:not(foo|div) { background: red; }
+ }
+ @supports (background: blue) {
+ @charset "utf-8";
+ .test3 { background: green; }
+ }
+ @supports (background: blue) {
+ @unknown;
+ .test4 { background: green; }
+ }
+ @supports (background: blue) {
+ .test5 { background: green; }
+ @unknown {
+ .test5 { background: red; }
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+ <div class="test3"></div>
+ <div class="test4"></div>
+ <div class="test5"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-content-002.html b/testing/web-platform/tests/css/css-conditional/at-supports-content-002.html
new file mode 100644
index 0000000000..dda1b8863f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-content-002.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): @font-face rules inside @supports</title>
+ <!-- This test is paired with at-media-content-002.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
+ <link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-face-rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if @font-face rules within @supports are supported.">
+ <style>
+ div {
+ background: red;
+ color: green;
+ font: 100px/1 Blockify, sans-serif;
+ width: 100px;
+ }
+
+ @supports (color: blue) {
+ @font-face {
+ font-family: 'Blockify';
+ src: url('/fonts/Ahem.ttf');
+ }
+ }
+ @supports not (color: blue) {
+ @font-face {
+ font-family: 'Blockify';
+ src: local('Arial'), url('/fonts/fail.woff');
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1">X</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-content-003.html b/testing/web-platform/tests/css/css-conditional/at-supports-content-003.html
new file mode 100644
index 0000000000..bd4d1135ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-content-003.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): @keyframes rules inside @supports</title>
+ <!-- This test is paired with at-media-content-003.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
+ <link rel="help" href="https://www.w3.org/TR/css-animations-1/">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if @keyframes rules within @supports are supported.">
+ <style>
+ div {
+ background: red;
+ width: 100px;
+ height: 100px;
+ animation: green 4s both;
+ }
+
+ @supports (color: blue) {
+ @keyframes green {
+ from {
+ background: green;
+ }
+ to {
+ background: green;
+ }
+ }
+ }
+ @supports not (color: blue) {
+ @keyframes green {
+ from {
+ background: red;
+ }
+ to {
+ background: red;
+ }
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-content-004.html b/testing/web-platform/tests/css/css-conditional/at-supports-content-004.html
new file mode 100644
index 0000000000..c44184ba67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-content-004.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): @counter-style rules inside @supports</title>
+ <!-- This test is paired with at-media-content-004.html ; please keep them in sync -->
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
+ <link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-counter-style-rule">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if @counter-style rules within @supports are supported.">
+ <link rel="stylesheet" href="/fonts/ahem.css">
+ <style>
+ div {
+ background: red;
+ color: green;
+ font: 100px/1 Ahem, sans-serif;
+ width: 100px;
+ height: 100px;
+ }
+ div::before {
+ content: counter(test, x);
+ }
+
+ @media all {
+ @counter-style x {
+ system: cyclic;
+ symbols: 'X';
+ }
+ }
+ @media not all {
+ @counter-style x {
+ system: cyclic;
+ symbols: ' ';
+ }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-font-format-001.html b/testing/web-platform/tests/css/css-conditional/at-supports-font-format-001.html
new file mode 100644
index 0000000000..d4cab3ad11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-font-format-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Conditional Test: @supports font-format()</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#typedef-supports-font-format-fn">
+<link rel="match" href="at-supports-001-ref.html">
+<style>
+ div {
+ background: red;
+ height: 10px;
+ width: 100px;
+ }
+ /* assume all browsers support at least opentype, truetype, woff */
+ @supports font-format(opentype) {
+ #test1 { background: green };
+ }
+ @supports font-format(TrueType) {
+ #test2 { background: green };
+ }
+ @supports font-format(Woff) {
+ #test3 { background: green };
+ }
+ /* forms that should NOT be recognized as supported */
+ @supports not font-format() {
+ #test4 { background: green };
+ }
+ @supports not font-format(xyzzy) {
+ #test5 { background: green };
+ }
+ @supports not font-format("opentype") {
+ #test6 { background: green };
+ }
+ @supports not font-format("truetype") {
+ #test7 { background: green };
+ }
+ @supports not font-format("woff") {
+ #test8 { background: green };
+ }
+ @supports not font-format(truetype opentype) {
+ #test9 { background: green };
+ }
+ @supports not font-format(truetype, opentype) {
+ #test10 { background: green };
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=test1></div>
+<div id=test2></div>
+<div id=test3></div>
+<div id=test4></div>
+<div id=test5></div>
+<div id=test6></div>
+<div id=test7></div>
+<div id=test8></div>
+<div id=test9></div>
+<div id=test10></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-font-tech-001.html b/testing/web-platform/tests/css/css-conditional/at-supports-font-tech-001.html
new file mode 100644
index 0000000000..86e5332b90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-font-tech-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Conditional Test: @supports font-tech()</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#typedef-supports-font-tech-fn">
+<link rel="match" href="at-supports-001-ref.html">
+<style>
+ div {
+ background: red;
+ height: 10px;
+ width: 100px;
+ }
+ /* assume all browsers support at least features-opentype and color-COLRv0 */
+ @supports font-tech(features-opentype) {
+ #test1 { background: green };
+ }
+ @supports font-tech(color-COLRv0) {
+ #test2 { background: green };
+ }
+ /* forms that should NOT be recognized as supported */
+ @supports not font-tech(features-opentype color-COLRv1) {
+ #test3 { background: green };
+ }
+ @supports not font-tech(features-opentype, color-COLRv0) {
+ #test4 { background: green };
+ }
+ @supports not font-tech(features-opentype, features-opentype) {
+ #test5 { background: green };
+ }
+ @supports not font-tech() {
+ #test6 { background: green };
+ }
+ @supports not font-tech(xyzzy) {
+ #test7 { background: green };
+ }
+ @supports not font-tech("features-opentype") {
+ #test8 { background: green };
+ }
+ @supports not font-tech(feature-opentype) {
+ #test9 { background: green };
+ }
+ @supports not font-tech(colors-COLRv0) {
+ #test10 { background: green };
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=test1></div>
+<div id=test2></div>
+<div id=test3></div>
+<div id=test4></div>
+<div id=test5></div>
+<div id=test6></div>
+<div id=test7></div>
+<div id=test8></div>
+<div id=test9></div>
+<div id=test10></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-namespace-001.html b/testing/web-platform/tests/css/css-conditional/at-supports-namespace-001.html
new file mode 100644
index 0000000000..07ec7552f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-namespace-001.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Validity of namespaces in @supports</title>
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#use">
+ <link rel="help" href="https://www.w3.org/TR/css-namespaces/">
+ <link rel="help" href="https://www.w3.org/TR/CSS2/generate.html#content">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if namespaces used within @supports are valid only if declared in a valid @namespace rule.">
+ <style>
+ @namespace x "http://www.w3.org/1999/xlink";
+ @supports (background: green) {}
+ @namespace y "http://www.w3.org/1999/xlink";
+
+ div {
+ height: 20px;
+ width: 100px;
+ }
+
+ .test1 { background: red; }
+ @supports (content: attr(x|href)) {
+ .test1 { background: green; }
+ }
+
+ .test2 { background: green; }
+ @supports (content: attr(y|href)) {
+ .test2 { background: red; }
+ }
+
+ .test3 { background: red; }
+ @supports not (content: attr(y|href)) {
+ .test3 { background: green; }
+ }
+
+ .test4 { background: red; }
+ .test5 { background: green; }
+ @supports (background: red) {
+ x|y, .test4 { background: green; }
+ y|x, .test5 { background: red; }
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+ <div class="test3"></div>
+ <div class="test4"></div>
+ <div class="test5"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-namespace-002.html b/testing/web-platform/tests/css/css-conditional/at-supports-namespace-002.html
new file mode 100644
index 0000000000..a8365f5fb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-namespace-002.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<head>
+ <title>CSS Test (Conditional Rules): Validity of namespaces in selector() in @supports</title>
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional-4/#typedef-supports-selector-fn">
+ <link rel="help" href="https://www.w3.org/TR/css-namespaces/">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional/#contents-of">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional/#use">
+ <link rel="help" href="https://www.w3.org/TR/css-conditional/#at-supports">
+ <link rel="match" href="at-supports-001-ref.html">
+ <meta name="assert"
+ content="Test passes if namespaces used within @supports selector() are valid only if declared in a valid @namespace rule.">
+ <style>
+ @namespace x "http://www.w3.org/1999/xlink";
+ @supports (background: green) {}
+ @namespace y "http://www.w3.org/1999/xlink";
+
+ div {
+ height: 25px;
+ width: 100px;
+ }
+
+ .test1 { background: red; }
+ @supports selector(x|y) {
+ .test1 { background: green; }
+ }
+
+ .test2 { background: green; }
+ @supports selector(y|x) {
+ .test2 { background: red; }
+ }
+
+ .test3 { background: red; }
+ @supports not selector(y|x) {
+ .test3 { background: green; }
+ }
+
+ /* technically redundant with test 001, but need to add to 100px anyway */
+ .test4, x|y { background: green; }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div class="test1"></div>
+ <div class="test2"></div>
+ <div class="test3"></div>
+ <div class="test4"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-selector-001.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-001.html
new file mode 100644
index 0000000000..5e2d385ad3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-001.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>CSS Conditional Test: @supports selector() with compound selector</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
+<link rel="match" href="at-supports-001-ref.html">
+<style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports selector(a:link.class#ident) {
+ div { background: green };
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-selector-002.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-002.html
new file mode 100644
index 0000000000..6c4a58f346
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-002.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Conditional Test: @supports selector() with pseudo-elements.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
+<link rel="match" href="at-supports-001-ref.html">
+<style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports selector(::before) {
+ div { background: green };
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-selector-003.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-003.html
new file mode 100644
index 0000000000..804fb3c383
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-003.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Conditional Test: @supports selector() with -webkit- unknown pseudo-elements and negation.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
+<link rel="match" href="at-supports-001-ref.html">
+<style>
+ div {
+ background-color:red;
+ height:100px;
+ width:100px;
+ }
+ @supports not selector(::-webkit-unknown-pseudo) {
+ div { background: green };
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-selector-004.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-004.html
new file mode 100644
index 0000000000..47241f37a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-004.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>CSS Conditional Test: @supports selector() with multiple selectors doesn't work.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
+<link rel="match" href="at-supports-001-ref.html">
+<style>
+ div {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ @supports selector(div, div) {
+ div { background: red };
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations-ref.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations-ref.html
new file mode 100644
index 0000000000..3e1f9b6a78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>CSS Conditional Test: @supports selector() detecting invalid in logical combinations.</title>
+<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
+<style>
+ div {
+ background-color:green;
+ height:100px;
+ width:100px;
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations.html
new file mode 100644
index 0000000000..ff4c09195a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-detecting-invalid-in-logical-combinations.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<title>CSS Conditional Test: @supports selector() detecting invalid in logical combinations.</title>
+<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
+<link rel="match" href="at-supports-selector-detecting-invalid-in-logical-combinations-ref.html">
+<style>
+ div.invalid {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ div.valid {
+ background-color: red;
+ height: 100px;
+ width: 100px;
+ }
+ @supports selector(:is(.a)) {
+ div.is.valid { background: green };
+ }
+ @supports selector(:where(.a)) {
+ div.where.valid { background: green };
+ }
+ @supports selector(:has(.a)) {
+ div.has.valid { background: green };
+ }
+ @supports selector(:not(.a)) {
+ div.not.valid { background: green };
+ }
+ @supports selector(:is(:foo, .a)) {
+ div.is.invalid { background: red };
+ }
+ @supports selector(:where(:foo, .a)) {
+ div.where.invalid { background: red };
+ }
+ @supports selector(:has(:foo, .a)) {
+ div.has.invalid { background: red };
+ }
+ @supports selector(:not(:foo, .a)) {
+ div.not.invalid { background: red };
+ }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="is valid"></div>
+<div class="where valid"></div>
+<div class="has valid"></div>
+<div class="not valid"></div>
+<div class="is invalid"></div>
+<div class="where invalid"></div>
+<div class="has invalid"></div>
+<div class="not invalid"></div>
diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-whitespace.html b/testing/web-platform/tests/css/css-conditional/at-supports-whitespace.html
new file mode 100644
index 0000000000..12683ab92b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/at-supports-whitespace.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>Parsing of @supports with whitespace</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-3/#at-supports">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<main id=main></main>
+<script>
+ let examples = [
+ '@supports ((a)) {}',
+ '@supports ((a) ) {}',
+ '@supports ( (a)) {}',
+ '@supports ( (a) ) {}',
+
+ '@supports (not (a)) {}',
+ '@supports (not (a) ) {}',
+ '@supports ( not (a)) {}',
+ '@supports ( not (a) ) {}',
+
+ '@supports ((a) and (b)) {}',
+ '@supports ((a) and (b) ) {}',
+ '@supports ( (a) and (b)) {}',
+ '@supports ( (a) and (b) ) {}',
+
+ '@supports ((a) or (b)) {}',
+ '@supports ((a) or (b) ) {}',
+ '@supports ( (a) or (b)) {}',
+ '@supports ( (a) or (b) ) {}',
+ ];
+
+ for (let example of examples) {
+ test((t) => {
+ let style = document.createElement('style');
+ t.add_cleanup(() => style.remove());
+ style.textContent = example;
+ main.append(style);
+ assert_equals(style.sheet.rules.length, 1);
+ }, example);
+ }
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-001.xht b/testing/web-platform/tests/css/css-conditional/css-supports-001.xht
new file mode 100644
index 0000000000..9221309d45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-001.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports rule condition with a single, valid property declaration for a supported property must cause the rules inside the @supports rule to apply."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-002.xht b/testing/web-platform/tests/css/css-conditional/css-supports-002.xht
new file mode 100644
index 0000000000..48326acb7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-002.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="Property declarations in an @supports rule condition must be surrounded by parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports color: green {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-003.xht b/testing/web-platform/tests/css/css-conditional/css-supports-003.xht
new file mode 100644
index 0000000000..f7713dc3a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-003.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="Any subexpression in an @supports rule condition can be surrounded by an extra pair of parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports ((color: green)) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-004.xht b/testing/web-platform/tests/css/css-conditional/css-supports-004.xht
new file mode 100644
index 0000000000..7c81650745
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-004.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="Property declarations in an @supports rule can have !important specified."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: green !important) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-005.xht b/testing/web-platform/tests/css/css-conditional/css-supports-005.xht
new file mode 100644
index 0000000000..e6e4348b06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-005.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A supported property with an unsupported value must cause the @supports condition to fail."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (color: rainbow) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-006.xht b/testing/web-platform/tests/css/css-conditional/css-supports-006.xht
new file mode 100644
index 0000000000..5a47f3559d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-006.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the second condition passes."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: rainbow) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-007.xht b/testing/web-platform/tests/css/css-conditional/css-supports-007.xht
new file mode 100644
index 0000000000..250ffc5443
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-007.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the first condition passes."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: green) or (color: rainbow) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-008.xht b/testing/web-platform/tests/css/css-conditional/css-supports-008.xht
new file mode 100644
index 0000000000..396317500f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-008.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to pass if both sub-conditions pass."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: green) and (color: blue) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-009.xht b/testing/web-platform/tests/css/css-conditional/css-supports-009.xht
new file mode 100644
index 0000000000..0b00565004
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-009.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the first sub-condition fails."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (color: rainbow) and (color: blue) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-010.xht b/testing/web-platform/tests/css/css-conditional/css-supports-010.xht
new file mode 100644
index 0000000000..c2270936d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-010.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the second sub-condition fails."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (color: blue) and (color: rainbow) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-011.xht b/testing/web-platform/tests/css/css-conditional/css-supports-011.xht
new file mode 100644
index 0000000000..b1f15fce26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-011.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A disjunction of three @supports conditions must cause the @supports condition to pass if at least one of the sub-conditions passes."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: rainbow) or (color: iridescent) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-012.xht b/testing/web-platform/tests/css/css-conditional/css-supports-012.xht
new file mode 100644
index 0000000000..ba88446825
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-012.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A conjunction of three @supports conditions must cause the @supports condition to pass if all three sub-conditions pass."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: red) and (color: green) and (color: blue) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-013.xht b/testing/web-platform/tests/css/css-conditional/css-supports-013.xht
new file mode 100644
index 0000000000..2c0b62e616
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-013.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="A disjunction and a conjunction of @supports conditions must not be combined unless one of the two is surrounded by parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (color: green) and (color: green) or (color: green) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-014.xht b/testing/web-platform/tests/css/css-conditional/css-supports-014.xht
new file mode 100644
index 0000000000..90c3bb4e33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-014.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="A disjunction and a conjunction of @supports conditions must not be combined unless one of the two is surrounded by parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (color: green) or (color: green) and (color: green) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-015.xht b/testing/web-platform/tests/css/css-conditional/css-supports-015.xht
new file mode 100644
index 0000000000..8013bb88eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-015.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="There need not be any white space between the '@supports' and open brace of the rule set, nor between a declaration's property name and value."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports(color:green){
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-016.xht b/testing/web-platform/tests/css/css-conditional/css-supports-016.xht
new file mode 100644
index 0000000000..5f06f91b63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-016.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A negation of an @supports condition must pass if and only if the sub-condition fails. The sub-condition here is a supported property name with an unsupported value."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports not (color: rainbow) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-017.xht b/testing/web-platform/tests/css/css-conditional/css-supports-017.xht
new file mode 100644
index 0000000000..92b8d04e7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-017.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="The sub-condition of a negation in an @supports condition must be in parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports not not (color: green) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-018.xht b/testing/web-platform/tests/css/css-conditional/css-supports-018.xht
new file mode 100644
index 0000000000..56d4bea959
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-018.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="The sub-condition of a negation in an @supports condition must be in parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports not (not (color: green)) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-019.xht b/testing/web-platform/tests/css/css-conditional/css-supports-019.xht
new file mode 100644
index 0000000000..109c8528ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-019.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="A conjunction in an @supports condition must have both sub-conditions enclosed in parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports not (color: rainbow) and not (color: iridescent) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-020.xht b/testing/web-platform/tests/css/css-conditional/css-supports-020.xht
new file mode 100644
index 0000000000..808f2268ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-020.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition that is a declaration with an unsupported property name with a supported value must fail."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (unknown: green) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-021.xht b/testing/web-platform/tests/css/css-conditional/css-supports-021.xht
new file mode 100644
index 0000000000..46ca79f596
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-021.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if one condition passes and the other fails due to being an unsupported property."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (unknown: green) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-022.xht b/testing/web-platform/tests/css/css-conditional/css-supports-022.xht
new file mode 100644
index 0000000000..25912d3e71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-022.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition must successfully parse even if a declaration has an empty property value."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red }
+ @supports (unknown:) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-023.xht b/testing/web-platform/tests/css/css-conditional/css-supports-023.xht
new file mode 100644
index 0000000000..7afb0ce6dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-023.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red }
+ @supports (unknown) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-024.xht b/testing/web-platform/tests/css/css-conditional/css-supports-024.xht
new file mode 100644
index 0000000000..ae4b926b4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-024.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A supported shorthand property declaration must be considered to pass."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (font: 16px serif) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-025.xht b/testing/web-platform/tests/css/css-conditional/css-supports-025.xht
new file mode 100644
index 0000000000..182f2874f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-025.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An inner @supports rule inside an outer @supports must apply its child rules only if both @supports conditions succeeded."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: green) {
+ @supports (color: blue) {
+ html { background-color: green }
+ }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-026.xht b/testing/web-platform/tests/css/css-conditional/css-supports-026.xht
new file mode 100644
index 0000000000..7584bba686
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-026.xht
@@ -0,0 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media" />
+ <meta name="assert" content="An outer @supports rule with an inner @media rule must apply the rules inside the @media only if both the @supports and @media conditions pass."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports (color: green) {
+ @media all {
+ html { background-color: green }
+ }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-029.xht b/testing/web-platform/tests/css/css-conditional/css-supports-029.xht
new file mode 100644
index 0000000000..5f9b011e92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-029.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A disjunction in an @supports condition must have both sub-conditions enclosed in parentheses." />
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports not (color: rainbow) or (color: green) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-030.xht b/testing/web-platform/tests/css/css-conditional/css-supports-030.xht
new file mode 100644
index 0000000000..2cfcbfe07a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-030.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="A disjunction in an @supports condition must have both sub-conditions enclosed in parentheses." />
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (not (color: rainbow) or (color: green)) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-031.xht b/testing/web-platform/tests/css/css-conditional/css-supports-031.xht
new file mode 100644
index 0000000000..dd9caf07af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-031.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red }
+ @supports (color:) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-032.xht b/testing/web-platform/tests/css/css-conditional/css-supports-032.xht
new file mode 100644
index 0000000000..8a2ac0655e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-032.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition must successfully parse and evaluate to false a parenthesized expression has invalid syntax."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red }
+ @supports not (@page) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-033.xht b/testing/web-platform/tests/css/css-conditional/css-supports-033.xht
new file mode 100644
index 0000000000..19b707deac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-033.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red }
+ @supports not ({ something @with [ balanced ] parens }) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-034.xht b/testing/web-platform/tests/css/css-conditional/css-supports-034.xht
new file mode 100644
index 0000000000..19b707deac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-034.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red }
+ @supports not ({ something @with [ balanced ] parens }) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-035.xht b/testing/web-platform/tests/css/css-conditional/css-supports-035.xht
new file mode 100644
index 0000000000..7dc202b8a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-035.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with unbalanced invalid syntax must fail to parse</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="An @supports condition with a parenthesized expression that has unbalanced parentheses must fail to parse."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports not ({ something @with (unbalanced parens }) {
+ html { background-color: red }
+ }
+ /* parser still looking for second close parenthesis */
+ html { background-color: red }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-036.xht b/testing/web-platform/tests/css/css-conditional/css-supports-036.xht
new file mode 100644
index 0000000000..9d6d26837d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-036.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with an unrecognized condition using functional notation must evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition with an unrecognized condition using functional notation must evaluate to false."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red }
+ @supports an-extension(of some kind) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-037.xht b/testing/web-platform/tests/css/css-conditional/css-supports-037.xht
new file mode 100644
index 0000000000..137be1b598
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-037.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule with an unrecognized condition using functional notation with unbalanced parentheses must fail to parse</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="An @supports condition with an unrecognized condition using functional notation with unbalanced parentheses must fail to parse."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (color: green) or an-extension(that is [unbalanced) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-038.xht b/testing/web-platform/tests/css/css-conditional/css-supports-038.xht
new file mode 100644
index 0000000000..bf969d7046
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-038.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: In an @supports rule "not(" must be parsed as a FUNCTION</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports condition with 'not(' must parse be parsed as a FUNCTION token."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports not(unknown: unknown) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-039.xht b/testing/web-platform/tests/css/css-conditional/css-supports-039.xht
new file mode 100644
index 0000000000..1032263b1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-039.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: In an @supports rule "or(" must be parsed as a FUNCTION</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="flags" content="invalid" />
+ <meta name="assert" content="An @supports condition with 'or(' must parse be parsed as a FUNCTION token."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ @supports (color: green) or(color: blue) {
+ html { background-color: red }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-040.xht b/testing/web-platform/tests/css/css-conditional/css-supports-040.xht
new file mode 100644
index 0000000000..0b15778bc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-040.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule condition with empty parentheses should evaluates to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports rule condition that consists just of a pair of parentheses should evaluate to false."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports not () {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-041.xht b/testing/web-platform/tests/css/css-conditional/css-supports-041.xht
new file mode 100644
index 0000000000..f01b2be784
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-041.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule condition with empty parentheses should evaluates to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports rule condition that consists just of a pair of parentheses should evaluate to false."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports () or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-042.xht b/testing/web-platform/tests/css/css-conditional/css-supports-042.xht
new file mode 100644
index 0000000000..5a106119ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-042.xht
@@ -0,0 +1,17 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule condition with an unexpected token before the closing paren of a supports_condition_in_parens should parse as a general_enclosed</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports rule condition that has an unexpected token before the closing paren of a supports_condition_in_parens should parse as a general_enclosed and evaluate to false rather than fail to parse."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @supports ((color: green) bad) or (color: green) {
+ html { background-color: green }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-043.xht b/testing/web-platform/tests/css/css-conditional/css-supports-043.xht
new file mode 100644
index 0000000000..8e4d0e5b79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-043.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule condition with a bogus priority should evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports rule condition with a bogus priority should evaluate to false"/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red; }
+ @supports not (color: green !bogus) {
+ html { background-color: green; }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-044.xht b/testing/web-platform/tests/css/css-conditional/css-supports-044.xht
new file mode 100644
index 0000000000..0c66cfafa5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-044.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule condition with tokens after the priority should evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports rule condition with tokens after the priority should evaluate to false"/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red; }
+ @supports not (color: green !important green) {
+ html { background-color: green; }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-045.xht b/testing/web-platform/tests/css/css-conditional/css-supports-045.xht
new file mode 100644
index 0000000000..d11e108371
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-045.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: An @supports rule condition with two priorities should evaluate to false</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <meta name="assert" content="An @supports rule condition with two priorities should evaluate to false"/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ html { background-color: red; }
+ @supports not (color: green !important !important) {
+ html { background-color: green; }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/css-supports-046.xht b/testing/web-platform/tests/css/css-conditional/css-supports-046.xht
new file mode 100644
index 0000000000..1913dff0c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/css-supports-046.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+ <link rel="author" title="L. David Baron" href="mailto:dbaron@dbaron.org" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media" />
+ <meta name="assert" content="An outer @media rule with an inner @supports rule must apply the rules inside the @supports only if both the @supports and @media conditions pass."/>
+ <link rel="match" href="support/pass.xht" />
+ <style type="text/css"><![CDATA[
+ @media all {
+ @supports (color: green) {
+ html { background-color: green }
+ }
+ }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/idlharness.html b/testing/web-platform/tests/css/css-conditional/idlharness.html
new file mode 100644
index 0000000000..63cf750933
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/idlharness.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>CSS Conditional Rules IDL tests</title>
+ <link rel="help" href="https://drafts.csswg.org/css-conditional/">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="/resources/WebIDLParser.js"></script>
+ <script src="/resources/idlharness.js"></script>
+ <!-- used to provide objects -->
+ <style>
+ div { display: block; }
+ </style>
+ <style>
+ @media print { }
+ </style>
+ <style>
+ @supports (display: block) { }
+ </style>
+</head>
+
+<body>
+ <div id="log"></div>
+
+ <script>
+ 'use strict';
+ idl_test(
+ ['css-conditional'],
+ ['cssom', 'dom'],
+ idl_array => {
+ idl_array.add_objects({
+ CSSRule: ['cssRule'],
+ CSSMediaRule: ['cssMediaRule'],
+ CSSSupportsRule: ['cssSupportsRule'],
+ });
+ self.cssRule = document.styleSheets[0].cssRules[0];
+ self.cssMediaRule = document.styleSheets[1].cssRules[0];
+ self.cssSupportsRule = document.styleSheets[2].cssRules[0];
+ }
+ );
+ </script>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/js/001.html b/testing/web-platform/tests/css/css-conditional/js/001.html
new file mode 100644
index 0000000000..bafb840d31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/001.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<title>CSS Test (Conditional Rules): @supports rules OM support</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="author" href="http://opera.com" title="Opera Software ASA">
+<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+ @supports (padding: 0) {
+ dfn { width:0; }
+ @supports (width: 0) {
+ br { height:0; }
+ }
+ ol { display:none; }
+ }
+ @media all {
+ @supports (padding: 0) {
+ @keyframes foo {
+ 0% { top: 0; left: 0; }
+ 100% { top: 100px; left: 100px; }
+ }
+ }
+ }
+ @supports (border: black) and (padding: 0) and (width: 0) {
+ dfn { width:0; }
+ }
+ @supports (border: black) or (padding: 0) or (width: 0) {
+ dfn { width:0; }
+ }
+</style>
+<script>
+ /**
+ * Asserts tha the two strings are equal, after normalizing whitespace
+ *
+ * If the serialization of whitespace and identation ever becomes
+ * specified to a sufficient degree of presition, this should be
+ * replaced by a strict textual comparison with assert_equals.
+ */
+ function assert_equals_normalized(a, b) {
+ var normal_a = a.replace(/\s+/g, " ");
+ var normal_b = b.replace(/\s+/g, " ");
+ assert_equals(normal_a, normal_b);
+ }
+ test(function(){
+ var base_rule = document.styleSheets[0].cssRules[0];
+ var child_rule = base_rule.cssRules[1];
+ assert_equals_normalized(base_rule.cssText,
+ "@supports (padding: 0) {\n"
+ +" dfn { width: 0px; }\n"
+ +" @supports (width: 0) {\n"
+ +" br { height: 0px; }\n"
+ +" }\n"
+ +" ol { display: none; }\n"
+ +"}");
+ assert_equals_normalized(child_rule.cssText,
+ "@supports (width: 0) {\n"
+ +" br { height: 0px; }\n"
+ +"}");
+ }, "nested @supports serialize properly");
+
+ test(function(){
+ var base_rule = document.styleSheets[0].cssRules[1];
+ var child_rule = base_rule.cssRules[0];
+ var grand_child_rule = child_rule.cssRules[0];
+ assert_equals_normalized(base_rule.cssText,
+ "@media all {\n"
+ +" @supports (padding: 0) {\n"
+ +" @keyframes foo {\n"
+ +" 0% { top: 0px; left: 0px; }\n"
+ +" 100% { top: 100px; left: 100px; }\n"
+ +" }\n"
+ +" }\n"
+ +"}");
+ assert_equals_normalized(child_rule.cssText,
+ "@supports (padding: 0) {\n"
+ +" @keyframes foo {\n"
+ +" 0% { top: 0px; left: 0px; }\n"
+ +" 100% { top: 100px; left: 100px; }\n"
+ +" }\n"
+ +"}");
+ assert_equals_normalized(grand_child_rule.cssText,
+ "@keyframes foo {\n"
+ +" 0% { top: 0px; left: 0px; }\n"
+ +" 100% { top: 100px; left: 100px; }\n"
+ +"}");
+ }, "@keyframes nested in @supports serialize properly");
+
+ test(function(){
+ var rules = document.styleSheets[0].cssRules;
+ assert_equals(rules.length, 4);
+ assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[1].type, CSSRule.MEDIA_RULE);
+ assert_equals(rules[0].cssRules.length, 3);
+ assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE);
+
+ assert_equals(rules[0].cssRules[1].cssRules.length, 1);
+ assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE);
+
+ assert_equals(rules[1].cssRules.length, 1);
+ assert_equals(rules[1].cssRules[0].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[1].cssRules[0].cssRules.length, 1);
+ assert_equals(rules[1].cssRules[0].cssRules[0].type, CSSRule.KEYFRAMES_RULE);
+
+ assert_equals(rules[2].cssRules.length, 1);
+ assert_equals(rules[2].cssRules[0].type, CSSRule.STYLE_RULE);
+
+ assert_equals(rules[3].cssRules.length, 1);
+ assert_equals(rules[3].cssRules[0].type, CSSRule.STYLE_RULE);
+ }, "The style sheet structure is properly represented");
+
+ test(function(){
+ document.styleSheets[0].deleteRule(1);
+
+ var rules = document.styleSheets[0].cssRules;
+ assert_equals(rules.length, 3);
+ assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules.length, 3);
+ assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE);
+
+ assert_equals(rules[0].cssRules[1].cssRules.length, 1);
+ assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE);
+ }, "Deleting the top level of a nested structue works");
+
+ test(function(){
+ var rules = document.styleSheets[0].cssRules;
+
+ rules[0].cssRules[1].insertRule("img { visibility:hidden; }", 0);
+
+ assert_equals(rules.length, 3);
+ assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules.length, 3);
+ assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE);
+
+ assert_equals(rules[0].cssRules[1].cssRules.length, 2);
+ assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].cssRules[0].cssText, "img { visibility: hidden; }");
+ assert_equals(rules[0].cssRules[1].cssRules[1].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].cssRules[1].cssText, "br { height: 0px; }");
+ }, "Rule insertion works in nested @supports rules");
+
+ test(function(){
+ var rules = document.styleSheets[0].cssRules;
+
+ rules[0].insertRule("@supports (left: 42px) { #foo { color:green; } }", 1);
+
+ assert_equals(rules.length, 3);
+ assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules.length, 4);
+ assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules[2].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules[3].type, CSSRule.STYLE_RULE);
+
+ assert_equals(rules[0].cssRules[1].cssRules.length, 1);
+ assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].cssRules[0].cssText, "#foo { color: green; }");
+
+ assert_equals(rules[0].cssRules[2].cssRules.length, 2);
+ assert_equals(rules[0].cssRules[2].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[2].cssRules[0].cssText, "img { visibility: hidden; }");
+ assert_equals(rules[0].cssRules[2].cssRules[1].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[2].cssRules[1].cssText, "br { height: 0px; }");
+ }, "Insertion @supports rules into another @supports rule works");
+
+ test(function(){
+ var rules = document.styleSheets[0].cssRules;
+
+ rules[0].deleteRule(2);
+
+ assert_equals(rules.length, 3);
+ assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules.length, 3);
+ assert_equals(rules[0].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules[2].type, CSSRule.STYLE_RULE);
+
+ assert_equals(rules[0].cssRules[1].cssRules.length, 1);
+ assert_equals(rules[0].cssRules[1].cssRules[0].type, CSSRule.STYLE_RULE);
+ assert_equals(rules[0].cssRules[1].cssRules[0].cssText, "#foo { color: green; }");
+ }, "Deletion of a nested @supports rule works");
+
+ test(function(){
+ var rules = document.styleSheets[0].cssRules;
+
+ rules[0].insertRule("@font-face { font-familly: foo; src: url('http://www.example.com/foo'; }", 0);
+
+ assert_equals(rules.length, 3);
+ assert_equals(rules[0].type, CSSRule.SUPPORTS_RULE);
+ assert_equals(rules[0].cssRules.length, 4);
+ assert_equals(rules[0].cssRules[0].type, CSSRule.FONT_FACE_RULE);
+ }, "Inserting @font-face inside @supports works");
+
+ test(function(){
+ var rule = document.styleSheets[0].cssRules[1];
+ assert_equals_normalized(rule.cssText,
+ "@supports (border: black) and (padding: 0) and (width: 0) {\n"
+ +" dfn { width: 0px; }\n"
+ +"}");
+ }, "'and' arguments in @supports serialize in the correct order and with extra parentheses");
+ test(function(){
+ var rule = document.styleSheets[0].cssRules[2];
+ assert_equals_normalized(rule.cssText,
+ "@supports (border: black) or (padding: 0) or (width: 0) {\n"
+ +" dfn { width: 0px; }\n"
+ +"}");
+ }, "'or' arguments in @supports serialize in the correct order and with extra parentheses");
+</script>
+
+<div id=log></div>
+
diff --git a/testing/web-platform/tests/css/css-conditional/js/CSS-supports-CSSStyleDeclaration.html b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-CSSStyleDeclaration.html
new file mode 100644
index 0000000000..a27e385faf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-CSSStyleDeclaration.html
@@ -0,0 +1,761 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS.supports v. CSSStyleDeclaration</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional/#dom-css-supports">
+<link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="testElement"></div>
+<script>
+// This gigantic list of properties is derived from the union of pretty much everything ever
+// exposed via CSSStyleDeclaration since 2010 in a major browser; this deliberately includes all
+// the vendor-prefixed properties _because_ they're often where bugs lie
+
+const properties = [
+ "-apple-color-filter",
+ "-apple-pay-button-style",
+ "-apple-pay-button-type",
+ "-apple-trailing-word",
+ "-epub-caption-side",
+ "-epub-text-combine",
+ "-epub-text-emphasis",
+ "-epub-text-emphasis-color",
+ "-epub-text-emphasis-style",
+ "-epub-text-orientation",
+ "-epub-text-transform",
+ "-epub-word-break",
+ "-epub-writing-mode",
+ "-moz-animation",
+ "-moz-animation-delay",
+ "-moz-animation-direction",
+ "-moz-animation-duration",
+ "-moz-animation-fill-mode",
+ "-moz-animation-iteration-count",
+ "-moz-animation-name",
+ "-moz-animation-play-state",
+ "-moz-animation-timing-function",
+ "-moz-appearance",
+ "-moz-backface-visibility",
+ "-moz-binding",
+ "-moz-border-bottom-colors",
+ "-moz-border-end",
+ "-moz-border-end-color",
+ "-moz-border-end-style",
+ "-moz-border-end-width",
+ "-moz-border-image",
+ "-moz-border-left-colors",
+ "-moz-border-right-colors",
+ "-moz-border-start",
+ "-moz-border-start-color",
+ "-moz-border-start-style",
+ "-moz-border-start-width",
+ "-moz-border-top-colors",
+ "-moz-box-align",
+ "-moz-box-direction",
+ "-moz-box-flex",
+ "-moz-box-ordinal-group",
+ "-moz-box-orient",
+ "-moz-box-pack",
+ "-moz-box-sizing",
+ "-moz-column-count",
+ "-moz-column-fill",
+ "-moz-column-gap",
+ "-moz-column-rule",
+ "-moz-column-rule-color",
+ "-moz-column-rule-style",
+ "-moz-column-rule-width",
+ "-moz-column-span",
+ "-moz-column-width",
+ "-moz-columns",
+ "-moz-float-edge",
+ "-moz-font-feature-settings",
+ "-moz-font-language-override",
+ "-moz-force-broken-image-icon",
+ "-moz-hyphens",
+ "-moz-image-region",
+ "-moz-margin-end",
+ "-moz-margin-start",
+ "-moz-orient",
+ "-moz-osx-font-smoothing",
+ "-moz-padding-end",
+ "-moz-padding-start",
+ "-moz-perspective",
+ "-moz-perspective-origin",
+ "-moz-stack-sizing",
+ "-moz-tab-size",
+ "-moz-text-align-last",
+ "-moz-text-size-adjust",
+ "-moz-transform",
+ "-moz-transform-origin",
+ "-moz-transform-style",
+ "-moz-transition",
+ "-moz-transition-delay",
+ "-moz-transition-duration",
+ "-moz-transition-property",
+ "-moz-transition-timing-function",
+ "-moz-user-focus",
+ "-moz-user-input",
+ "-moz-user-modify",
+ "-moz-user-select",
+ "-moz-window-dragging",
+ "-ms-content-zoom-chaining",
+ "-ms-content-zoom-limit",
+ "-ms-content-zoom-limit-max",
+ "-ms-content-zoom-limit-min",
+ "-ms-content-zoom-snap",
+ "-ms-content-zoom-snap-points",
+ "-ms-content-zoom-snap-type",
+ "-ms-content-zooming",
+ "-ms-flow-from",
+ "-ms-flow-into",
+ "-ms-font-feature-settings",
+ "-ms-grid-column",
+ "-ms-grid-column-align",
+ "-ms-grid-column-span",
+ "-ms-grid-columns",
+ "-ms-grid-row",
+ "-ms-grid-row-align",
+ "-ms-grid-row-span",
+ "-ms-grid-rows",
+ "-ms-high-contrast-adjust",
+ "-ms-hyphenate-limit-chars",
+ "-ms-hyphenate-limit-lines",
+ "-ms-hyphenate-limit-zone",
+ "-ms-hyphens",
+ "-ms-ime-align",
+ "-ms-overflow-style",
+ "-ms-scroll-chaining",
+ "-ms-scroll-limit",
+ "-ms-scroll-limit-x-max",
+ "-ms-scroll-limit-x-min",
+ "-ms-scroll-limit-y-max",
+ "-ms-scroll-limit-y-min",
+ "-ms-scroll-rails",
+ "-ms-scroll-snap-points-x",
+ "-ms-scroll-snap-points-y",
+ "-ms-scroll-snap-type",
+ "-ms-scroll-snap-x",
+ "-ms-scroll-snap-y",
+ "-ms-scroll-translation",
+ "-ms-text-combine-horizontal",
+ "-ms-text-size-adjust",
+ "-ms-touch-select",
+ "-ms-user-select",
+ "-ms-wrap-flow",
+ "-ms-wrap-margin",
+ "-ms-wrap-through",
+ "-webkit-align-content",
+ "-webkit-align-items",
+ "-webkit-align-self",
+ "-webkit-animation",
+ "-webkit-animation-delay",
+ "-webkit-animation-direction",
+ "-webkit-animation-duration",
+ "-webkit-animation-fill-mode",
+ "-webkit-animation-iteration-count",
+ "-webkit-animation-name",
+ "-webkit-animation-play-state",
+ "-webkit-animation-timing-function",
+ "-webkit-appearance",
+ "-webkit-backface-visibility",
+ "-webkit-background-clip",
+ "-webkit-background-origin",
+ "-webkit-background-size",
+ "-webkit-border-bottom-left-radius",
+ "-webkit-border-bottom-right-radius",
+ "-webkit-border-image",
+ "-webkit-border-radius",
+ "-webkit-border-top-left-radius",
+ "-webkit-border-top-right-radius",
+ "-webkit-box-align",
+ "-webkit-box-direction",
+ "-webkit-box-flex",
+ "-webkit-box-ordinal-group",
+ "-webkit-box-orient",
+ "-webkit-box-pack",
+ "-webkit-box-shadow",
+ "-webkit-box-sizing",
+ "-webkit-filter",
+ "-webkit-flex",
+ "-webkit-flex-basis",
+ "-webkit-flex-direction",
+ "-webkit-flex-flow",
+ "-webkit-flex-grow",
+ "-webkit-flex-shrink",
+ "-webkit-flex-wrap",
+ "-webkit-justify-content",
+ "-webkit-line-clamp",
+ "-webkit-mask",
+ "-webkit-mask-clip",
+ "-webkit-mask-composite",
+ "-webkit-mask-image",
+ "-webkit-mask-origin",
+ "-webkit-mask-position",
+ "-webkit-mask-position-x",
+ "-webkit-mask-position-y",
+ "-webkit-mask-repeat",
+ "-webkit-mask-size",
+ "-webkit-order",
+ "-webkit-perspective",
+ "-webkit-perspective-origin",
+ "-webkit-text-fill-color",
+ "-webkit-text-size-adjust",
+ "-webkit-text-stroke",
+ "-webkit-text-stroke-color",
+ "-webkit-text-stroke-width",
+ "-webkit-transform",
+ "-webkit-transform-origin",
+ "-webkit-transform-style",
+ "-webkit-transition",
+ "-webkit-transition-delay",
+ "-webkit-transition-duration",
+ "-webkit-transition-property",
+ "-webkit-transition-timing-function",
+ "-webkit-user-select",
+ "align-content",
+ "align-items",
+ "align-self",
+ "alignment-baseline",
+ "all",
+ "alt",
+ "animation",
+ "animation-delay",
+ "animation-direction",
+ "animation-duration",
+ "animation-fill-mode",
+ "animation-iteration-count",
+ "animation-name",
+ "animation-play-state",
+ "animation-timing-function",
+ "appearance",
+ "backdrop-filter",
+ "backface-visibility",
+ "background",
+ "background-attachment",
+ "background-blend-mode",
+ "background-clip",
+ "background-color",
+ "background-image",
+ "background-origin",
+ "background-position",
+ "background-position-x",
+ "background-position-y",
+ "background-repeat",
+ "background-repeat-x",
+ "background-repeat-y",
+ "background-size",
+ "baseline-shift",
+ "block-size",
+ "border",
+ "border-block",
+ "border-block-color",
+ "border-block-end",
+ "border-block-end-color",
+ "border-block-end-style",
+ "border-block-end-width",
+ "border-block-start",
+ "border-block-start-color",
+ "border-block-start-style",
+ "border-block-start-width",
+ "border-block-style",
+ "border-block-width",
+ "border-bottom",
+ "border-bottom-color",
+ "border-bottom-left-radius",
+ "border-bottom-right-radius",
+ "border-bottom-style",
+ "border-bottom-width",
+ "border-collapse",
+ "border-color",
+ "border-end-end-radius",
+ "border-end-start-radius",
+ "border-image",
+ "border-image-outset",
+ "border-image-repeat",
+ "border-image-slice",
+ "border-image-source",
+ "border-image-width",
+ "border-inline",
+ "border-inline-color",
+ "border-inline-end",
+ "border-inline-end-color",
+ "border-inline-end-style",
+ "border-inline-end-width",
+ "border-inline-start",
+ "border-inline-start-color",
+ "border-inline-start-style",
+ "border-inline-start-width",
+ "border-inline-style",
+ "border-inline-width",
+ "border-left",
+ "border-left-color",
+ "border-left-style",
+ "border-left-width",
+ "border-radius",
+ "border-right",
+ "border-right-color",
+ "border-right-style",
+ "border-right-width",
+ "border-spacing",
+ "border-start-end-radius",
+ "border-start-start-radius",
+ "border-style",
+ "border-top",
+ "border-top-color",
+ "border-top-left-radius",
+ "border-top-right-radius",
+ "border-top-style",
+ "border-top-width",
+ "border-width",
+ "bottom",
+ "box-decoration-break",
+ "box-shadow",
+ "box-sizing",
+ "break-after",
+ "break-before",
+ "break-inside",
+ "buffered-rendering",
+ "caption-side",
+ "caret-color",
+ "clear",
+ "clip",
+ "clip-path",
+ "clip-rule",
+ "color",
+ "color-adjust",
+ "color-interpolation",
+ "color-interpolation-filters",
+ "color-profile",
+ "color-rendering",
+ "color-scheme",
+ "column-count",
+ "column-fill",
+ "column-gap",
+ "column-progression",
+ "column-rule",
+ "column-rule-color",
+ "column-rule-style",
+ "column-rule-width",
+ "column-span",
+ "column-width",
+ "columns",
+ "contain",
+ "contain-intrinsic-size",
+ "content",
+ "content-visibility",
+ "counter-increment",
+ "counter-reset",
+ "counter-set",
+ "cursor",
+ "cx",
+ "cy",
+ "d",
+ "direction",
+ "display",
+ "dominant-baseline",
+ "empty-cells",
+ "enable-background",
+ "fill",
+ "fill-opacity",
+ "fill-rule",
+ "filter",
+ "flex",
+ "flex-basis",
+ "flex-direction",
+ "flex-flow",
+ "flex-grow",
+ "flex-shrink",
+ "flex-wrap",
+ "float",
+ "flood-color",
+ "flood-opacity",
+ "font",
+ "font-display",
+ "font-family",
+ "font-feature-settings",
+ "font-kerning",
+ "font-language-override",
+ "font-optical-sizing",
+ "font-size",
+ "font-size-adjust",
+ "font-stretch",
+ "font-style",
+ "font-synthesis",
+ "font-variant",
+ "font-variant-alternates",
+ "font-variant-caps",
+ "font-variant-east-asian",
+ "font-variant-ligatures",
+ "font-variant-numeric",
+ "font-variant-position",
+ "font-variation-settings",
+ "font-weight",
+ "gap",
+ "glyph-orientation-horizontal",
+ "glyph-orientation-vertical",
+ "grid",
+ "grid-area",
+ "grid-auto-columns",
+ "grid-auto-flow",
+ "grid-auto-rows",
+ "grid-column",
+ "grid-column-end",
+ "grid-column-gap",
+ "grid-column-start",
+ "grid-gap",
+ "grid-row",
+ "grid-row-end",
+ "grid-row-gap",
+ "grid-row-start",
+ "grid-template",
+ "grid-template-areas",
+ "grid-template-columns",
+ "grid-template-rows",
+ "hanging-punctuation",
+ "height",
+ "hyphens",
+ "image-orientation",
+ "image-rendering",
+ "ime-mode",
+ "inherits",
+ "initial-value",
+ "inline-size",
+ "inset",
+ "inset-block",
+ "inset-block-end",
+ "inset-block-start",
+ "inset-inline",
+ "inset-inline-end",
+ "inset-inline-start",
+ "internal-text-autosizing-status",
+ "isolation",
+ "justify-content",
+ "justify-items",
+ "justify-self",
+ "kerning",
+ "layout-grid",
+ "layout-grid-char",
+ "layout-grid-line",
+ "layout-grid-mode",
+ "layout-grid-type",
+ "left",
+ "letter-spacing",
+ "lighting-color",
+ "line-break",
+ "line-height",
+ "list-style",
+ "list-style-image",
+ "list-style-position",
+ "list-style-type",
+ "margin",
+ "margin-block",
+ "margin-block-end",
+ "margin-block-start",
+ "margin-bottom",
+ "margin-inline",
+ "margin-inline-end",
+ "margin-inline-start",
+ "margin-left",
+ "margin-right",
+ "margin-top",
+ "marker",
+ "marker-end",
+ "marker-mid",
+ "marker-offset",
+ "marker-start",
+ "mask",
+ "mask-clip",
+ "mask-composite",
+ "mask-image",
+ "mask-mode",
+ "mask-origin",
+ "mask-position",
+ "mask-position-x",
+ "mask-position-y",
+ "mask-repeat",
+ "mask-size",
+ "mask-type",
+ "max-block-size",
+ "max-height",
+ "max-inline-size",
+ "max-width",
+ "max-zoom",
+ "min-block-size",
+ "min-height",
+ "min-inline-size",
+ "min-width",
+ "min-zoom",
+ "mix-blend-mode",
+ "motion",
+ "motion-offset",
+ "motion-path",
+ "motion-rotation",
+ "object-fit",
+ "object-position",
+ "offset",
+ "offset-anchor",
+ "offset-block-end",
+ "offset-block-start",
+ "offset-distance",
+ "offset-inline-end",
+ "offset-inline-start",
+ "offset-path",
+ "offset-rotate",
+ "offset-rotation",
+ "opacity",
+ "order",
+ "orientation",
+ "orphans",
+ "outline",
+ "outline-color",
+ "outline-offset",
+ "outline-style",
+ "outline-width",
+ "overflow",
+ "overflow-anchor",
+ "overflow-block",
+ "overflow-inline",
+ "overflow-wrap",
+ "overflow-x",
+ "overflow-y",
+ "overscroll-behavior",
+ "overscroll-behavior-block",
+ "overscroll-behavior-inline",
+ "overscroll-behavior-x",
+ "overscroll-behavior-y",
+ "padding",
+ "padding-block",
+ "padding-block-end",
+ "padding-block-start",
+ "padding-bottom",
+ "padding-inline",
+ "padding-inline-end",
+ "padding-inline-start",
+ "padding-left",
+ "padding-right",
+ "padding-top",
+ "page",
+ "page-break-after",
+ "page-break-before",
+ "page-break-inside",
+ "page-orientation",
+ "paint-order",
+ "pen-action",
+ "perspective",
+ "perspective-origin",
+ "perspective-origin-x",
+ "perspective-origin-y",
+ "place-content",
+ "place-items",
+ "place-self",
+ "pointer-events",
+ "position",
+ "quotes",
+ "r",
+ "resize",
+ "right",
+ "rotate",
+ "row-gap",
+ "ruby-align",
+ "ruby-overhang",
+ "ruby-position",
+ "rx",
+ "ry",
+ "scale",
+ "scroll-behavior",
+ "scroll-margin",
+ "scroll-margin-block",
+ "scroll-margin-block-end",
+ "scroll-margin-block-start",
+ "scroll-margin-bottom",
+ "scroll-margin-inline",
+ "scroll-margin-inline-end",
+ "scroll-margin-inline-start",
+ "scroll-margin-left",
+ "scroll-margin-right",
+ "scroll-margin-top",
+ "scroll-padding",
+ "scroll-padding-block",
+ "scroll-padding-block-end",
+ "scroll-padding-block-start",
+ "scroll-padding-bottom",
+ "scroll-padding-inline",
+ "scroll-padding-inline-end",
+ "scroll-padding-inline-start",
+ "scroll-padding-left",
+ "scroll-padding-right",
+ "scroll-padding-top",
+ "scroll-snap-align",
+ "scroll-snap-coordinate",
+ "scroll-snap-destination",
+ "scroll-snap-margin",
+ "scroll-snap-margin-bottom",
+ "scroll-snap-margin-left",
+ "scroll-snap-margin-right",
+ "scroll-snap-margin-top",
+ "scroll-snap-points-x",
+ "scroll-snap-points-y",
+ "scroll-snap-stop",
+ "scroll-snap-type",
+ "scroll-snap-type-x",
+ "scroll-snap-type-y",
+ "scrollbar-color",
+ "scrollbar-width",
+ "shape-image-threshold",
+ "shape-margin",
+ "shape-outside",
+ "shape-rendering",
+ "size",
+ "speak",
+ "speak-as",
+ "src",
+ "stop-color",
+ "stop-opacity",
+ "stroke",
+ "stroke-color",
+ "stroke-dasharray",
+ "stroke-dashoffset",
+ "stroke-linecap",
+ "stroke-linejoin",
+ "stroke-miterlimit",
+ "stroke-opacity",
+ "stroke-width",
+ "supported-color-schemes",
+ "syntax",
+ "tab-size",
+ "table-layout",
+ "text-align",
+ "text-align-last",
+ "text-anchor",
+ "text-combine-upright",
+ "text-decoration",
+ "text-decoration-color",
+ "text-decoration-line",
+ "text-decoration-skip",
+ "text-decoration-skip-ink",
+ "text-decoration-style",
+ "text-decoration-thickness",
+ "text-emphasis",
+ "text-emphasis-color",
+ "text-emphasis-position",
+ "text-emphasis-style",
+ "text-indent",
+ "text-justify",
+ "text-kashida",
+ "text-kashida-space",
+ "text-line-through",
+ "text-line-through-color",
+ "text-line-through-mode",
+ "text-line-through-style",
+ "text-line-through-width",
+ "text-orientation",
+ "text-overflow",
+ "text-overline",
+ "text-overline-color",
+ "text-overline-mode",
+ "text-overline-style",
+ "text-overline-width",
+ "text-rendering",
+ "text-shadow",
+ "text-size-adjust",
+ "text-transform",
+ "text-underline",
+ "text-underline-color",
+ "text-underline-mode",
+ "text-underline-offset",
+ "text-underline-position",
+ "text-underline-style",
+ "text-underline-width",
+ "top",
+ "touch-action",
+ "transform",
+ "transform-box",
+ "transform-origin",
+ "transform-origin-x",
+ "transform-origin-y",
+ "transform-origin-z",
+ "transform-style",
+ "transition",
+ "transition-delay",
+ "transition-duration",
+ "transition-property",
+ "transition-timing-function",
+ "translate",
+ "unicode-bidi",
+ "unicode-range",
+ "user-select",
+ "user-zoom",
+ "vector-effect",
+ "vertical-align",
+ "viewport-fit",
+ "visibility",
+ "white-space",
+ "widows",
+ "width",
+ "will-change",
+ "word-break",
+ "word-spacing",
+ "word-wrap",
+ "writing-mode",
+ "x",
+ "y",
+ "z-index",
+ "zoom"
+];
+
+function CSSPropertyToIDLAttribute(property, lowercaseFirstFlag=false) {
+ let output = "";
+ let uppercaseNext = false;
+ if (lowercaseFirstFlag) {
+ property = property.substring(1);
+ }
+ for (let c of property) {
+ if (c === "-") {
+ uppercaseNext = true;
+ } else if (uppercaseNext) {
+ uppercaseNext = false;
+ if (c >= "a" && c <= "z") {
+ output += c.toUpperCase();
+ } else {
+ output += c;
+ }
+ } else {
+ output += c;
+ }
+ }
+ return output;
+}
+
+const styledecl = document.getElementById("testElement").style;
+
+for (let prop of properties) {
+ test(() => {
+ const camelCase = CSSPropertyToIDLAttribute(prop);
+ const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value
+ assert_equals(supports, camelCase in styledecl);
+ }, `${prop}: _camel_cased_attribute v. CSS.supports`);
+
+ if (prop[0] == "-") {
+ if (prop.startsWith("-webkit-")) {
+ test(() => {
+ const webkitCased = CSSPropertyToIDLAttribute(prop, true);
+ const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value
+ assert_equals(supports, webkitCased in styledecl);
+ }, `${prop}: _webkit_cased_attribute v. CSS.supports`);
+ } else {
+ test(() => {
+ const webkitCased = CSSPropertyToIDLAttribute(prop, true);
+ assert_false(webkitCased in styledecl);
+ }, `${prop}: _webkit_cased_attribute must only exist for -webkit-`);
+ }
+ }
+
+ if (prop.indexOf("-") >= 0) {
+ test(() => {
+ const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value
+ assert_equals(supports, prop in styledecl);
+ }, `${prop}: _dashed_attribute v. CSS.supports`);
+ }
+}
+
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L3.html b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L3.html
new file mode 100644
index 0000000000..f94933422a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L3.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS.supports() Level 3</title>
+<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#the-css-namespace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ test(function() {
+ assert_equals(CSS.supports("(color: red)"), true);
+ }, "Single-argument form allows for declarations with enclosing parentheses");
+
+ test(function() {
+ assert_equals(CSS.supports("color: red"), true);
+ }, "Single-argument form allows for declarations without enclosing parentheses");
+
+ test(function() {
+ assert_equals(CSS.supports("(color: red) and (color: blue)"), true);
+ }, "Complex conditions allowed");
+
+ test(function() {
+ assert_equals(CSS.supports("not (foobar)"), true);
+ }, "general_enclosed still parses");
+
+ test(function() {
+ assert_equals(CSS.supports("color: something-pointless var(--foo)"), true);
+ }, "Variable references always parse");
+
+ test(function() {
+ assert_equals(CSS.supports("color: something-pointless(var(--foo))"), true);
+ }, "Variable references in an unknown function always parse");
+
+ test(function() {
+ // no one-arg test for this as the with/without enclosing parentheses tests do this
+ assert_equals(CSS.supports("color", "red"), true);
+ }, "two argument form succeeds for known property");
+
+ test(function() {
+ assert_equals(CSS.supports("unknownproperty: blah"), false);
+ }, "one argument form fails for unknown property");
+
+ test(function() {
+ assert_equals(CSS.supports("unknownproperty", "blah"), false);
+ }, "two argument form fails for unknown property");
+
+ test(function() {
+ // https://github.com/w3c/csswg-drafts/issues/5929
+ assert_equals(CSS.supports("unicode-range: U+0-7F"), false);
+ }, "one argument form fails for unknown property (but known descriptor)");
+
+ test(function() {
+ // https://github.com/w3c/csswg-drafts/issues/5929
+ assert_equals(CSS.supports("unicode-range", "U+0-7F"), false);
+ }, "two argument form fails for unknown property (but known descriptor)");
+
+ test(function() {
+ // https://github.com/w3c/csswg-drafts/issues/5929
+ assert_equals(CSS.supports("unicode-range: inherit"), false);
+ }, "one argument form fails for unknown property (but known descriptor, universal value)");
+
+ test(function() {
+ // https://github.com/w3c/csswg-drafts/issues/5929
+ assert_equals(CSS.supports("unicode-range", "inherit"), false);
+ }, "two argument form fails for unknown property (but known descriptor, universal value)");
+
+ test(function() {
+ assert_equals(CSS.supports("width: blah"), false);
+ }, "one argument form fails for invalid value");
+
+ test(function() {
+ assert_equals(CSS.supports("width", "blah"), false);
+ }, "two argument form fails for invalid value");
+
+ test(function() {
+ assert_equals(CSS.supports("--foo: blah"), true);
+ }, "one argument form succeeds for custom property");
+
+ test(function() {
+ assert_equals(CSS.supports("--foo", "blah"), true);
+ }, "two argument form succeeds for custom property");
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L4.html b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L4.html
new file mode 100644
index 0000000000..2250e2be74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L4.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS.supports() Level 4</title>
+<link rel="help" href="https://www.w3.org/TR/css-conditional-4/#the-css-namespace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ test(function() {
+ assert_equals(CSS.supports("selector(div)"), true);
+ }, "selector() function accepts a selector");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(div, div)"), false);
+ }, "selector() function doesn't accept a selector list");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(::-webkit-unknown-pseudo-element)"), false);
+ }, "selector() function rejects unknown webkit pseudo-elements.");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(::before)"), true);
+ }, "selector() function accepts known pseudo-elements");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(div + .c)"), true);
+ }, "selector() with simple combinators");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(div | .c)"), false);
+ }, "selector() with unknown combinators");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:is(:foo))"), false);
+ }, "selector() with forgiving :is, 1 arg");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:is(:foo, div))"), false);
+ }, "selector() with forgiving :is, multiple args");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:where(:foo))"), false);
+ }, "selector() with forgiving :where, 1 arg");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:where(:foo, div))"), false);
+ }, "selector() with forgiving :where, multiple args");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:has(:foo))"), false);
+ }, "selector() with forgiving :has, 1 arg");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:has(:foo, div))"), false);
+ }, "selector() with forgiving :has, multiple args");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:nth-child(2n + 3 of :foo))"), false);
+ }, "selector() with unforgiving :nth-child, 1 arg");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:nth-last-child(2n + 3 of :foo))"), false);
+ }, "selector() with unforgiving :nth-last-child, 1 arg");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:nth-child(2n + 3 of :foo, div))"), false);
+ }, "selector() with unforgiving :nth-child, multiple args");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:nth-last-child(2n + 3 of :foo, div))"), false);
+ }, "selector() with unforgiving :nth-last-child, multiple args");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:nth-child(2n 4))"), false);
+ }, "selector() with a non-identifier after :nth-child's An+B index");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:nth-last-child(2n 4))"), false);
+ }, "selector() with a non-identifier after :nth-last-child's An+B index");
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L5.html b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L5.html
new file mode 100644
index 0000000000..b87d6e8fdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-L5.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS.supports() Level 5</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#at-supports-ext">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ test(function() {
+ assert_equals(CSS.supports("font-format(opentype)"), true);
+ }, "font-format() function accepts a known format");
+
+ test(function() {
+ assert_equals(CSS.supports("font-format(xyzzy)"), false);
+ }, "font-format() function doesn't accept an unknown format");
+
+ test(function() {
+ assert_equals(CSS.supports("font-format(opentype, truetype)"), false);
+ }, "font-format() function doesn't accept a format list");
+
+ test(function() {
+ assert_equals(CSS.supports("font-format('opentype')"), false);
+ }, "font-format() function doesn't accept a string.");
+
+ test(function() {
+ assert_equals(CSS.supports("font-tech(features-opentype)"), true);
+ }, "font-tech() function accepts a known technology");
+
+ test(function() {
+ assert_equals(CSS.supports("font-tech(feature-opentype)"), false);
+ }, "font-tech() function doesn't accept singular feature-* form for technology");
+
+ test(function() {
+ assert_equals(CSS.supports("font-tech(foobar)"), false);
+ }, "font-tech() function doesn't accept an unknown technology");
+
+ test(function() {
+ assert_equals(CSS.supports("font-tech(features-opentype, color-COLRv0)"), false);
+ }, "font-tech() function doesn't accept a technology list");
+
+ test(function() {
+ assert_equals(CSS.supports("font-tech('features-opentype')"), false);
+ }, "font-tech() function doesn't accept a string.");
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/js/CSS-supports-selector-detecting-invalid-in-logical-combinations.html b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-selector-detecting-invalid-in-logical-combinations.html
new file mode 100644
index 0000000000..3adcd7ae2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-selector-detecting-invalid-in-logical-combinations.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS.supports() detecting invalid in logical combinations</title>
+<link rel="help" href="https://www.w3.org/TR/css-conditional-4/#the-css-namespace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ test(function() {
+ assert_equals(CSS.supports("selector(:has(:foo))"), false);
+ assert_equals(CSS.supports("selector(:has(.a, :foo))"), false);
+ assert_equals(CSS.supports("selector(:has(:foo, .a))"), false);
+ assert_equals(CSS.supports("selector(:not(:foo))"), false);
+ assert_equals(CSS.supports("selector(:not(.a, :foo))"), false);
+ assert_equals(CSS.supports("selector(:not(:foo, .a))"), false);
+ }, "Invalid selector can be detected with CSS.supports()");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:is(:foo))"), false);
+ assert_equals(CSS.supports("selector(:is(.a, :foo))"), false);
+ assert_equals(CSS.supports("selector(:is(:foo, .a))"), false);
+ assert_equals(CSS.supports("selector(:is(:has(:foo, a), .b))"), false);
+ assert_equals(CSS.supports("selector(:where(:foo))"), false);
+ assert_equals(CSS.supports("selector(:where(.a, :foo))"), false);
+ assert_equals(CSS.supports("selector(:where(:foo, .a))"), false);
+ assert_equals(CSS.supports("selector(:where(:is(:foo, a), .b))"), false);
+ assert_equals(CSS.supports("selector(:has(:where(:foo, a), .b))"), false);
+ }, "Invalid selector can be detected with CSS.supports() even if it is dropped by forgiving parsing");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:is())"), false);
+ assert_equals(CSS.supports("selector(:where())"), false);
+ assert_equals(CSS.supports("selector(:has())"), false);
+ }, ":is(), :where() or :has() always fails without argument");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:has(:has(.a)))"), false);
+ assert_equals(CSS.supports("selector(:has(:has(.a), b))"), false);
+ assert_equals(CSS.supports("selector(.a, :has(:has(.b)))"), false);
+ assert_equals(CSS.supports("selector(:has(:is(:has(.a))))"), false);
+ assert_equals(CSS.supports("selector(:has(:is(:has(.a), .b)))"), false);
+ assert_equals(CSS.supports("selector(:has(:is(.a, :has(.b))))"), false);
+ }, ":has() always fails inside :has()");
+
+ test(function() {
+ assert_equals(CSS.supports("selector(:is(::after)"), false);
+ assert_equals(CSS.supports("selector(:is(::before)"), false);
+ assert_equals(CSS.supports("selector(:is(::first-letter)"), false);
+ assert_equals(CSS.supports("selector(:is(::first-line)"), false);
+ assert_equals(CSS.supports("selector(:where(::after)"), false);
+ assert_equals(CSS.supports("selector(:where(::before)"), false);
+ assert_equals(CSS.supports("selector(:where(::first-letter)"), false);
+ assert_equals(CSS.supports("selector(:where(::first-line)"), false);
+ assert_equals(CSS.supports("selector(:has(::after)"), false);
+ assert_equals(CSS.supports("selector(:has(::before)"), false);
+ assert_equals(CSS.supports("selector(:has(::first-letter)"), false);
+ assert_equals(CSS.supports("selector(:has(::first-line)"), false);
+ }, "Some pseudo elements always fail inside :is(), :where(), :has()");
+</script>
diff --git a/testing/web-platform/tests/css/css-conditional/js/conditional-CSSGroupingRule.html b/testing/web-platform/tests/css/css-conditional/js/conditional-CSSGroupingRule.html
new file mode 100644
index 0000000000..bde92d7091
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/conditional-CSSGroupingRule.html
@@ -0,0 +1,244 @@
+<!DOCTYPE HTML>
+<html lang=en>
+ <title>CSSGroupingRule Conditional Rules Test</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+ <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/css3-conditional/#the-cssgroupingrule-interface">
+ <meta name="assert" content="requirements in definition of insertRule">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+
+<style id="style">
+ @media unsupported { /* tests need to work even if condition is false */ }
+ @supports (unsupported: value) { }
+</style>
+<div id=log></div>
+<div id="test"></div>
+<script>
+
+ var rules = document.getElementById("style").sheet.cssRules;
+ var rule_names = ["@media", "@supports"];
+ var rule_types = [CSSRule.MEDIA_RULE, CSSRule.SUPPORTS_RULE]
+ var rule_nums = [4, 12]
+
+ for (let i = 0; i < 2; i++) {
+ var grouping_rule = rules[i];
+ var rule_name = rule_names[i];
+
+ test(function() {
+ assert_true(grouping_rule instanceof CSSGroupingRule,
+ rule_name + " instanceof CSSGroupingRule");
+ },
+ rule_name + " is CSSGroupingRule");
+
+ test(function() {
+ assert_equals(grouping_rule.type, rule_types[i],
+ "Rule type of " + rule_name + " rule");
+ assert_equals(grouping_rule.type, rule_nums[i],
+ "Rule number of " + rule_name + " rule");
+ },
+ rule_name + " rule type");
+
+ test(function() {
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Starting cssRules.length of " + rule_name + " rule");
+ },
+ "Empty " + rule_name + " rule length");
+
+ test(function() {
+ assert_throws_dom("HIERARCHY_REQUEST_ERR",
+ function() {
+ grouping_rule.insertRule("@import url(foo.css);", 0);
+ },
+ "inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
+ },
+ "insertRule of @import into " + rule_name);
+
+ test(function() {
+ assert_throws_dom("INDEX_SIZE_ERR",
+ function() {
+ grouping_rule.insertRule("p { color: green }", 1);
+ },
+ "inserting at a bad index throws INDEX_SIZE_ERR");
+ },
+ "insertRule into empty " + rule_name + " at bad index");
+
+ test(function() {
+ grouping_rule.insertRule("p { color: green }", 0);
+ assert_equals(grouping_rule.cssRules.length, 1,
+ "Modified cssRules.length of " + rule_name + " rule");
+ grouping_rule.insertRule("p { color: blue }", 1);
+ assert_equals(grouping_rule.cssRules.length, 2,
+ "Modified cssRules.length of " + rule_name + " rule");
+ grouping_rule.insertRule("p { color: aqua }", 1);
+ assert_equals(grouping_rule.cssRules.length, 3,
+ "Modified cssRules.length of " + rule_name + " rule");
+ assert_throws_dom("INDEX_SIZE_ERR",
+ function() {
+ grouping_rule.insertRule("p { color: green }", 4);
+ },
+ "inserting at a bad index throws INDEX_SIZE_ERR");
+ assert_equals(grouping_rule.cssRules.length, 3,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule into " + rule_name + " updates length");
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ grouping_rule.insertRule("@media print {}", 0);
+ assert_equals(grouping_rule.cssRules.length, 1,
+ "Modified cssRules.length of " + rule_name + " rule");
+ assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE,
+ "inserting syntactically correct media rule succeeds");
+ },
+ "insertRule of valid @media into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ grouping_rule.insertRule("p { color: yellow }", 0);
+ assert_equals(grouping_rule.cssRules.length, 1,
+ "Modified cssRules.length of " + rule_name + " rule");
+ assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE,
+ "inserting syntactically correct style rule succeeds");
+ },
+ "insertRule of valid style rule into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("@media bad syntax;", 0);
+ },
+ "inserting syntactically invalid rule throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of invalid @media into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("", 0);
+ },
+ "inserting empty rule throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of empty string into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("@media print {} foo", 0);
+ },
+ "inserting rule with garbage afterwards throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of valid @media rule followed by garbage into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("p { color: yellow } foo", 0);
+ },
+ "inserting rule with garbage afterwards throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of valid style rule followed by garbage into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("@media print {} @media print {}", 0);
+ },
+ "inserting multiple rules throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of mutiple valid @media into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("p { color: yellow } @media print {}", 0);
+ },
+ "inserting multiple rules throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of valid style rulle followed by valid @media into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("@media print {} p { color: yellow }", 0);
+ },
+ "inserting multiple rules throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of valid style rule followed by valid @media into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ assert_throws_dom("SYNTAX_ERR",
+ function() {
+ grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0);
+ },
+ "inserting multiple rules throws syntax error");
+ assert_equals(grouping_rule.cssRules.length, 0,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "insertRule of two valid style rules into " + rule_name);
+
+ test(function() {
+ while (grouping_rule.cssRules.length > 0) {
+ grouping_rule.deleteRule(0);
+ }
+ var res = grouping_rule.insertRule("p { color: green }", 0);
+ assert_equals(res, 0, "return value should be index");
+ assert_equals(grouping_rule.cssRules.length, 1,
+ "Modified cssRules.length of " + rule_name + " rule");
+ res = grouping_rule.insertRule("p { color: green }", 0);
+ assert_equals(res, 0, "return value should be index");
+ assert_equals(grouping_rule.cssRules.length, 2,
+ "Modified cssRules.length of " + rule_name + " rule");
+ res = grouping_rule.insertRule("p { color: green }", 2);
+ assert_equals(res, 2, "return value should be index");
+ assert_equals(grouping_rule.cssRules.length, 3,
+ "Modified cssRules.length of " + rule_name + " rule");
+ },
+ "Return value of insertRule into " + rule_name);
+ }
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/js/supports-conditionText.html b/testing/web-platform/tests/css/css-conditional/js/supports-conditionText.html
new file mode 100644
index 0000000000..ea74077dfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/js/supports-conditionText.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<meta charset=UTF-8>
+<title>CSSGroupingRule Conditional Rules Test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#the-cssconditionrule-interface">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style id="style"></style>
+
+<script>
+
+function check_condition_text(text) {
+ test(function() {
+ let style_element = document.getElementById("style");
+ style_element.textContent = `@supports ${text} {}`;
+ let rules = style_element.sheet.cssRules;
+ assert_equals(rules.length, 1);
+ assert_equals(rules[0].conditionText, text);
+ }, `conditionText getter for @supports ${text}`);
+}
+
+check_condition_text("(color: red)");
+check_condition_text("(color : red) or ( color:blue )");
+check_condition_text("not (color: red)");
+check_condition_text("()");
+check_condition_text("func()");
+check_condition_text("([])");
+check_condition_text("({})");
+check_condition_text("(())");
+check_condition_text("(func())");
+check_condition_text("(x)");
+check_condition_text("func(x)");
+check_condition_text("([x])");
+check_condition_text("({x})");
+check_condition_text("((x))");
+check_condition_text("(func(x))");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/reference/background-lime.html b/testing/web-platform/tests/css/css-conditional/reference/background-lime.html
new file mode 100644
index 0000000000..fcb243c7fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/reference/background-lime.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test Reference</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+ <style>
+ body { background: lime; color: black; }
+ </style>
+ </head>
+ <body>
+ This page should have a light green background.
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-conditional/support/at-media-dynamic-001-inner.html b/testing/web-platform/tests/css/css-conditional/support/at-media-dynamic-001-inner.html
new file mode 100644
index 0000000000..a0cf87a9a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/support/at-media-dynamic-001-inner.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>Reftest Reference</title>
+<style>
+ html { background: red; overflow: hidden; }
+ @media (max-width: 100px) {
+ html { background: green; }
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-conditional/support/fail.css b/testing/web-platform/tests/css/css-conditional/support/fail.css
new file mode 100644
index 0000000000..1c2d64c7e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/support/fail.css
@@ -0,0 +1 @@
+* { background:red ! important }
diff --git a/testing/web-platform/tests/css/css-conditional/support/pass.xht b/testing/web-platform/tests/css/css-conditional/support/pass.xht
new file mode 100644
index 0000000000..24dc3107e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-conditional/support/pass.xht
@@ -0,0 +1,12 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/>
+ <style type="text/css"><![CDATA[
+ html { background-color: green }
+ ]]></style>
+ </head>
+ <body>
+ </body>
+</html>