third_party/WebKit/LayoutTests/compositing/squashing/squash-above-fixed-subpixel-1.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .composited {
   6   transform: translateZ(0);
   7 }
   8
   9 .background {
  10   position: fixed;
  11   background-color: lightgray;
  12   width: 300px;
  13   height: 300px;
  14   top: 150px;
  15   left: 100px;
  16 }
  17
  18 .cyan {
  19   background-color: cyan;
  20 }
  21
  22 .lime {
  23   background-color: lime;
  24 }
  25
  26 .overlapping {
  27   position: relative;
  28   z-index: 1;
  29   width: 200px;
  30   height: 100.5px;
  31 }
  32
  33 .nonsubpixel {
  34   position: relative;
  35   z-index: 1;
  36   width: 200px;
  37   height: 100px;
  38 }
  39
  40 #description {
  41   position: absolute;
  42   top: 100px;
  43   left: 450px;
  44   width: 300px;
  45 }
  46
  47 #testResults {
  48   display: none;
  49 }
  50
  51 body {
  52   margin: 0px;
  53 }
  54 </style>
  55
  56 </head>
  57
  58 <body>
  59
  60   <div id="description">
  61     <p>This scenario tests that content is rendered correctly when the
  62     squashing composited layer is itself at an integral position but contains
  63     a render layer whose position is non-integral.</p>
  64   </div>
  65
  66   <div class="composited background"> </div>
  67
  68   <div id="paragraph-a" class="nonsubpixel cyan"></div>
  69   <div id="paragraph-b" class="overlapping lime"></div>
  70   <div id="paragraph-c" class="overlapping cyan"></div>
  71   <div id="paragraph-d" class="overlapping lime"></div>
  72   <div id="paragraph-e" class="overlapping cyan"></div>
  73   <div id="paragraph-f" class="overlapping lime"></div>
  74   <div id="paragraph-g" class="overlapping cyan"></div>
  75   <div id="paragraph-h" class="overlapping lime"></div>
  76   <div id="paragraph-i" class="overlapping cyan"></div>
  77   <div id="paragraph-j" class="overlapping lime"></div>
  78   <div id="paragraph-k" class="overlapping cyan"></div>
  79   <div id="paragraph-l" class="overlapping lime"></div>
  80   <div id="paragraph-m" class="overlapping cyan"></div>
  81   <div id="paragraph-n" class="overlapping lime"></div>
  82
  83 </body>
  84
  85 </html>