<!
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.hei
ght + ".");
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>
