| <!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> |
