Part 2: Add a reftest.

Depends on D20412 Differential Revision: https://phabricator.services.mozilla.com/D20413 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1505225 gecko-commit: 2c10e071b8dec0b4442695583caff26b0ddaec06 gecko-integration-branch: autoland gecko-reviewers: hiro
web-platform-tests · Feb 26, 2019 · 83db540 · 83db540
1 parent 38bd28f
commit 83db540
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/css/css-transforms/individual-transform/stacking-context-001.html b/css/css-transforms/individual-transform/stacking-context-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>
+      Individual transform properties' animations create stacking context in delay phase
+    </title>
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
+    <link rel="match" href="stacking-context-ref.html">
+    <meta name="assert" content="Individual transform properties' animations
+                                 should create stacking context even in delay
+                                 phase."/>
+    <style>
+      #back {
+        height: 100px;
+        width: 100px;
+        position: fixed;
+        background: green;
+        margin-top: 50px;
+      }
+      @keyframes scale {
+        from, to { scale: 1; }
+      }
+      #test {
+        width: 100px;
+        height: 100px;
+        background: blue;
+        animation: scale 100s 100s;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="back"></div>
+    <div id="test"></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/css/css-transforms/individual-transform/stacking-context-ref.html b/css/css-transforms/individual-transform/stacking-context-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>
+      Reference: Individual transform properties' animations create stacking context in delay phase
+    </title>
+    <style>
+      #back {
+        height: 100px;
+        width: 100px;
+        position: fixed;
+        background: green;
+        margin-top: 50px;
+      }
+      #test {
+        width: 100px;
+        height: 100px;
+        background: blue;
+        will-change: transform;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="back"></div>
+    <div id="test"></div>
+  </body>
+</html>