third_party/WebKit/LayoutTests/fast/css/relative-positioned-block-with-inline-ancestor.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 with an inline ancestor respects its relative positioning. -->
   4     <head>
   5         <title>CSS Test: Block boxes within inline boxes are affected by positioning</title>
   6         <style type="text/css">
   7             body { overflow: hidden; }
   8             #span1
   9             {
  10                 background: yellow;
  11                 height: 2in;
  12                 position: relative;
  13                 display: inline;
  14                 width: 2in;
  15                 left: 2in;
  16                 top: 2in;
  17             }
  18             #span2
  19             {
  20                 background: blue;
  21                 display: inline;
  22             }
  23             #div3
  24             {
  25                 background: orange;
  26                 width: 2in;
  27             }
  28         </style>
  29     </head>
  30     <body>
  31         <p>Test passes if the orange box sits atop the blue box and both are in the center of the view.</p>
  32         <span id="span1">
  33             <span id="span2">
  34                 <i>
  35                 <div id="div3">Filler Text</div>
  36                 Filler Text
  37                 </i>
  38             </span>
  39         </span>
  40     </body>
  41 </html>