Bug 1564128 part 3 - Reftests checking for if animations are applied in print preview r=hiro

Changes the existing reftest to expect success, and adds additional tests for
pseudo-elements, paused animations, the web animation API, and shadow DOM
elements.

Differential Revision: https://phabricator.services.mozilla.com/D73140
This commit is contained in:
Emily McDonough 2020-05-14 23:15:51 +00:00
Родитель c161bb67d3
Коммит c6e5d7a8bd
16 изменённых файлов: 169 добавлений и 2 удалений

Просмотреть файл

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Static CSS animation in Shadow DOM</title>
<style>
p {
color: olive;
}
</style>
<p>blue with animation support; olive without</p>
<p>orange with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,6 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Static CSS animation in Shadow DOM</title>
<p style="color: blue">blue with animation support; olive without</p>
<p style="color: orange">orange with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Static CSS animation in Shadow DOM</title>
<style>
@keyframes a {
from, to { color: blue }
}
.anim {
color: olive;
animation: a 1s infinite;
}
</style>
<p class="anim">blue with animation support; olive without</p>
<div id="holder"></div>
<script>
let shadow_style = style = document.createElement("style");
shadow_style.textContent = "@keyframes shadow_a { from, to { color: orange } }";
let shadow = document.getElementById("holder").attachShadow({mode:"open"});
let shadow_p = document.createElement("p");
shadow_p.style.color = "olive";
shadow_p.style.animation = "shadow_a 1s infinite";
shadow_p.innerHTML = "orange with animation support; olive without";
shadow.appendChild(shadow_style);
shadow.appendChild(shadow_p);
</script>

Просмотреть файл

@ -0,0 +1,4 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Paused CSS animation</title>
<p style="color: olive">blue with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,4 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Paused CSS animation</title>
<p style="color: blue">blue with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Paused CSS animation</title>
<style>
@keyframes a {
from, to { color: blue; }
}
p {
color: olive;
animation: a 1s infinite;
}
</style>
<p id="anim">blue with animation support; olive without</p>
<script>
let element = document.getElementById("anim");
element.style.animationPlayState = "paused";
</script>

Просмотреть файл

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Static CSS animation</title>
<style>
p {
color: olive;
}
p::after {
color: purple;
content: "(::after)";
}
p::before {
color: yellow;
content: "(::before)";
}
</style>
<p>blue with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Static CSS animation</title>
<style>
p {
color: blue;
}
</style>
<p>(::before)blue with animation support; olive without(::after)</p>

Просмотреть файл

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Static CSS animation</title>
<style>
@keyframes a {
from, to { color: blue }
}
p {
color: olive;
animation: a 1s infinite;
}
p::after {
color: purple;
content: "(::after)";
animation: a 1s infinite;
}
p::before {
color: yellow;
content: "(::before)";
animation: a 1s infinite;
}
</style>
<p>blue with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,4 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Web animation</title>
<p style="color: olive">blue with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,4 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Web animation</title>
<p style="color: blue">blue with animation support; olive without</p>

Просмотреть файл

@ -0,0 +1,18 @@
<!DOCTYPE HTML>
<html class="reftest-paged">
<title>Web animation</title>
<p id="anim" style="color: olive">blue with animation support; olive without</p>
<script>
const animationData = [
{"color":"#0000FF"},
{"color":"#0000FF"}
];
const animationTiming = {
"duration":1,
"iterations":Infinity
};
let element = document.getElementById("anim");
element.animate(animationData, animationTiming);
</script>

Просмотреть файл

@ -1,7 +1,15 @@
== screen-animations.html screen-animations-ref.html
!= screen-animations.html screen-animations-notref.html
fails == print-no-animations.html print-no-animations-ref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-paged tests.
fails != print-no-animations.html print-no-animations-notref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-paged tests.
== print-animations.html print-animations-ref.html
!= print-animations.html print-animations-notref.html
== print-pseudo-animations.html print-pseudo-animations-ref.html
!= print-pseudo-animations.html print-pseudo-animations-notref.html
== print-animations-shadow.html print-animations-shadow-ref.html
!= print-animations-shadow.html print-animations-shadow-notref.html
== print-paused-animations.html print-paused-animations-ref.html
!= print-paused-animations.html print-paused-animations-notref.html
== print-web-animations.html print-web-animations-ref.html
!= print-web-animations.html print-web-animations-notref.html
== animate-opacity.html animate-opacity-ref.html
== animate-preserves3d.html animate-preserves3d-ref.html
== animation-initially-out-of-view-with-delay.html animation-initially-out-of-view-with-delay-ref.html