third_party/WebKit/LayoutTests/css3/motion-path/path-establishes-stacking-context.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 span {
   7   position: absolute;
   8   width: 120px;
   9   line-height: 120px;
  10   text-align: center;
  11   color: yellow;
  12 }
  13
  14 #span1 {
  15   z-index: 2;
  16   left: 50px;
  17   top: 50px;
  18   background: red;
  19 }
  20
  21 #span2 {
  22   z-index: 1;
  23   left: 100px;
  24   top: 100px;
  25   background: green;
  26 }
  27
  28 #span3 {
  29   left: 150px;
  30   top: 150px;
  31   background: blue;
  32 }
  33
  34 #div1 {
  35   motion-path: path('M0,0');
  36 }
  37
  38 #div2 {
  39   motion-path: none;
  40 }
  41
  42 </style>
  43 </head>
  44 <body>
  45
  46 <div id="div1">
  47   <span id="span1">First</span>
  48 </div>
  49 <div id="div2">
  50   <span id="span2">Second</span>
  51 </div>
  52 <div id="div3">
  53   <span id="span3">Third</span>
  54 </div>
  55
  56 </body>
  57 </html>