Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/privacy/svg-mask-visited.tentative.https.sub.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>drawElementImage does not reveal visited links in external SVG masks</title>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='/html/canvas/resources/canvas-tests.js'></script>
<script src="/html/canvas/resources/wait-for-canvas-paint.js"></script>
<style>
/* In mask-same, link is white so mask luminance is 1 (alpha 255), allowing the element to draw. */
#mask-same a:link { color: #ffffff; }
#mask-same a:visited { color: #ffffff; }
/* In mask-cross, unvisited is black (luma 0 -> alpha 0), visited is white (luma 1 -> alpha 255).
Privacy-preserving rendering disallows external masks, preventing the element from drawing. */
#mask-cross a:link { color: #000000; }
#mask-cross a:visited { color: #ffffff; }
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<mask id="mask-cross" maskContentUnits="objectBoundingBox">
<a href="">
<rect width="1" height="1" fill="currentColor"/>
</a>
</mask>
</defs>
</svg>
<canvas id="canvas" width="100" height="200" layoutsubtree>
<svg id="child" width="100" height="200">
<defs>
<mask id="mask-same" maskContentUnits="objectBoundingBox">
<a href="">
<rect width="1" height="1" fill="currentColor"/>
</a>
</mask>
</defs>
<svg x="0" y="0" width="100" height="100">
<rect width="100" height="100" fill="rgb(30, 130, 230)" mask="url(#mask-same)"/>
</svg>
<svg x="0" y="100" width="100" height="100">
<rect width="100" height="100" fill="rgb(40, 140, 240)" mask="url(#mask-cross)"/>
</svg>
</svg>
</canvas>
<script>
window.onload = () => {
promise_test(async function(t) {
await waitForCanvasPaint(canvas);
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 200);
ctx.drawElementImage(document.getElementById('child'), 0, 0);
// Fetch all pixel data once to avoid multiple slow readbacks.
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let pixel = _getPixelFromImageData(imgData, 50, 50);
assert_array_equals(pixel, [30, 130, 230, 255], "Same origin internal mask should be drawn");
pixel = _getPixelFromImageData(imgData, 50, 150);
assert_array_equals(pixel, [0, 0, 255, 255], "External mask should not be drawn");
});
}
</script>
</body>
</html>