<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
}
.shape {
    float: left;
    width: 100px;
    height: 100px;
    padding: 25px 75px 75px 25px;
    margin-right: -200px;
    -webkit-shape-margin: 10px;
}
.inset {
    -webkit-shape-outside: inset(25px round 10px) content-box;
}
.circle {
    -webkit-shape-outside: circle(25% at center) content-box;
}
.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>");
    -webkit-shape-margin: 1px;
}
</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', 60, 50, 'L', 90, 50, 'C', 96, 50, 100, 54, 100, 60, 'L', 100, 90, 'C', 100, 96, 96, 100, 90, 100,
            'L', 60, 100, 'C', 54, 100, 50, 96, 50, 90, 'L', 50, 60, 'C', 50, 54, 54, 50, 60, 50, 'Z'],
        'marginPath' : ['M', 60, 40, 'L', 90, 40, 'C', 101, 40, 110, 49, 110, 60, 'L', 110, 90, 'C', 110, 101, 101, 110, 90, 110,
            'L', 60, 110, 'C', 49, 110, 40, 101, 40, 90, 'L', 40, 60, 'C', 40, 49, 49, 40, 60, 40, 'Z']
    },
    {
        'selector' : '.circle',
        'path' : ['M', 75, 63, 'L', 75, 63, 'C', 89, 63, 100, 74, 100, 88, 'L', 100, 88, 'C', 100, 102, 89, 113, 75, 113, 'L', 75, 113,
            'C', 61, 113, 50, 102, 50, 88, 'L', 50, 88, 'C', 50, 74, 61, 63, 75, 63, 'Z'],
        'marginPath' : ['M', 75, 53, 'L', 75, 53, 'C', 94, 53, 110, 69, 110, 88, 'L', 110, 88, 'C', 110, 107, 94, 123, 75, 123, 'L', 75, 123,
            'C', 56, 123, 40, 107, 40, 88, 'L', 40, 88, 'C', 40, 69, 56, 53, 75, 53, 'Z']
    },
    {
        'selector' : '.svg',
        'path' : ['M', 50, 63, 'L', 100, 63, 'L', 100, 113, 'L', 50, 113, 'Z'],
        'marginPath' : ['M', 50, 62, 'L', 100, 62, 'L', 100, 63, 'L', 50, 63, 'Z',
            'M', 49, 63, 'L', 101, 63, 'L', 101, 113, 'L', 49, 113, 'Z',
            'M', 50, 113, 'L', 100, 113, 'L', 100, 114, 'L', 50, 114, 'Z']
    }];

    function runNextTest(tests) {
        var testcase = tests[0];
        var selectorInformation = "Selector: \'" + testcase.selector + "\'";

        InspectorTest.Shapes.getShapeOutsideInfoForSelector(testcase.selector, function(payload) {
            if (!InspectorTest.Shapes.assertPathsAreRoughlyEqual(payload.shape, testcase.path, selectorInformation + " Shape information was not roughly equal."))
                InspectorTest.log("PASS: " + testcase.selector);
            if (!InspectorTest.Shapes.assertPathsAreRoughlyEqual(payload.marginShape, testcase.marginPath, selectorInformation + " Margin shape information was not roughly equal."))
                InspectorTest.log("PASS: " + testcase.selector + " with shape-margin");

            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 circle'></div>
    <div class='shape svg'></div>
</body>
</html>