Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-masking/mask-image/mask-image-multi-layer-while-loading.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>Multiple mask-image layers without backdrop-filter stay hidden while one mask image is loading</title>
<link rel="match" href="mask-image-multi-layer-while-loading-ref.html">
<!-- CSS Masking does not specify behavior while some mask-image layers are still loading. -->
<script src="/common/reftest-wait.js"></script>
<script src="/common/rendering-utils.js"></script>
<style>
body {
margin: 0;
background: yellow;
}
#target {
width: 120px;
height: 60px;
background: blue;
}
</style>
<div id="target"></div>
<script>
onload = async () => {
const url = "support/50x100-opaque-blue.svg?pipe=trickle(d1000)";
const target = document.getElementById('target');
target.style.maskImage = `linear-gradient(black, black), url('${url}')`;
await waitForAtLeastOneFrame();
await waitForAtLeastOneFrame();
takeScreenshot();
};
</script>