test_shape_outside_CORS.html (1873B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: shape-outside with a CORS violation</title> 6 <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> 7 <link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"/> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 10 11 <style> 12 .container { 13 clear: both; 14 width: 500px; 15 } 16 .shaper { 17 width: 50px; 18 height: 50px; 19 float: left; 20 background-color: green; 21 } 22 .shapeAllow { 23 shape-outside: url("support/1x1-transparent.png"); 24 } 25 .shapeRefuse { 26 shape-outside: url("http://example.com/layout/style/test/support/1x1-transparent.png"); 27 } 28 .sibling { 29 display: inline-block; 30 } 31 </style> 32 33 <script> 34 SimpleTest.waitForExplicitFinish(); 35 36 function runTests() { 37 let divAllow = document.getElementById("allow"); 38 let divAllowSib = divAllow.nextElementSibling; 39 ok(divAllowSib.getBoundingClientRect().left == divAllow.getBoundingClientRect().left, 40 "Test 1: Sibling should be at same left offset as div (shape-outside should be allowed), and onload should only fire after layout is complete."); 41 42 let divRefuse = document.getElementById("refuse"); 43 let divRefuseSib = divRefuse.nextElementSibling; 44 ok(divRefuseSib.getBoundingClientRect().left != divRefuse.getBoundingClientRect().left, 45 "Test 2: Sibling should be at different left offset from div (shape-outside should be refused)."); 46 47 SimpleTest.finish(); 48 } 49 </script> 50 </head> 51 <body onload="runTests()"> 52 <div class="container"> 53 <div id="allow" class="shaper shapeAllow"></div><div class="sibling">allow (image is blank, so text is flush left)</div> 54 </div> 55 <div class="container"> 56 <div id="refuse" class="shaper shapeRefuse"></div><div class="sibling">refuse (image unread, so text is moved to box edge)</div> 57 </div> 58 </body> 59 </html>