tor-browser

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

getclientrects-008.html (2337B)

      1 <!DOCTYPE html>
      2 <title>getClientRects on monolithic elements and their container</title>
      3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
      4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getclientrects">
      5 <link rel="help" href="https://drafts.csswg.org/css-multicol/">
      6 <style>
      7  body {
      8    margin: 8px;
      9  }
     10 </style>
     11 <div style="columns:3; column-fill:auto; gap:10px; width:320px; height:100px; background:yellow;">
     12  <div id="container" style="background:gray;">
     13    <div id="monolith1" style="contain:size; width:50%; height:250px; background:cyan;"></div>
     14    <div id="monolith2" style="contain:size; width:50%; height:50px; background:black;"></div>
     15    <div id="monolith3" style="contain:size; width:50%; height:250px; background:hotpink;"></div>
     16  </div>
     17 </div>
     18 <script src="/resources/testharness.js"></script>
     19 <script src="/resources/testharnessreport.js"></script>
     20 <script>
     21  test(()=> {
     22    let rects = monolith1.getClientRects();
     23    assert_equals(rects.length, 1);
     24    assert_equals(rects[0].left, 8);
     25    assert_equals(rects[0].top, 8);
     26    assert_equals(rects[0].width, 50);
     27    assert_equals(rects[0].height, 250);
     28  }, "#monolith1");
     29 
     30  test(()=> {
     31    let rects = monolith2.getClientRects();
     32    assert_equals(rects.length, 1);
     33    assert_equals(rects[0].left, 118);
     34    assert_equals(rects[0].top, 8);
     35    assert_equals(rects[0].width, 50);
     36    assert_equals(rects[0].height, 50);
     37  }, "#monolith2");
     38 
     39  test(()=> {
     40    let rects = monolith3.getClientRects();
     41    assert_equals(rects.length, 1);
     42    assert_equals(rects[0].left, 228);
     43    assert_equals(rects[0].top, 8);
     44    assert_equals(rects[0].width, 50);
     45    assert_equals(rects[0].height, 250);
     46  }, "#monolith3");
     47 
     48  test(()=> {
     49    let rects = container.getClientRects();
     50    assert_equals(rects.length, 3);
     51 
     52    assert_equals(rects[0].left, 8);
     53    assert_equals(rects[0].top, 8);
     54    assert_equals(rects[0].width, 100);
     55    assert_equals(rects[0].height, 250);
     56 
     57    assert_equals(rects[1].left, 118);
     58    assert_equals(rects[1].top, 8);
     59    assert_equals(rects[1].width, 100);
     60    assert_equals(rects[1].height, 100);
     61 
     62    assert_equals(rects[2].left, 228);
     63    assert_equals(rects[2].top, 8);
     64    assert_equals(rects[2].width, 100);
     65    assert_equals(rects[2].height, 250);
     66  }, "#container");
     67 </script>