third_party/WebKit/LayoutTests/fast/block/positioning/absolute-in-inline-short-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, to the right <span style="color: orange;">orange</span> border.</p>
  30     <div id="outside">
  31         ILorem ipsum dolor sit amet,
  32         <span id="containingBlock">
  33             con a pariatur.
  34             <div id="test"></div>
  35             duis aute
  36         </span>
  37         irure dolor in reprehenderit.
  38     </div>
  39 </body>
  40 </html>