tor-browser

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

snap-area-capturing-add-scroll-container.html (4461B)

      1 <!DOCTYPE html>
      2 <title>
      3  Adding a scrollable element should make it start capturing snap points.
      4 </title>
      5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"/>
      6 <meta name="viewport" content="user-scalable=no">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <style>
     10 div {
     11  position: absolute;
     12  margin: 0px;
     13 }
     14 
     15 html {
     16  scroll-snap-type: y mandatory;
     17 }
     18 
     19 body {
     20  margin: 0px;
     21 }
     22 
     23 #middle-scroller {
     24  top: 100px;
     25  height: 500px;
     26  width: 500px;
     27  overflow: visible;
     28  background-color: rgb(12, 61, 2);
     29  scroll-snap-type: none;
     30 }
     31 
     32 #inner-scroller {
     33  top: 200px;
     34  height: 400px;
     35  width: 400px;
     36  overflow: visible;
     37  background-color: rgb(65, 139, 50);
     38  scroll-snap-type: y mandatory;
     39 }
     40 
     41 .space {
     42  width: 2000px;
     43  height: 2000px;
     44 }
     45 
     46 #inner-snap-area {
     47  top: 300px;
     48  width: 200px;
     49  height: 200px;
     50  background-color: blue;
     51  scroll-snap-align: start;
     52 }
     53 
     54 #document-snap-area {
     55  top: 500px;
     56  width: 200px;
     57  height: 200px;
     58  background-color: lightblue;
     59  scroll-snap-align: start;
     60 }
     61 
     62 #inserted-snap-container {
     63  top: 400px;
     64  height: 600px;
     65  width: 400px;
     66  overflow: scroll;
     67  scroll-snap-type: y mandatory;
     68 }
     69 </style>
     70 
     71 <div class="space"></div>
     72  <div id="middle-scroller">
     73    <div class="space"></div>
     74    <div id="inner-scroller">
     75        <div class="space"></div>
     76        <div id="inner-snap-area"></div>
     77    </div>
     78  </div>
     79 </div>
     80 <div id="document-snap-area"></div>
     81 <script>
     82 
     83 const inner_scroller = document.getElementById("inner-scroller");
     84 const middle_scroller = document.getElementById("middle-scroller");
     85 const document_scroller = document.scrollingElement;
     86 
     87 // This tests that making an element scrollable will reassign the correct snap
     88 // areas to itself, per spec [1].
     89 // [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions
     90 test(() => {
     91  // Confirm that the document-level scroller is the snap container for all of
     92  // the snap areas.
     93  document_scroller.scrollTo(0, 10);
     94  assert_equals(document_scroller.scrollTop, 500);
     95  // Snaps to the inner snap area.
     96  document_scroller.scrollBy(0, 75);
     97  assert_equals(document_scroller.scrollTop, 600);
     98 
     99  // The middle scroller should now have the inner snap area assigned to it.
    100  // Per spec, even if the snap-type is 'none', it should still capture snap
    101  // points.
    102  middle_scroller.style.setProperty("overflow", "scroll");
    103 
    104  // The middle scroller has snap-type 'none' so it should not snap.
    105  middle_scroller.scrollBy(0, 10);
    106  assert_equals(middle_scroller.scrollTop, 10);
    107 
    108  // The document scroller should only snap to the document-level snap area.
    109  document_scroller.scrollTo(0, 600);
    110  assert_equals(document_scroller.scrollTop, 500);
    111 
    112  // The inner scroller should now have the innermost snap area assigned to it.
    113  inner_scroller.style.setProperty("overflow", "scroll");
    114  inner_scroller.scrollBy(0, 10);
    115  assert_equals(inner_scroller.scrollTop, 300);
    116 
    117  document_scroller.scrollTo(0, 600);
    118  assert_equals(document_scroller.scrollTop, 500);
    119 
    120 }, "Making an element scrollable should make it capture the correct descendant\
    121 snap areas' snap points.");
    122 
    123 // Test that attaching a new snap container also properly assigns snap areas.
    124 test(() => {
    125  // All containers should capture snap areas.
    126  middle_scroller.style.setProperty("overflow", "scroll");
    127  inner_scroller.style.setProperty("overflow", "scroll");
    128 
    129  // Sanity check that the scrollers still snap to the snap areas.
    130  document_scroller.scrollTo(0, 10);
    131  inner_scroller.scrollTo(0,10);
    132  assert_equals(inner_scroller.scrollTop, 300);
    133  assert_equals(document_scroller.scrollTop, 500);
    134 
    135  // Create new snap container and append thedocument-level snap area as its
    136  // child.
    137  const inserted_scroller = document.createElement("div");
    138  inserted_scroller.id = "inserted-snap-container";
    139  const space = document.createElement("div");
    140  space.classList.add("space");
    141  inserted_scroller.appendChild(space);
    142  inserted_scroller.appendChild(document.getElementById("document-snap-area"));
    143  document_scroller.appendChild(inserted_scroller);
    144 
    145  // Document scroller no longer snaps.
    146  document_scroller.scrollTo(0, 400);
    147  assert_equals(document_scroller.scrollTop, 400);
    148 
    149  // Inserted scroller snaps.
    150  inserted_scroller.scrollTo(0, 10);
    151  assert_equals(inserted_scroller.scrollTop, 500);
    152 }, "Attaching a new element that is scrollable should assign the correct snap\
    153 areas to it.");
    154 </script>