diff options
Diffstat (limited to 'layout/style/test/test_mask_image_CORS.html')
-rw-r--r-- | layout/style/test/test_mask_image_CORS.html | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/layout/style/test/test_mask_image_CORS.html b/layout/style/test/test_mask_image_CORS.html new file mode 100644 index 0000000000..8edd8af48e --- /dev/null +++ b/layout/style/test/test_mask_image_CORS.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Test mask-image CORS anonymous retrieval</title> +<link rel="stylesheet" href="/tests/SimpleTest/test.css"> +<script src="/tests/SimpleTest/SimpleTest.js"></script> +<script src="/tests/SimpleTest/WindowSnapshot.js"></script> +<style> +.block100 { + width: 100px; + height: 100px; +} +#allow { + /* + * shape-outside is unnecessary for the mask, but using it ensures that the first frame + * of the image is decoded and reflow is called before onload is fired. Since the + * shape-outside uses the same url as the mask, this ensures that the css image resource + * is decoded and available for the repaint triggered by the call to snapshotRect. + */ + shape-outside: url("support/blue-100x100.png"); + mask-image: url("support/blue-100x100.png"); + background-color: #00FF00 +} +#refuse { + shape-outside: url("http://example.com/tests/layout/style/test/support/blue-100x100.png"); + mask-image: url("http://example.com/tests/layout/style/test/support/blue-100x100.png"); + background-color: #FF0000 +} +</style> + +<script> +SimpleTest.waitForExplicitFinish(); + +function checkBothSquares() { + checkIsColor("allow", "0,255,0,255"); + checkIsColor("refuse", "255,255,255,255"); + + SimpleTest.finish(); +} + +function checkIsColor(elementId, color) { + let e = document.getElementById(elementId); + let r = e.getBoundingClientRect(); + info("Element " + elementId + " has rect " + r.top + ", " + r.left + ", " + r.width + ", " + r.height + "."); + + let canvas = snapshotRect(window, r); + let context = canvas.getContext('2d'); + + // Only check the top left pixel. + let image = context.getImageData(0, 0, 1, 1); + let pixel = image.data.toString(); + is(pixel, color, "Element " + elementId + " has expected color."); +} +</script> + +</head> +<body onload="checkBothSquares()"> + <p>There should be a green square, but no red square.</p> + <div id="allow" class="block100"></div> + <div id="refuse" class="block100"></div> +</body> +</html> |