mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Xiaocheng Hu
b1430777a5
Automatic update from web-platform-tests [@layer] Change layer order from preorder to postorder This patch follows from a recent CSSWG resolution [1] that puts the default layer at the highest priority, and a subsequent spec edit [2] that changed the layer ordering from the preorder of the layer tree to the postorder. Most test changes just reflect this spec change. In some WPT tests, rule ordering is swapping so that the winning rule will appear first, so that we can verify layer is working. external/wpt/css/css-cascade/presentational-hints-cascade.html is moved from the stable test suite to a new disable-custom-element-default-style virtual test suite because this is the flag that actually makes the test result different on test and stable builds. We need to disable this flag while keeping cascade layers enabled to test the new test case in the file. [1] https://github.com/w3c/csswg-drafts/issues/6284#issuecomment-937262197 [2] https://github.com/w3c/csswg-drafts/commit/a6fc16e1b65868c6f984918cc76ad9b238e7139e Fixed: 1257936 Change-Id: I899de8c8a921b0535296957ee1b0cca1f60a8c61 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3214603 Reviewed-by: Anders Hartvoll Ruud <[email protected]> Reviewed-by: Xianzhu Wang <[email protected]> Commit-Queue: Xiaocheng Hu <[email protected]> Cr-Commit-Position: refs/heads/main@{#930689} -- wpt-commits: fd7a9e9a139e01cd5017b57b8d3123d3a9a1a7bb wpt-pr: 31169
525 lines
12 KiB
HTML
525 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:[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>
|
|
<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>
|