mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Support for simple passing conditions in @media</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#use">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if rules under a true @media condition are applied in place.">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media all {
|
||||
.test1 { background: green; }
|
||||
.test2 { background: red; }
|
||||
}
|
||||
.test2 { background: green; }
|
||||
|
||||
@media not unknown {
|
||||
.test3 { background: green; }
|
||||
.test4 { background: red; }
|
||||
}
|
||||
.test4 { background: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
<div class="test3"></div>
|
||||
<div class="test4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Support for simple failing conditions in @media</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#use">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if rules under a false @media condition are not applied.">
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
@media not all {
|
||||
.test1 { background: red; }
|
||||
}
|
||||
@media unknown {
|
||||
.test2 { background: red; }
|
||||
}
|
||||
@media (unknown) {
|
||||
.test3 { background: red; }
|
||||
}
|
||||
@media not (unknown) {
|
||||
.test4 { background: red; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
<div class="test3"></div>
|
||||
<div class="test4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Invalid rules after @media</title>
|
||||
<!-- This test is paired with at-supports-045.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if rules required to occur before all style rules are invalid after @media.">
|
||||
<style>
|
||||
@namespace x "http://www.w3.org/";
|
||||
@media { /* invalidates later rules even if empty */ }
|
||||
@import "support/fail.css";
|
||||
@namespace y "http://www.w3.org/";
|
||||
|
||||
.test1, x|div { background: green; }
|
||||
.test1, y|div { background: red; }
|
||||
|
||||
div {
|
||||
background: red;
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@media all {
|
||||
/* @supports isn't invalidated, only misordered stuff after it is */
|
||||
.test2 { background: green; }
|
||||
}
|
||||
@import "support/fail.css";
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Invalid rules inside @media</title>
|
||||
<!-- This test is paired with at-supports-content-001.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if invalid rules within @media do not invalidate the @media rule.">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media all {
|
||||
@import "support/fail.css";
|
||||
.test1 { background: green; }
|
||||
}
|
||||
@media all {
|
||||
@namespace foo "http://www.w3.org/";
|
||||
.test2 { background: green; }
|
||||
.test2:not(foo|div) { background: red; }
|
||||
}
|
||||
@media all {
|
||||
@charset "utf-8";
|
||||
.test3 { background: green; }
|
||||
}
|
||||
@media all {
|
||||
@unknown;
|
||||
.test4 { background: green; }
|
||||
}
|
||||
@media all {
|
||||
.test5 { background: green; }
|
||||
@unknown {
|
||||
.test5 { background: red; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
<div class="test3"></div>
|
||||
<div class="test4"></div>
|
||||
<div class="test5"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): @font-face rules inside @media</title>
|
||||
<!-- This test is paired with at-supports-content-002.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-face-rule">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if @font-face rules within @media are supported.">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
color: green;
|
||||
font: 100px/1 Blockify, sans-serif;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@media all {
|
||||
@font-face {
|
||||
font-family: 'Blockify';
|
||||
src: url('/fonts/Ahem.ttf');
|
||||
}
|
||||
}
|
||||
@media not all {
|
||||
@font-face {
|
||||
font-family: 'Blockify';
|
||||
src: local('Arial'), url('/fonts/fail.woff');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1">X</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): @keyframes rules inside @media</title>
|
||||
<!-- This test is paired with at-supports-content-003.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-animations-1/">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if @keyframes rules within @media are supported.">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: green 4s both;
|
||||
}
|
||||
|
||||
@media all {
|
||||
@keyframes green {
|
||||
from {
|
||||
background: green;
|
||||
}
|
||||
to {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media not all {
|
||||
@keyframes green {
|
||||
from {
|
||||
background: red;
|
||||
}
|
||||
to {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): @counter-style rules inside @media</title>
|
||||
<!-- This test is paired with at-supports-content-004.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-counter-style-rule">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if @counter-style rules within @media are supported.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
color: green;
|
||||
font: 100px/1 Ahem, sans-serif;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div::before {
|
||||
content: counter(test, x);
|
||||
}
|
||||
|
||||
@media all {
|
||||
@counter-style x {
|
||||
system: cyclic;
|
||||
symbols: 'X';
|
||||
}
|
||||
}
|
||||
@media not all {
|
||||
@counter-style x {
|
||||
system: cyclic;
|
||||
symbols: ' ';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<title>CSS Test (Conditional Rules): Rule application is immediate on condition change</title>
|
||||
<meta name="assert"
|
||||
content="Test passes if rules within @media are applied when its condition changes to match.">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#processing">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
|
||||
<style>
|
||||
iframe {
|
||||
border: none;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<iframe id=frame src="support/at-media-dynamic-001-inner.html"></iframe>
|
||||
|
||||
<script>
|
||||
var handler = function () {
|
||||
document.getElementById("frame").style.width = "100px";
|
||||
document.documentElement.classList = "";
|
||||
};
|
||||
document.addEventListener("TestRendered", handler);
|
||||
</script>
|
||||
|
|
@ -5,21 +5,22 @@
|
|||
<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;
|
||||
height:50px;
|
||||
width:100px;
|
||||
}
|
||||
@supports (margin: 0) {
|
||||
div { background-color:green; }
|
||||
.test1 { background:green; }
|
||||
.test2 { background: red; }
|
||||
}
|
||||
.test2 { background: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div>
|
||||
</div>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Conditional Test: Custom Properties in @supports</title>
|
||||
<meta name="assert"
|
||||
content="Test passes if custom properties are supported and correctly detected in @supports,
|
||||
or unsupported and correctly detected in @supports.">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-conditional/#at-supports">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-variables-1/">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
body {
|
||||
--badcolor: red;
|
||||
--goodcolor: green;
|
||||
}
|
||||
div {
|
||||
background: var(--badcolor);
|
||||
}
|
||||
@supports (--foo: whatever) {
|
||||
.test1 { background: green; }
|
||||
}
|
||||
|
||||
@supports (--foo: whatever !important) {
|
||||
.test2 { background: var(--goodcolor); }
|
||||
}
|
||||
|
||||
.test3 { background: green; }
|
||||
@supports (--foo: whatever !bogus) {
|
||||
.test3 { background: red; }
|
||||
}
|
||||
|
||||
@supports (color: var(--anything) invalid-value) {
|
||||
.test4 { background: green; }
|
||||
}
|
||||
|
||||
.test5 { background: red; }
|
||||
@supports not (--goodcolor: green) {
|
||||
.test5 { background: green; }
|
||||
}
|
||||
.test5 { background: var(--goodcolor) }
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
<div class="test3"></div>
|
||||
<div class="test4"></div>
|
||||
<div class="test5"></div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Invalid rules after @supports</title>
|
||||
<!-- This test is paired with at-media-003.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if rules required to occur before all style rules are invalid after @supports.">
|
||||
<style>
|
||||
@namespace x "http://www.w3.org/";
|
||||
@supports (background: blue) { /* invalidates later rules even if empty */ }
|
||||
@import "support/fail.css";
|
||||
@namespace y "http://www.w3.org/";
|
||||
|
||||
.test1, x|div { background: green; }
|
||||
.test1, y|div { background: red; }
|
||||
|
||||
div {
|
||||
background: red;
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@supports (background: blue) {
|
||||
/* @supports isn't invalidated, only misordered stuff after it is */
|
||||
.test2 { background: green; }
|
||||
}
|
||||
@import "support/fail.css";
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Conditional Test: Unknown Functional Notation as False in @supports</title>
|
||||
<meta name="assert"
|
||||
content="Test passes if unknown but grammatical functional notations are treated as false in @supports.">
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-conditional/#at-supports">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@supports not unknown() {
|
||||
.test1.bare { background: green; }
|
||||
}
|
||||
@supports (not (unknown())) {
|
||||
.test1.wrapped { background: green; }
|
||||
}
|
||||
|
||||
@supports not unknown(with stuff) {
|
||||
.test2.bare { background: green; }
|
||||
}
|
||||
@supports (not (unknown(with stuff))) {
|
||||
.test2.wrapped { background: green; }
|
||||
}
|
||||
|
||||
@supports not unknown(!@#% { ... } more() @stuff [ ]) {
|
||||
.test3.bare { background: green; }
|
||||
}
|
||||
@supports (not (unknown(!@#% { ... } more() @stuff [ ]))) {
|
||||
.test3.wrapped { background: green; }
|
||||
}
|
||||
|
||||
.test4, .test5 { background: green; }
|
||||
|
||||
@supports unknown() {
|
||||
.test4.bare { background: red; }
|
||||
}
|
||||
@supports (unknown()) {
|
||||
.test4.wrapped { background: red; }
|
||||
}
|
||||
|
||||
@supports unknown(with stuff) {
|
||||
.test5.bare { background: red; }
|
||||
}
|
||||
@supports (unknown(with stuff)) {
|
||||
.test5.wrapped { background: red; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="test1 bare"></div>
|
||||
<div class="test2 bare"></div>
|
||||
<div class="test3 bare"></div>
|
||||
<div class="test4 bare"></div>
|
||||
<div class="test5 bare"></div>
|
||||
<div class="test1 wrapped"></div>
|
||||
<div class="test2 wrapped"></div>
|
||||
<div class="test3 wrapped"></div>
|
||||
<div class="test4 wrapped"></div>
|
||||
<div class="test5 wrapped"></div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Invalid rules inside @supports</title>
|
||||
<!-- This test is paired with at-media-content-001.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-media">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if invalid rules within @media do not invalidate the @media rule.">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@supports (background: blue) {
|
||||
@import "support/fail.css";
|
||||
.test1 { background: green; }
|
||||
}
|
||||
@supports (background: blue) {
|
||||
@namespace foo "http://www.w3.org/";
|
||||
.test2 { background: green; }
|
||||
.test2:not(foo|div) { background: red; }
|
||||
}
|
||||
@supports (background: blue) {
|
||||
@charset "utf-8";
|
||||
.test3 { background: green; }
|
||||
}
|
||||
@supports (background: blue) {
|
||||
@unknown;
|
||||
.test4 { background: green; }
|
||||
}
|
||||
@supports (background: blue) {
|
||||
.test5 { background: green; }
|
||||
@unknown {
|
||||
.test5 { background: red; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
<div class="test3"></div>
|
||||
<div class="test4"></div>
|
||||
<div class="test5"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): @font-face rules inside @supports</title>
|
||||
<!-- This test is paired with at-media-content-002.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-face-rule">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if @font-face rules within @supports are supported.">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
color: green;
|
||||
font: 100px/1 Blockify, sans-serif;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@supports (color: blue) {
|
||||
@font-face {
|
||||
font-family: 'Blockify';
|
||||
src: url('/fonts/Ahem.ttf');
|
||||
}
|
||||
}
|
||||
@supports not (color: blue) {
|
||||
@font-face {
|
||||
font-family: 'Blockify';
|
||||
src: local('Arial'), url('/fonts/fail.woff');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1">X</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): @keyframes rules inside @supports</title>
|
||||
<!-- This test is paired with at-media-content-003.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-animations-1/">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if @keyframes rules within @supports are supported.">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: green 4s both;
|
||||
}
|
||||
|
||||
@supports (color: blue) {
|
||||
@keyframes green {
|
||||
from {
|
||||
background: green;
|
||||
}
|
||||
to {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
@supports not (color: blue) {
|
||||
@keyframes green {
|
||||
from {
|
||||
background: red;
|
||||
}
|
||||
to {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): @counter-style rules inside @supports</title>
|
||||
<!-- This test is paired with at-media-content-004.html ; please keep them in sync -->
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-counter-style-rule">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if @counter-style rules within @supports are supported.">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
color: green;
|
||||
font: 100px/1 Ahem, sans-serif;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div::before {
|
||||
content: counter(test, x);
|
||||
}
|
||||
|
||||
@media all {
|
||||
@counter-style x {
|
||||
system: cyclic;
|
||||
symbols: 'X';
|
||||
}
|
||||
}
|
||||
@media not all {
|
||||
@counter-style x {
|
||||
system: cyclic;
|
||||
symbols: ' ';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Validity of namespaces in @supports</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#use">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-namespaces/">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/generate.html#content">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#at-supports">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if namespaces used within @supports are valid only if declared in a valid @namespace rule.">
|
||||
<style>
|
||||
@namespace x "http://www.w3.org/1999/xlink";
|
||||
@supports (background: green) {}
|
||||
@namespace y "http://www.w3.org/1999/xlink";
|
||||
|
||||
div {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test1 { background: red; }
|
||||
@supports (content: attr(x|href)) {
|
||||
.test1 { background: green; }
|
||||
}
|
||||
|
||||
.test2 { background: green; }
|
||||
@supports (content: attr(y|href)) {
|
||||
.test2 { background: red; }
|
||||
}
|
||||
|
||||
.test3 { background: red; }
|
||||
@supports not (content: attr(y|href)) {
|
||||
.test3 { background: green; }
|
||||
}
|
||||
|
||||
.test4 { background: red; }
|
||||
.test5 { background: green; }
|
||||
@supports (background: red) {
|
||||
x|y, .test4 { background: green; }
|
||||
y|x, .test5 { background: red; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
<div class="test3"></div>
|
||||
<div class="test4"></div>
|
||||
<div class="test5"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<head>
|
||||
<title>CSS Test (Conditional Rules): Validity of namespaces in selector() in @supports</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-4/#typedef-supports-selector-fn">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-namespaces/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional/#contents-of">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional/#use">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional/#at-supports">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<meta name="assert"
|
||||
content="Test passes if namespaces used within @supports selector() are valid only if declared in a valid @namespace rule.">
|
||||
<style>
|
||||
@namespace x "http://www.w3.org/1999/xlink";
|
||||
@supports (background: green) {}
|
||||
@namespace y "http://www.w3.org/1999/xlink";
|
||||
|
||||
div {
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.test1 { background: red; }
|
||||
@supports selector(x|y) {
|
||||
.test1 { background: green; }
|
||||
}
|
||||
|
||||
.test2 { background: green; }
|
||||
@supports selector(y|x) {
|
||||
.test2 { background: red; }
|
||||
}
|
||||
|
||||
.test3 { background: red; }
|
||||
@supports not selector(y|x) {
|
||||
.test3 { background: green; }
|
||||
}
|
||||
|
||||
/* technically redundant with test 001, but need to add to 100px anyway */
|
||||
.test4, x|y { background: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
<div class="test3"></div>
|
||||
<div class="test4"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>CSS Conditional Test: @supports selector() with compound selector</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
|
||||
<link rel="match" href="at-supports-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
background-color:red;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
@supports selector(a:link.class#ident) {
|
||||
div { background: green };
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports rule condition with a single, valid property declaration for a supported property must cause the rules inside the @supports rule to apply."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Any subexpression in an @supports rule condition can be surrounded by an extra pair of parentheses."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Property declarations in an @supports rule can have !important specified."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A supported property with an unsupported value must cause the @supports condition to fail."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the left condition passes."/>
|
||||
<meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the second condition passes."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@supports (color: rainbow) or (color: green) {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the right condition passes."/>
|
||||
<meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the first condition passes."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
@supports (color: green) or (color: rainbow) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to pass if both sub-conditions pass."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the left sub-condition passes."/>
|
||||
<meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the first sub-condition fails."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
html { background-color: green }
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the right sub-condition passes."/>
|
||||
<meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the second sub-condition fails."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
html { background-color: green }
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A disjunction of three @supports conditions must cause the @supports condition to pass if at least one of the sub-conditions passes."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A conjunction of three @supports conditions must cause the @supports condition to pass if all three sub-conditions pass."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="There need not be any white space between the '@supports' and open brace of the rule set, nor between a declaration's property name and value."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A negation of an @supports condition must pass if and only if the sub-condition fails. The sub-condition here is a supported property name with an unsupported value."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The sub-condition of a negation in an @supports condition must be in parentheses."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition that is a declaration with a supported property name with an unsupported value must fail."/>
|
||||
<meta name="assert" content="An @supports condition that is a declaration with an unsupported property name with a supported value must fail."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
html { background-color: green }
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if one condition passes and the other fails due to being an unsupported property."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition must successfully parse even if a declaration has an empty property value."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A supported shorthand property declaration must be considered to pass."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An inner @supports rule inside an outer @supports must apply its child rules only if both @supports conditions succeeded."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An outer @supports rule with an inner @media rule must apply the rules inside the @media only if both the @supports and @media conditions pass."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A disjunction in an @supports condition must have both sub-conditions enclosed in parentheses." />
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="A disjunction in an @supports condition must have both sub-conditions enclosed in parentheses." />
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition must successfully parse and evaluate to false a parenthesized expression has invalid syntax."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule with an unrecognized condition using functional notation must evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition with an unrecognized condition using functional notation must evaluate to false."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: In an @supports rule "not(" must be parsed as a FUNCTION</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports condition with 'not(' must parse be parsed as a FUNCTION token."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule condition with empty parentheses should evaluates to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports rule condition that consists just of a pair of parentheses should evaluate to false."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule condition with empty parentheses should evaluates to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports rule condition that consists just of a pair of parentheses should evaluate to false."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule condition with an unexpected token before the closing paren of a supports_condition_in_parens should parse as a general_enclosed</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports rule condition that has an unexpected token before the closing paren of a supports_condition_in_parens should parse as a general_enclosed and evaluate to false rather than fail to parse."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule condition with a bogus priority should evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports rule condition with a bogus priority should evaluate to false"/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule condition with tokens after the priority should evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports rule condition with tokens after the priority should evaluate to false"/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<title>CSS Test: An @supports rule condition with two priorities should evaluate to false</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An @supports rule condition with two priorities should evaluate to false"/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<link rel="author" title="L. David Baron" href="mailto:dbaron@dbaron.org" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An outer @media rule with an inner @supports rule must apply the rules inside the @supports only if both the @supports and @media conditions pass."/>
|
||||
<link rel="match" href="support/pass.xht" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS.supports</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-conditional/#dom-css-supports">
|
||||
<title>CSS.supports() Level 3</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-conditional-3/#the-css-namespace">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
|
|
@ -40,28 +40,4 @@
|
|||
test(function() {
|
||||
assert_equals(CSS.supports("--foo", "blah"), true);
|
||||
}, "two argument form succeeds for custom property");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(div)"), true);
|
||||
}, "selector() function accepts a selector");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(div, div)"), false);
|
||||
}, "selector() function doesn't accept a selector list");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(::-webkit-unknown-pseudo-element)"), false);
|
||||
}, "selector() function rejects unknown webkit pseudo-elements.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(::before)"), true);
|
||||
}, "selector() function accepts known pseudo-elements");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(div + .c)"), true);
|
||||
}, "selector() with simple combinators");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(div | .c)"), false);
|
||||
}, "selector() with unknown combinators");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS.supports() Level 4</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(div)"), true);
|
||||
}, "selector() function accepts a selector");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(div, div)"), false);
|
||||
}, "selector() function doesn't accept a selector list");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(::-webkit-unknown-pseudo-element)"), false);
|
||||
}, "selector() function rejects unknown webkit pseudo-elements.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(::before)"), true);
|
||||
}, "selector() function accepts known pseudo-elements");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(div + .c)"), true);
|
||||
}, "selector() with simple combinators");
|
||||
|
||||
test(function() {
|
||||
assert_equals(CSS.supports("selector(div | .c)"), false);
|
||||
}, "selector() with unknown combinators");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang=en>
|
||||
<title>CSSGroupingRule Conditional Rules Test</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<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 unsupported { /* tests need to work even if condition is false */ }
|
||||
@supports (unsupported: value) { }
|
||||
</style>
|
||||
<div id=log></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
|
||||
var rules = document.getElementById("style").sheet.cssRules;
|
||||
var rule_names = ["@media", "@supports"];
|
||||
var rule_types = [CSSRule.MEDIA_RULE, CSSRule.SUPPORTS_RULE]
|
||||
var rule_nums = [4, 12]
|
||||
|
||||
for (let i = 0; i < 2; i++) {
|
||||
var grouping_rule = rules[i];
|
||||
var rule_name = rule_names[i];
|
||||
|
||||
test(function() {
|
||||
assert_true(grouping_rule instanceof CSSGroupingRule,
|
||||
rule_name + " instanceof CSSGroupingRule");
|
||||
},
|
||||
rule_name + " is CSSGroupingRule");
|
||||
|
||||
test(function() {
|
||||
assert_equals(grouping_rule.type, rule_types[i],
|
||||
"Rule type of " + rule_name + " rule");
|
||||
assert_equals(grouping_rule.type, rule_nums[i],
|
||||
"Rule number of " + rule_name + " rule");
|
||||
},
|
||||
rule_name + " rule type");
|
||||
|
||||
test(function() {
|
||||
assert_equals(grouping_rule.cssRules.length, 0,
|
||||
"Starting cssRules.length of " + rule_name + " rule");
|
||||
},
|
||||
"Empty " + rule_name + " rule length");
|
||||
|
||||
test(function() {
|
||||
assert_throws_dom("HIERARCHY_REQUEST_ERR",
|
||||
function() {
|
||||
grouping_rule.insertRule("@import url(foo.css);", 0);
|
||||
},
|
||||
"inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
|
||||
},
|
||||
"insertRule of @import into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
assert_throws_dom("INDEX_SIZE_ERR",
|
||||
function() {
|
||||
grouping_rule.insertRule("p { color: green }", 1);
|
||||
},
|
||||
"inserting at a bad index throws INDEX_SIZE_ERR");
|
||||
},
|
||||
"insertRule into empty " + rule_name + " at bad index");
|
||||
|
||||
test(function() {
|
||||
grouping_rule.insertRule("p { color: green }", 0);
|
||||
assert_equals(grouping_rule.cssRules.length, 1,
|
||||
"Modified cssRules.length of " + rule_name + " rule");
|
||||
grouping_rule.insertRule("p { color: blue }", 1);
|
||||
assert_equals(grouping_rule.cssRules.length, 2,
|
||||
"Modified cssRules.length of " + rule_name + " rule");
|
||||
grouping_rule.insertRule("p { color: aqua }", 1);
|
||||
assert_equals(grouping_rule.cssRules.length, 3,
|
||||
"Modified cssRules.length of " + rule_name + " rule");
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule into " + rule_name + " updates length");
|
||||
|
||||
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 " + rule_name + " rule");
|
||||
assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE,
|
||||
"inserting syntactically correct media rule succeeds");
|
||||
},
|
||||
"insertRule of valid @media into " + rule_name);
|
||||
|
||||
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 " + rule_name + " rule");
|
||||
assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE,
|
||||
"inserting syntactically correct style rule succeeds");
|
||||
},
|
||||
"insertRule of valid style rule into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of invalid @media into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("SYNTAX_ERR",
|
||||
function() {
|
||||
grouping_rule.insertRule("", 0);
|
||||
},
|
||||
"inserting empty rule throws syntax error");
|
||||
assert_equals(grouping_rule.cssRules.length, 0,
|
||||
"Modified cssRules.length of " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of empty string into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of valid @media rule followed by garbage into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of valid style rule followed by garbage into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of mutiple valid @media into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of valid style rulle followed by valid @media into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of valid style rule followed by valid @media into " + rule_name);
|
||||
|
||||
test(function() {
|
||||
while (grouping_rule.cssRules.length > 0) {
|
||||
grouping_rule.deleteRule(0);
|
||||
}
|
||||
assert_throws_dom("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 " + rule_name + " rule");
|
||||
},
|
||||
"insertRule of two valid style rules into " + rule_name);
|
||||
|
||||
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 " + rule_name + " 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 " + rule_name + " 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 " + rule_name + " rule");
|
||||
},
|
||||
"Return value of insertRule into " + rule_name);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!doctype html>
|
||||
<title>Reftest Reference</title>
|
||||
<style>
|
||||
html { background: red; overflow: hidden; }
|
||||
@media (max-width: 100px) {
|
||||
html { background: green; }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
* { background:red ! important }
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<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_dom("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_dom("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_dom("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_dom("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_dom("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_dom("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_dom("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_dom("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_dom("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_dom("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_dom("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