<!DOCTYPE html>
<title>Backdrop filter clipping radius with zoom</title>
<link rel="author" href="mailto:[email protected]">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<!--You should see two completely filled black rectangles with rounded corners.-->
<!-- TODO(978481): Convert this back to WPT test. See crbug.com/978481 for
an implementation in WPT that is waiting for the WPT Fuzzy Matching feature.
-->
<div id='rect1'></div>
<div id='rect2'></div>
<style>
body {
zoom: 5;
}
div {
width: 100px;
height: 20px;
backdrop-filter: invert(1);
border: 2px dashed green;
}
#rect1 {
border-radius: 20px / 5px;
}
#rect2 {
position: relative;
top:5px;
border-radius: 4px;
}
p {
font-size: 0.2em;
}
</style>