third_party/WebKit/LayoutTests/fast/reflections/reflection-overflow-hidden.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2   "http://www.w3.org/TR/html4/strict.dtd">
   3
   4 <html>
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Reflection and overflow</title>
   8
   9   <style type="text/css" media="screen">
  10     body {
  11       margin: 50px;
  12     }
  13     #player {
  14       position: absolute;
  15       top: 100px;
  16       -webkit-box-reflect: below 10px;
  17       width: 400px;
  18     }
  19
  20     #inner {
  21         position: relative;
  22         height: 200px;
  23         overflow: hidden;
  24         outline: 2px solid black;
  25     }
  26
  27     .top {
  28         position: absolute;
  29         width: 100%;
  30         height: 50px;
  31         top: 0px;
  32         background-color: green;
  33     }
  34
  35     .bottom {
  36         position: absolute;
  37         width: 100%;
  38         height: 50px;
  39         bottom: 0px;
  40         background-color: green;
  41     }
  42
  43     .tester {
  44       position: absolute;
  45       width: 400px;
  46       height: 50px;
  47       background-color: red;
  48       z-index: -1;
  49     }
  50   </style>
  51 </head>
  52 <body>
  53
  54     <p><a href="https://bugs.webkit.org/show_bug.cgi?id=22570">https://bugs.webkit.org/show_bug.cgi?id=22570</a>. Test for
  55       reflection painting on overflow:hidden element. You should not see any red below.</p>
  56
  57     <div class="tester" style="top: 100px;"></div>
  58     <div class="tester" style="top: 250px;"></div>
  59
  60     <div id="player">
  61       <div id="inner">
  62           <div class="top">Top</div>
  63           <div class="bottom">Bottom</div>
  64       </div>
  65     </div>
  66
  67 </body>
  68 </html>
  69