mirror of
https://github.com/servo/servo.git
synced 2025-08-08 23:15:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
2
tests/wpt/web-platform-tests/css/css-conditional/OWNERS
Normal file
2
tests/wpt/web-platform-tests/css/css-conditional/OWNERS
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@dbaron
|
||||
@frivoal
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
223
tests/wpt/web-platform-tests/css/css-conditional/js/001.html
Normal file
223
tests/wpt/web-platform-tests/css/css-conditional/js/001.html
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<!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">
|
||||
<meta name="flags" content="">
|
||||
<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 style_rule = document.styleSheets[0].cssRules[0].cssRules[1];
|
||||
|
||||
assert_throws(new 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,
|
||||
"@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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Variables Allowed Syntax</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<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 print {}
|
||||
</style>
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"rule_type": {},
|
||||
"rule_length": {},
|
||||
"insert_import_throws": {},
|
||||
"insert_index_throws1": {},
|
||||
"insert_index_throws2": {},
|
||||
"insert_media_succeed": {},
|
||||
"insert_style_succeed": {},
|
||||
"insert_bad_media_throw": {},
|
||||
"insert_empty_throw": {},
|
||||
"insert_garbage_after_media_throw": {},
|
||||
"insert_garbage_after_style_throw": {},
|
||||
"insert_two_media_throw": {},
|
||||
"insert_style_media_throw": {},
|
||||
"insert_media_style_throw": {},
|
||||
"insert_two_style_throw": {},
|
||||
"insert_retval": {}
|
||||
}
|
||||
*/</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<div id=log></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
|
||||
var sheet = document.getElementById("style").sheet;
|
||||
|
||||
var grouping_rule = sheet.cssRules[0];
|
||||
|
||||
test(function() {
|
||||
assert_equals(grouping_rule.type, CSSRule.MEDIA_RULE,
|
||||
"Rule type of @media rule");
|
||||
},
|
||||
"rule_type");
|
||||
|
||||
test(function() {
|
||||
assert_equals(grouping_rule.cssRules.length, 0,
|
||||
"Starting cssRules.length of @media rule");
|
||||
},
|
||||
"rule_length");
|
||||
|
||||
test(function() {
|
||||
assert_throws("HIERARCHY_REQUEST_ERR",
|
||||
function() {
|
||||
grouping_rule.insertRule("@import url(foo.css);", 0);
|
||||
},
|
||||
"inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
|
||||
},
|
||||
"insert_import_throws");
|
||||
|
||||
test(function() {
|
||||
assert_throws("INDEX_SIZE_ERR",
|
||||
function() {
|
||||
grouping_rule.insertRule("p { color: green }", 1);
|
||||
},
|
||||
"inserting at a bad index throws INDEX_SIZE_ERR");
|
||||
},
|
||||
"insert_index_throws1");
|
||||
test(function() {
|
||||
grouping_rule.insertRule("p { color: green }", 0);
|
||||
assert_equals(grouping_rule.cssRules.length, 1,
|
||||
"Modified cssRules.length of @media rule");
|
||||
grouping_rule.insertRule("p { color: blue }", 1);
|
||||
assert_equals(grouping_rule.cssRules.length, 2,
|
||||
"Modified cssRules.length of @media rule");
|
||||
grouping_rule.insertRule("p { color: aqua }", 1);
|
||||
assert_equals(grouping_rule.cssRules.length, 3,
|
||||
"Modified cssRules.length of @media rule");
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_index_throws2");
|
||||
|
||||
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 @media rule");
|
||||
assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE,
|
||||
"inserting syntactically correct media rule succeeds");
|
||||
},
|
||||
"insert_media_succeed");
|
||||
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 @media rule");
|
||||
assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE,
|
||||
"inserting syntactically correct style rule succeeds");
|
||||
},
|
||||
"insert_style_succeed");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_bad_media_throw");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("SYNTAX_ERR",
|
||||
function() {
|
||||
grouping_rule.insertRule("", 0);
|
||||
},
|
||||
"inserting empty rule throws syntax error");
|
||||
assert_equals(grouping_rule.cssRules.length, 0,
|
||||
"Modified cssRules.length of @media rule");
|
||||
},
|
||||
"insert_empty_throw");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_garbage_after_media_throw");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_garbage_after_style_throw");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_two_media_throw");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_style_media_throw");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_media_style_throw");
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws("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 @media rule");
|
||||
},
|
||||
"insert_two_style_throw");
|
||||
|
||||
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 @media 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 @media 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 @media rule");
|
||||
},
|
||||
"insert_retval");
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue