49 lines
1.3 KiB
HTML
49 lines
1.3 KiB
HTML
<head>
|
|
<meta name="viewport" content="width=device-width">
|
|
<title>This tests that the reflection of an element with a backdrop-filter applied updates its rendering when the reflected layer has a change of backdrop-filter value.</title>
|
|
<style>
|
|
|
|
svg {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: lightgray;
|
|
}
|
|
|
|
.backdrop {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 60px;
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
-webkit-backdrop-filter: saturate(180%) blur(5px);
|
|
-webkit-box-reflect: below 20px;
|
|
}
|
|
|
|
.backdrop.changed {
|
|
-webkit-backdrop-filter: saturate(180%) blur(10px);
|
|
}
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
window.requestAnimationFrame(function() {
|
|
document.querySelector(".backdrop").classList.add("changed");
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<svg viewbox="0 0 2 2">
|
|
<rect fill="black" x="0" y="0" width="1" height="1"></rect>
|
|
<rect fill="black" x="1" y="1" width="1" height="1"></rect>
|
|
</svg>
|
|
<div class="backdrop"></div>
|