tor-browser

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

getBoundingClientRect-shy.html (3129B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect">
      3 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
      4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style>
      8 #container {
      9  font-family: Ahem;
     10  font-size: 10px;
     11  line-height: 1;
     12  width: 10ch;
     13 }
     14 </style>
     15 <body>
     16  <div id="container">
     17    <div id="test1">123456&shy;789012</div>
     18    <div id="test2">123456&shy;789012&shy;345678&shy;901234</div>
     19    <div id="test3">12&shy;456&shy;789012</div>
     20    <div>123<span id="test4">&shy;</span>456<span id="test5">&shy;</span>789012</div>
     21  </div>
     22 <script>
     23 function getBoundingClientRect(node, start, end) {
     24  const range = document.createRange();
     25  range.setStart(node, start);
     26  range.setEnd(node, end);
     27  const rect = range.getBoundingClientRect();
     28  return rect;
     29 }
     30 
     31 setup({ explicit_done: true });
     32 
     33 document.fonts.ready.then(() => {
     34  test(() => {
     35    const rect = getBoundingClientRect(test1.firstChild, 0, 5);
     36    assert_equals(rect.width, 50);
     37  }, "Range 0-5 should not include the hyphen.");
     38 
     39  test(() => {
     40    const rect = getBoundingClientRect(test1.firstChild, 1, 5);
     41    assert_equals(rect.width, 40);
     42  }, "Range 1-5 should not include the hyphen.");
     43 
     44  test(() => {
     45    const rect = getBoundingClientRect(test1.firstChild, 0, 6);
     46    assert_equals(rect.width, 60);
     47  }, "Range 0-6 should not include the hyphen.");
     48 
     49  test(() => {
     50    const rect = getBoundingClientRect(test1.firstChild, 1, 6);
     51    assert_equals(rect.width, 50);
     52  }, "Range 1-6 should not include the hyphen.");
     53 
     54  test(() => {
     55    const rect = getBoundingClientRect(test1.firstChild, 0, 7);
     56    assert_equals(rect.width, 70);
     57  }, "Range 0-7 should include the hyphen.");
     58 
     59  test(() => {
     60    const rect = getBoundingClientRect(test1.firstChild, 1, 7);
     61    assert_equals(rect.width, 60);
     62  }, "Range 1-7 should include the hyphen.");
     63 
     64  test(() => {
     65    const rect = getBoundingClientRect(test1.firstChild, 0, 8);
     66    assert_equals(rect.width, 70);
     67    assert_equals(rect.height, 20);
     68  }, "Range 0-8 should include the hyphen.");
     69 
     70  test(() => {
     71    const rect = getBoundingClientRect(test2.firstChild, 0, 8);
     72    assert_equals(rect.width, 70);
     73    assert_equals(rect.height, 20);
     74  }, "Range 0-8 should include only the first hyphen.");
     75 
     76  test(() => {
     77    const rect = getBoundingClientRect(test3.firstChild, 2, 3);
     78    assert_equals(rect.width, 0);
     79  }, "Collapsed soft-hyphen should be 0 width.");
     80 
     81  test(() => {
     82    const rect = getBoundingClientRect(test3.firstChild, 6, 7);
     83    assert_equals(rect.width, 10);
     84  }, "Rendered soft-hyphen should have a width.");
     85 
     86  test(() => {
     87    const rect = getBoundingClientRect(test4.firstChild, 0, 1);
     88    assert_equals(rect.width, 0);
     89  }, "Collapsed soft-hyphen in a span should be 0 width.");
     90 
     91  test(() => {
     92    const rect = getBoundingClientRect(test5.firstChild, 0, 1);
     93    assert_equals(rect.width, 10);
     94  }, "Rendered soft-hyphen in a span should have a width.");
     95 
     96  done();
     97 });
     98 </script>
     99 </body>