Implement @supports selector() syntax.

This implements the selector(<complex-selector>) syntax for @supports. See w3c/csswg-drafts#3207 for explainer and discussion. Probably would should wait for that to be sorted out to land this, or maybe we should put it behind a pref to get the code landed and change our implementation if the discussion there leads to a change. Differential Revision: https://phabricator.services.mozilla.com/D8864 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1499386 gecko-commit: 631545ef79251ea54347ebcb76420b7c1c9ba333 gecko-integration-branch: autoland gecko-reviewers: heycam
web-platform-tests · Oct 17, 2018 · d060338 · d060338
1 parent eaf6fb2
commit d060338
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/css/css-conditional/at-supports-040.html b/css/css-conditional/at-supports-040.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/css/css-conditional/at-supports-041.html b/css/css-conditional/at-supports-041.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/css/css-conditional/at-supports-042.html b/css/css-conditional/at-supports-042.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/css/cssom/CSS.html b/css/cssom/CSS.html
@@ -35,4 +35,12 @@
         assert_equals(CSS.supports("width", "blah"), false, "CSS.supports: two argument form fails for invalid value");
         assert_equals(CSS.supports("--foo", "blah"), true, "CSS.supports: two argument form succeeds for custom property");
     }, "CSS.supports, two argument form");
+    test(function () {
+        assert_equals(CSS.supports("selector(div)"), true, "CSS.supports: selector() function accepts a selector");
+        assert_equals(CSS.supports("selector(div, div)"), false, "CSS.supports: selector() function doesn't accept a selector list");
+        assert_equals(CSS.supports("selector(::-webkit-unknown-pseudo-element)"), false, "CSS.supports: selector() function rejects unknown webkit pseudo-elements.");
+        assert_equals(CSS.supports("selector(::before)"), true, "CSS.supports: selector() function accepts known pseudo-elements");
+        assert_equals(CSS.supports("selector(div + .c)"), true, "CSS.supports: selector() with simple combinators");
+        assert_equals(CSS.supports("selector(div | .c)"), false, "CSS.supports: selector() with unknown combinators");
+    }, "CSS.supports, selector function");
 </script>