test_mask_image_CORS.html (1983B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test mask-image CORS anonymous retrieval</title> 6 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <script src="/tests/SimpleTest/WindowSnapshot.js"></script> 9 <style> 10 .block100 { 11 width: 100px; 12 height: 100px; 13 } 14 #allow { 15 /* 16 * shape-outside is unnecessary for the mask, but using it ensures that the first frame 17 * of the image is decoded and reflow is called before onload is fired. Since the 18 * shape-outside uses the same url as the mask, this ensures that the css image resource 19 * is decoded and available for the repaint triggered by the call to snapshotRect. 20 */ 21 shape-outside: url("support/blue-100x100.png"); 22 mask-image: url("support/blue-100x100.png"); 23 background-color: #00FF00 24 } 25 #refuse { 26 shape-outside: url("http://example.com/tests/layout/style/test/support/blue-100x100.png"); 27 mask-image: url("http://example.com/tests/layout/style/test/support/blue-100x100.png"); 28 background-color: #FF0000 29 } 30 </style> 31 32 <script> 33 SimpleTest.waitForExplicitFinish(); 34 35 function checkBothSquares() { 36 checkIsColor("allow", "0,255,0,255"); 37 checkIsColor("refuse", "255,255,255,255"); 38 39 SimpleTest.finish(); 40 } 41 42 function checkIsColor(elementId, color) { 43 let e = document.getElementById(elementId); 44 let r = e.getBoundingClientRect(); 45 info("Element " + elementId + " has rect " + r.top + ", " + r.left + ", " + r.width + ", " + r.height + "."); 46 47 let canvas = snapshotRect(window, r); 48 let context = canvas.getContext('2d'); 49 50 // Only check the top left pixel. 51 let image = context.getImageData(0, 0, 1, 1); 52 let pixel = image.data.toString(); 53 is(pixel, color, "Element " + elementId + " has expected color."); 54 } 55 </script> 56 57 </head> 58 <body onload="checkBothSquares()"> 59 <p>There should be a green square, but no red square.</p> 60 <div id="allow" class="block100"></div> 61 <div id="refuse" class="block100"></div> 62 </body> 63 </html>