Bug 1458189: More tests for :host, ::slotted, and leaking the animation name.
MozReview-Commit-ID: FoUUdDQG2f4
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/keyframes-003.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>CSS Test: @keyframes from the shadow tree aren't leaked to the document scope.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model">
+<style>
+#host {
+ width: 100px;
+ height: 100px;
+ background: green;
+ animation: myanim 10s infinite;
+}
+</style>
+<div id="host"></div>
+<script>
+test(function() {
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <style>
+ @keyframes myanim {
+ from { background: red; }
+ to { background: red; }
+ }
+ </style>
+ `;
+ assert_equals(host.getAnimations().length, 0);
+}, "Animation names don't leak from the scope they were defined");
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/keyframes-004.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>CSS Test: @keyframes work when specified via :host</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model">
+<style>
+#host {
+ width: 100px;
+ height: 100px;
+ background: red;
+}
+</style>
+<div id="host"></div>
+<script>
+test(function() {
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <style>
+ @keyframes myanim {
+ from { background: green; }
+ to { background: green; }
+ }
+ :host { animation: myanim 10s infinite }
+ </style>
+ `;
+ assert_equals(host.getAnimations().length, 1);
+}, "Animations work when specified via :host");
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/keyframes-005.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>CSS Test: @keyframes work when specified via ::slotted(..)</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model">
+<style>
+#slotted {
+ width: 100px;
+ height: 100px;
+ background: red;
+}
+</style>
+<div id="host"><div id="slotted"></div></div>
+<script>
+test(function() {
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <style>
+ @keyframes myanim {
+ from { background: green; }
+ to { background: green; }
+ }
+ ::slotted(div) { animation: myanim 10s infinite }
+ </style>
+ `;
+ assert_equals(slotted.getAnimations().length, 1);
+}, "Animations work when specified via ::slotted(..)");
+</script>