WebKit Bugzilla
Attachment 368481 Details for
Bug 197381
: REGRESSION (r238090): animation on https://www.robotodyssey.online gets stuck; site broken
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Reduction
clip-path-animation.html (text/html), 987 bytes, created by
Simon Fraser (smfr)
on 2019-04-29 13:20:43 PDT
(
hide
)
Description:
Reduction
Filename:
MIME Type:
Creator:
Simon Fraser (smfr)
Created:
2019-04-29 13:20:43 PDT
Size:
987 bytes
patch
obsolete
><!DOCTYPE html> ><html> ><head> > > <style type="text/css"> > @keyframes circle { > 0% { > -webkit-clip-path: circle(0 at center) > } > to { > -webkit-clip-path: circle(74% at center) > } > } > > .box { > margin: 20px; > width: 300px; > height: 300px; > background-color: blue; > } > > .composited { > transform: translateZ(0); > } > > .box.changed { > animation: circle 3s; > } > > > </style> > > <script> > > window.addEventListener('load', () => { > setTimeout(() => { > document.getElementById('target').classList.add('changed'); > }, 1000); > }, false); > </script> ></head> ><body> > <p>You should see a square then a growing circle</p> > <div id="target" class="composited box"> > Box > </div> ></body> ></html>
<!DOCTYPE html> <html> <head> <style type="text/css"> @keyframes circle { 0% { -webkit-clip-path: circle(0 at center) } to { -webkit-clip-path: circle(74% at center) } } .box { margin: 20px; width: 300px; height: 300px; background-color: blue; } .composited { transform: translateZ(0); } .box.changed { animation: circle 3s; } </style> <script> window.addEventListener('load', () => { setTimeout(() => { document.getElementById('target').classList.add('changed'); }, 1000); }, false); </script> </head> <body> <p>You should see a square then a growing circle</p> <div id="target" class="composited box"> Box </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 197381
: 368481 |
368487