diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html new file mode 100644 index 0000000000..38c207db0d --- /dev/null +++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>CSS text, linebreaks: centred punctuation (loose,zh)</title> +<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before one of the centred punctuation characters listed."> +<style type="text/css"> +@font-face { + font-family: 'mplus-1p-regular'; + src: url('/fonts/mplus-1p-regular.woff') format('woff'); + } +#wrapper { position: relative; } +.test { color: red; } +.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; } +</style> +<style> +.test { line-break: loose; } +</style> +<script> +var charlist = `30FB KATAKANA MIDDLE DOT +FF1A FULLWIDTH COLON +FF1B FULLWIDTH SEMICOLON +FF65 HALFWIDTH KATAKANA MIDDLE DOT +203C DOUBLE EXCLAMATION MARK +2047 DOUBLE QUESTION MARK +2048 QUESTION EXCLAMATION MARK +2049 EXCLAMATION QUESTION MARK +FF01 FULLWIDTH EXCLAMATION MARK +FF1F FULLWIDTH QUESTION MARK` +</script> +</head> +<body> +<script> +var lines = charlist.split('\n') +var out = '<div id="log"></div>\n' +for (var i=0;i<lines.length;i++) { + // get the data + var firstSpace = lines[i].indexOf(' ') + var hex = lines[i].substr(0,firstSpace) + var name = lines[i].substr(firstSpace) + // make a test + out += '<div class="wrapper"><div>'+hex+'</div>' + + '<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' + + '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' + + '</div>' + } + +document.querySelector('body').innerHTML = out +setup({explicit_done: true}); + +document.fonts.ready.then(validate); + +function validate() { + for (i=0;i<lines.length;i++) { + test(function() { + assert_approx_equals( + document.getElementById('testSpan'+i).getBoundingClientRect().left, + document.getElementById('refSpan'+i).getBoundingClientRect().left, 1); + // Hide successful tests. + document.getElementById('test'+i).parentNode.style.display = 'none'; + }, lines[i]+' may appear at line start if zh and loose'); + } + done(); +} +</script> +<!--Notes: +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. + +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. +--> +</body> +</html> |