Skip to content
Permalink
Browse files
Forgiving selectors should not be reported as supported with CSS.supp…
…orts("selector(...)")

https://bugs.webkit.org/show_bug.cgi?id=244808
<rdar://99682164>

Reviewed by Darin Adler.

CSS.supports() and @supports should return false for unrecognized selectors per CSSWG resolution in
w3c/csswg-drafts#7280

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/resources/resource-files.json:
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-font-format-001-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-font-format-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-font-tech-001-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-font-tech-001.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-selector-detecting-invalid-in-forgiving-argument-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-selector-detecting-invalid-in-forgiving-argument-ref.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-selector-detecting-invalid-in-forgiving-argument.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-whitespace-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/at-supports-whitespace.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/CSS-supports-L4-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/CSS-supports-L4.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/CSS-supports-L5-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/CSS-supports-L5.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/CSS-supports-selector-detecting-invalid-in-forgiving-argument-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/CSS-supports-selector-detecting-invalid-in-forgiving-argument.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/supports-conditionText-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/supports-conditionText.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/js/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/w3c-import.log:

Also re-import wpt/css/css-conditional

* Source/WebCore/css/parser/CSSSelectorParser.cpp:
(WebCore::CSSSelectorParser::consumeForgivingSelectorList):
(WebCore::CSSSelectorParser::supportsComplexSelector):
* Source/WebCore/css/parser/CSSSelectorParser.h:

Canonical link: https://commits.webkit.org/254489@main
  • Loading branch information
anttijk committed Sep 14, 2022
1 parent 7ad0216 commit fc2b16c5035f0e6f974d06cccc8dc438db9e3dac
Show file tree
Hide file tree
Showing 23 changed files with 493 additions and 2 deletions.
@@ -1897,6 +1897,8 @@ imported/w3c/web-platform-tests/css/css-conditional/at-supports-046.html [ Image
imported/w3c/web-platform-tests/css/css-conditional/at-supports-namespace-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-conditional/at-supports-namespace-002.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-conditional/css-supports-036.xht [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-conditional/at-supports-font-format-001.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/css/css-conditional/at-supports-font-tech-001.html [ ImageOnlyFailure ]

transitions/svg-text-shadow-transition.html [ Failure ]
webkit.org/b/137883 transitions/background-transitions.html [ Failure Pass ]
@@ -895,6 +895,7 @@
"web-platform-tests/css/css-color/yellowsquare-ref.html",
"web-platform-tests/css/css-conditional/at-supports-001-ref.html",
"web-platform-tests/css/css-conditional/at-supports-027-ref.html",
"web-platform-tests/css/css-conditional/at-supports-selector-detecting-invalid-in-forgiving-argument-ref.html",
"web-platform-tests/css/css-conditional/support/at-media-dynamic-001-inner.html",
"web-platform-tests/css/css-conditional/support/pass.xht",
"web-platform-tests/css/css-contain/contain-inline-size-bfc-floats-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>
@@ -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>
@@ -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>
@@ -0,0 +1,48 @@
<!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: 12.5px;
width: 100px;
}
/* assume all browsers support at least feature-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 };
}
</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>
@@ -0,0 +1,17 @@
<!doctype html>
<title>CSS Conditional Test: @supports selector() detecting invalid in forgiving argument.</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>
@@ -0,0 +1,17 @@
<!doctype html>
<title>CSS Conditional Test: @supports selector() detecting invalid in forgiving argument.</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>
@@ -0,0 +1,42 @@
<!doctype html>
<title>CSS Conditional Test: @supports selector() detecting invalid in forgiving argument.</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-forgiving-argument-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(: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 };
}
</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="is invalid"></div>
<div class="where invalid"></div>
<div class="has invalid"></div>
@@ -0,0 +1,18 @@

PASS @supports ((a)) {}
PASS @supports ((a) ) {}
PASS @supports ( (a)) {}
PASS @supports ( (a) ) {}
PASS @supports (not (a)) {}
PASS @supports (not (a) ) {}
PASS @supports ( not (a)) {}
PASS @supports ( not (a) ) {}
PASS @supports ((a) and (b)) {}
PASS @supports ((a) and (b) ) {}
PASS @supports ( (a) and (b)) {}
PASS @supports ( (a) and (b) ) {}
PASS @supports ((a) or (b)) {}
PASS @supports ((a) or (b) ) {}
PASS @supports ( (a) or (b)) {}
PASS @supports ( (a) or (b) ) {}

@@ -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>
@@ -5,4 +5,10 @@ PASS selector() function rejects unknown webkit pseudo-elements.
PASS selector() function accepts known pseudo-elements
PASS selector() with simple combinators
FAIL selector() with unknown combinators assert_equals: expected false but got true
PASS selector() with forgiving :is, 1 arg
PASS selector() with forgiving :is, multiple args
PASS selector() with forgiving :where, 1 arg
PASS selector() with forgiving :where, multiple args
PASS selector() with forgiving :has, 1 arg
PASS selector() with forgiving :has, multiple args

@@ -28,4 +28,28 @@
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");
</script>
@@ -0,0 +1,10 @@

FAIL font-format() function accepts a known format assert_equals: expected true but got false
PASS font-format() function doesn't accept an unknown format
PASS font-format() function doesn't accept a format list
PASS font-format() function doesn't accept a string.
FAIL font-tech() function accepts a known technology assert_equals: expected true but got false
PASS font-tech() function doesn't accept an unknown technology
PASS font-tech() function doesn't accept a technology list
PASS font-tech() function doesn't accept a string.

@@ -0,0 +1,39 @@
<!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(foobar)"), false);
}, "font-tech() function doesn't accept an unknown technology");

test(function() {
assert_equals(CSS.supports("font-tech(feature-opentype, color-COLRv0)"), false);
}, "font-tech() function doesn't accept a technology list");

test(function() {
assert_equals(CSS.supports("font-tech('feature-opentype')"), false);
}, "font-tech() function doesn't accept a string.");
</script>
@@ -0,0 +1,6 @@

PASS Invalid selector can be detected with CSS.supports() even if it is dropped by forgiving parsing
PASS :is(), :where() or :has() always fails without argument
PASS :has() always fails inside :has()
PASS Some pseudo elements always fail inside :is(), :where(), :has()

0 comments on commit fc2b16c

Please sign in to comment.