mirror of
https://github.com/servo/servo.git
synced 2025-08-23 14:25:33 +01:00
Update web-platform-tests to revision 3f3849c5d05f9350fad0b06d3bb3ae30d7e18d14
This commit is contained in:
WPT Sync Bot
parent
9a7e2663e8
commit
f767403c00
310 changed files with 8134 additions and 895 deletions
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (loose,ja)</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 Japanese, and line-break:loose, a browser allows a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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 = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if ja and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (normal,ja)</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 Japanese, and line-break:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if ja and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (strict,ja)</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 Japanese, and line-break:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if ja and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Line-break:loose, Conditional Japanese Starter (CJ) (de)</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="The browser allows a conditional Japanese starter at the beginning of a line; the langauge not being Chinese or Japanese makes no difference.">
|
||||
<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 = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if de and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Line-break:normal, Conditional Japanese Starter (CJ) (de)</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="The browser allows a conditional Japanese starter at the beginning of a line; the langauge not being Chinese or Japanese makes no difference.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if de and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>line-break:strict, Conditional Japanese Starter (CJ) (de)</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="With line-break:strict, a browser will NOT allow a conditional Japanese starter at the beginning of a line; the langauge not being Chinese or Japanese makes no difference.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: centred punctuation (loose,de)</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 neither Japanese nor Chinese, and line-break:loose, a browser will NOT allow 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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: centred punctuation (normal,de)</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 neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow 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: normal; }
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: centred punctuation (strict,de)</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 neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow 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: strict; }
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS3 Text, linebreaks: hyphens (loose,de)</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 neither Japanese nor Chinese, and line-break:loose, a browser will NOT allow a break before a hyphen.">
|
||||
<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 = `2010 HYPHEN
|
||||
2013 EN DASH
|
||||
301C WAVE DASH
|
||||
30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS3 Text, linebreaks: hyphens (normal,de)</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 neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before a hyphen.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2010 HYPHEN
|
||||
2013 EN DASH
|
||||
301C WAVE DASH
|
||||
30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS3 Text, linebreaks: hyphens (strict,de)</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 neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before a hyphen.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2010 HYPHEN
|
||||
2013 EN DASH
|
||||
301C WAVE DASH
|
||||
30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: IN (loose,de)</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 neither Japanese nor Chinese, and line-break:loose, a browser allows a break before an inseparable character.">
|
||||
<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 = `2024 ONE DOT LEADER
|
||||
2025 TWO DOT LEADER
|
||||
2026 HORIZONTAL ELLIPSIS
|
||||
22EF MIDLINE HORIZONTAL ELLIPSIS
|
||||
FE19 PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if de and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: IN (normal,de)</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 neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before an inseparable character.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2024 ONE DOT LEADER
|
||||
2025 TWO DOT LEADER
|
||||
2026 HORIZONTAL ELLIPSIS
|
||||
22EF MIDLINE HORIZONTAL ELLIPSIS
|
||||
FE19 PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: IN (strict,de)</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 neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before an inseparable character.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2024 ONE DOT LEADER
|
||||
2025 TWO DOT LEADER
|
||||
2026 HORIZONTAL ELLIPSIS
|
||||
22EF MIDLINE HORIZONTAL ELLIPSIS
|
||||
FE19 PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: iteration (loose,de)</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 neither Japanese nor Chinese, and line-break:loose, a browser allows a break before an iteration mark.">
|
||||
<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 = `3005 IDEOGRAPHIC ITERATION MARK
|
||||
303B VERTICAL IDEOGRAPHIC ITERATION MARK
|
||||
309D HIRAGANA ITERATION MARK
|
||||
309E HIRAGANA VOICED ITERATION MARK
|
||||
30FD KATAKANA ITERATION MARK
|
||||
30FE KATAKANA VOICED ITERATION 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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if de and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: iteration (normal,de)</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 neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before an iteration mark.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3005 IDEOGRAPHIC ITERATION MARK
|
||||
303B VERTICAL IDEOGRAPHIC ITERATION MARK
|
||||
309D HIRAGANA ITERATION MARK
|
||||
309E HIRAGANA VOICED ITERATION MARK
|
||||
30FD KATAKANA ITERATION MARK
|
||||
30FE KATAKANA VOICED ITERATION 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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: iteration (strict,de)</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 neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before an iteration mark.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3005 IDEOGRAPHIC ITERATION MARK
|
||||
303B VERTICAL IDEOGRAPHIC ITERATION MARK
|
||||
309D HIRAGANA ITERATION MARK
|
||||
309E HIRAGANA VOICED ITERATION MARK
|
||||
30FD KATAKANA ITERATION MARK
|
||||
30FE KATAKANA VOICED ITERATION 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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PO AFW (loose,de)</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 neither Japanese nor Chinese, and line-break:loose, a browser wll NOT allow a break before a PO character with East Asian Width of A, F, or W.">
|
||||
<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 = `00B0 DEGREE SIGN
|
||||
2030 PER MILLE SIGN
|
||||
2032 PRIME
|
||||
2033 DOUBLE PRIME
|
||||
2035 REVERSED PRIME
|
||||
2103 DEGREE CELSIUS
|
||||
2109 DEGREE FAHRENHEIT
|
||||
FE6A SMALL PERCENT SIGN
|
||||
FF05 FULLWIDTH PERCENT SIGN
|
||||
FFE0 FULLWIDTH CENT SIGN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PO AFW (normal,de)</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 neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B0 DEGREE SIGN
|
||||
2030 PER MILLE SIGN
|
||||
2032 PRIME
|
||||
2033 DOUBLE PRIME
|
||||
2035 REVERSED PRIME
|
||||
2103 DEGREE CELSIUS
|
||||
2109 DEGREE FAHRENHEIT
|
||||
FE6A SMALL PERCENT SIGN
|
||||
FF05 FULLWIDTH PERCENT SIGN
|
||||
FFE0 FULLWIDTH CENT SIGN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PO AFW (strict,de)</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 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.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B0 DEGREE SIGN
|
||||
2030 PER MILLE SIGN
|
||||
2032 PRIME
|
||||
2033 DOUBLE PRIME
|
||||
2035 REVERSED PRIME
|
||||
2103 DEGREE CELSIUS
|
||||
2109 DEGREE FAHRENHEIT
|
||||
FE6A SMALL PERCENT SIGN
|
||||
FF05 FULLWIDTH PERCENT SIGN
|
||||
FFE0 FULLWIDTH CENT SIGN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (loose,de)</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 neither Japanese nor Chinese, and line-break:loose, a browser wll NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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 = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (normal,de)</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 neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (strict,de)</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 neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if de and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Line-break:loose, Conditional Japanese Starter (CJ) (unknown lang)</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="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being unkonwn makes no difference.">
|
||||
<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 = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Line-break:normal, Conditional Japanese Starter (CJ) (unknown lang)</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="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being unknown makes no difference.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>line-break:strict, Conditional Japanese Starter (CJ) (language unknown)</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="With line-break:strict, a browser will NOT allow a conditional Japanese starter at the beginning of a line; the langauge being unknown makes no difference.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: centred punctuation (loose,unknown)</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 unknown, and line-break:loose, a browser will NOT allow 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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unknonw loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: centred punctuation (normal,unknown)</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 unknown, and line-break:normal, a browser will NOT allow 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: normal; }
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unknown and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: centred punctuation (strict,unknown)</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 unkonwn, and line-break:strict, a browser will NOT allow 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: strict; }
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unknown and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS3 Text, linebreaks: hyphens (loose,unkonwn)</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 unknown, and line-break:loose, a browser will NOT allow a break before a hyphen.">
|
||||
<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 = `2010 HYPHEN
|
||||
2013 EN DASH
|
||||
301C WAVE DASH
|
||||
30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unknown and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS3 Text, linebreaks: hyphens (normal,unknown)</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 unkonwn, and line-break:normal, a browser will NOT allow a break before a hyphen.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2010 HYPHEN
|
||||
2013 EN DASH
|
||||
301C WAVE DASH
|
||||
30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unkonwn and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS3 Text, linebreaks: hyphens (strict,unknown)</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 unkonwn, and line-break:strict, a browser will NOT allow a break before a hyphen.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2010 HYPHEN
|
||||
2013 EN DASH
|
||||
301C WAVE DASH
|
||||
30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unknown and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: IN (loose,unknown)</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 unknown, and line-break:loose, a browser allows a break before an inseparable character.">
|
||||
<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 = `2024 ONE DOT LEADER
|
||||
2025 TWO DOT LEADER
|
||||
2026 HORIZONTAL ELLIPSIS
|
||||
22EF MIDLINE HORIZONTAL ELLIPSIS
|
||||
FE19 PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: IN (normal,unknown)</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 unknown, and line-break:normal, a browser will NOT allow a break before an inseparable character.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2024 ONE DOT LEADER
|
||||
2025 TWO DOT LEADER
|
||||
2026 HORIZONTAL ELLIPSIS
|
||||
22EF MIDLINE HORIZONTAL ELLIPSIS
|
||||
FE19 PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: IN (strict,unknown)</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 unknown, and line-break:strict, a browser will NOT allow a break before an inseparable character.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `2024 ONE DOT LEADER
|
||||
2025 TWO DOT LEADER
|
||||
2026 HORIZONTAL ELLIPSIS
|
||||
22EF MIDLINE HORIZONTAL ELLIPSIS
|
||||
FE19 PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: iteration (loose,unknown)</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 uknown, and line-break:loose, a browser allows a break before an iteration mark.">
|
||||
<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 = `3005 IDEOGRAPHIC ITERATION MARK
|
||||
303B VERTICAL IDEOGRAPHIC ITERATION MARK
|
||||
309D HIRAGANA ITERATION MARK
|
||||
309E HIRAGANA VOICED ITERATION MARK
|
||||
30FD KATAKANA ITERATION MARK
|
||||
30FE KATAKANA VOICED ITERATION 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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if lang unknown and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: iteration (normal,unknown)</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 unknown, and line-break:normal, a browser will NOT allow a break before an iteration mark.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3005 IDEOGRAPHIC ITERATION MARK
|
||||
303B VERTICAL IDEOGRAPHIC ITERATION MARK
|
||||
309D HIRAGANA ITERATION MARK
|
||||
309E HIRAGANA VOICED ITERATION MARK
|
||||
30FD KATAKANA ITERATION MARK
|
||||
30FE KATAKANA VOICED ITERATION 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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unknown and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: iteration (strict,unknown)</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 unknown, and line-break:strict, a browser will NOT allow a break before an iteration mark.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3005 IDEOGRAPHIC ITERATION MARK
|
||||
303B VERTICAL IDEOGRAPHIC ITERATION MARK
|
||||
309D HIRAGANA ITERATION MARK
|
||||
309E HIRAGANA VOICED ITERATION MARK
|
||||
30FD KATAKANA ITERATION MARK
|
||||
30FE KATAKANA VOICED ITERATION 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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if lang unknown and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PO AFW (loose,unknown)</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 unknown, and line-break:loose, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
|
||||
<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 = `00B0 DEGREE SIGN
|
||||
2030 PER MILLE SIGN
|
||||
2032 PRIME
|
||||
2033 DOUBLE PRIME
|
||||
2035 REVERSED PRIME
|
||||
2103 DEGREE CELSIUS
|
||||
2109 DEGREE FAHRENHEIT
|
||||
FE6A SMALL PERCENT SIGN
|
||||
FF05 FULLWIDTH PERCENT SIGN
|
||||
FFE0 FULLWIDTH CENT SIGN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PO AFW (normal,unknown)</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 unkonwn, and line-break:normal, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B0 DEGREE SIGN
|
||||
2030 PER MILLE SIGN
|
||||
2032 PRIME
|
||||
2033 DOUBLE PRIME
|
||||
2035 REVERSED PRIME
|
||||
2103 DEGREE CELSIUS
|
||||
2109 DEGREE FAHRENHEIT
|
||||
FE6A SMALL PERCENT SIGN
|
||||
FF05 FULLWIDTH PERCENT SIGN
|
||||
FFE0 FULLWIDTH CENT SIGN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PO AFW (strict,unkonwn)</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 unknown, and line-break:strict, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B0 DEGREE SIGN
|
||||
2030 PER MILLE SIGN
|
||||
2032 PRIME
|
||||
2033 DOUBLE PRIME
|
||||
2035 REVERSED PRIME
|
||||
2103 DEGREE CELSIUS
|
||||
2109 DEGREE FAHRENHEIT
|
||||
FE6A SMALL PERCENT SIGN
|
||||
FF05 FULLWIDTH PERCENT SIGN
|
||||
FFE0 FULLWIDTH CENT SIGN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (loose,unknown)</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 unknown, and line-break:loose, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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 = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (normal,unknown)</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 unkonwn, and line-break:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (strict,unkonwn)</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 unknown, and line-break:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
|
||||
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
|
||||
'</div>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Line-break:loose, Conditional Japanese Starter (CJ) (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="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being chinese makes no difference.">
|
||||
<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 = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if zh and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Line-break:normal, Conditional Japanese Starter (CJ) (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="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being chinese makes no difference.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if zh and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>line-break:strict, Conditional Japanese Starter (CJ) (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="With line-break:strict, a browser will NOT allow a conditional Japanese starter at the beginning of a line; the langauge being chinese makes no difference.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `3041 HIRAGANA LETTER SMALL A
|
||||
3043 HIRAGANA LETTER SMALL I
|
||||
3045 HIRAGANA LETTER SMALL U
|
||||
3047 HIRAGANA LETTER SMALL E
|
||||
3049 HIRAGANA LETTER SMALL O
|
||||
3063 HIRAGANA LETTER SMALL TU
|
||||
3083 HIRAGANA LETTER SMALL YA
|
||||
3085 HIRAGANA LETTER SMALL YU
|
||||
3087 HIRAGANA LETTER SMALL YO
|
||||
308E HIRAGANA LETTER SMALL WA
|
||||
3095 HIRAGANA LETTER SMALL KA
|
||||
3096 HIRAGANA LETTER SMALL KE
|
||||
30A1 KATAKANA LETTER SMALL A
|
||||
30A3 KATAKANA LETTER SMALL I
|
||||
30A5 KATAKANA LETTER SMALL U
|
||||
30A7 KATAKANA LETTER SMALL E
|
||||
30A9 KATAKANA LETTER SMALL O
|
||||
30C3 KATAKANA LETTER SMALL TU
|
||||
30E3 KATAKANA LETTER SMALL YA
|
||||
30E5 KATAKANA LETTER SMALL YU
|
||||
30E7 KATAKANA LETTER SMALL YO
|
||||
30EE KATAKANA LETTER SMALL WA
|
||||
30F5 KATAKANA LETTER SMALL KA
|
||||
30F6 KATAKANA LETTER SMALL KE
|
||||
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
|
||||
31F0 KATAKANA LETTER SMALL KU
|
||||
31F1 KATAKANA LETTER SMALL SI
|
||||
31F2 KATAKANA LETTER SMALL SU
|
||||
31F3 KATAKANA LETTER SMALL TO
|
||||
31F4 KATAKANA LETTER SMALL NU
|
||||
31F5 KATAKANA LETTER SMALL HA
|
||||
31F6 KATAKANA LETTER SMALL HI
|
||||
31F7 KATAKANA LETTER SMALL HU
|
||||
31F8 KATAKANA LETTER SMALL HE
|
||||
31F9 KATAKANA LETTER SMALL HO
|
||||
31FA KATAKANA LETTER SMALL MU
|
||||
31FB KATAKANA LETTER SMALL RA
|
||||
31FC KATAKANA LETTER SMALL RI
|
||||
31FD KATAKANA LETTER SMALL RU
|
||||
31FE KATAKANA LETTER SMALL RE
|
||||
31FF KATAKANA LETTER SMALL RO
|
||||
FF67 HALFWIDTH KATAKANA LETTER SMALL A
|
||||
FF68 HALFWIDTH KATAKANA LETTER SMALL I
|
||||
FF69 HALFWIDTH KATAKANA LETTER SMALL U
|
||||
FF6A HALFWIDTH KATAKANA LETTER SMALL E
|
||||
FF6B HALFWIDTH KATAKANA LETTER SMALL O
|
||||
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
|
||||
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
|
||||
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
|
||||
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
|
||||
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND 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>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if zh and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (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 a PR character with East Asian Width of A, F, or W.">
|
||||
<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 = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may appear at line start if zh and loose');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (normal,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:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: normal; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if zh and normal');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>CSS text, linebreaks: PR AFW (strict,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:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
|
||||
<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: strict; }
|
||||
</style>
|
||||
<script>
|
||||
var charlist = `00B1 PLUS-MINUS SIGN
|
||||
20AC EURO SIGN
|
||||
2116 NUMERO SIGN
|
||||
FE69 SMALL DOLLAR SIGN
|
||||
FF04 FULLWIDTH DOLLAR SIGN
|
||||
FFE1 FULLWIDTH POUND SIGN
|
||||
FFE5 FULLWIDTH YEN SIGN
|
||||
FFE6 FULLWIDTH WON SIGN`
|
||||
</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>'
|
||||
}
|
||||
function spansNearEnough(counter) {
|
||||
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
|
||||
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
|
||||
}
|
||||
|
||||
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_true(spansNearEnough(i));
|
||||
}, lines[i]+' may NOT appear at line start if zh and strict');
|
||||
// Hide successful tests.
|
||||
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
|
||||
}
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue