third_party/WebKit/LayoutTests/fast/block/positioning/rel-positioned-inline-changes-width.html

   1 <!DOCTYPE html>
   2 <style>
   3     #container {
   4         position: relative;
   5         font: 10px Ahem;
   6     }
   7     #abs {
   8         position: absolute;
   9         border: solid 4px red;
  10     }
  11     .inline-pos {
  12         top: 4px;
  13     }
  14     .right {
  15         right: -12px;
  16     }
  17     .block-pos {
  18         bottom: -12px;
  19         right: 4px;
  20     }
  21     .inline {
  22         display: inline;
  23     }
  24     .rtl {
  25         direction: rtl;
  26     }
  27 </head>
  28 </style>
  29 <script src="../../../resources/check-layout.js"></script>
  30 <body>
  31     <p>An abspos element should move with the edge of its inline relpos container when the latter changes width.</p>
  32     <div>
  33         <div>
  34             <span id="container"><span id="text">Hello</span><div id="abs" class="inline-pos right" data-total-x=118></div></span>
  35         </div>
  36         <div>
  37             <span id="container"><span id="inline-text">Hello</span><div id="abs" class="inline inline-pos right"  data-total-x=118></div></span>
  38         </div>
  39     </div>
  40     <div class="rtl">
  41         <div>
  42             <span id="container"><span id="text-rtl">Hello</span><div id="abs" class="inline-pos right" data-total-x=118></div></span>
  43         </div>
  44         <div>
  45             <span id="container"><span id="inline-text-rtl">Hello</span><div id="abs" class="inline inline-pos right"  data-total-x=118></div></span>
  46         </div>
  47     </div>
  48     <script>
  49         document.body.offsetTop;
  50         document.getElementById('text').innerHTML = 'hello world';
  51         document.getElementById('text-rtl').innerHTML = 'hello world';
  52         document.getElementById('inline-text').innerHTML = 'hello world';
  53         document.getElementById('inline-text-rtl').innerHTML = 'hello world';
  54         checkLayout('#abs')
  55     </script>
  56 </body>
  57 </html>