tor-browser

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

css-text-line-break-zh-in-loose.html (2754B)

      1 <!DOCTYPE html>
      2 <html  lang="en" >
      3 <head>
      4 <meta charset="utf-8"/>
      5 <title>CSS text, linebreaks: IN (loose,zh)</title>
      6 <link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
      7 <link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before an inseparable character.">
     11 <style type="text/css">
     12 :root { text-autospace: no-autospace; }
     13 @font-face {
     14    font-family: 'mplus-1p-regular';
     15    src: url('/fonts/mplus-1p-regular.woff') format('woff');
     16    }
     17 #wrapper { position: relative; }
     18 .test { color: red; }
     19 .test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
     20 </style>
     21 <style>
     22 .test { line-break: loose; }
     23 </style>
     24 <script>
     25 var charlist = `2024  ONE DOT LEADER
     26 2025  TWO DOT LEADER
     27 2026  HORIZONTAL ELLIPSIS
     28 22EF  MIDLINE HORIZONTAL ELLIPSIS
     29 FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
     30 </script>
     31 </head>
     32 <body>
     33 <script>
     34 var lines = charlist.split('\n')
     35 var out = '<div id="log"></div>\n'
     36 for (var i=0;i<lines.length;i++) {
     37 // get the data
     38 var firstSpace = lines[i].indexOf(' ')
     39 var hex = lines[i].substr(0,firstSpace)
     40 var name = lines[i].substr(firstSpace)
     41 // make a test
     42 out +=  '<div class="wrapper"><div>'+hex+'</div>' +
     43 '<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
     44  '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
     45  '</div>'
     46 }
     47 
     48 document.querySelector('body').innerHTML = out
     49 setup({explicit_done: true});
     50 
     51 document.fonts.ready.then(validate);
     52 
     53 function validate() {
     54  for (i=0;i<lines.length;i++) {
     55    test(function() {
     56      assert_approx_equals(
     57        document.getElementById('testSpan'+i).getBoundingClientRect().left,
     58        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
     59      // Hide successful tests.
     60      document.getElementById('test'+i).parentNode.style.display = 'none';
     61    }, lines[i]+' may appear at line start if zh and loose');
     62  }
     63  done();
     64 }
     65 </script>
     66 <!--Notes:
     67 The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
     68 
     69 It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
     70 -->
     71 </body>
     72 </html>