<!DOCTYPE html>

<html>
<head>
<script src="media-file.js"></script>
<script src="../resources/js-test-pre.js"></script>
    <style>
        .container {
            width: 456px;
            height: 50px;
            margin: 4px;
            padding: 2px;
            box-sizing: border-box;
            border: 1px solid gray;
            position: relative;
            z-index: 0;
        }
        
        audio {
            display: block;
            margin: 20px;
        }
    </style>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText();

        jsTestIsAsync = true;

        function containsLayerWithSize(layersText, width, height)
        {
            var lines = layersText.split('\n');
            
            var re = /\(bounds ([.\d]+) ([.\d]+)\)/;
            
            for (var line of lines) {
                var result;
                if (result = re.exec(line)) {
                    if (parseFloat(result[1]) == width && parseFloat(result[2]) == height)
                        return true;
                }
                
            }
            return false;
        }
        
        var mediaElementsToWaitFor = 2;
        function setupVideos()
        {
            setSrcById('loaded-video', findMediaFile('video', 'content/test'));

            var video = document.getElementById('loaded-video');
            video.addEventListener("canplaythrough", function() {
                checkForMediaLoaded(--mediaElementsToWaitFor);
            });
            video.load();

            setSrcById('loaded-audio', findMediaFile('audio', 'content/test'));
            var audio = document.getElementById('loaded-audio')
            audio.addEventListener("canplaythrough", function() {
                checkForMediaLoaded(--mediaElementsToWaitFor);
            });
            audio.load();
        }
        
        function checkForMediaLoaded(loadsRemaining)
        {
            if (loadsRemaining)
                return;
            
            testCompositedContainer();
        }

        var layers;
        function testCompositedContainer()
        {
            if (!window.internals)
                return;

            description('Tests that media controls don\'t trigger compositing on an ancestor via isolatesBlending');
            layers = internals.layerTreeAsText(document);
            
            shouldBeFalse('containsLayerWithSize(layers, 456, 50)');
            
            finishJSTest();
        }
        
        window.addEventListener('load', setupVideos, false);
    </script>
</head>
<body>

<div class="container">
    <audio controls="controls"/>
</div>

<div class="container">
    <video id="loaded-audio" controls="controls"/>
</div>

<div class="container">
    <video src="" controls="controls"/>
</div>

<div class="container">
    <video id="loaded-video" controls="controls"/>
</div>

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