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