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 527289 96ac9981ce2cf03cc8de884788bd30785679006e
parent 527288 ed6e6a032a82284a1ac886f130c5a703d120d695
child 527290 65842dd31fb2f0b8b2b7087fb7f27a63e4e501f0
push id114648
push userwptsync@mozilla.com
push dateThu, 30 Apr 2020 19:15:02 +0000
treeherderautoland@2545233d9410 [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>