[@layer] Add a WPT test for 'revert-layer' in transition
Bug: 1095765
Change-Id: I2119b003dd540bdbcdebde7abe57b907662f3057
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3235161
Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#933635}
diff --git a/css/css-cascade/revert-layer-008.html b/css/css-cascade/revert-layer-008.html
new file mode 100644
index 0000000..e21a178
--- /dev/null
+++ b/css/css-cascade/revert-layer-008.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS Cascade Layers: 'revert-layer' triggers a smooth transition</title>
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-layer">
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<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>
