third_party/WebKit/LayoutTests/fast/layers/backface-visibility-zero-width.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Zero-width layers</title>
   5 <style>
   6
   7 .foo {
   8     margin: 100px;
   9 }
  10
  11 .button {
  12     backface-visibility: hidden;
  13     display: block;
  14     font-size: 14px;
  15     height: 46px;
  16     position: absolute;
  17     left: 105px;
  18     text-align: center;
  19     text-transform: lowercase;
  20     top: 27px;
  21     transform: none;
  22     visibility: visible;
  23     width: 0px;
  24     z-index: 10021;
  25 }
  26
  27 .button::before {
  28     color: rgb(0, 0, 0);
  29     display: block;
  30     font-size: 40px;
  31     height: 46px;
  32     width: 0px;
  33     z-index: auto;
  34     content: 'A'
  35 }
  36
  37 .container {
  38     width: 100%;
  39     height: 100%;
  40 }
  41
  42 </style>
  43 </head>
  44 <body>
  45     <aside class="container">
  46         <span class="button"></span>
  47         <div class="foo"></div>
  48     </aside>
  49     <p>
  50         A lowercase a should appear above.
  51     </p>
  52 </body>
  53 </html>