backface-hidden-reflection.html | Explore in Territory

<!DOCTYPE html>

<html>
<head>
  <style type="text/css" media="screen">
    
    .container {
      height: 100px;
      width:100px;
      background-color: green;
    }
    
    .reflected {
      height: 100px;
      width: 100px;
      background-color: red;
      transform: rotate3d(0, 1, 0, 180deg);
      -webkit-box-reflect: below;
      backface-visibility: hidden;
    }
  </style>
</head>
<body>
  <!-- In the pixel results, a single green square should be visible. -->
  <div class="container">
    <div class="reflected">
    </div>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/reflections/backface-hidden-reflection.html