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

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