| <!DOCTYPE html> |
| <head> |
| <title> |
| Bug 226572: [css-scroll-snap] Scroll snap offsets are interpreted as scroll positions in ScrollableArea |
| </title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| </script> |
| <style> |
| .scroller { |
| scroll-snap-type: both mandatory; |
| overflow: hidden; |
| scroll-padding: 0; |
| width: 50px; |
| height: 50px; |
| border: solid silver; |
| border-block-start-color: blue; |
| border-inline-start-color: blue; |
| } |
| .area { |
| width: 200px; |
| height: 200px; |
| } |
| |
| .target { |
| margin: 5px; |
| scroll-snap-align: start; |
| } |
| |
| .small .target { |
| width: 30px; |
| height: 30px; |
| background: orange; |
| } |
| |
| .TB { writing-mode: horizontal-tb; } |
| .LR { writing-mode: vertical-lr; } |
| .RL { writing-mode: vertical-rl; } |
| .ltr { direction: ltr; } |
| .rtl { direction: rtl; } |
| </style> |
| </head> |
| |
| <body> |
| <p>Test to verify that snapping after layout of right-to-left content works properly. All inner |
| boxes should be snug against the edge of their containers.</p> |
| <div id="log"></div> |
| |
| <div class="wrapper"> |
| <div id="scroller1" class="scroller RL ltr small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div id="scroller2" class="scroller TB rtl small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div id="scroller3" class="scroller LR rtl small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div id="scroller4" class="scroller RL rtl small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| test(function() { |
| assert_equals(scroller1.scrollLeft, -5); |
| assert_equals(scroller1.scrollTop, 5); |
| }, "Initial snapping in scroll area with writing-mode: vertical-rl and direction: ltr"); |
| |
| test(function() { |
| assert_equals(scroller2.scrollLeft, -5); |
| assert_equals(scroller2.scrollTop, 5); |
| }, "Initial snapping in scroll area with writing-mode: horizontal-tb and direction: rtl"); |
| |
| test(function() { |
| assert_equals(scroller3.scrollLeft, 5); |
| assert_equals(scroller3.scrollTop, -5); |
| }, "Initial snapping in scroll area with writing-mode: vertical-lr and direction: rtl"); |
| |
| test(function() { |
| assert_equals(scroller4.scrollLeft, -5); |
| assert_equals(scroller4.scrollTop, -5); |
| }, "Initial snapping in scroll area with writing-mode: vertical-rl and direction: rtl"); |
| </script> |
| |
| </body> |
| </html> |
| |
