Commit d3096b24 authored by Rune Lillesveen's avatar Rune Lillesveen Committed by Commit Bot

Added tests for @keyframes/animation-name and Shadow DOM.

These tests all pass in Safari.

Bug: 838526
Change-Id: Ie94cfb255607747f062fdcd77518c7c0c048e482
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2144144Reviewed-by: default avatarAnders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: default avatarEmilio Cobos Álvarez <emilio@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#759210}
parent 3b304452
<!doctype html>
<title>CSS Test: @keyframes applies to :host.</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 {
width: 100px;
height: 100px;
background: blue;
animation: myanim 10s infinite;
}
</style>
`;
assert_equals(document.getElementById('host').getAnimations().length, 1);
}, "@keyframes applies to the shadow host");
</script>
This is a testharness.js-based test.
FAIL @keyframes in shadow tree applies to the slotted element assert_equals: expected 1 but got 0
Harness: the test ran to completion.
<!doctype html>
<title>CSS Test: @keyframes applies to ::slotted.</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 id="in-document"></div></div>
<script>
test(function() {
host.attachShadow({ mode: "open" }).innerHTML = `
<style>
@keyframes myanim {
from { background: red; }
to { background: green; }
}
::slotted(#in-document) {
width: 100px;
height: 100px;
background: blue;
animation: myanim 10s infinite;
}
</style>
<slot />
`;
assert_equals(document.getElementById('in-document').getAnimations().length, 1);
}, "@keyframes in shadow tree applies to the slotted element");
</script>
This is a testharness.js-based test.
FAIL @keyframes should not leak out of the shadow tree. assert_equals: expected 0 but got 1
Harness: the test ran to completion.
<!doctype html>
<title>CSS Test: @keyframes should not leak out of shadow tree.</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">
<style>
#host {
width: 100px;
height: 100px;
background: blue;
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: green; }
}
</style>
`;
assert_equals(document.getElementById('host').getAnimations().length, 0);
}, "@keyframes should not leak out of the shadow tree.");
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment