mirror of
https://github.com/servo/servo.git
synced 2025-08-11 08:25:32 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -0,0 +1,3 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: all:revert in :visited</title>
|
||||
<a href="">Test passes if this text has UA style for visited links</a>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: all:revert in :visited</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#all-shorthand">
|
||||
<link rel="match" href="all-prop-revert-visited-ref.html">
|
||||
<style>
|
||||
:root { color: red; }
|
||||
a:visited { color: red; }
|
||||
a:visited { all: revert; }
|
||||
</style>
|
||||
<a href="">Test passes if this text has UA style for visited links</a>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: all:unset in :visited</title>
|
||||
<style>
|
||||
:root { color: green; }
|
||||
a:visited { color: red; }
|
||||
a:visited { color: unset; }
|
||||
</style>
|
||||
<a href="">Test passes if this text is green.</a>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Cascade: all:unset in :visited</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-cascade/#all-shorthand">
|
||||
<link rel="match" href="all-prop-unset-visited-ref.html">
|
||||
<style>
|
||||
:root { color: green; }
|
||||
a:visited { color: red; }
|
||||
a:visited { all: unset; }
|
||||
</style>
|
||||
<a href="">Test passes if this text is green.</a>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
CSS Cascading and Inheritance Test:
|
||||
Initial property and background-color
|
||||
</title>
|
||||
<meta name="assert" content="
|
||||
The initial keyword is supported on background-color.
|
||||
" />
|
||||
|
||||
<link
|
||||
rel="author"
|
||||
title="François REMY"
|
||||
href="mailto:fremycompany.developer@yahoo.fr"
|
||||
/ >
|
||||
|
||||
<link rel="help" href="https://www.w3.org/TR/css-cascade-3/#initial"/>
|
||||
|
||||
<link
|
||||
rel="match"
|
||||
href="reference/all-green.html"
|
||||
/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
html { background: green; overflow: hidden; }
|
||||
#outer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
|
||||
#outer { background: red; background-color: initial; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
528
tests/wpt/web-platform-tests/css/css-cascade/layer-basic.html
Normal file
528
tests/wpt/web-platform-tests/css/css-cascade/layer-basic.html
Normal file
|
|
@ -0,0 +1,528 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Cascade Layers: Basic functionality</title>
|
||||
<meta name="assert" content="Basic functionality of CSS Cascade Layers">
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<target class="first"></target>
|
||||
<target class="second"></target>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
// In all test cases, the rule specified as "color: green" should win.
|
||||
var testCases = [
|
||||
{
|
||||
title: 'A1 Anonymous layers',
|
||||
style: `
|
||||
@layer { }
|
||||
target { color: green; }
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A2 Anonymous layers',
|
||||
style: `
|
||||
target { color: red; }
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A3 Anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
target { color: red; }
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A4 Anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A5 Anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
target { color: red; }
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
}
|
||||
target { color: red; }
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A6 Anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
target { color: red; }
|
||||
}
|
||||
target { color: red; }
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A7 Anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
target { color: red; }
|
||||
}
|
||||
@layer {
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A8 Anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
@layer {
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
target { color: red; }
|
||||
}
|
||||
@layer {
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'A9 Anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
target { color: red; }
|
||||
}
|
||||
@layer {
|
||||
@layer {
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
}
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B1 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
}
|
||||
target { color: green; }
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B2 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
target { color: green; }
|
||||
}
|
||||
target { color: red; }
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B3 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
@layer A {
|
||||
target { color: green; }
|
||||
}
|
||||
target { color: red; }
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B4 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
@layer B {
|
||||
target { color: green; }
|
||||
}
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B5 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
@layer A {
|
||||
target { color: green; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B6 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: green; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B7 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer B {
|
||||
target { color: green; }
|
||||
}
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B8 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer B {
|
||||
@layer A {
|
||||
target { color: green; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B9 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer B {
|
||||
@layer A {
|
||||
target.first { color: green; }
|
||||
}
|
||||
}
|
||||
@layer A {
|
||||
@layer A {
|
||||
target.first { color: red; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'B10 Named layers',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer B {
|
||||
@layer A {
|
||||
target.first { color: green; }
|
||||
}
|
||||
}
|
||||
@layer A {
|
||||
@layer B {
|
||||
target.first { color: red; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'C1 Named layers shorthand',
|
||||
style: `
|
||||
@layer A.A {
|
||||
target { color: red; }
|
||||
}
|
||||
@layer B.A {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'C2 Named layers shorthand',
|
||||
style: `
|
||||
@layer A.A {
|
||||
target { color: red; }
|
||||
}
|
||||
@layer B.A {
|
||||
target.first { color: green; }
|
||||
}
|
||||
@layer A.A {
|
||||
target.first { color: red; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'C3 Named layers shorthand',
|
||||
style: `
|
||||
@layer A.A {
|
||||
target { color: red; }
|
||||
}
|
||||
@layer B.A {
|
||||
target.first { color: green; }
|
||||
}
|
||||
@layer A.B {
|
||||
target.first { color: red; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'C4 Named layers shorthand',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer B.A {
|
||||
target { color: green; }
|
||||
}
|
||||
@layer A.A
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'C5 Named layers shorthand',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer B.A {
|
||||
target { color: green; }
|
||||
}
|
||||
@layer A.B {
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'D1 Mixed named and anonymous layers',
|
||||
style: `
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'D2 Mixed named and anonymous layers',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
}
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'D3 Mixed named and anonymous layers',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer A {
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'D4 Mixed named and anonymous layers',
|
||||
style: `
|
||||
@layer A {
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
@layer A {
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'D5 Mixed named and anonymous layers',
|
||||
style: `
|
||||
@layer {
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
}
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'E1 Statement syntax',
|
||||
style: `
|
||||
@layer A, B, C;
|
||||
@layer A {
|
||||
target.first { color: red; }
|
||||
target.second { color: red; }
|
||||
}
|
||||
@layer B {
|
||||
target.first { color: red; }
|
||||
}
|
||||
@layer C {
|
||||
target.first { color: green; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'E2 Statement syntax',
|
||||
style: `
|
||||
@layer A, C, B;
|
||||
@layer A {
|
||||
target.first { color: red; }
|
||||
target.second { color: red; }
|
||||
}
|
||||
@layer B {
|
||||
target.first { color: green; }
|
||||
}
|
||||
@layer C {
|
||||
target.first { color: red; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'E3 Statement syntax',
|
||||
style: `
|
||||
@layer C, B, A;
|
||||
@layer A {
|
||||
target.first { color: green; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
@layer B {
|
||||
target.first { color: red; }
|
||||
}
|
||||
@layer C {
|
||||
target.first { color: red; }
|
||||
target.second { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'E4 Statement syntax',
|
||||
style: `
|
||||
@layer B, A.B, A.A;
|
||||
@layer A {
|
||||
@layer A {
|
||||
target.first { color: green; }
|
||||
}
|
||||
@layer B {
|
||||
target.first { color: red; }
|
||||
target.second { color: green; }
|
||||
}
|
||||
}
|
||||
@layer B {
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'E5 Statement syntax',
|
||||
style: `
|
||||
@layer A.B, B, A.A;
|
||||
@layer A {
|
||||
@layer A {
|
||||
target.first { color: red; }
|
||||
}
|
||||
@layer B {
|
||||
target.first { color: red; }
|
||||
target.second { color: red; }
|
||||
}
|
||||
}
|
||||
@layer B {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
for (var i = 0; i < testCases.length; ++i) {
|
||||
var testCase = testCases[i];
|
||||
var documentStyle = document.createElement('style');
|
||||
documentStyle.appendChild(document.createTextNode(testCase['style']));
|
||||
document.head.appendChild(documentStyle);
|
||||
|
||||
test(function () {
|
||||
var targets = document.querySelectorAll('target');
|
||||
for (target of targets)
|
||||
assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)',
|
||||
testCase['title'] + ", target '" + target.classList[0] + "'");
|
||||
}, testCase['title']);
|
||||
|
||||
document.head.removeChild(documentStyle)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
279
tests/wpt/web-platform-tests/css/css-cascade/layer-import.html
Normal file
279
tests/wpt/web-platform-tests/css/css-cascade/layer-import.html
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Cascade Layers: Imports</title>
|
||||
<meta name="assert" content="Import functionality of CSS Cascade Layers">
|
||||
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<target class="first"></target>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
// In all test cases, the rule specified as "color: green" should win.
|
||||
const imports = {
|
||||
"basic-green.css": `
|
||||
target { color: green; }
|
||||
`,
|
||||
"basic-red.css": `
|
||||
target { color: red; }
|
||||
`,
|
||||
"layer-green.css": `
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
"layer-red.css": `
|
||||
@layer {
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
"layer-A-green.css": `
|
||||
@layer A {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
"layer-A-red.css": `
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
"layer-B-green.css": `
|
||||
@layer B {
|
||||
target { color: green; }
|
||||
}
|
||||
`,
|
||||
"layer-B-red.css": `
|
||||
@layer B {
|
||||
target { color: red; }
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
const testCases = [
|
||||
{
|
||||
title: 'A1 Layer rules with import',
|
||||
style: `
|
||||
@import url(basic-red.css);
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'A2 Layer rules with import',
|
||||
style: `
|
||||
@import url(layer-green.css);
|
||||
target { color: red; }
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'A3 Layer rules with import',
|
||||
style: `
|
||||
@import url(layer-green.css);
|
||||
@import url(basic-red.css);
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'A4 Layer rules with import',
|
||||
style: `
|
||||
@import url(layer-A-red.css);
|
||||
@layer B {
|
||||
target { color: green; }
|
||||
}
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'B1 Anonymous imports',
|
||||
style: `
|
||||
@import url(basic-green.css) layer;
|
||||
target { color: red; }
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'B2 Anonymous imports',
|
||||
style: `
|
||||
@import url(basic-red.css) layer;
|
||||
@import url(basic-green.css) layer;
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'B3 Anonymous imports',
|
||||
style: `
|
||||
@import url(basic-red.css) layer;
|
||||
@layer {
|
||||
target { color: green; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'B4 Anonymous imports',
|
||||
style: `
|
||||
@import url(layer-red.css);
|
||||
@import url(basic-green.css) layer;
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C1 Named imports',
|
||||
style: `
|
||||
@import url(basic-green.css) layer(A);
|
||||
target { color: red; }
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C2 Named imports',
|
||||
style: `
|
||||
@import url(basic-red.css) layer(A);
|
||||
@import url(basic-green.css) layer(A);
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C3 Named imports',
|
||||
style: `
|
||||
@import url(basic-red.css) layer(A);
|
||||
@layer A {
|
||||
target { color: green; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C4 Named imports',
|
||||
style: `
|
||||
@import url(layer-green.css) layer(A);
|
||||
@layer A {
|
||||
target { color: red; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C5 Named imports',
|
||||
style: `
|
||||
@import url(layer-A-red.css) layer(A);
|
||||
@layer A.A {
|
||||
target { color: green; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C6 Named imports',
|
||||
style: `
|
||||
@import url(layer-A-red.css) layer(A);
|
||||
@layer B {
|
||||
target { color: green; }
|
||||
}
|
||||
@layer A.B {
|
||||
target { color: red; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C7 Named imports',
|
||||
style: `
|
||||
@import url(basic-green.css) layer(A);
|
||||
@import url(basic-red.css) layer(B);
|
||||
@import url(basic-green.css) layer(C);
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C8 Named imports',
|
||||
style: `
|
||||
@import url(basic-red.css) layer(A);
|
||||
@import url(basic-green.css) layer(B);
|
||||
@import url(basic-red.css) layer(A);
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'C9 Named imports',
|
||||
style: `
|
||||
@import url(basic-red.css) layer(A);
|
||||
@import url(basic-green.css) layer(B.A);
|
||||
@import url(basic-red.css) layer(B);
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'D1 Layer statement with imports',
|
||||
style: `
|
||||
@import url(basic-red.css) layer(A);
|
||||
@import url(basic-green.css) layer(B);
|
||||
@layer B, A;
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'D2 Layer statement with imports',
|
||||
style: `
|
||||
@layer B;
|
||||
@import url(basic-green.css) layer(A);
|
||||
@layer B {
|
||||
target { color: red; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'D3 Layer statement with imports',
|
||||
style: `
|
||||
@layer B;
|
||||
@import url(basic-green.css) layer(A);
|
||||
@import url(basic-red.css) layer(B);
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'D4 Layer statement with imports',
|
||||
style: `
|
||||
@layer C, B, A;
|
||||
@import url(basic-green.css) layer(A);
|
||||
@import url(basic-red.css) layer(B);
|
||||
@layer C {
|
||||
target { color: red; }
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'D5 Layer statement with imports',
|
||||
style: `
|
||||
@layer A.B, A.A;
|
||||
@import url(basic-green.css) layer(A.A);
|
||||
@import url(layer-B-red.css) layer(A);
|
||||
`
|
||||
},
|
||||
{
|
||||
title: 'D6 Layer statement with imports',
|
||||
style: `
|
||||
@layer B, A;
|
||||
@import url(layer-A-red.css) layer(A);
|
||||
@import url(layer-A-red.css) layer(B);
|
||||
@layer A.B {
|
||||
target { color: green; }
|
||||
}
|
||||
`
|
||||
},
|
||||
];
|
||||
|
||||
for (let testCase of testCases) {
|
||||
promise_test(async t => {
|
||||
const styleElement = document.createElement('style');
|
||||
const styleText = testCase['style'].replaceAll(/url\((.+?)\)/g, (match, p1) => {
|
||||
return `url(data:text/css,${ encodeURI(imports[p1]) })`;
|
||||
});
|
||||
styleElement.appendChild(document.createTextNode(styleText));
|
||||
|
||||
await new Promise(resolve => {
|
||||
styleElement.onload = resolve;
|
||||
document.head.appendChild(styleElement);
|
||||
});
|
||||
|
||||
const targets = document.querySelectorAll('target');
|
||||
for (target of targets)
|
||||
assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title'] + ", target '" + target.classList[0] + "'");
|
||||
|
||||
document.head.removeChild(styleElement);
|
||||
}, testCase['title']);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<html style="background: green"></html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Storage of "unset" value</title>
|
||||
<meta name="author" title="Xidorn Quan" href="https://www.upsuper.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-cascade-3/#inherit-initial"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
color: unset;
|
||||
border: unset;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let properties = ["color", "border", "border-left", "border-color", "border-right-style"];
|
||||
let style = document.styleSheets[0].cssRules[0].style;
|
||||
for (let prop of properties) {
|
||||
assert_equals(style.getPropertyValue(prop), "unset", `${prop} is expected to be "unset"`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue