[@layer] Implement resolving of 'revert-layer'

Bug: 1095765 Change-Id: I37b0984932a1d558c33da12a48394f8c263a6ff0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3227812 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#933050}
web-platform-tests · Oct 19, 2021 · 4c956da · 4c956da
1 parent 2e4e463
commit 4c956da
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 0 deletions.
diff --git a/css/css-cascade/revert-layer-001.html b/css/css-cascade/revert-layer-001.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>
diff --git a/css/css-cascade/revert-layer-002.html b/css/css-cascade/revert-layer-002.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>
diff --git a/css/css-cascade/revert-layer-003.html b/css/css-cascade/revert-layer-003.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>
diff --git a/css/css-cascade/revert-layer-004.html b/css/css-cascade/revert-layer-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' to previous context</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;
+  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>
diff --git a/css/css-cascade/revert-layer-005.html b/css/css-cascade/revert-layer-005.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: important '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>
+#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>
diff --git a/css/css-cascade/revert-layer-006.html b/css/css-cascade/revert-layer-006.html
@@ -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="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>
+#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>
diff --git a/css/css-cascade/revert-layer-007.html b/css/css-cascade/revert-layer-007.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' chain</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;
+  }
+}
+
+@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>