image-click-scale-restore-zoomed-image.html

<!DOCTYPE html>

<script>
var clicked = false;
var count = 0;
var requestId = 0;

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.setPopupBlockingEnabled(false);
    testRunner.waitUntilDone();
}

function log(message)
{
    var console = document.getElementById("console");
    console.appendChild(document.createTextNode(message + "\n"));
}

function click(newwindow, image)
{
    var e = newwindow.document.createEvent("MouseEvent");
    e.initMouseEvent("click", true, true, newwindow, 1, 1, 1, 1, 1, false, false, false, false, 0, newwindow.document);
    image.dispatchEvent(e);
}

window.onload = function()
{
    var newwindow = window.open("resources/flowchart.jpg");
    newwindow.onload = async function() {

        var image = newwindow.document.querySelector("img");
        var resizePromise = new Promise(resolve => newwindow.onresize = resolve);
        newwindow.resizeTo(100, 100);
        await resizePromise;
        // Zoom in level 1
        testRunner.zoomPageIn();
        var w = Math.round(image.clientWidth);
        var h = Math.round(image.clientHeight);
        log("Size at zoomed in level : "  + w + " x " + h);
        clicked = true;
        count++;
        click(newwindow, image);

        w = Math.round(image.clientWidth);
        h = Math.round(image.clientHeight);
        log("Size at zoomed level after scale up click " + count + " : "  + w + " x " + h);

        // Restore the image size
        click(newwindow, image);
        count++;
        // Brings to normal zoom
        testRunner.zoomPageOut();
        // Zoom out level 1
        testRunner.zoomPageOut();
        // Restore the image size
        w = Math.round(image.clientWidth);
        h = Math.round(image.clientHeight);
        log("Size at zoomed out level after click " + count + " (Image restored): "  + w + " x " + h);
        count++;
        click(newwindow, image);

        w = Math.round(image.clientWidth);
        h = Math.round(image.clientHeight);
        log("Size at zoomed level after scale up click " + count + " : "  + w + " x " + h);
        testRunner.notifyDone();
    };
};
</script>
<p>This tests that on a zoomed page, click to scale up / down works fine.  This test requires testRunner to run.  To test manually, open <a href="resources/dice.png">this image</a> in a browser window, resize the window to 100px tall and zoom out and click on the image to scale it up.</p>
<pre id="console"></pre>
chromium/third_party/blink/web_tests/images/image-click-scale-restore-zoomed-image.html
