WebKit Bugzilla
Attachment 342666 Details for
Bug 186127
: [iOS] Transformation matrix not preserved when pausing complex animation with Bézier timing function
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Another testcase
testcase.html (text/html), 2.75 KB, created by
Frédéric Wang (:fredw)
on 2018-06-13 09:51:04 PDT
(
hide
)
Description:
Another testcase
Filename:
MIME Type:
Creator:
Frédéric Wang (:fredw)
Created:
2018-06-13 09:51:04 PDT
Size:
2.75 KB
patch
obsolete
><!DOCTYPE html> ><html> > <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> > #containerLinear, #containerSteps { > position: absolute; > left: 100px; > } > #containerLinear { > top: 100px; > } > #lineLinear { > position: absolute; > background: red; > left: -1px; > width: 2px; > top: -40px; > height: 80px; > } > #coveringRectLinear { > opacity: .5; > position: absolute; > background: lightgreen; > left: -20px; > width: 40px; > top: -50px; > height: 100px; > transform: translate(45px, 0) rotate(90deg); > } > #lineLinear { > animation: rotate 5s linear; > } > .pause { > opacity: 0.6; > animation-play-state: paused !important; > } > @keyframes rotate > { > 100% { > transform: translate(90px, 0) rotate(180deg); > } > } > </style> > <script> > var start = null; > var animationDuration = 5000; > function shift(id) > { > var transform = window.getComputedStyle(document.getElementById(id)).transform; > if (transform === "none") > return 0; > // See https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value > return parseFloat(transform.split(/,\s*/)[4]); > } > function step(timestamp) { > // For each line, pause the animation as soon as it passes under the covering rect. > var timeError = 100; > var maxShift = 180; > var epsilon = maxShift * timeError / animationDuration; > ["Linear"].forEach((id) => { > if (Math.abs(shift(`coveringRect${id}`) - shift(`line${id}`)) < epsilon) > document.getElementById(`line${id}`).classList.add("pause"); > }); > > // Stop the reftest after the time when the animations would have stop. > // If pausing failed for some reason, the lines will be visible. > if (!start) start = timestamp; > if (timestamp - start < animationDuration) > window.requestAnimationFrame(step); > } > function runTest() { > window.requestAnimationFrame(step); > } > </script> > </head> > <body onload="runTest()"> > <div id="containerLinear"> > <div id="lineLinear"></div> > <div id="coveringRectLinear"></div> > </div> > </body> ></html>
<!DOCTYPE html> <html> <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> #containerLinear, #containerSteps { position: absolute; left: 100px; } #containerLinear { top: 100px; } #lineLinear { position: absolute; background: red; left: -1px; width: 2px; top: -40px; height: 80px; } #coveringRectLinear { opacity: .5; position: absolute; background: lightgreen; left: -20px; width: 40px; top: -50px; height: 100px; transform: translate(45px, 0) rotate(90deg); } #lineLinear { animation: rotate 5s linear; } .pause { opacity: 0.6; animation-play-state: paused !important; } @keyframes rotate { 100% { transform: translate(90px, 0) rotate(180deg); } } </style> <script> var start = null; var animationDuration = 5000; function shift(id) { var transform = window.getComputedStyle(document.getElementById(id)).transform; if (transform === "none") return 0; // See https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value return parseFloat(transform.split(/,\s*/)[4]); } function step(timestamp) { // For each line, pause the animation as soon as it passes under the covering rect. var timeError = 100; var maxShift = 180; var epsilon = maxShift * timeError / animationDuration; ["Linear"].forEach((id) => { if (Math.abs(shift(`coveringRect${id}`) - shift(`line${id}`)) < epsilon) document.getElementById(`line${id}`).classList.add("pause"); }); // Stop the reftest after the time when the animations would have stop. // If pausing failed for some reason, the lines will be visible. if (!start) start = timestamp; if (timestamp - start < animationDuration) window.requestAnimationFrame(step); } function runTest() { window.requestAnimationFrame(step); } </script> </head> <body onload="runTest()"> <div id="containerLinear"> <div id="lineLinear"></div> <div id="coveringRectLinear"></div> </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 186127
:
341645
|
341659
|
342247
| 342666