diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-conditional')
133 files changed, 4777 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-048-ref.html b/testing/web-platform/tests/css/css-conditional/at-supports-048-ref.html new file mode 100644 index 0000000000..414d9bf6f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-conditional/at-supports-048-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Mixing @supports and CSS nesting</title> + <link rel="author" title="Matthieu Dubet" href="m_dubet@apple.com"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <style> + div { + background:red; + height:100px; + width:100px; + margin: 10px; + border: solid 1px black; + background-color: green; + } + </style> + </head> + + <p>Test passes if there are only green rectangles. + <div class="test-1"></div> + <div class="test-2"></div> + <div class="test-3"></div> +</html> diff --git a/testing/web-platform/tests/css/css-conditional/at-supports-048.html b/testing/web-platform/tests/css/css-conditional/at-supports-048.html new file mode 100644 index 0000000000..dc0ed9dc42 --- /dev/null +++ b/testing/web-platform/tests/css/css-conditional/at-supports-048.html @@ -0,0 +1,41 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): Mixing @supports and CSS nesting</title> + <link rel="author" title="Matthieu Dubet" href="m_dubet@apple.com"> + <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports"> + <link rel="match" href="at-supports-048-ref.html"> + <style> + div { + background:red; + height:100px; + width:100px; + margin: 10px; + border: solid 1px black; + } + .test-1 { + background-color: red; + @supports (background-color: red) { + background-color: green; + } + } + .test-2 { + background-color: green; + @supports (invalid-declaration: foobar) { + background-color: red; + } + } + .test-3 { + background-color: green; + @supports (color: red) { + color: red; + } + } + </style> + </head> + + <p>Test passes if there are only green rectangles. + <div class="test-1"></div> + <div class="test-2"></div> + <div class="test-3"></div> +</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-selector-file-selector-button.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-file-selector-button.html new file mode 100644 index 0000000000..a51e503ef6 --- /dev/null +++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-file-selector-button.html @@ -0,0 +1,24 @@ +<!doctype html> +<html> + <head> + <title>CSS Test (Conditional Rules): In @supports, ::file-selector-button can be parsed successfully</title> + <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> + <link rel="help" href="https://drafts.csswg.org/css-conditional-3/#at-supports"> + <link rel="help" href="https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo"> + <link rel="match" href="at-supports-001-ref.html"> + <style> + div { + background: red; + height: 100px; + width: 100px; + } + @supports selector(input::file-selector-button) { + 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-selector-placeholder.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-placeholder.html new file mode 100644 index 0000000000..8ad8585814 --- /dev/null +++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-placeholder.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-selector-webkit-slider-thumb.tentative.html b/testing/web-platform/tests/css/css-conditional/at-supports-selector-webkit-slider-thumb.tentative.html new file mode 100644 index 0000000000..3f777a7574 --- /dev/null +++ b/testing/web-platform/tests/css/css-conditional/at-supports-selector-webkit-slider-thumb.tentative.html @@ -0,0 +1,21 @@ +<!doctype html> +<title>CSS Test (Conditional Rules): In @supports, known -webkit- pseudo elements can be parsed successfully</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-3/#at-supports"> +<link rel="match" href="at-supports-001-ref.html"> +<style> + div { + background:red; + height:100px; + width:100px; + } + /* This matches in user agents supporting ::-webkit-slider-thumb. */ + @supports selector(input::-webkit-slider-thumb) { + div { background-color:green; } + } + /* This should never match. */ + @supports selector(input::-webkit-asdf) { + div { background-color: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-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..daec039e40 --- /dev/null +++ b/testing/web-platform/tests/css/css-conditional/js/CSS-supports-CSSStyleDeclaration.html @@ -0,0 +1,762 @@ +<!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", + // No -moz-transform/origin here, because it might intentionally break the + // expectations of this test for compat reasons, see: + // https://bugzilla.mozilla.org/show_bug.cgi?id=1865332 + "-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> |