tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

unreachable-snap-positions-002.html (1955B)

      1 <!DOCTYPE html>
      2 <meta name="viewport" content="width=device-width, initial-scale=1">
      3 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#unreachable" />
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7 .scroller {
      8  width: 100vw;
      9  height: 100px;
     10  display: flex;
     11  scroll-snap-type: x mandatory;
     12  overflow-x: auto;
     13 }
     14 .scroller.rtl {
     15  direction: rtl;
     16 }
     17 .scroller.end > span {
     18  scroll-snap-align: end;
     19 }
     20 .scroller.center > span {
     21  scroll-snap-align: end;
     22 }
     23 </style>
     24 <div class="scroller end">
     25  <span style="min-width:  25px;"></span>
     26  <span style="min-width: 100vw;"></span>
     27 </div>
     28 <div class="scroller center">
     29  <span style="min-width:  25px;"></span>
     30  <span style="min-width: 100vw;"></span>
     31 </div>
     32 <div class="scroller end rtl">
     33  <span style="min-width:  25px;"></span>
     34  <span style="min-width: 100vw;"></span>
     35 </div>
     36 <div class="scroller center rtl">
     37  <span style="min-width:  25px;"></span>
     38  <span style="min-width: 100vw;"></span>
     39 </div>
     40 <script>
     41 
     42 test(() => {
     43  const scroller = document.querySelector(".scroller.end");
     44  assert_equals(scroller.scrollLeft, 0);
     45  assert_equals(scroller.scrollTop, 0);
     46 }, "Unreachable snap point with `scroll-snap-align: end`");
     47 
     48 test(() => {
     49  const scroller = document.querySelector(".scroller.center");
     50  assert_equals(scroller.scrollLeft, 0);
     51  assert_equals(scroller.scrollTop, 0);
     52 }, "Unreachable snap point with `scroll-snap-align: center`");
     53 
     54 test(() => {
     55  const scroller = document.querySelector(".scroller.end.rtl");
     56  assert_equals(scroller.scrollLeft, 0);
     57  assert_equals(scroller.scrollTop, 0);
     58 }, "Unreachable snap point with `scroll-snap-align: end` in RTL");
     59 
     60 test(() => {
     61  const scroller = document.querySelector(".scroller.center.rtl");
     62  assert_equals(scroller.scrollLeft, 0);
     63  assert_equals(scroller.scrollTop, 0);
     64 }, "Unreachable snap point with `scroll-snap-align: center` in RTL");
     65 
     66 </script>
     67 </html>