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

   1 <!DOCTYPE html>
   2 <html  lang="en" >
   3 <head>
   4 <meta charset="utf-8"/>
   5 <title>CSS text, linebreaks: iteration (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 an iteration mark.">
  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 = `3005  IDEOGRAPHIC ITERATION MARK
  25 303B  VERTICAL IDEOGRAPHIC ITERATION MARK
  26 309D  HIRAGANA ITERATION MARK
  27 309E  HIRAGANA VOICED ITERATION MARK
  28 30FD  KATAKANA ITERATION MARK
  29 30FE  KATAKANA VOICED ITERATION MARK`
  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="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
  44          '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
  45          '</div>'
  46         }
  47 document.querySelector('body').innerHTML = out
  48 // hide successful tests
  49 for (i=0;i<lines.length;i++) {
  50     if (document.getElementById('testSpan'+i).offsetLeft === document.getElementById('refSpan'+i).offsetLeft) document.getElementById('test'+i).parentNode.style.display = 'none'
  51     }
  52 // run the test framework
  53  for (i=0;i<lines.length;i++) {
  54    test(function() {
  55         assert_true(document.getElementById('testSpan'+i).offsetLeft === document.getElementById('refSpan'+i).offsetLeft);
  56         }, lines[i]+' may NOT appear at line start if ja and strict');
  57    }
  58 </script>
  59 <!--Notes:
  60 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.
  61
  62 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.
  63 -->
  64 </body>
  65 </html>