| OLD | NEW |
| (Empty) | |
| 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 containe
r 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" c
lass="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> |
| OLD | NEW |