Attachment 343569 Details for Bug 187029 – Testcase.html

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:

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>

Actions: View

Attachments on bug 187029: 343569