зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1728722 [wpt PR 30299] - Cascade layer @import tests, a=testonly
Automatic update from web-platform-tests Cascade layer @import tests (#30299) * Cascade layer @import tests * Update css/css-cascade/layer-import.html Co-authored-by: Tim Nguyen <nt1m@users.noreply.github.com> Co-authored-by: Tim Nguyen <nt1m@users.noreply.github.com> -- wpt-commits: aa53a501b570ccdea56a1e1435e361a4eb8c5131 wpt-pr: 30299
This commit is contained in:
Antti Koivisto
moz-wptsync-bot
Родитель
bfa55400f2
Коммит
2259a918f6
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче