mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -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,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>
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
@supports not ({ something @with (unbalanced parens }) {
|
||||
html { background-color: red }
|
||||
}
|
||||
/* parser still looking for second close parenthesis */
|
||||
html { background-color: red }
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -196,12 +196,6 @@
|
|||
assert_equals(rules[0].cssRules[0].type, CSSRule.FONT_FACE_RULE);
|
||||
}, "Inserting @font-face inside @supports works");
|
||||
|
||||
test(function(){
|
||||
var style_rule = document.styleSheets[0].cssRules[0].cssRules[1];
|
||||
|
||||
assert_throws_js(TypeError, function() { style_rule.insertRule("@supports (width: 0) { ol { width: 0; } }", 0);} );
|
||||
|
||||
}, "Inserting an @supports inside a style rule should fail");
|
||||
test(function(){
|
||||
var rule = document.styleSheets[0].cssRules[1];
|
||||
assert_equals_normalized(rule.cssText,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@
|
|||
<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");
|
||||
|
|
@ -26,17 +30,50 @@
|
|||
}, "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");
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS.supports() detecting invalid in forgiving argument</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(: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(: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(: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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue