Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
25 changed files
with
661 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.