tor-browser

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

getclientrects-001.html (8030B)

      1 <!DOCTYPE html>
      2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
      3 <link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects">
      4 <link rel="help" href="https://drafts.csswg.org/css-multicol/">
      5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      6 <style>
      7  .multicol {
      8      visibility: hidden;
      9      position: absolute;
     10      left: 100px;
     11      top: 50px;
     12      columns: 3;
     13      column-gap: 10px;
     14      inline-size: 290px;
     15      font: 20px/1 Ahem;
     16      orphans: 1;
     17      widows: 1;
     18  }
     19  #horizontalTbLtr {
     20      writing-mode: horizontal-tb;
     21  }
     22  #verticalLrLtr {
     23      writing-mode: vertical-lr;
     24  }
     25  #verticalRlLtr {
     26      writing-mode: vertical-rl;
     27  }
     28  #sidewaysLrLtr {
     29      writing-mode: sideways-lr;
     30  }
     31  #sidewaysRlLtr {
     32      writing-mode: sideways-rl;
     33  }
     34  #horizontalTbRtl {
     35      writing-mode: horizontal-tb;
     36      direction: rtl;
     37  }
     38  #verticalLrRtl {
     39      writing-mode: vertical-lr;
     40      direction: rtl;
     41  }
     42  #verticalRlRtl {
     43      writing-mode: vertical-rl;
     44      direction: rtl;
     45  }
     46  #sidewaysLrRtl {
     47      writing-mode: sideways-lr;
     48      direction: rtl;
     49  }
     50  #sidewaysRlRtl {
     51      writing-mode: sideways-rl;
     52      direction: rtl;
     53  }
     54 </style>
     55 <div class="multicol" id="horizontalTbLtr">
     56  <br>
     57  <span>XXXX XXXX XXXX XXXX</span>
     58 </div>
     59 <div class="multicol" id="verticalLrLtr">
     60  <br>
     61  <span>XXXX XXXX XXXX XXXX</span>
     62 </div>
     63 <div class="multicol" id="verticalRlLtr">
     64  <br>
     65  <span>XXXX XXXX XXXX XXXX</span>
     66 </div>
     67 <div class="multicol" id="sidewaysLrLtr">
     68  <br>
     69  <span>XXXX XXXX XXXX XXXX</span>
     70 </div>
     71 <div class="multicol" id="sidewaysRlLtr">
     72  <br>
     73  <span>XXXX XXXX XXXX XXXX</span>
     74 </div>
     75 <div class="multicol" id="horizontalTbRtl" >
     76  <br>
     77  <span>XXXX XXXX XXXX XXXX</span>
     78 </div>
     79 <div class="multicol" id="verticalLrRtl">
     80  <br>
     81  <span>XXXX XXXX XXXX XXXX</span>
     82 </div>
     83 <div class="multicol" id="verticalRlRtl">
     84  <br>
     85  <span>XXXX XXXX XXXX XXXX</span>
     86 </div>
     87 <div class="multicol" id="sidewaysLrRtl">
     88  <br>
     89  <span>XXXX XXXX XXXX XXXX</span>
     90 </div>
     91 <div class="multicol" id="sidewaysRlRtl">
     92  <br>
     93  <span>XXXX XXXX XXXX XXXX</span>
     94 </div>
     95 <script src="/resources/testharness.js"></script>
     96 <script src="/resources/testharnessreport.js"></script>
     97 <script>
     98  const LEFT = 100;
     99  const TOP = 50;
    100  const LINE = 20;
    101  const COLUMN = 90;
    102  const GAP = 10;
    103  const TEXT_SIZE = 80;
    104 
    105  setup({ explicit_done: true });
    106 
    107  document.fonts.ready.then(() => {
    108    test(()=> {
    109      var span = document.querySelector("#horizontalTbLtr span");
    110      var rects = span.getClientRects();
    111      assert_equals(rects.length, 4);
    112      assert_equals(rects[0].left, 100);
    113      assert_equals(rects[0].top, 70);
    114      assert_equals(rects[1].left, 200);
    115      assert_equals(rects[1].top, 50);
    116      assert_equals(rects[2].left, 200);
    117      assert_equals(rects[2].top, 70);
    118      assert_equals(rects[3].left, 300);
    119      assert_equals(rects[3].top, 50);
    120    }, "horizontal-tb ltr");
    121 
    122    test(()=> {
    123      var span = document.querySelector("#verticalLrLtr span");
    124      var rects = span.getClientRects();
    125      assert_equals(rects.length, 4);
    126      assert_equals(rects[0].left, 120);
    127      assert_equals(rects[0].top, 50);
    128      assert_equals(rects[1].left, 100);
    129      assert_equals(rects[1].top, 150);
    130      assert_equals(rects[2].left, 120);
    131      assert_equals(rects[2].top, 150);
    132      assert_equals(rects[3].left, 100);
    133      assert_equals(rects[3].top, 250);
    134    }, "vertical-lr ltr");
    135 
    136    test(()=> {
    137      var span = document.querySelector("#verticalRlLtr span");
    138      var rects = span.getClientRects();
    139      assert_equals(rects.length, 4);
    140      assert_equals(rects[0].left, 100);
    141      assert_equals(rects[0].top, 50);
    142      assert_equals(rects[1].left, 120);
    143      assert_equals(rects[1].top, 150);
    144      assert_equals(rects[2].left, 100);
    145      assert_equals(rects[2].top, 150);
    146      assert_equals(rects[3].left, 120);
    147      assert_equals(rects[3].top, 250);
    148    }, "vertical-rl ltr");
    149 
    150    test(()=> {
    151      var span = document.querySelector("#sidewaysLrLtr span");
    152      var rects = span.getClientRects();
    153      assert_equals(rects.length, 4);
    154      assert_equals(rects[0].left, LEFT + LINE);
    155      assert_equals(rects[0].top, TOP + COLUMN * 3 + GAP * 2 - TEXT_SIZE);
    156      assert_equals(rects[1].left, LEFT);
    157      assert_equals(rects[1].top, TOP + COLUMN * 2 + GAP - TEXT_SIZE);
    158      assert_equals(rects[2].left, LEFT + LINE);
    159      assert_equals(rects[2].top, TOP + COLUMN * 2 + GAP - TEXT_SIZE);
    160      assert_equals(rects[3].left, LEFT);
    161      assert_equals(rects[3].top, TOP + COLUMN - TEXT_SIZE);
    162    }, "sideways-lr ltr");
    163 
    164    test(()=> {
    165      var span = document.querySelector("#sidewaysRlLtr span");
    166      var rects = span.getClientRects();
    167      assert_equals(rects.length, 4);
    168      assert_equals(rects[0].left, LEFT);
    169      assert_equals(rects[0].top, TOP);
    170      assert_equals(rects[1].left, LEFT + LINE);
    171      assert_equals(rects[1].top, TOP + COLUMN + GAP);
    172      assert_equals(rects[2].left, LEFT);
    173      assert_equals(rects[2].top, TOP + COLUMN + GAP);
    174      assert_equals(rects[3].left, LEFT + LINE);
    175      assert_equals(rects[3].top, TOP + COLUMN * 2 + GAP * 2);
    176    }, "sideways-rl ltr");
    177 
    178    test(()=> {
    179      var span = document.querySelector("#horizontalTbRtl span");
    180      var rects = span.getClientRects();
    181      assert_equals(rects.length, 4);
    182      assert_equals(rects[0].left, 310);
    183      assert_equals(rects[0].top, 70);
    184      assert_equals(rects[1].left, 210);
    185      assert_equals(rects[1].top, 50);
    186      assert_equals(rects[2].left, 210);
    187      assert_equals(rects[2].top, 70);
    188      assert_equals(rects[3].left, 110);
    189      assert_equals(rects[3].top, 50);
    190    }, "horizontal-tb rtl");
    191 
    192    test(()=> {
    193      var span = document.querySelector("#verticalLrRtl span");
    194      var rects = span.getClientRects();
    195      assert_equals(rects.length, 4);
    196      assert_equals(rects[0].left, 120);
    197      assert_equals(rects[0].top, 260);
    198      assert_equals(rects[1].left, 100);
    199      assert_equals(rects[1].top, 160);
    200      assert_equals(rects[2].left, 120);
    201      assert_equals(rects[2].top, 160);
    202      assert_equals(rects[3].left, 100);
    203      assert_equals(rects[3].top, 60);
    204    }, "vertical-lr rtl");
    205 
    206    test(()=> {
    207      var span = document.querySelector("#verticalRlRtl span");
    208      var rects = span.getClientRects();
    209      assert_equals(rects.length, 4);
    210      assert_equals(rects[0].left, 100);
    211      assert_equals(rects[0].top, 260);
    212      assert_equals(rects[1].left, 120);
    213      assert_equals(rects[1].top, 160);
    214      assert_equals(rects[2].left, 100);
    215      assert_equals(rects[2].top, 160);
    216      assert_equals(rects[3].left, 120);
    217      assert_equals(rects[3].top, 60);
    218    }, "vertical-rl rtl");
    219 
    220    test(()=> {
    221      var span = document.querySelector("#sidewaysLrRtl span");
    222      var rects = span.getClientRects();
    223      assert_equals(rects.length, 4);
    224      assert_equals(rects[0].left, LEFT + LINE);
    225      assert_equals(rects[0].top, TOP);
    226      assert_equals(rects[1].left, LEFT);
    227      assert_equals(rects[1].top, TOP + COLUMN + GAP);
    228      assert_equals(rects[2].left, LEFT + LINE);
    229      assert_equals(rects[2].top, TOP + COLUMN + GAP);
    230      assert_equals(rects[3].left, LEFT);
    231      assert_equals(rects[3].top, TOP + COLUMN + GAP + COLUMN + GAP);
    232    }, "sideways-lr rtl");
    233 
    234    test(()=> {
    235      var span = document.querySelector("#sidewaysRlRtl span");
    236      var rects = span.getClientRects();
    237      assert_equals(rects.length, 4);
    238      assert_equals(rects[0].left, LEFT);
    239      assert_equals(rects[0].top, TOP + COLUMN * 3 + GAP * 2 - TEXT_SIZE);
    240      assert_equals(rects[1].left, LEFT + LINE);
    241      assert_equals(rects[1].top, TOP + COLUMN * 2 + GAP - TEXT_SIZE);
    242      assert_equals(rects[2].left, LEFT);
    243      assert_equals(rects[2].top, TOP + COLUMN * 2 + GAP - TEXT_SIZE);
    244      assert_equals(rects[3].left, LEFT + LINE);
    245      assert_equals(rects[3].top, TOP + COLUMN - TEXT_SIZE);
    246    }, "sideways-rl rtl");
    247 
    248    done();
    249  });
    250 </script>