mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35: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>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap:break-word + white-space:break-spaces</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test Reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two green squares and no red.
|
||||
<div>x　x</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 50px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two green squares and no red.
|
||||
<div>x　　　x</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: text-transform:fullwidth and collapsed spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
|
||||
<link rel="match" href="reference/text-transform-fullwidth-006-ref.html">
|
||||
<meta name="assert" content="full-width does not transform collapsed U+0020 spaces to U+3000, only the remaining one after collapsing.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div { font: 50px/1 Ahem; }
|
||||
#test {
|
||||
text-transform: fullwidth;
|
||||
color: green;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two green squares and no red.
|
||||
<div id=ref>x　x</div>
|
||||
<div id=test>x x</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: text-transform:fullwidth and preserved spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
|
||||
<link rel="match" href="reference/text-transform-fullwidth-007-ref.html">
|
||||
<meta name="assert" content="full-width does transforms U+0020 spaces to U+3000 within preserved white space.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div { font: 50px/1 Ahem; }
|
||||
#test {
|
||||
text-transform: fullwidth;
|
||||
color: green;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two green squares and no red.
|
||||
<div id=ref>x　　　x</div>
|
||||
<div id=test>x x</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: wrapping opportunity after break-spaces tabs</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs with white-space:break-spaces">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: break-spaces;
|
||||
color: green;
|
||||
width: 16ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>XX		XX</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: wrapping opportunity after break-spaces tabs and space</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs and spaces with white-space:break-spaces">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: break-spaces;
|
||||
color: green;
|
||||
width: 16ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>XX 	 	XX</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: wrapping opportunity after each break-spaces tab</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/break-spaces-tab-003-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity after each tab in a sequence with white-space:break-spaces.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: break-spaces;
|
||||
color: green;
|
||||
width: 1ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two <strong>filled green squares</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>X<br><br><br><br><br>X</div>
|
||||
<div id=test>X					X</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: wrapping opportunity after each break-spaces space and tab</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/break-spaces-tab-003-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity after each tab and space in a sequence with white-space:break-spaces.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: pre-wrap;
|
||||
color: green;
|
||||
width: 2ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two <strong>filled green squares</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>X<br><br><br><br><br>X</div>
|
||||
<div id=test>X	 		X</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: break-space tabs don't hang</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-3">
|
||||
<link rel="match" href="reference/break-spaces-tab-005-ref.html">
|
||||
<meta name="assert" content="a sequence of break-spaces tabs at the end of a line does not hang.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: break-spaces;
|
||||
color: green;
|
||||
width: 2ch;
|
||||
}
|
||||
#ref {
|
||||
white-space: pre;
|
||||
width: 2ch;
|
||||
background: red;
|
||||
color: green;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle and no red.
|
||||
<div id=ref> X<br> X<br>XX<br>XX<br>XX<br>XX<br> </div>
|
||||
<div id=test>X<wbr>X					XX</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: break-spaces tabs and spaces don't hang</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-3">
|
||||
<link rel="match" href="reference/break-spaces-tab-005-ref.html">
|
||||
<meta name="assert" content="a sequence of break-spaces tabs and spaces at the end of a line does not hang, and can wrap after each tab or space.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: break-spaces;
|
||||
color: green;
|
||||
width: 2ch;
|
||||
}
|
||||
#ref {
|
||||
white-space: pre;
|
||||
width: 2ch;
|
||||
background: red;
|
||||
color: green;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle and no red.
|
||||
<div id=ref> X<br> X<br>XX<br>XX<br>XX<br>XX<br> </div>
|
||||
<div id=test>X<wbr>X	 		XX</div>
|
||||
|
|
@ -28,5 +28,5 @@ span { color: green; }
|
|||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="ref">XXX<span>XX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
|
||||
<div class="test">XXX
|
||||
<div class="test">XXX <!--end of line space intentional-->
|
||||
XX</div>
|
||||
|
|
|
|||
|
|
@ -28,5 +28,5 @@ span { color: green; }
|
|||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="ref">XXX<span>XX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
|
||||
<div class="test">XXX
|
||||
<div class="test">XXX <!--end of line spaces intentional-->
|
||||
XX</div>
|
||||
|
|
|
|||
|
|
@ -28,5 +28,5 @@ span { color: green; }
|
|||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="ref">XX<span>XXX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
|
||||
<div class="test">XX
|
||||
<div class="test">XX <!--end of line spaces intentional-->
|
||||
XX</div>
|
||||
|
|
|
|||
|
|
@ -28,5 +28,5 @@ span { color: green; }
|
|||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="ref">X<span>XXXX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
|
||||
<div class="test">X
|
||||
<div class="test">X <!--end of line spaces intentional-->
|
||||
XX</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: wrapping opportunity after pre-wrap tabs</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs with white-space:pre-wrap">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: pre-wrap;
|
||||
color: green;
|
||||
width: 16ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>XX		XX</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: wrapping opportunity after pre-wrap tabs and spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs and spaces with white-space:pre-wrap">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: pre-wrap;
|
||||
color: green;
|
||||
width: 16ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>XX 	 	XX</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: no wrapping opportunity between pre-wrap tabs</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs with white-space:pre-wrap, but not between or before each tab.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: pre-wrap;
|
||||
color: green;
|
||||
width: 2ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>XX		XX</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: no wrapping opportunity between pre-wrap tabs and spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs and spaces with white-space:pre-wrap, but not between or before each.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: pre-wrap;
|
||||
color: green;
|
||||
width: 2ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>XX 	 	XX</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: pre-wrap tabs hang</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-3">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="a sequence of pre-wrap tabs at the end of a line hangs.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: pre-wrap;
|
||||
color: green;
|
||||
width: 2ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>X<wbr>X		XX</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: pre-wrap tabs and spaces hang</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-3">
|
||||
<link rel="match" href="reference/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="a sequence of pre-wrap tabs and spaces at the end of a line hangs.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#test {
|
||||
white-space: pre-wrap;
|
||||
color: green;
|
||||
width: 2ch;
|
||||
}
|
||||
#ref {
|
||||
color: red;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id=ref>XX<br>XX</div>
|
||||
<div id=test>X<wbr>X	 		 XX</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two <strong>filled green squares</strong> and <strong>no red</strong>.</p>
|
||||
<div>X<br><br><br><br><br>X</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
white-space: break-spaces;
|
||||
color: green;
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle and no red.
|
||||
<div>XX<br>XX<br>XX<br>XX<br>XX<br>XX<br>XX</div>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
|
||||
<meta name="assert" content="Preserved white space at the end of the line is hanged when white-space is pre-wrap and any overflowing space is removed.">
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test span { background: red; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.test span { background: green; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is a green square and no red.
|
||||
<div class="ref">X<span>X</span><br>XX</div>
|
||||
<div class="test">X<span>  </span><span> XX</span></div>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue