tor-browser

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

css-text-line-break-de-po-strict.html (2838B)

      1 <!DOCTYPE html>
      2 <html  lang="en" >
      3 <head>
      4 <meta charset="utf-8"/>
      5 <title>CSS text, linebreaks: PO AFW (strict,de)</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 neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
     11 <style type="text/css">
     12 @font-face {
     13    font-family: 'mplus-1p-regular';
     14    src: url('/fonts/mplus-1p-regular.woff') format('woff');
     15    }
     16 #wrapper { position: relative; }
     17 .test { color: red; }
     18 .test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
     19 </style>
     20 <style>
     21 .test { line-break: strict; }
     22 </style>
     23 <script>
     24 var charlist = `00B0  DEGREE SIGN
     25 2030  PER MILLE SIGN
     26 2032  PRIME
     27 2033  DOUBLE PRIME
     28 2035  REVERSED PRIME
     29 2103  DEGREE CELSIUS
     30 2109  DEGREE FAHRENHEIT
     31 FE6A  SMALL PERCENT SIGN
     32 FF05  FULLWIDTH PERCENT SIGN
     33 FFE0  FULLWIDTH CENT SIGN`
     34 </script>
     35 </head>
     36 <body>
     37 <script>
     38 var lines = charlist.split('\n')
     39 var out = '<div id="log"></div>\n'
     40 for (var i=0;i<lines.length;i++) {
     41 // get the data
     42 var firstSpace = lines[i].indexOf(' ')
     43 var hex = lines[i].substr(0,firstSpace)
     44 var name = lines[i].substr(firstSpace)
     45 // make a test
     46 out +=  '<div class="wrapper"><div>'+hex+'</div>' +
     47 '<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
     48  '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
     49  '</div>'
     50 }
     51 
     52 document.querySelector('body').innerHTML = out
     53 setup({explicit_done: true});
     54 
     55 document.fonts.ready.then(validate);
     56 
     57 function validate() {
     58  for (i=0;i<lines.length;i++) {
     59    test(function() {
     60      assert_approx_equals(
     61        document.getElementById('testSpan'+i).getBoundingClientRect().left,
     62        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
     63      // Hide successful tests.
     64      document.getElementById('test'+i).parentNode.style.display = 'none';
     65    }, lines[i]+' may NOT appear at line start if de and strict');
     66  }
     67  done();
     68 }
     69 </script>
     70 <!--Notes:
     71 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.
     72 
     73 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.
     74 -->
     75 </body>
     76 </html>