Skip to content
Permalink
Browse files
[CSS Cascade Layers] Media queries should be able to affect layer order
https://bugs.webkit.org/show_bug.cgi?id=232238

Reviewed by Simon Fraser.

LayoutTests/imported/w3c:

Also import some additional @layer WPTs.

* web-platform-tests/css/css-cascade/layer-media-query-expected.txt: Added.
* web-platform-tests/css/css-cascade/layer-media-query.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-001-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-001.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-002-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-002.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-003-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-003.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-004-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-004.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-005-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-005.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-006-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-006.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-007-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-007.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-008-expected.txt: Added.
* web-platform-tests/css/css-cascade/revert-layer-008.html: Added.
* web-platform-tests/css/css-cascade/w3c-import.log:

Source/WebCore:

Cases like

@media (min-width: 500px) { @layer a, b; }
@media (min-width: 200px) { @layer b, a; }

should work as expected.

Tests: imported/w3c/web-platform-tests/css/css-cascade/layer-media-query.html

* style/RuleSetBuilder.cpp:
(WebCore::Style::RuleSetBuilder::addRulesFromSheet):
(WebCore::Style::RuleSetBuilder::addChildRules):

Disable dynamic media query evaluation for now when we see a @layer rule within a media query.

* style/RuleSetBuilder.h:

Tests: imported/w3c/web-platform-tests/css/css-cascade/layer-media-query.html

* style/RuleSetBuilder.cpp:
(WebCore::Style::RuleSetBuilder::addRulesFromSheet):
(WebCore::Style::RuleSetBuilder::addChildRules):
* style/RuleSetBuilder.h:

LayoutTests:

* TestExpectations:


Canonical link: https://commits.webkit.org/243536@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@284859 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
anttijk committed Oct 26, 2021
1 parent 8814551 commit 623077bfd0e6462c0dfa7b5480f34ac9d4b5fe9a
Showing 25 changed files with 661 additions and 10 deletions.
@@ -1,3 +1,12 @@
2021-10-26 Antti Koivisto <antti@apple.com>

[CSS Cascade Layers] Media queries should be able to affect layer order
https://bugs.webkit.org/show_bug.cgi?id=232238

Reviewed by Simon Fraser.

* TestExpectations:

2021-10-25 Ryan Haddad <ryanhaddad@apple.com>

Change default iOS simulator to one with a larger screen size
@@ -2121,6 +2121,13 @@ webkit.org/b/148650 fast/repaint/add-table-overpaint.html [ Pass Failure ]

imported/w3c/web-platform-tests/css/css-cascade/important-prop.html [ ImageOnlyFailure ]
webkit.org/b/187093 [ Debug ] imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml.html [ Skip ]
webkit.org/b/232236 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001.html [ ImageOnlyFailure ]
webkit.org/b/232236 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002.html [ ImageOnlyFailure ]
webkit.org/b/232236 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003.html [ ImageOnlyFailure ]
webkit.org/b/232236 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004.html [ ImageOnlyFailure ]
webkit.org/b/232236 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005.html [ ImageOnlyFailure ]
webkit.org/b/232236 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006.html [ ImageOnlyFailure ]
webkit.org/b/232236 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007.html [ ImageOnlyFailure ]

webkit.org/b/148801 imported/w3c/web-platform-tests/css/css-color/t422-rgba-onscreen-b.xht [ ImageOnlyFailure ]
webkit.org/b/148801 imported/w3c/web-platform-tests/css/css-color/t422-rgba-onscreen-multiple-boxes-c.xht [ ImageOnlyFailure ]
@@ -1,3 +1,32 @@
2021-10-26 Antti Koivisto <antti@apple.com>

[CSS Cascade Layers] Media queries should be able to affect layer order
https://bugs.webkit.org/show_bug.cgi?id=232238

Reviewed by Simon Fraser.

Also import some additional @layer WPTs.

* web-platform-tests/css/css-cascade/layer-media-query-expected.txt: Added.
* web-platform-tests/css/css-cascade/layer-media-query.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-001-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-001.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-002-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-002.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-003-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-003.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-004-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-004.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-005-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-005.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-006-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-006.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-007-expected.xht: Added.
* web-platform-tests/css/css-cascade/revert-layer-007.html: Added.
* web-platform-tests/css/css-cascade/revert-layer-008-expected.txt: Added.
* web-platform-tests/css/css-cascade/revert-layer-008.html: Added.
* web-platform-tests/css/css-cascade/w3c-import.log:

