third_party/WebKit/LayoutTests/fast/block/positioning/absolute-in-inline-ltr.html

   1 <html>
   2 <head>
   3   <style>
   4     #outside {
   5        outline: 1px dashed red;
   6        width: 600px;
   7     }
   8     #containingBlock {
   9        display: inline;
  10        position: relative;
  11        background-color: green;
  12        margin: 10px;
  13        padding: 0 10px;
  14        border: 1px solid grey;
  15        border-left: 20px solid blue;
  16        border-right: 20px solid orange;
  17     }
  18     #test {
  19        position: absolute;
  20        top: 0;
  21        left: 0;
  22        width: 100%;
  23        height: 100%;
  24        outline: 5px solid black;
  25     }
  26   </style>
  27 </head>
  28 <body>
  29     <p>The black outline box should stretch from the left <span style="color: blue;">blue</span> border on the first line, to the right <span style="color: orange;">orange</span> border on the third line.</p>
  30     <div id="outside">
  31         ILorem ipsum dolor sit amet,
  32         <span id="containingBlock">
  33             con a pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp qui officia deserunt mollit animequs
  34             <div id="test"></div>
  35             ILOREM ipsum dol sDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullat
  36         </span>
  37         duis aute irure dolor in reprehenderit in voluptate velit.
  38     </div>
  39 </body>
  40 </html>