src/third_party/WebKit/LayoutTests/fast/regions/positioned-objects-inline-static-spanning-regions-rtl.html

   1 <!doctype html>
   2 <html style="direction:rtl">
   3 <head>
   4  <style>
   5     #content {
   6        -webkit-flow-into: flow1;
   7     }
   8
   9     #first-box {
  10         margin: 10%;
  11         height:350px;
  12         background-color:#cccccc;
  13     }
  14
  15     #second-box {
  16         position:absolute;
  17         top:0;
  18         height:450px;
  19         width:50%;
  20         background-color:#00a000;
  21         color:#00a000
  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
  46 <body>
  47 <p style="direction:ltr">The green positioned object should go through all three regions. Its right edge should have the
  48 same offset from the right side of the light grey boxes in each region.</p>
  49
  50 <div id="content">
  51     <div id="first-box">
  52         <span id="second-box">
  53            </span>
  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>