tor-browser

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

overflow-clip-scroll-size.html (2406B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>overflow: scroll width/height should return overflow size</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
      5 <link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <style>
      9  .parent {
     10    width: 100px;
     11    height: 101px;
     12  }
     13  .child {
     14    width: 200px;
     15    height: 201px;
     16  }
     17  .overflow_clip_and_border {
     18    width: 100px;
     19    height: 101px;
     20    overflow: clip;
     21    border-width: 2px;
     22    border-style: solid;
     23  }
     24 </style>
     25 <div id="parent-clip-both" class="parent" style="overflow: clip">
     26  <div class="child"></div>
     27 </div>
     28 <div id="parent-clip-x" class="parent" style="overflow: clip-x">
     29  <div class="child"></div>
     30 </div>
     31 <div id="parent-clip-y" class="parent" style="overflow: clip-y">
     32  <div class="child"></div>
     33 </div>
     34 
     35 <div id="border-equal-clip" class="parent">
     36  <div class="overflow_clip_and_border"
     37       style="overflow-clip-margin: 2px">
     38    <div class="child"></div>
     39  </div>
     40 </div>
     41 <div id="border-smaller-clip" class="parent">
     42  <div class="overflow_clip_and_border"
     43       style="overflow-clip-margin: 3px">
     44    <div class="child"></div>
     45  </div>
     46 </div>
     47 <div id="border-greater-clip" class="parent">
     48  <div class="overflow_clip_and_border"
     49       style="overflow-clip-margin: 1px">
     50    <div class="child"></div>
     51  </div>
     52 </div>
     53 
     54 <script>
     55 test(() => {
     56  var pClipBoth = document.getElementById("parent-clip-both");
     57  assert_equals(pClipBoth.scrollWidth, 200);
     58  assert_equals(pClipBoth.scrollHeight, 201);
     59 
     60  var pClipX = document.getElementById("parent-clip-x");
     61  assert_equals(pClipX.scrollWidth, 200);
     62  assert_equals(pClipX.scrollHeight, 201);
     63 
     64  var pClipY = document.getElementById("parent-clip-y");
     65  assert_equals(pClipY.scrollWidth, 200);
     66  assert_equals(pClipY.scrollHeight, 201);
     67 }, "scroll size should match that of size specified by overflow: clip");
     68 
     69 test(() => {
     70    assert_equals(document.getElementById("border-equal-clip").scrollWidth,
     71                  104);
     72 
     73    assert_equals(document.getElementById("border-smaller-clip").scrollWidth,
     74                  105);
     75 
     76    assert_equals(document.getElementById("border-greater-clip").scrollWidth,
     77                  104);
     78 }, "scroll size should take into account border size and overflow-clip-margin");
     79 
     80 </script>