Blitz - WPT: filters-drop-shadow.html

wpt / css / css-viewport / zoom / filters-drop-shadow.html

/css/css-viewport/zoom/filters-drop-shadow.html

<!DOCTYPE html>
<title>CSS zoom applies to drop-shadow when specified and inherited</title>
<link rel="author" title="Stephen White" href="mailto:senorblanco@chromium.org">
<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
<link rel="match" href="reference/filters-drop-shadow-ref.html">
<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-862" />
<meta name="assert" content="Check that clipping gets correctly applied on children of a container with a drop-shadow filter in effect."/>

<style>
.container {
    filter: drop-shadow(5px 5px 5px black);
    padding: 20px;
}
.circle-mask {
    border-radius: 80px;
    overflow: hidden;
    width: 100px;
    height: 100px;
}
.green-box {
    width: 100px;
    height: 100px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.zoom {
  zoom: 2;
}
</style>
<div class="container">
  <div class="circle-mask">
    <div class="green-box">unzoomed</div>
  </div>
</div>
<div class="container">
  <div class="circle-mask zoom">
    <div class="green-box">zoomed</div>
  </div>
</div>
<div class="container zoom">
  <div class="circle-mask">
    <div class="green-box">zoomed inherited</div>
  </div>
</div>

/css/css-viewport/zoom/reference/filters-drop-shadow-ref.html

<!DOCTYPE html>
<title>CSS zoom applies to drop-shadow when specified and inherited</title>
<link rel="author" title="Brent Fulgham" href="mailto:bfulgham@apple.com">
<link rel="help" href="https://drafts.csswg.org/css-viewport/">
<style>
body {
    --scale: 1;
}
.container {
    filter: drop-shadow(calc(5px * var(--scale)) calc(5px * var(--scale)) calc(5px * var(--scale)) black);
    padding: calc(20px * var(--scale));
}
.circle-mask {
    border-radius: calc(80px * var(--scale));;
    overflow: hidden;
    width: calc(100px * var(--scale));
    height: calc(100px * var(--scale));
}
.green-box {
    width: calc(100px * var(--scale));
    height: calc(100px * var(--scale));
    background-color: green;
    font-size: calc(1rem * var(--scale));
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.zoom {
    --scale: 2;
}
</style>
<div class="container">
  <div class="circle-mask">
    <div class="green-box">unzoomed</div>
  </div>
</div>
<div class="container">
  <div class="circle-mask zoom">
    <div class="green-box">zoomed</div>
  </div>
</div>
<div class="container zoom">
  <div class="circle-mask">
    <div class="green-box">zoomed inherited</div>
  </div>
</div>