<!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:[email protected]">
<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-green.css);
@layer {
target { color: red; }
}
`
},
{
title: 'A2 Layer rules with import',
style: `
@import url(layer-red.css);
target { color: green; }
`
},
{
title: 'A3 Layer rules with import',
style: `
@import url(basic-green.css);
@import url(layer-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-red.css) layer;
target { color: green; }
`
},
{
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-red.css) layer(A);
target { color: green; }
`
},
{
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-red.css) layer(A);
@layer A {
target { color: green; }
}
`
},
{
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-red.css) layer(B.A);
@import url(basic-green.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; }
}
`
},
{
title: 'E1 Named imports establish layer even with network errors',
style: `
@import "nonexist.css" layer(A);
@layer B {
target { color: green; }
}
@layer A {
target { color: red; }
}
`,
},
];
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.textContent = styleText;
await new Promise(resolve => {
styleElement.onload = resolve;
styleElement.onerror = resolve;
document.head.append(styleElement);
});
try {
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] + "'");
} finally {
styleElement.remove();
}
}, testCase['title']);
}
</script>
</body>
</html>
Codebase Browser
chromium