mirror of
https://github.com/servo/servo.git
synced 2025-06-25 09:34:32 +01:00
524 lines
12 KiB
HTML
524 lines
12 KiB
HTML
<!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: green; }
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
title: 'A3 Anonymous layers',
|
|
style: `
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
target { color: green; }
|
|
`,
|
|
},
|
|
{
|
|
title: 'A4 Anonymous layers',
|
|
style: `
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
@layer {
|
|
target { color: green; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
title: 'A5 Anonymous layers',
|
|
style: `
|
|
@layer {
|
|
target { color: green; }
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
title: 'A6 Anonymous layers',
|
|
style: `
|
|
@layer {
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
target { color: green; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
title: 'A7 Anonymous layers',
|
|
style: `
|
|
@layer {
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
target { color: red; }
|
|
}
|
|
@layer {
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
target { color: green; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
title: 'A8 Anonymous layers',
|
|
style: `
|
|
@layer {
|
|
@layer {
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
}
|
|
target { color: red; }
|
|
}
|
|
@layer {
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
target { color: green; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
title: 'A9 Anonymous layers',
|
|
style: `
|
|
@layer {
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
target { color: red; }
|
|
}
|
|
@layer {
|
|
@layer {
|
|
@layer {
|
|
target { color: red; }
|
|
}
|
|
}
|
|
target { color: green; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
title: 'B1 Named layers',
|
|
style: `
|
|
@layer A {
|
|
}
|
|
target { color: green; }
|
|
`,
|
|
},
|
|
{
|
|
title: 'B2 Named layers',
|
|
style: `
|
|
@layer A {
|
|
target { color: red; }
|
|
}
|
|
target { color: green; }
|
|
`,
|
|
},
|
|
{
|
|
title: 'B3 Named layers',
|
|
style: `
|
|
@layer A {
|
|
target { color: red; }
|
|
}
|
|
@layer A {
|
|
target { color: green; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
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: green; }
|
|
@layer A {
|
|
target { color: red; }
|
|
}
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
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: red; }
|
|
}
|
|
}
|
|
@layer A {
|
|
target { color: green; }
|
|
}
|
|
`,
|
|
},
|
|
{
|
|
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 (let testCase of testCases) {
|
|
const styleElement = document.createElement('style');
|
|
styleElement.textContent = testCase['style'];
|
|
document.head.append(styleElement);
|
|
|
|
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']);
|
|
|
|
styleElement.remove();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|