<html>
<head>
<style>
body {
    margin: 0;
}
.shape {
    float: left;
    width: 200px;
    height: 200px;
    margin-right: -200px;
    box-sizing: border-box;
}
.padded {
    padding: 25px 75px 75px 25px;
}
.vertical-lr, .vertical-rl {
    float: left;
}
.vertical-lr {
    -webkit-writing-mode: vertical-lr;
}
.vertical-rl {
    -webkit-writing-mode: vertical-rl;
}
.inset {
    -webkit-shape-outside: inset(50px 50px 100px 50px) content-box;
}
.inset.padded {
    -webkit-shape-outside: inset(5px 5px 10px 5px) content-box;
}
.inset.padded.border-box {
    -webkit-shape-outside: inset(50px 50px 100px 50px) border-box;
}
.polygon {
    -webkit-shape-outside: polygon(50px 50px, 150px 50px, 150px 100px, 50px 100px) content-box;
}
.polygon.border-box {
    -webkit-shape-outside: polygon(50px 50px, 150px 50px, 150px 100px, 50px 100px) border-box;
}
.content-box {
    -webkit-shape-outside: content-box;
}
.raster-svg {
    -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' width='100px' height='100px'><rect x='25' y='25' width='50' height='50' fill='blue' /></svg>");
}
.raster-svg-complex {
    -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' width='100px' height='100px'><rect x='10' y='10' width='30' height='30' fill='blue' /><rect x='60' y='10' width='30' height='30' fill='blue' /><rect x='10' y='60' width='30' height='30' fill='blue' /><rect x='60' y='60' width='30' height='30' fill='blue' /></svg>");
}
.raster-png {
    /* png version of raster-svg */
   -webkit-shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAD/////e9yZLAAAAAJ0Uk5T/wDltzBKAAAASUlEQVR42uzYsQ0AMAgEsWf/pTMDBURIvgXcX2qhQCAQCAQCgUA+I2kHgUAgEAgEAoFAIBAIBAKBQOYRoxMCgUAgEAjkHPIEGAA2ih1NVnaDGgAAAABJRU5ErkJggg==");
}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="../../http/tests/inspector/dom/shapes-test.js"></script>
<script>
function test() {
    var testcases = [
    {
        'selector' : '.inset',
        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
    },
    {
        'selector' : '.inset.padded',
        'path' : ['M', 30, 30, 'L', 120, 30, 'L', 120, 115, 'L', 30, 115, 'L', 30, 30, 'Z']
    },
    {
        'selector' : '.inset.padded.border-box',
        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
    },
    {
        'selector' : '.polygon',
        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'Z']
    },
    {
        'selector' : '.polygon.padded.border-box',
        'path' : ['M', 50, 50, 'L', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'Z']
    },
    {
        'selector' : '.vertical-lr > .inset',
        'path' : ['M', 50, 50, 'L', 50, 100, 'L', 150, 100, 'L', 150, 50, 'L', 50, 50, 'Z']
    },
    {
        'selector' : '.vertical-lr > .inset.padded',
        'path' : ['M', 30, 30, 'L', 30, 115, 'L', 120, 115, 'L', 120, 30, 'L', 30, 30, 'Z']
    },
    {
        'selector' : '.vertical-lr > .inset.padded.border-box',
        'path' : ['M', 50, 50, 'L', 50, 100, 'L', 150, 100, 'L', 150, 50, 'L', 50, 50, 'Z']
    },
    {
        'selector' : '.vertical-rl > .inset',
        'path' : ['M', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'L', 150, 50, 'Z']
    },
    {
        'selector' : '.vertical-rl > .inset.padded',
        'path' : ['M', 120, 30, 'L', 120, 115, 'L', 30, 115, 'L', 30, 30, 'L', 120, 30, 'Z']
    },
    {
        'selector' : '.vertical-rl > .inset.padded.border-box',
        'path' : ['M', 150, 50, 'L', 150, 100, 'L', 50, 100, 'L', 50, 50, 'L', 150, 50, 'Z']
    },
    {
        'selector' : '.content-box.padded',
        'path' : ['M', 25, 25, 'L', 125, 25, 'L', 125, 125, 'L', 25, 125, 'L', 25, 25, 'Z']
    },
    {
        'selector' : '.raster-svg.padded',
        'path' : ['M', 50, 50, 'L', 100, 50, 'L', 100, 100, 'L', 50, 100, 'Z']
    },
    {
        'selector' : '.raster-svg-complex.padded',
        'path' : ['M', 35, 35, 'L', 115, 35, 'L', 115, 65, 'L', 35, 65, 'Z', 'M', 35, 85, 'L', 115, 85, 'L', 115, 115, 'L', 35, 115, 'Z']
    },
    {
        'selector' : '.raster-png.padded',
        'path' : ['M', 50, 50, 'L', 100, 50, 'L', 100, 100, 'L', 50, 100, 'Z']
    }
    ];

    function runNextTest(tests) {
        var testcase = tests[0];

        InspectorTest.Shapes.getShapeOutsideInfoForSelector(testcase.selector, function(payload) {
            if (!InspectorTest.Shapes.assertPathsAreRoughlyEqual(payload.shape, testcase.path, "Selector: \'" + testcase.selector + "\' Shape information was not roughly equal."))
                 InspectorTest.log("PASS: " + testcase.selector);

            if (tests.length > 1)
                runNextTest(tests.splice(1));
            else
                InspectorTest.completeTest();
        });
    }

    runNextTest(testcases);
}
</script>
</head>
<body onload="runTest()">
    <div class='shape inset'></div>
    <div class='shape padded inset'></div>
    <div class='shape padded inset border-box'></div>
    <div class='shape polygon'></div>
    <div class='shape padded polygon border-box'></div>
    <div class='vertical-lr'>
        <div class='shape inset'></div>
        <div class='shape padded inset'></div>
        <div class='shape padded inset border-box'></div>
    </div>
    <div class='vertical-rl'>
        <div class='shape inset'></div>
        <div class='shape padded inset'></div>
        <div class='shape padded inset border-box'></div>
    </div>
    <div class='shape padded content-box'></div>
    <div class='shape padded raster-svg'></div>
    <div class='shape padded raster-svg-complex'></div>
    <div class='shape padded raster-png'></div>
</body>
</html>