mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 00:35:44 +00:00
Bug 1465868 [wpt PR 11279] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=186127, a=testonly
Automatic update from web-platform-testsWebKit export of https://bugs.webkit.org/show_bug.cgi?id=186127 (#11279) -- wpt-commits: 57fea798e1e933e1d5291608d9d12da661185bcb wpt-pr: 11279
This commit is contained in:
parent
3b2f8547d9
commit
1a3f8839d0
@ -102103,6 +102103,18 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-animations/set-animation-play-state-to-paused-002.html": [
|
||||
[
|
||||
"/css/css-animations/set-animation-play-state-to-paused-002.html",
|
||||
[
|
||||
[
|
||||
"/css/css-animations/set-animation-play-state-to-paused-002-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-backgrounds/background-334.html": [
|
||||
[
|
||||
"/css/css-backgrounds/background-334.html",
|
||||
@ -238388,6 +238400,11 @@
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-animations/set-animation-play-state-to-paused-002-ref.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-animations/support/testcommon.js": [
|
||||
[
|
||||
{}
|
||||
@ -496665,6 +496682,14 @@
|
||||
"5f2bf4b6712dd230109be62407cd31800451a271",
|
||||
"testharness"
|
||||
],
|
||||
"css/css-animations/set-animation-play-state-to-paused-002-ref.html": [
|
||||
"8156c889e4af141b1bdf3df52626c4337b20c611",
|
||||
"support"
|
||||
],
|
||||
"css/css-animations/set-animation-play-state-to-paused-002.html": [
|
||||
"bd0740fea0d8b0fae749539c9702d3929b0a8093",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-animations/support/testcommon.js": [
|
||||
"3e2b733b29fca0963c95c0d069b7a518db266004",
|
||||
"support"
|
||||
|
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Dynamically set animation-play-state to paused (reference)</title>
|
||||
<style>
|
||||
#container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3em;
|
||||
}
|
||||
#coveringRectLinear, #coveringRectSteps {
|
||||
position: absolute;
|
||||
background: lightgreen;
|
||||
width: 40px;
|
||||
height: 70px;
|
||||
left: 80px;
|
||||
transform-origin: 50% 10%;
|
||||
transform: translate(36px, 0) rotate(144deg);
|
||||
}
|
||||
#coveringRectLinear {
|
||||
top: 50px;
|
||||
}
|
||||
#coveringRectSteps {
|
||||
top: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This test passes if you see two rotated green rectangles and no red.</p>
|
||||
<div id="container">
|
||||
<div id="coveringRectLinear"></div>
|
||||
<div id="coveringRectSteps"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Dynamically set animation-play-state to paused</title>
|
||||
<link rel="author" title="Igalia S.L." href="https://www.igalia.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
|
||||
<meta name="assert" content="Visually check that complex animations stop
|
||||
when animation-play-state is set to paused">
|
||||
<link rel="match" href="set-animation-play-state-to-paused-002-ref.html">
|
||||
<style>
|
||||
#container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3em;
|
||||
}
|
||||
#lineLinear, #lineSteps {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 10px;
|
||||
height: 50px;
|
||||
left: 95px;
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
#coveringRectLinear, #coveringRectSteps {
|
||||
position: absolute;
|
||||
background: lightgreen;
|
||||
width: 40px;
|
||||
height: 70px;
|
||||
left: 80px;
|
||||
transform-origin: 50% 10%;
|
||||
transform: translate(36px, 0) rotate(144deg);
|
||||
}
|
||||
#coveringRectLinear, #lineLinear {
|
||||
top: 50px;
|
||||
}
|
||||
#coveringRectSteps, #lineSteps {
|
||||
top: 150px;
|
||||
}
|
||||
#lineLinear {
|
||||
animation: rotate 2s linear;
|
||||
}
|
||||
#lineSteps {
|
||||
animation: rotate 2s steps(360, end);
|
||||
}
|
||||
.pause {
|
||||
opacity: 0.6;
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
@keyframes rotate
|
||||
{
|
||||
100% {
|
||||
transform: translate(90px, 0) rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var start = null;
|
||||
var animationDuration = 2000;
|
||||
var coveringRectAngle = 144;
|
||||
var rectFinalAngle = 360;
|
||||
function step(timestamp) {
|
||||
if (!start) start = timestamp;
|
||||
var progress = timestamp - start;
|
||||
|
||||
// Pause the animations when the squares pass under the covering rect.
|
||||
var targetProgress = animationDuration * coveringRectAngle / rectFinalAngle;
|
||||
if (progress >= targetProgress) {
|
||||
document.getElementById("lineLinear").classList.add("pause");
|
||||
document.getElementById("lineSteps").classList.add("pause");
|
||||
}
|
||||
|
||||
// Wait a bit so that the squares pass the covering rect if the
|
||||
// animation fails to be paused.
|
||||
var delta = 200;
|
||||
if (progress < targetProgress + delta)
|
||||
window.requestAnimationFrame(step)
|
||||
else
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
}
|
||||
function runTest() {
|
||||
window.requestAnimationFrame(step);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="runTest()">
|
||||
<p>This test passes if you see two rotated green rectangles and no red.</p>
|
||||
<div id="container">
|
||||
<div id="lineLinear"></div>
|
||||
<div id="coveringRectLinear"></div>
|
||||
<div id="lineSteps"></div>
|
||||
<div id="coveringRectSteps"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user