third_party/WebKit/LayoutTests/compositing/will-change/stacking-context-creation-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .shouldStack {
   6       position: absolute;
   7       width: 150px;
   8       height: 50px;
   9       background-color: red;
  10       z-index: 0;
  11     }
  12
  13     .shouldNotStack {
  14       position: absolute;
  15       width: 150px;
  16       height: 50px;
  17       background-color: green;
  18     }
  19
  20     .child {
  21       position: relative;
  22       top: 0px;
  23       left: 0px;
  24       width: 150px;
  25       height: 50px;
  26       background-color: green;
  27       z-index: -1;
  28     }
  29
  30     .shouldNotStack .child {
  31       background-color: red;
  32     }
  33
  34     #willChangeOpacity {
  35       top: 0px;
  36       left: 0px;
  37     }
  38
  39     #willChangeTransform {
  40       top: 0px;
  41       left: 200px;
  42     }
  43
  44     #willChangeTransformStyle {
  45       top: 0px;
  46       left: 400px;
  47     }
  48
  49     #willChangePerspective {
  50       top: 100px;
  51       left: 0px;
  52     }
  53
  54     #willChangeMask {
  55       top: 100px;
  56       left: 200px;
  57     }
  58
  59     #willChangeMaskBoxImage {
  60       top: 100px;
  61       left: 400px;
  62     }
  63
  64     #willChangeClipPath {
  65       top: 200px;
  66       left: 0px;
  67     }
  68
  69     #willChangeBoxReflect {
  70       top: 200px;
  71       left: 200px;
  72     }
  73
  74     #willChangeFilter {
  75       top: 200px;
  76       left: 400px;
  77     }
  78
  79     #willChangeZIndex {
  80       top: 300px;
  81       left: 0px;
  82     }
  83
  84     #willChangeMixBlendMode {
  85       top: 300px;
  86       left: 200px;
  87     }
  88
  89     #willChangeIsolation {
  90       top: 300px;
  91       left: 400px;
  92     }
  93
  94     #willChangePosition {
  95       top: 400px;
  96       left: 0px;
  97     }
  98
  99     #willChangeCombination {
 100       top: 400px;
 101       left: 200px;
 102     }
 103
 104     #willChangeTop {
 105       top: 400px;
 106       left: 400px;
 107     }
 108   </style>
 109 </head>
 110
 111 <body>
 112   <div id="willChangeOpacity" class="shouldStack">
 113     <div class="child">opacity</div>
 114   </div>
 115   <div id="willChangeTransform" class="shouldStack">
 116     <div class="child">-webkit-transform</div>
 117   </div>
 118   <div id="willChangeTransformStyle" class="shouldStack">
 119     <div class="child">-webkit-transform-style</div>
 120   </div>
 121   <div id="willChangePerspective" class="shouldStack">
 122     <div class="child">-webkit-perspective</div>
 123   </div>
 124   <div id="willChangeMask" class="shouldStack">
 125     <div class="child">-webkit-mask</div>
 126   </div>
 127   <div id="willChangeMaskBoxImage" class="shouldStack">
 128     <div class="child">-webkit-mask-box-image</div>
 129   </div>
 130   <div id="willChangeClipPath" class="shouldStack">
 131     <div class="child">-webkit-clip-path</div>
 132   </div>
 133   <div id="willChangeBoxReflect" class="shouldStack">
 134     <div class="child">-webkit-box-reflect</div>
 135   </div>
 136   <div id="willChangeFilter" class="shouldStack">
 137     <div class="child">-webkit-filter</div>
 138   </div>
 139   <div id="willChangeZIndex" class="shouldStack">
 140     <div class="child">z-index</div>
 141   </div>
 142   <div id="willChangeMixBlendMode" class="shouldStack">
 143     <div class="child">mix-blend-mode</div>
 144   </div>
 145   <div id="willChangeIsolation" class="shouldStack">
 146     <div class="child">isolation</div>
 147   </div>
 148   <div id="willChangePosition" class="shouldStack">
 149     <div class="child">position</div>
 150   </div>
 151   <div id="willChangeCombination" class="shouldStack">
 152     <div class="child">combination</div>
 153   </div>
 154   <div id="willChangeTop" class="shouldNotStack">
 155     <div class="child">top</div>
 156   </div>
 157 </body>
 158
 159 </html>