| <!doctype html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| html, body { |
| margin: 0; padding: 0; |
| } |
| #container { |
| overflow: scroll; |
| direction: rtl; |
| position: relative; |
| width: 200px; |
| height: 200px; |
| box-shadow: 0px 0px 12px 0px black; |
| } |
| #target { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| <p>Overflow: origin of absolutely positioned child with rtl parent with scrollbars should be next to scrollbar</p> |
| <div id="container"> |
| <div id="target">foo</div> |
| </div> |
| <script> |
| |
| var container = document.querySelector('#container'); |
| var target = document.querySelector('#target'); |
| |
| function getTargetOffset() { |
| var containerRect = container.getBoundingClientRect(); |
| var targetRect = target.getBoundingClientRect(); |
| return { |
| top: targetRect.top - containerRect.top, |
| left: targetRect.left - containerRect.left |
| } |
| } |
| |
| test(function() { |
| var targetOffset = getTargetOffset(); |
| assert_equals(targetOffset.top, container.clientTop, "top"); |
| assert_equals(targetOffset.left, container.clientLeft, "left"); |
| }, "absolute position with rtl scrollbars"); |
| |
| </script> |
| |