Diff
Modified: trunk/LayoutTests/ChangeLog (284858 => 284859)
--- trunk/LayoutTests/ChangeLog 2021-10-26 07:36:09 UTC (rev 284858)
+++ trunk/LayoutTests/ChangeLog 2021-10-26 08:30:46 UTC (rev 284859)
@@ -1,3 +1,12 @@
+2021-10-26 Antti Koivisto <[email protected]>
+
+ [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 <[email protected]>
Change default iOS simulator to one with a larger screen size
Modified: trunk/LayoutTests/TestExpectations (284858 => 284859)
--- trunk/LayoutTests/TestExpectations 2021-10-26 07:36:09 UTC (rev 284858)
+++ trunk/LayoutTests/TestExpectations 2021-10-26 08:30:46 UTC (rev 284859)
@@ -2121,6 +2121,13 @@
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 ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (284858 => 284859)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-10-26 07:36:09 UTC (rev 284858)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-10-26 08:30:46 UTC (rev 284859)
@@ -1,3 +1,32 @@
+2021-10-26 Antti Koivisto <[email protected]>
+
+ [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 <[email protected]>
Fix issue for transform-origin in SVG
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-media-query-expected.txt (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-media-query-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-media-query-expected.txt 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-media-query.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-media-query.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-media-query.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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=""
+<link rel="help" href=""
+<script src=""
+<script src=""
+</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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001-expected.xht (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001-expected.xht 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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="" />
+ <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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' from one explicit layer to another</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<link rel="match" href=""
+
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002-expected.xht (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002-expected.xht 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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="" />
+ <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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' from the implicit outer layer to explicit</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<link rel="match" href=""
+
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003-expected.xht (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003-expected.xht 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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="" />
+ <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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'all: revert-layer'</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<link rel="match" href=""
+
+<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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004-expected.xht (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004-expected.xht 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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="" />
+ <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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' to previous context</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<link rel="match" href=""
+
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+ 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>
+
+<script>
+target.attachShadow({mode: 'open'}).innerHTML = `
+<style>
+:host {
+ background-color: green;
+}
+</style>
+`;
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005-expected.xht (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005-expected.xht 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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="" />
+ <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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: important 'revert-layer'</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<link rel="match" href=""
+
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+}
+
+@layer {
+ #target { background-color: green; }
+}
+
+@layer {
+ #target {
+ background-color: red;
+ background-color: red !important;
+ background-color: revert-layer !important;
+ }
+}
+
+@layer {
+ #target {
+ background-color: red;
+ background-color: red !important;
+ }
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="target"></div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006-expected.xht (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006-expected.xht 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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="" />
+ <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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' reverts origin when no lower priority declarations in the same origin</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<link rel="match" href=""
+
+<style>
+#outer {
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+}
+#inner {
+ color: green;
+ background-color: green;
+ display: inline;
+ display: revert-layer; /* This should behave as 'revert', setting 'display' to 'block' */
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="outer">
+ <div id="inner">
+ This<br>
+ is<br>
+ filler<br>
+ text.<br>
+ This<br>
+ is<br>
+ filler<br>
+ text.
+ </div>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007-expected.xht (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007-expected.xht 2021-10-26 08:30:46 UTC (rev 284859)
@@ -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="" />
+ <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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' chain</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<link rel="match" href=""
+
+<style>
+#target {
+ width: 100px;
+ height: 100px;
+}
+
+@layer {
+ #target { background-color: green; }
+}
+
+@layer {
+ #target {
+ background-color: red;
+ background-color: revert-layer;
+ }
+}
+
+@layer {
+ #target {
+ background-color: red;
+ background-color: revert-layer;
+ }
+}
+
+@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>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-008-expected.txt (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-008-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-008-expected.txt 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,3 @@
+
+FAIL 'revert-layer' should revert font-size to 20px and trigger a smooth transition assert_equals: expected "15px" but got "10px"
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-008.html (0 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-008.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-008.html 2021-10-26 08:30:46 UTC (rev 284859)
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' triggers a smooth transition</title>
+<link rel="help" href=""
+<link rel="author" href=""
+<script src=""
+<script src=""
+
+<style>
+@layer revert-to, revert-from;
+
+@layer revert-from {
+ #target {
+ font-size: 10px;
+ transition: font-size 2s linear -1s;
+ }
+
+ #target.reverted {
+ font-size: revert-layer;
+ }
+}
+
+@layer revert-to {
+ #target { font-size: 20px; }
+}
+</style>
+
+<div id="target"></div>
+
+<script>
+function raf() {
+ return new Promise(resolve => requestAnimationFrame(resolve));
+}
+promise_test(async () => {
+ await raf();
+ const target = document.getElementById('target');
+ target.classList.toggle('reverted');
+
+ const result = getComputedStyle(target).getPropertyValue('font-size');
+ assert_equals(result, '15px');
+}, "'revert-layer' should revert font-size to 20px and trigger a smooth transition");
+</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/w3c-import.log (284858 => 284859)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/w3c-import.log 2021-10-26 07:36:09 UTC (rev 284858)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/w3c-import.log 2021-10-26 08:30:46 UTC (rev 284859)
@@ -48,6 +48,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-font-face-override.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-keyframes-override.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-media-query.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-property-override.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-scroll-timeline-override.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-stylesheet-sharing-expected.html
@@ -54,6 +55,21 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-stylesheet-sharing.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-vs-inline-style.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/presentational-hints-cascade.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-002.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-003.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-004.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-005.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-006.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-007.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-layer-008.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-val-001-expected.xht
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-val-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-val-002-expected.xht
Modified: trunk/Source/WebCore/ChangeLog (284858 => 284859)
--- trunk/Source/WebCore/ChangeLog 2021-10-26 07:36:09 UTC (rev 284858)
+++ trunk/Source/WebCore/ChangeLog 2021-10-26 08:30:46 UTC (rev 284859)
@@ -1,3 +1,34 @@
+2021-10-26 Antti Koivisto <[email protected]>
+
+ [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.
+
+ 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:
+
2021-10-26 Adrian Perez de Castro <[email protected]>
Multiple build issues with ENABLE_VIDEO=OFF
Modified: trunk/Source/WebCore/style/RuleSetBuilder.cpp (284858 => 284859)
--- trunk/Source/WebCore/style/RuleSetBuilder.cpp 2021-10-26 07:36:09 UTC (rev 284858)
+++ trunk/Source/WebCore/style/RuleSetBuilder.cpp 2021-10-26 08:30:46 UTC (rev 284859)
@@ -67,19 +67,19 @@
void RuleSetBuilder::addRulesFromSheet(const StyleSheetContents& sheet, const MediaQuerySet* sheetQuery)
{
- auto canUseDynamicMediaQueryResolution = [&] {
+ auto canUseDynamicMediaQueryEvaluation = [&] {
if (!m_resolver)
return false;
- RuleSetBuilder mutationScanner(m_mediaQueryCollector.evaluator);
- if (mutationScanner.m_mediaQueryCollector.pushAndEvaluate(sheetQuery))
- mutationScanner.addRulesFromSheetContents(sheet);
- mutationScanner.m_mediaQueryCollector.pop(sheetQuery);
+ RuleSetBuilder dynamicEvaluationScanner(m_mediaQueryCollector.evaluator);
+ if (dynamicEvaluationScanner.m_mediaQueryCollector.pushAndEvaluate(sheetQuery))
+ dynamicEvaluationScanner.addRulesFromSheetContents(sheet);
+ dynamicEvaluationScanner.m_mediaQueryCollector.pop(sheetQuery);
- return !mutationScanner.didSeeResolverMutationWithinDynamicMediaQuery;
+ return !dynamicEvaluationScanner.requiresStaticMediaQueryEvaluation;
};
- m_mediaQueryCollector.collectDynamic = canUseDynamicMediaQueryResolution();
+ m_mediaQueryCollector.collectDynamic = canUseDynamicMediaQueryEvaluation();
if (m_mediaQueryCollector.pushAndEvaluate(sheetQuery))
addRulesFromSheetContents(sheet);
@@ -89,7 +89,7 @@
void RuleSetBuilder::addChildRules(const Vector<RefPtr<StyleRuleBase>>& rules)
{
for (auto& rule : rules) {
- if (didSeeResolverMutationWithinDynamicMediaQuery)
+ if (requiresStaticMediaQueryEvaluation)
return;
if (is<StyleRule>(*rule)) {
@@ -110,6 +110,9 @@
continue;
}
if (is<StyleRuleLayer>(*rule)) {
+ if (!m_ruleSet && !m_mediaQueryCollector.dynamicContextStack.isEmpty())
+ requiresStaticMediaQueryEvaluation = true;
+
auto& layerRule = downcast<StyleRuleLayer>(*rule);
if (layerRule.isStatement()) {
// Statement syntax just registers the layers.
@@ -124,7 +127,7 @@
}
if (is<StyleRuleFontFace>(*rule) || is<StyleRuleFontPaletteValues>(*rule) || is<StyleRuleKeyframes>(*rule)) {
if (!m_ruleSet && !m_mediaQueryCollector.dynamicContextStack.isEmpty())
- didSeeResolverMutationWithinDynamicMediaQuery = true;
+ requiresStaticMediaQueryEvaluation = true;
if (m_resolver)
m_collectedResolverMutatingRules.append({ *rule, m_currentCascadeLayerIdentifier });
Modified: trunk/Source/WebCore/style/RuleSetBuilder.h (284858 => 284859)
--- trunk/Source/WebCore/style/RuleSetBuilder.h 2021-10-26 07:36:09 UTC (rev 284858)
+++ trunk/Source/WebCore/style/RuleSetBuilder.h 2021-10-26 08:30:46 UTC (rev 284859)
@@ -79,7 +79,7 @@
RuleSet::CascadeLayerIdentifier m_currentCascadeLayerIdentifier { 0 };
Vector<RuleSet::ResolverMutatingRule> m_collectedResolverMutatingRules;
- bool didSeeResolverMutationWithinDynamicMediaQuery { false };
+ bool requiresStaticMediaQueryEvaluation { false };
};
}
