<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Reflection and overflow</title>
  
  <style type="text/css" media="screen">
    body {
      margin: 50px;
    }
    #player {
      position: absolute;
      top: 100px;
      -webkit-box-reflect: below 10px;
      width: 400px;
    }

    #inner {
        position: relative;
        height: 200px;
        overflow: hidden;
        outline: 2px solid black;
    }
    
    .top {
        position: absolute;
        width: 100%;
        height: 50px;
        top: 0px;
        background-color: green;
    }
    
    .bottom {
        position: absolute;
        width: 100%;
        height: 50px;
        bottom: 0px;
        background-color: green;
    }
    
    .tester {
      position: absolute;
      width: 400px;
      height: 50px;
      background-color: red;
      z-index: -1;
    }
  </style>
</head>
<body>

    <p><a href="https://bugs.webkit.org/show_bug.cgi?id=22570">https://bugs.webkit.org/show_bug.cgi?id=22570</a>. Test for
      reflection painting on overflow:hidden element. You should not see any red below.</p>
    
    <div class="tester" style="top: 100px;"></div>
    <div class="tester" style="top: 250px;"></div>

    <div id="player">
      <div id="inner">
          <div class="top">Top</div>
          <div class="bottom">Bottom</div>
      </div>
    </div>
    
</body>
</html>