Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
eaf6fb2
commit d060338
Showing
4 changed files
with
62 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters