tor-browser

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

scrollintoview.html (4210B)

      1 <!DOCTYPE html>
      2 <title>CSSOM View - scrollIntoView</title>
      3 <meta charset="utf-8">
      4 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
      5 <link rel="author" title="Chris Wu" href="mailto:pwx.frontend@gmail.com">
      6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
      7 <link rel="help" href="https://webidl.spec.whatwg.org/#es-operations">
      8 <link rel="help" href="https://webidl.spec.whatwg.org/#es-overloads">
      9 <meta name="flags" content="dom">
     10 <script src="/resources/testharness.js"></script>
     11 <script src="/resources/testharnessreport.js"></script>
     12 <style>
     13 body.running { margin: 0; padding: 4000px; overflow: hidden }
     14 body.running #testDiv {
     15  width: 200px;
     16  height: 200px;
     17  background-color: lightgreen;
     18 }
     19 </style>
     20 <body class=running>
     21 <div id=testDiv></div>
     22 <div id="log"></div>
     23 <script>
     24 var testDiv = document.getElementById('testDiv');
     25 
     26 var expectedXLeft = 4000;
     27 var expectedXRight = 4000 - window.innerWidth + testDiv.clientWidth;
     28 var expectedXCenter = 4000 - (window.innerWidth / 2) + (testDiv.clientWidth / 2);
     29 
     30 var expectedYTop = 4000;
     31 var expectedYBottom = 4000 - window.innerHeight + testDiv.clientHeight;
     32 var expectedYCenter = 4000 - (window.innerHeight / 2) + (testDiv.clientHeight / 2);
     33 
     34 [
     35  ["omitted argument", "nearest", expectedYTop],
     36  [true, "nearest", expectedYTop],
     37  [false, "nearest", expectedYBottom],
     38  [undefined, "nearest", expectedYTop],
     39  [null, "nearest", expectedYTop],
     40  [{}, "nearest", expectedYTop],
     41  [{block: "center", inline: "center"}, expectedXCenter, expectedYCenter],
     42  [{block: "start", inline: "start"}, expectedXLeft, expectedYTop],
     43  [{block: "end", inline: "end"}, expectedXRight, expectedYBottom],
     44  [{block: "nearest", inline: "nearest"}, "nearest", "nearest"],
     45 ].forEach(([input, expectedX, expectedY]) => {
     46  test(() => {
     47    window.scrollTo(0, 0);
     48    testScrollIntoView(input);
     49    var x = (expectedX === "nearest") ? expectedXRight : expectedX;
     50    var y = (expectedY === "nearest") ? expectedYBottom : expectedY;
     51    assert_approx_equals(window.scrollX, x, 0.5, 'scrollX');
     52    assert_approx_equals(window.scrollY, y, 0.5, 'scrollY');
     53  }, `scrollIntoView(${format_input(input)}) starting at left,top`);
     54 
     55  test(() => {
     56    window.scrollTo(0, 12000);
     57    testScrollIntoView(input);
     58    var x = (expectedX === "nearest") ? expectedXRight : expectedX;
     59    var y = (expectedY === "nearest") ? expectedYTop : expectedY;
     60    assert_approx_equals(window.scrollX, x, 0.5, 'scrollX');
     61    assert_approx_equals(window.scrollY, y, 0.5, 'scrollY');
     62  }, `scrollIntoView(${format_input(input)}) starting at left,bottom`);
     63 
     64  test(() => {
     65    window.scrollTo(12000, 0);
     66    testScrollIntoView(input);
     67    var x = (expectedX === "nearest") ? expectedXLeft : expectedX;
     68    var y = (expectedY === "nearest") ? expectedYBottom : expectedY;
     69    assert_approx_equals(window.scrollX, x, 0.5, 'scrollX');
     70    assert_approx_equals(window.scrollY, y, 0.5, 'scrollY');
     71  }, `scrollIntoView(${format_input(input)}) starting at right,top`);
     72 
     73  test(() => {
     74    window.scrollTo(12000, 12000);
     75    testScrollIntoView(input);
     76    var x = (expectedX === "nearest") ? expectedXLeft : expectedX;
     77    var y = (expectedY === "nearest") ? expectedYTop : expectedY;
     78    assert_approx_equals(window.scrollX, x, 0.5, 'scrollX');
     79    assert_approx_equals(window.scrollY, y, 0.5, 'scrollY');
     80  }, `scrollIntoView(${format_input(input)}) starting at right,bottom`);
     81 });
     82 
     83 function testScrollIntoView(input) {
     84  if (input === "omitted argument") {
     85    testDiv.scrollIntoView();
     86  } else {
     87    testDiv.scrollIntoView(input);
     88  }
     89 }
     90 
     91 // This formats dict as a string suitable as test name.
     92 // format_value() is provided by testharness.js,
     93 // which also preserves sign for -0.
     94 function format_dict(dict) {
     95  const props = [];
     96  for (let prop in dict) {
     97    props.push(`${prop}: ${format_value(dict[prop])}`);
     98  }
     99  return `{${props.join(', ')}}`;
    100 }
    101 
    102 function format_input(input) {
    103  if (input === "omitted argument") {
    104    return "";
    105  } else if (input === null || typeof input !== "object") {
    106    return format_value(input);
    107  }
    108  return format_dict(input);
    109 }
    110 
    111 document.body.classList.remove('running');
    112 window.scrollTo(0, 0);
    113 </script>