tor-browser

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

snap-to-combination-of-two-elements-2.tentative.html (2332B)

      1 <!DOCTYPE html>
      2 <meta name="viewport" content="width=device-width">
      3 <title>
      4  Snap to points of combinations of two different elements
      5 </title>
      6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/"/>
      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 #scroller {
     16  height: 600px;
     17  width: 600px;
     18  overflow: hidden;
     19  scroll-snap-type: both mandatory;
     20 }
     21 
     22 #space {
     23  width: 2000px;
     24  height: 2000px;
     25 }
     26 
     27 #left-top {
     28  /*
     29   * the scroll position of this `scroll-snap-align: start start` is (200, 200)
     30   */
     31  left: 200px;
     32  top: 200px;
     33  height: 450px;
     34  width: 450px;
     35  background-color: rgb(255, 0, 0);
     36  opacity: 0.5;
     37  scroll-snap-align: start start;
     38 }
     39 
     40 #right-bottom {
     41  /*
     42   * the scroll position of this `scroll-snap-align: end end` is (50, 250),
     43   * i.e, (`left` - scroll container's `width`  + this element's `width,
     44           `top`  - scroll container's `height` + this element's `height)
     45   */
     46  left: 600px;
     47  top: 800px;
     48  width: 50px;
     49  height: 50px;
     50  background-color: rgb(0, 255, 0);
     51  opacity: 0.5;
     52  scroll-snap-align: end end;
     53 }
     54 
     55 </style>
     56 <div id="scroller">
     57  <div id="space"></div>
     58  <div id="left-top"></div>
     59  <div id="right-bottom"></div>
     60 </div>
     61 <script>
     62 test(t => {
     63  // There are four combinations of snap positions defined by #top-left and
     64  // #right-bottom elements.
     65  // (200, 200), (50, 250), (200, 250) and (50, 200).
     66  // But snapping to (50, 200) leaves the snap area of #right-bottom element
     67  // outside of the snapport, thus it won't be a valid snap position.
     68  const scroller = document.getElementById("scroller");
     69 
     70  // The nearest valid snap position from (0, 0) is (50, 250).
     71  assert_equals(scroller.scrollLeft, 50);
     72  assert_equals(scroller.scrollTop, 250);
     73 
     74  // (50, 200) is not valid, thus the nearest one from (100, 150) is (200, 200).
     75  scroller.scrollTo(100, 150);
     76  assert_equals(scroller.scrollLeft, 200);
     77  assert_equals(scroller.scrollTop, 200);
     78 
     79  scroller.scrollTo(300, 300);
     80  assert_equals(scroller.scrollLeft, 200);
     81  assert_equals(scroller.scrollTop, 250);
     82 
     83  scroller.scrollTo(200, 100);
     84  assert_equals(scroller.scrollLeft, 200);
     85  assert_equals(scroller.scrollTop, 200);
     86 }, 'Snap to points of combinations of two different elements');
     87 </script>