<html>
<head>

<style type="text/css" media="screen">
@media (max-device-width: 478px) and (max-device-height: 959px) {
    #main { background: red; }
}

@media (max-device-width: 480px) and (max-device-height: 960px) {
    #main { background: green; }
}

@media (min-device-width: 481px) and (min-device-height: 961px) {
    #main { background: yellow; }
}

body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
}

</style>

<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>

function getSizes()
{
    return JSON.stringify({
        screen: window.screen.width + "x" + window.screen.height,
        inner: window.innerWidth + "x" + window.innerHeight,
        body: document.body.offsetWidth + "x" + document.body.offsetHeight
    });
}

function test()
{
    var exceededDimension = 10000001;
    var originalScreenSize;

    function saveSizeCallback(jsonResult)
    {
        var value = JSON.parse(jsonResult.value);
        originalScreenSize = value.screen;
        if (!originalScreenSize || originalScreenSize.indexOf("x") === -1)
            InspectorTest.addResult("Invalid original screen size: " + originalScreenSize + ". Expect runtime failures later on.");

        InspectorTest.selectNodeAndWaitForStyles("main", step0);
    }

    InspectorTest.evaluateInPage("getSizes()", saveSizeCallback);


    function step0()
    {
        overrideAndDumpData(480, 800, step1);
    }

    function step1()
    {
        function compareSizeCallback(jsonResult)
        {
            // Check that the screen size reported is the same as the original one.
            var result = JSON.parse(jsonResult.value);
            if (result.screen !== originalScreenSize)
                InspectorTest.addResult("Original size " + originalScreenSize + " not restored, found: " + result.screen);
            step2();
        }

        function overrideCallback()
        {
            InspectorTest.evaluateInPage("getSizes()", compareSizeCallback);
        }

        // Disable overrides.
        PageAgent.setDeviceMetricsOverride(0, 0, 1, true, overrideCallback);
    }

    function step2()
    {
        overrideAndDumpData(800, 480, step3);
    }

    function step3()
    {
        applyOverride(exceededDimension, 800, step4);
    }

    function step4()
    {
        applyOverride(-1, 800, step5);
    }

    function step5()
    {
        applyOverride(480, exceededDimension, step6);
    }

    function step6()
    {
        function callback()
        {
            InspectorTest.addResult("Current dimensions:");
            getAndDumpSizes(step7);
        }
        applyOverride(480, -1, callback);
    }

    function step7()
    {
        function callback(jsonResult)
        {
            var value = JSON.parse(jsonResult.value);
            if (value.screen !== originalScreenSize)
                InspectorTest.addResult("Screen size not restored, actual: " + value.screen + ", expected: " + originalScreenSize);
            else
                InspectorTest.addResult("Screen size same as original - OK");
            step8();
        }

        InspectorTest.addResult("Disable PageAgent:");
        PageAgent.disable();
        InspectorTest.evaluateInPage("getSizes()", callback);
    }

    function step8()
    {
        function callback(jsonResult)
        {
            var value = JSON.parse(jsonResult.value);
            if (value.screen !== originalScreenSize)
                InspectorTest.addResult("Screen size not restored, actual: " + value.screen + ", expected: " + originalScreenSize);
            else
                InspectorTest.addResult("Screen size same as original - OK");
            InspectorTest.completeTest();
        }

        InspectorTest.addResult("Enable PageAgent:");
        PageAgent.enable();
        InspectorTest.evaluateInPage("getSizes()", callback);
    }

    function applyOverride(width, height, userCallback)
    {
        function callback(error)
        {
            if (error)
                InspectorTest.addResult("Override: " + width + "x" + height + " => ERROR");
            userCallback();
        }
        PageAgent.setDeviceMetricsOverride(width, height, 1, true, callback);
    }

    function overrideAndDumpData(width, height, callback)
    {
        function finalCallback()
        {
            InspectorTest.addResult("Main style:");
            InspectorTest.dumpSelectedElementStyles(true, false, true);
            callback();
        }

        var gotSizes;
        var gotStyles;
        function stylesCallback()
        {
            if (gotSizes)
                return finalCallback();
            gotStyles = true;
        }

        function sizesCallback()
        {
            gotSizes = true;
            if (gotStyles)
                finalCallback();
        }

        function applyCallback()
        {
            getAndDumpSizes(sizesCallback);
        }

        InspectorTest.addResult("Override: " + width + "x" + height);
        InspectorTest.waitForStyles("main", stylesCallback);
        applyOverride(width, height, applyCallback);
    }

    function getAndDumpSizes(callback)
    {
        function getSizesCallback(jsonResult)
        {
            var result = JSON.parse(jsonResult.value);
            InspectorTest.addResult("Screen from page: " + result.screen);
            InspectorTest.addResult("Window from page: " + result.inner);
            InspectorTest.addResult("Body from page: " + result.body);
            if (callback)
                callback();
        }

        InspectorTest.evaluateInPage("getSizes()", getSizesCallback);
    }
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that screen dimension overrides affect media rules, body dimensions, and window.screen.
</p>

<div id="main"></div>
</body>
</html>