| <!DOCTYPE html> |
| <style> |
| body { |
| font-family: Ahem; |
| font-size: 16px; |
| } |
| .relpos { |
| position: relative; |
| padding-left: 5px; |
| } |
| .pad { |
| border: 10px solid yellow; |
| padding-left: 3px; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| |
| <div id="container"> |
| XX |
| |
| <span class=relpos> |
| <span class=pad data-offset-x="5">XX</span> |
| </span> |
| |
| <span class=relpos> |
| <span class="pad" style="display: inline-block;"> |
| <div data-offset-x="18">XX</div> |
| </span> |
| </span> |
| |
| <span class=relpos> |
| <span data-offset-x="5" class="pad" style="position: absolute">XX</span> |
| </span> |
| |
| <span class=relpos> |
| <br><span data-offset-x="-189" class="pad" style="position: absolute">XX</span> |
| </span> |
| |
| <span class=relpos> |
| <span data-offset-y="50" class="pad" style="position: absolute; top: 50px;">XX</span> |
| </span> |
| |
| <span class=relpos> |
| <span data-offset-x="50" class="pad" style="position: absolute; left: 50px;">XX</span> |
| </span> |
| |
| <span class=relpos> |
| <span data-offset-x="50" class="pad" style="position: absolute; left: 50px; writing-mode: vertical-lr">XX</span> |
| </span> |
| |
| </div> |
| |
| <script> |
| checkLayout("#container"); |
| </script> |
