WebKit Bugzilla
Attachment 343569 Details for
Bug 187029
: Can't scroll overflow:scroll after dynamically changing transform on contents
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Testcase.html
animated-gif-webkit-transform.html (text/html), 2.98 KB, created by
Simon Fraser (smfr)
on 2018-06-25 18:16:36 PDT
(
hide
)
Description:
Testcase.html
Filename:
MIME Type:
Creator:
Simon Fraser (smfr)
Created:
2018-06-25 18:16:36 PDT
Size:
2.98 KB
patch
obsolete
><DOCTYPE html> ><html> ><head> ><script src="../../resources/js-test-pre.js"></script> ></head> ><body onload="runTest()"> ><div id="scroller" style="width: 800px; overflow: scroll; border: 1px solid black; position: relative"> > <div id="scroller-cont" style="height: 245px; width: 1600px; position: relative; top: 0; left: 0; -webkit-transform: translate(0px, 0px) translateZ(0px);"> > <div id="wrapper1" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 800px; height: 245px; float: left; margin: 0; padding: 0; background-color: silver"> > <img id="a" src="resources/animated.gif"/> > </div> > <div id="wrapper2" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 800px; height: 245px; float: left; margin: 0; padding: 0; background-color: green"> > <img id="b" src="resources/animated-10color.gif"/> > </div> > </div> ></div> ><script> >description("Test that animated images are correctly paused / resumed when translated in and out of view using -webkit-transform."); >jsTestIsAsync = true; > >function isFirstImagePaused() >{ > if (window.internals) > return internals.hasPausedImageAnimations(document.getElementById('a')); > return false; >} > >function isSecondImagePaused() >{ > if (window.internals) > return internals.hasPausedImageAnimations(document.getElementById('b')); > return false; >} > >function forceLayout() >{ > document.getElementById("scroller-cont").offsetLeft; >} > >function checkSecondImageUnpaused() >{ > shouldBecomeEqual("isSecondImagePaused()", "false", finishJSTest /*translateImagesRight*/); >} > >function checkSecondImagePaused() >{ > shouldBecomeEqual("isSecondImagePaused()", "true", finishJSTest); >} > >function translateImagesLeft() >{ > shouldBeFalse("isFirstImagePaused()"); > debug("Translating images left so that first image is no longer visible, but second image is."); > forceLayout(); > document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(-800px, 0px)"; > shouldBecomeEqual("isFirstImagePaused()", "true", checkSecondImageUnpaused); >} > >function translateImagesRight() >{ > debug("Translating images right so that second image is no longer visible, but first image is."); > forceLayout(); > document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(0px, 0px)"; > shouldBecomeEqual("isFirstImagePaused()", "false", checkSecondImagePaused); >} > >function ensureImagesPaintedOnce() >{ > shouldBecomeEqual("!isFirstImagePaused()", "true", function() { > document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(-800px, 0px)"; > shouldBecomeEqual("!isSecondImagePaused()", "true", function() { > document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(0px, 0px)"; > shouldBecomeEqual("!isFirstImagePaused() && isSecondImagePaused()", "true", translateImagesLeft); > }); > }); >} > >function runTest() >{ > ensureImagesPaintedOnce(); >} > ></script> ><script src="../../resources/js-test-post.js"></script> ></body> ></html>
<DOCTYPE html> <html> <head> <script src="../../resources/js-test-pre.js"></script> </head> <body onload="runTest()"> <div id="scroller" style="width: 800px; overflow: scroll; border: 1px solid black; position: relative"> <div id="scroller-cont" style="height: 245px; width: 1600px; position: relative; top: 0; left: 0; -webkit-transform: translate(0px, 0px) translateZ(0px);"> <div id="wrapper1" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 800px; height: 245px; float: left; margin: 0; padding: 0; background-color: silver"> <img id="a" src="resources/animated.gif"/> </div> <div id="wrapper2" style="-webkit-transform: translate3d(0px, 0px, 0px); width: 800px; height: 245px; float: left; margin: 0; padding: 0; background-color: green"> <img id="b" src="resources/animated-10color.gif"/> </div> </div> </div> <script> description("Test that animated images are correctly paused / resumed when translated in and out of view using -webkit-transform."); jsTestIsAsync = true; function isFirstImagePaused() { if (window.internals) return internals.hasPausedImageAnimations(document.getElementById('a')); return false; } function isSecondImagePaused() { if (window.internals) return internals.hasPausedImageAnimations(document.getElementById('b')); return false; } function forceLayout() { document.getElementById("scroller-cont").offsetLeft; } function checkSecondImageUnpaused() { shouldBecomeEqual("isSecondImagePaused()", "false", finishJSTest /*translateImagesRight*/); } function checkSecondImagePaused() { shouldBecomeEqual("isSecondImagePaused()", "true", finishJSTest); } function translateImagesLeft() { shouldBeFalse("isFirstImagePaused()"); debug("Translating images left so that first image is no longer visible, but second image is."); forceLayout(); document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(-800px, 0px)"; shouldBecomeEqual("isFirstImagePaused()", "true", checkSecondImageUnpaused); } function translateImagesRight() { debug("Translating images right so that second image is no longer visible, but first image is."); forceLayout(); document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(0px, 0px)"; shouldBecomeEqual("isFirstImagePaused()", "false", checkSecondImagePaused); } function ensureImagesPaintedOnce() { shouldBecomeEqual("!isFirstImagePaused()", "true", function() { document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(-800px, 0px)"; shouldBecomeEqual("!isSecondImagePaused()", "true", function() { document.getElementById("scroller-cont").style["-webkit-transform"] = "translate(0px, 0px)"; shouldBecomeEqual("!isFirstImagePaused() && isSecondImagePaused()", "true", translateImagesLeft); }); }); } function runTest() { ensureImagesPaintedOnce(); } </script> <script src="../../resources/js-test-post.js"></script> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 187029
: 343569