LayoutTests/compositing/geometry/clipping-foreground.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <title>Test position of foreground layer when clipping</title>
   5   <style type="text/css" media="screen">
   6     .box {
   7       position: relative;
   8       display: inline-block;
   9       margin: 60px;
  10       width: 200px;
  11       height: 200px;
  12       border:10px solid black;
  13       color: blue;
  14       padding: 20px;
  15       -webkit-box-sizing: border-box;
  16       -webkit-box-shadow: black 0 0 10px;
  17       background-color:rgba(255, 255, 255, 0.8);
  18       font-size: 220%;
  19       font-weight: bold;
  20       -webkit-transform: translateZ(0);
  21     }
  22
  23     .child {
  24       position: absolute;
  25       border:2px solid black;
  26       width: 150px;
  27       height: 150px;
  28       padding: 20px;
  29       color: gray;
  30       -webkit-box-sizing: border-box;
  31       -webkit-transform: translateZ(0);
  32     }
  33
  34     .child > .child {
  35       height: 100px;
  36       width: 100px;
  37       top: 80px;
  38       background-color: green;
  39       font-size: 50%;
  40     }
  41
  42     .negative {
  43       z-index: -1;
  44       left: -50px;
  45       top: -50px;
  46       background-color: rgba(200, 100, 100, 1);
  47     }
  48
  49     .positive {
  50       z-index: 1;
  51       right: -50px;
  52       bottom: -50px;
  53       background-color: rgba(200, 200, 128, 1);
  54     }
  55
  56   </style>
  57 </head>
  58 <body>
  59
  60 <p>The layering and positions of the boxes should not be affected by oveflow:hidden.</p>
  61 <div class="box">
  62   Box contents
  63   <div class="negative child">
  64     Behind
  65     <div class="child">
  66       Behind behind
  67     </div>
  68   </div>
  69   <div class="positive child">
  70     In Front
  71   </div>
  72 </div>
  73
  74 <div class="box" style="overflow: hidden;">
  75   Box contents
  76   <div class="negative child">
  77     Behind
  78     <div class="child">
  79       Behind behind
  80     </div>
  81   </div>
  82   <div class="positive child">
  83     In Front
  84   </div>
  85 </div>
  86
  87 </body>
  88 </html>