Bug 1632773 [wpt PR 23222] - FindKeyframesRules should use originating element., a=testonly
authorRune Lillesveen <futhark@chromium.org>
Tue, 28 Apr 2020 11:45:33 +0000
changeset 527666 0f3c24ba4e85c00ead3a93cea27749ee364e9eb7
parent 527665 117465eac2d79362fa60f0f82850fe11cb76986e
child 527667 c494ab0b6fab0dd339b7ca6fc13c36ad56e19568
push id37368
push userbtara@mozilla.com
push dateFri, 01 May 2020 21:45:51 +0000
treeherdermozilla-central@0f9c5a59e45d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1632773, 23222, 961941, 2162988, 762791
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1632773 [wpt PR 23222] - FindKeyframesRules should use originating element., a=testonly Automatic update from web-platform-tests FindKeyframesRules should use originating element. It's only using the TreeScope to find @keyframes in which case using the originating element for pseudo elements should work. Even better when the originating element is a shadow host, so that we look up :host rules from the shadow tree for :host::before { animation-name: anim }. Bug: 961941 Change-Id: I38edec156eaaa7cfb3680762b135323deae00a68 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2162988 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#762791} -- wpt-commits: 245ed57a5e400fff2dc4adbf8e452d64397399cd wpt-pr: 23222
testing/web-platform/tests/css/css-scoping/keyframes-006.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/keyframes-006.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Test: @keyframes applies to :host::before/::after.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
+<div id="host"></div>
+<script>
+  test(function() {
+    host.attachShadow({ mode: "open" }).innerHTML = `
+      <style>
+        @keyframes myanim {
+          from { background: red; }
+          to { background: green; }
+        }
+        :host::before, :host::after {
+          content: "";
+          display: block;
+          width: 100px;
+          height: 100px;
+          background: blue;
+          animation: myanim 10s infinite step-end;
+        }
+      </style>
+    `;
+
+    assert_equals(getComputedStyle(document.getElementById('host'), "::before").backgroundColor, "rgb(255, 0, 0)");
+    assert_equals(getComputedStyle(document.getElementById('host'), "::after").backgroundColor, "rgb(255, 0, 0)");
+  }, "@keyframes applies to the shadow host");
+</script>