| <!doctype html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| writing-mode: vertical-rl; |
| overflow: scroll; |
| position: relative; |
| width: 200px; |
| height: 100px; |
| box-shadow: 0px 0px 12px 0px black; |
| } |
| #target { |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 255, 0, 0.3); |
| } |
| </style> |
| <p>Overflow: child position and size + writing-mode: vertical-rl</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() { |
| assert_equals(target.offsetWidth, container.clientWidth, "width"); |
| assert_equals(target.offsetHeight, container.clientHeight, "height"); |
| var targetOffset = getTargetOffset(); |
| assert_equals(targetOffset.top, container.clientTop, "top"); |
| assert_equals(targetOffset.left, container.clientLeft, "left"); |
| }, "position with scrollbars"); |
| |
| test(function() { |
| container.style.direction = "rtl"; |
| assert_equals(target.offsetWidth, container.clientWidth, "width"); |
| assert_equals(target.offsetHeight, container.clientHeight, "height"); |
| var targetOffset = getTargetOffset(); |
| assert_equals(targetOffset.top, container.clientTop, "top"); |
| assert_equals(targetOffset.left, container.clientLeft, "left"); |
| }, "position with scrollbars + rtl"); |
| </script> |
| |