third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-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 a block respects the relative positioning of an inline parent. -->
   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 the orange box is between the two blue boxes and all three boxes are below the yellow box.</p>
  30         <div id="div1">
  31             <div id="div2">
  32                 <div id="div3">Filler Text</div>
  33                 Filler Text
  34                 <div id="div3">Filler Text</div>
  35                 Filler Text
  36             </div>
  37         </div>
  38     </body>
  39 </html>