1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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>
|
