third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-nested-with-inline-parent.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <!--     This tests that blocks nested with multiple relative positioned inline ancestors are positioned correctly. -->
   4     <head>
   5         <title>CSS Test: Block boxes within inline boxes are affected by positioning</title>
   6         <style type="text/css">
   7             #div1
   8             {
   9                 background: yellow;
  10                 height: 2in;
  11                 position: relative;
  12                 width: 2in;
  13             }
  14             #div2
  15             {
  16                 background: blue;
  17                 display: inline;
  18                 position: relative;
  19                 top: 2in;
  20             }
  21             #div3
  22             {
  23                 background: orange;
  24                 width: 2in;
  25             }
  26         </style>
  27     </head>
  28     <body>
  29         <p>Test passes if each orange box is between two blue boxes and all orange and blue boxes are below the yellow box.</p>
  30         <div id="div1">
  31             <div id="div2">
  32                  Filler Text
  33                 <div id="div3">Filler Text</div>
  34                 <div id="div2">
  35                     Filler Text
  36                     <div id="div3">Filler Text</div>
  37                     Filler Text
  38                 </div>
  39                 <div id="div3">Filler Text</div>
  40                  Filler Text
  41             </div>
  42         </div>
  43     </body>
  44 </html>