2021-10-25 Nikolaos Mouchtaris <nmouchtaris@apple.com>

Fix issue for transform-origin in SVG
@@ -0,0 +1,10 @@


PASS A1 Basic
PASS A2 Basic
PASS B1 Basic import
PASS B2 Basic import
PASS C1 Reordering
PASS C2 Reordering
PASS C3 Reordering

@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Cascade Layers: Media queries</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>
<iframe width=300 height=300 frameborder=0></iframe>
<div id="log"></div>
<script>

const imports = {
"basic-green.css": `
target { color: green; }
`,
"basic-red.css": `
target { color: red; }
`,
};

// For 300px wide iframe the target should be red and for 500px green.
const testCases = [
{
title: 'A1 Basic',
style: `
@layer { target { color: red } }
@media (min-width: 500px) {
@layer {
target { color: green; }
}
}
`
},
{
title: 'A2 Basic',
style: `
@media (min-width: 500px) {
@layer {
target { color: green; }
}
}
@media (max-width: 300px) {
@layer {
target { color: red; }
}
}
`
},
{
title: 'B1 Basic import',
style: `
@import url(basic-red.css) layer;
@import url(basic-green.css) layer (min-width: 500px);
`
},
{
title: 'B2 Basic import',
style: `
@import url(basic-green.css) layer (min-width: 500px);
@import url(basic-red.css) layer (max-width: 300px);
`
},
{
title: 'C1 Reordering',
style: `
@media (max-width: 300px) {
@layer B {
target { color: green; }
}
@layer A {
target { color: red; }
}
}
@media (min-width: 500px) {
@layer A {
target { color: red; }
}
@layer B {
target { color: green; }
}
}
`
},
{
title: 'C2 Reordering',
style: `
@media (max-width: 300px) {
@layer B { }
@layer A { target { color: red; } }
}
@media (min-width: 500px) {
@layer A { target { color: red; } }
@layer B { }
}
@layer B {
target { color: green; }
}
`
},
{
title: 'C3 Reordering',
style: `
@media (max-width: 300px) {
@layer B, A;
}
@media (min-width: 500px) {
@layer A, B;
}
@layer A {
target { color: red; }
}
@layer B {
target { color: green; }
}
`
},
];

let iframe = document.querySelector("iframe");

for (let testCase of testCases) {
promise_test(async t => {
const styleText = testCase['style'].replaceAll(/url\((.+?)\)/g, (match, p1) => {
return `url(data:text/css,${ encodeURI(imports[p1]) })`;
});

iframe.width = 300;

await new Promise(resolve => {
iframe.onload = resolve;
iframe.srcdoc = `
<style>
${styleText}
</style>
<target></target>
`;
});

const target = iframe.contentDocument.querySelector('target');
assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)', testCase['title']);

iframe.width = 500;

assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title']);
}, testCase['title']);
}
</script>
</body>
</html>
@@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>CSS Cascade Layers: 'revert-layer' from one explicit layer to another</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-layer">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="match" href="reference/ref-filled-green-100px-square.xht">

<style>
#target {
width: 100px;
height: 100px;
}

@layer {
#target { background-color: green; }
}

@layer {
#target {
background-color: red;
background-color: revert-layer;
}
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="target"></div>
@@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<title>CSS Cascade Layers: 'revert-layer' from the implicit outer layer to explicit</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-layer">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="match" href="reference/ref-filled-green-100px-square.xht">

<style>
#target {
width: 100px;
height: 100px;
}

@layer {
#target { background-color: green; }
}

#target {
background-color: red;
background-color: revert-layer;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="target"></div>
@@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<title>CSS Cascade Layers: 'all: revert-layer'</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-layer">
<link rel="author" href="mailto:xiaochengh@chromium.org">
<link rel="match" href="reference/ref-filled-green-100px-square.xht">

<style>
@layer {
#target {
width: 100px;
height: 100px;
background-color: green;
}
}

@layer {
#target {
width: 200px;
height: 200px;
background-color: red;
}

#target {
all: revert-layer;
}
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="target"></div>
@@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

0 comments on commit 623077b

Please sign in to comment.