HeyPuter/firefox
1
0 Fork 0
mirror of https://github.com/HeyPuter/firefox.git synced 2026-11-13 20:14:57 -10:00
Code Issues Packages Projects Releases Wiki Activity
Files
singlethreaded
firefox/testing/web-platform/tests/css/css-cascade/layer-basic.html
T
Xiaocheng Hu b1430777a5 Bug 1734939 [wpt PR 31169] - [@layer] Change layer order from preorder to postorder, a=testonly 
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
2021-10-14 04:45:47 +00:00

525 lines
12 KiB
HTML
Raw Permalink Blame History

<!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>
Reference in new issue View Git Blame Copy Permalink