testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-strict.html

   1 <!DOCTYPE html>
   2 <html  lang="en" >
   3 <head>
   4 <meta charset="utf-8"/>
   5 <title>CSS text, linebreaks: centred punctuation (strict,ja)</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 Japanese, and line-break:strict, a browser will NOT allow a break before one of the centred punctuation characters listed.">
  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 = `30FB  KATAKANA MIDDLE DOT
  25 FF1A  FULLWIDTH COLON
  26 FF1B  FULLWIDTH SEMICOLON
  27 FF65  HALFWIDTH KATAKANA MIDDLE DOT
  28 203C  DOUBLE EXCLAMATION MARK
  29 2047  DOUBLE QUESTION MARK
  30 2048  QUESTION EXCLAMATION MARK
  31 2049  EXCLAMATION QUESTION MARK
  32 FF01  FULLWIDTH EXCLAMATION MARK
  33 FF1F  FULLWIDTH QUESTION MARK`
  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="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
  48          '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<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 ja 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>