<!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>