<!DOCTYPE html>

<html>
<head>
    <style>
        .box {
            height: 100px;
            width: 100px;
            background-color: silver;
            box-shadow: 0 0 10px black;
            padding: 10px;
            margin: 20px;
        }
        
        .composited {
            will-change: transform;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        function sortedJSONStringify(object, space)
        {
            function sorted(o)
            {
                var result = {};
                
                var keys = [];
                for (var key in o) {
                    if (o.hasOwnProperty(key))
                        keys.push(key);
                }
                
                keys.sort();
                for (var key of keys)
                    result[key] = o[key];
                
                return result;
            }
            
            return JSON.stringify(sorted(object), function(key, value) {
                if (typeof value === 'object' && !Array.isArray(value) && !(typeof(value) === 'function'))
                    return sorted(value);
                return value;
            }, space);
        }
        
        function getUIScript(layerID)
        {
            return `
                (function() {
                    uiController.doAfterPresentationUpdate(function() {
                        var layerProperties = JSON.stringify(uiController.propertiesOfLayerWithID(${layerID}));
                        uiController.uiScriptComplete(layerProperties);
                    })
                })();`
        }

        function doTest()
        {
            if (!window.testRunner)
                return;

            var layerID = internals.layerIDForElement(document.getElementById('composited'));

            testRunner.runUIScript(getUIScript(layerID), function(layerProperties) {
                var propertiesAsJSON = JSON.parse(layerProperties);
                document.getElementById('layer-properties').textContent = sortedJSONStringify(propertiesAsJSON, 4);
                testRunner.notifyDone();
            });
        }
        
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>

<div id="composited" class="composited box">
    Composited box.
</div>

<pre id="layer-properties"></pre>
</body>
</html>