tor-browser

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

scrollIntoView-container.html (2717B)

      1 <!DOCTYPE html>
      2 <title>CSSOM View - scrollIntoView container option</title>
      3 <meta charset="utf-8">
      4 <meta name="viewport" content="initial-scale=1">
      5 <link rel="author" title="Rob Flack" href="mailto:flackr@chromium.org">
      6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <style>
     10 .scroller {
     11  overflow: auto;
     12  height: 200px;
     13 }
     14 .spacer {
     15  height: 400px;
     16 }
     17 #target {
     18  height: 200px;
     19 }
     20 </style>
     21 <script>
     22 let setFrameLoaded = null;
     23 let frameLoaded = new Promise(resolve => {
     24  setFrameLoaded = resolve;
     25 });
     26 </script>
     27 <div id="outer" class="scroller">
     28  <div class="spacer"></div>
     29  <div id="inner" class="scroller">
     30    <div class="spacer"></div>
     31    <div id="target"></div>
     32    <iframe id="frame" height="200" src="resources/scrollIntoView-frame.html" onload="setFrameLoaded()"></iframe>
     33  </div>
     34 </div>
     35 <script>
     36 const outer = document.getElementById('outer');
     37 const inner = document.getElementById('inner');
     38 const target = document.getElementById('target');
     39 
     40 function reset() {
     41  outer.scrollTop = 0;
     42  inner.scrollTop = 0;
     43 }
     44 
     45 test(() => {
     46  reset();
     47  target.scrollIntoView();
     48  assert_equals(inner.scrollTop, 400, '#inner scrollTop');
     49  assert_equals(outer.scrollTop, 400, '#outer scrollTop');
     50 }, `scrollIntoView() defaults to scrolling ancestors`);
     51 
     52 test(() => {
     53  reset();
     54  target.scrollIntoView({container: 'all'});
     55  assert_equals(inner.scrollTop, 400, '#inner scrollTop');
     56  assert_equals(outer.scrollTop, 400, '#outer scrollTop');
     57 }, `scrollIntoView({container: 'all'}) scrolls ancestors`);
     58 
     59 test(() => {
     60  reset();
     61  target.scrollIntoView({container: 'nearest'});
     62  assert_equals(inner.scrollTop, 400, '#inner scrollTop');
     63  assert_equals(outer.scrollTop, 0, '#outer scrollTop');
     64 }, `scrollIntoView({container: 'nearest'}) only scrolls nearest scroll container`);
     65 
     66 test(() => {
     67  reset();
     68  inner.scrollIntoView({container: 'nearest'});
     69  assert_equals(outer.scrollTop, 400, '#outer scrollTop');
     70  assert_equals(inner.scrollTop, 0, '#inner scrollTop');
     71 }, `scrollIntoView({container: 'nearest'}) doesn't stop at itself`);
     72 
     73 promise_test(async () => {
     74  reset();
     75  await frameLoaded;
     76  const frameDoc = document.getElementById("frame").contentDocument;
     77  const frameTarget = frameDoc.getElementById("target");
     78  frameTarget.scrollIntoView({container: 'nearest'});
     79  assert_equals(frameDoc.scrollingElement.scrollTop, 400, 'frame scrollingElement scrollTop');
     80  assert_equals(inner.scrollTop, 0, '#inner scrollTop');
     81  assert_equals(outer.scrollTop, 0, '#outer scrollTop');
     82 }, `scrollIntoView({container: 'nearest'}) doesn't propagate to outer frames`);
     83 
     84 </script>