third_party/WebKit/LayoutTests/compositing/reflections/deeply-nested-reflections.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
   8   <style type="text/css" media="screen">
   9
  10     div {
  11       -webkit-box-sizing: border-box;
  12       border: 1px solid black;
  13       margin: 2px;
  14     }
  15
  16     .level4 {
  17       width: 234px;
  18       height: 240px;
  19       border-color: black;
  20       -webkit-box-reflect: below 4px;
  21     }
  22
  23     .level3 {
  24       width: 228px;
  25       height: 234px;
  26       border-color: orange;
  27       -webkit-box-reflect: right 4px;
  28     }
  29
  30     .level2 {
  31       width: 222px;
  32       height: 112px;
  33       border-color: blue;
  34       -webkit-box-reflect: below 4px;
  35     }
  36
  37     .level1 {
  38       width: 106px;
  39       height: 106px;
  40       border-color: red;
  41       -webkit-box-reflect: right 4px;
  42     }
  43
  44     .box {
  45       width: 100px;
  46       height: 100px;
  47       text-align: center;
  48       font-size: 48pt;
  49       background-color: green;
  50     }
  51     .compositing {
  52       transform: translateZ(0);
  53     }
  54
  55   </style>
  56
  57 </head>
  58 <body>
  59
  60   <p>Deeply nested reflections.</p>
  61   <div class="level4">
  62     <div class="level3">
  63       <div class="level2">
  64         <div class="level1">
  65           <div class="compositing box">C</div>
  66         </div>
  67       </div>
  68     </div>
  69   </div>
  70
  71 </body>
  72 </html>