tor-browser

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

helper_bug1960053_scroll_snap_align_start.html (2820B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4  <title>testcase</title>
      5  <meta charset="utf-8">
      6  <meta name="viewport" content="initial-scale=1,width=device-width">
      7  <script src="apz_test_utils.js"></script>
      8  <script src="apz_test_native_event_utils.js"></script>
      9  <script src="/tests/SimpleTest/EventUtils.js"></script>
     10  <script src="/tests/SimpleTest/NativeKeyCodes.js"></script>
     11  <script src="/tests/SimpleTest/paint_listener.js"></script>
     12  <style>
     13 <style type="text/css">
     14 
     15 * {
     16  padding:0;
     17  margin:0;
     18  box-sizing: border-box;
     19 }
     20 
     21 body{
     22  overflow: hidden;
     23  display: flex;
     24  align-items: center;
     25  padding: 50px 145px 0 50px;
     26 }
     27 
     28 #list {
     29  height: 500px;
     30  overflow-y: auto;
     31  border: 1px solid #ccc;
     32  width: 500px;
     33  scroll-snap-type: y mandatory;
     34 }
     35 
     36 #list li{
     37  scroll-snap-align: start;
     38 }
     39 
     40 #list input[type="checkbox"]{
     41  position:absolute;
     42  pointer-events: none;
     43  opacity:0;
     44 }
     45 
     46 #list input:checked + label::before{
     47  content: '';
     48  position: absolute;
     49  pointer-events: none;
     50  top: 0;
     51  right:0;
     52  z-index: 1;
     53  width: 100px;
     54  height: 50px;
     55  background-color: rgba(37, 155, 210, 1);
     56  transform: rotate(45deg);
     57  transform-origin: 118px 60px;
     58 }
     59 
     60 #list > ul {
     61  width: 100%;
     62 }
     63 
     64 #list li+li{
     65  border-top: 1px dashed #ccc;
     66 }
     67 
     68 #list li:last-child{
     69  border-bottom: 1px dashed #ccc;
     70 }
     71 
     72 #list li{
     73  position: relative;
     74  display: flex;
     75  flex-direction: column;
     76  overflow: hidden;
     77  height: 70px;
     78 }
     79 
     80 #list label {
     81  height: 100%;
     82 }
     83 #list li:hover{
     84  background:#efefef;
     85 }
     86 
     87 </style>
     88 </head>
     89 <body>
     90 
     91 <div id="list">
     92  <ul></ul>
     93 </div>
     94 <button id="btn">Scroll down</button>
     95 </body>
     96 <script type="text/javascript">
     97 var list = document.getElementById('list');
     98 for(let i = 0; i < 100; i++){
     99  var li = document.createElement('li');
    100  li.innerHTML = `<input type="checkbox" id="d-${i}">
    101    <label for="d-${i}">
    102     ${i}
    103    </label>
    104  `;
    105  list.firstElementChild.appendChild(li);
    106 }
    107 list.scrollTop = 0;
    108 
    109 var btn = document.getElementById('btn');
    110 btn.onclick = () => {
    111  list.scrollTop += 500;
    112 }
    113 
    114 async function test() {
    115  let wheelScrollTransformEndPromise = promiseTransformEnd();
    116 
    117  await promiseMoveMouseAndScrollWheelOver(list, 100, 100, -500);
    118 
    119  await wheelScrollTransformEndPromise;
    120 
    121  await promiseFrame();
    122 
    123  let scrollPromise = promiseScrollend(list);
    124 
    125  await promiseNativeMouseEventWithAPZAndWaitForEvent({
    126    type: "click",
    127    target: btn,
    128    offsetX: 10,
    129    offsetY: 10,
    130  });
    131 
    132  await scrollPromise;
    133 
    134  await promiseFrame();
    135  await promiseFrame();
    136 
    137  let listTop = list.scrollTop;
    138 
    139  await promiseNativeMouseEventWithAPZAndWaitForEvent({
    140    type: "click",
    141    target: list,
    142    offsetX: 50,
    143    offsetY: 50,
    144  });
    145 
    146  await promiseFrame();
    147 
    148  is(listTop, list.scrollTop, "list does not scroll when clicked");
    149 }
    150 
    151 waitUntilApzStable()
    152  .then(test)
    153  .then(subtestDone, subtestFailed);
    154 </script>
    155 </html>