reflection-opacity-huge.html | Explore in Territory

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
      .reflected {
        position: relative;
        width: 2150px;
        height: 200px;
        background-color: green;
        opacity: 0.5;
        -webkit-box-reflect: below -50px;
      }
      
      .composited { will-change: transform;}
      * { margin: 0; padding: 0; }

    </style>
  </head>
  
  <p>Opacity should be applied after reflection, so you should see a green rectangle below. The overlap between the original and reflection should not be visible.</p>
  <div class="reflected composited">1
  </div>

</html>

chromium/third_party/blink/web_tests/compositing/overlap-blending/reflection-opacity-huge.html