<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 2000px;
            width: 2000px;
        }
        
        .fixed {
            position: fixed;
            top: 50px;
            left: 40px;
            height: 200px;
            width: 200px;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .fixed > div {
            background-color: blue;
            width: 20px;
            height: 10px;
            margin: 30px;
        }
        
        .left, .right {
            top: 500px;
            width: 100px;
        }

        .top, .bottom {
            left: 200px;
            height: 100px;
        }
        
        .left {
            top: 300px;
            left: 10px;
        }

        .right {
            top: 300px;
            left: auto;
            right: 10px;
        }

        .top {
            top: 11px;
        }

        .bottom {
            top: auto;
            bottom: 12px;
        }
    </style>
    <script src="../../resources/js-test-pre.js"></script>
    <script>

    if (window.internals)
        internals.settings.setVisualViewportEnabled(true);

    description("Tests revealing elements inside position:fixed after zooming.");

    window.jsTestIsAsync = true;

    function runTest()
    {
        if (window.eventSender)
            eventSender.scalePageBy(2);

        window.scrollTo(300, 800);

        debug('Reveal "left-target"');
        document.getElementById('left-target').scrollIntoView();
        shouldBe('document.scrollingElement.scrollTop', '838');
        shouldBe('document.scrollingElement.scrollLeft', '40');

        debug('');
        debug('Reveal "bottom-target"');
        document.getElementById('bottom-target').scrollIntoView();
        shouldBe('document.scrollingElement.scrollTop', '1048');
        shouldBe('document.scrollingElement.scrollLeft', '40');

        debug('');
        debug('Reveal "right-target"');
        document.getElementById('right-target').scrollIntoView();
        shouldBe('document.scrollingElement.scrollTop', '1086');
        shouldBe('document.scrollingElement.scrollLeft', '333');

        debug('');
        debug('Reveal "top-target"');
        document.getElementById('top-target').scrollIntoView();
        shouldBe('document.scrollingElement.scrollTop', '834');
        shouldBe('document.scrollingElement.scrollLeft', '230');
        
        finishJSTest();
    }
    </script>
</head>
<body onload="runTest()">

<div class="left fixed">
    <div id="left-target"></div>
</div>

<div class="right fixed">
    <div id="right-target"></div>
</div>

<div class="top fixed">
    <div id="top-target"></div>
</div>

<div class="bottom fixed">
    <div id="bottom-target"></div>
</div>

<script src="../../resources/js-test-post.js"></script>

</body></html>