third_party/WebKit/LayoutTests/compositing/sub-layer-focus-ring.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .composited {
   6   transform: translateZ(0);
   7 }
   8
   9 .outer {
  10   position: absolute;
  11   width: 500px;
  12   height: 300px;
  13   top: 60px;
  14   left: 100px;
  15   background-color: yellow;
  16 }
  17
  18 .outlined {
  19   outline: red auto thin;
  20   width: 150px;
  21   height: 50px;
  22   background-color: lightgrey;
  23 }
  24
  25 .inner {
  26   width: 80px;
  27   height: 100px;
  28 }
  29 </style>
  30 </head>
  31 <body>
  32   <!-- The focus ring parts for the sub-layers should be at correct position,
  33        regardless whether the inner layer is composited. -->
  34   <div class="composited outer">
  35     <div class="outlined">
  36       <div class="composited inner"></div>
  37     </div>
  38   </div>
  39 </body>
  40 </html>
  41