LayoutTests/fast/regions/positioned-objects-in-rtl-regions.html

   1 <!doctype html>
   2 <html style="direction:rtl">
   3 <head>
   4  <style>
   5     #content {
   6         -webkit-flow-into: flow1;
   7         text-align: justify;
   8         padding: 5px;
   9     }
  10
  11     #first-box {
  12         margin:10%
  13     }
  14
  15     #second-box {
  16         position:absolute;
  17         right:0;
  18         top:0;
  19         bottom:0;
  20         width:100px;
  21         background-color:green
  22     }
  23
  24     #region1, #region2, #region3 {
  25         border: 1px solid black;
  26         -webkit-flow-from: flow1;
  27     }
  28
  29     #region1 {
  30         width: 200px;
  31         height: 150px;
  32     }
  33
  34     #region2 {
  35         width: 300px;
  36         height: 180px;
  37     }
  38
  39     #region3 {
  40         width: 120px;
  41         height: 120px;
  42     }
  43 </style>
  44 </head>
  45 <body>
  46 <p style="direction:ltr">The green positioned object should only be as tall as the first region it
  47 is contained in. It should fill the right half of the first region.</p>
  48
  49 <div id="content">
  50     <div id="first-box">
  51         <div id="second-box">
  52
  53         </div>
  54     </div>
  55 </div>
  56
  57 <div id="container">
  58     <div id="region1"></div>
  59     <div id="region2"></div>
  60     <div id="region3"></div>
  61 </div>