mirror of
https://github.com/servo/servo.git
synced 2025-08-24 06:45:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,56 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
||||
<head>
|
||||
<title>CSS Test: word-break - break-all - basic cases</title>
|
||||
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.test span {
|
||||
word-break: break-all;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
p.test, p.control {
|
||||
border: 1px solid gray;
|
||||
color: blue;
|
||||
font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
|
||||
width: 10em;
|
||||
}
|
||||
span.attention {
|
||||
color: red;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if each pair of upper and lower text in the square box is identical.
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>Filler Text Filler Text Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>Filler Text Filler T<br />ext Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字 Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字 Fil<br />ler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字満たすための文字</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字満た<br />すための文字</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
<span class="attention">* You will need a Japanese font.</span><br />
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, japanese</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, latin</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
|
||||
<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, korean</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, thai</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div>
|
||||
<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, arabic</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي‍<br/>‍ل</span></div>
|
||||
<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي‍<br/>‍ل</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, subjoined tibetan</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div>
|
||||
<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, spacing vowel sign</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div>
|
||||
<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, combining diacritic</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div>
|
||||
<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, syllabic cluster</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div>
|
||||
<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
||||
<head>
|
||||
<title>CSS Test: word-break - keep-all - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
p.control {
|
||||
border: 1px solid gray;
|
||||
color: blue;
|
||||
font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
|
||||
width: 10em;
|
||||
}
|
||||
span.attention {
|
||||
color: red;
|
||||
}
|
||||
span.no_wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if each pair of upper and lower text in the square box is identical.
|
||||
</p>
|
||||
<hr />
|
||||
<p class="control">
|
||||
<span>Filler Text Filler<br />Text Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>Filler Text Filler<br />Text Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="control">
|
||||
<span>満たすための文字<br />Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字<br />Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="control">
|
||||
<span class="no_wrap">満たすための文字満たすための文字</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="no_wrap">満たすための文字満たすための文字</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
<span class="attention">* You will need a Japanese font.</span><br />
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, latin</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref"><span>Latin latin latin<br/>latin</span></div>
|
||||
<div class="ref"><span>Latin latin latin<br/>latin</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, japanese</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div>
|
||||
<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, korean</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, thai</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="th"><span>แและ แและ<br/>แและ</span></div>
|
||||
<div class="ref" lang="th"><span>แและ แและ<br/>แและ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
||||
<head>
|
||||
<title>CSS Test: word-break - normal - basic cases Reftest Reference</title>
|
||||
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
p.control {
|
||||
border: 1px solid gray;
|
||||
color: blue;
|
||||
font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
|
||||
width: 10em;
|
||||
}
|
||||
span.attention {
|
||||
color: red;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if each pair of upper and lower text in the square box is identical.
|
||||
</p>
|
||||
<hr />
|
||||
<p class="control">
|
||||
<span>Filler Text Filler<br />Text Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>Filler Text Filler<br />Text Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="control">
|
||||
<span>満たすための文字<br />Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字<br />Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="control">
|
||||
<span>満たすための文字満た<br />すための文字</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字満た<br />すための文字</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
<span class="attention">* You will need a Japanese font.</span><br />
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, arabic</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div>
|
||||
<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, tibetan</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div>
|
||||
<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, latin</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref"><span>Latin latin latin<br/>latin</span></div>
|
||||
<div class="ref"><span>Latin latin latin<br/>latin</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, hindi</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div>
|
||||
<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese hiragana</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div>
|
||||
<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese katakana</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div>
|
||||
<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, khmer</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div>
|
||||
<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, korean</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, lao</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div>
|
||||
<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, myanmar</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div>
|
||||
<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, zwsp</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div>
|
||||
<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, tai nüa</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div>
|
||||
<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, thai</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div>
|
||||
<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, chinese</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div>
|
||||
<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break - break-all keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-3/#word-break">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Check that 'word-break' with 'break-all' keyword value implies to words break between any two letters without hyphenate.">
|
||||
<style>
|
||||
div {
|
||||
border: 2px black solid;
|
||||
color: blue;
|
||||
width: 100px;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if all the words below are inside the box and break between any two letters without hyphenate.</p>
|
||||
<div>Words in these lines should break between any two letters and be inside the box.</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break - normal keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-3/#word-break">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Check that 'word-break' with 'normal' keyword value implies to words break after word.">
|
||||
<style>
|
||||
div {
|
||||
border: 2px black solid;
|
||||
color: blue;
|
||||
width: 100px;
|
||||
word-break: normal;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if all the words below are within the box and break only after a word.</p>
|
||||
<div>Words in these lines should break after word and be inside the box.</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break - normal keyword value - single word not break</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-3/#word-break">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Check that 'word-break' with 'normal' keyword value implies to words break after word, so that a single word won't break.">
|
||||
<style>
|
||||
div {
|
||||
border: 2px black solid;
|
||||
color: blue;
|
||||
width: 100px;
|
||||
word-break: normal;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no</strong> word break below.</p>
|
||||
<div>ThisWordShouldNotBeBreakedAndMayBeOutOfTheBox</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break - normal keyword value - Chinese words break</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-text-3/#word-break">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Check that 'word-break' with 'normal' keyword value implies to words break after word, including Chinese words.">
|
||||
<style>
|
||||
div {
|
||||
border: 2px black solid;
|
||||
color: blue;
|
||||
width: 100px;
|
||||
word-break: normal;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if all the Chinese words below are inside the box and break normally.</p>
|
||||
<div>这些文字会自动换行，但不会超出黑色框。</div>
|
||||
</body>
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, japanese</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語</span></div></div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, latin</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-001.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
|
||||
<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, korean</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-002.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, thai</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-003.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="th"><div id="testdiv"><span id="testspan">ภาษาไทยภาษาไทย</span></div></div>
|
||||
<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, arabic</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. When shaping scripts such as Arabic are allowed to break within words due to break-all, the characters must still be shaped as if the word were not broken.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-004.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" dir="rtl" lang="ar"><div id="testdiv"><span id="testspan">التدويل نشاط التدويل</span></div></div>
|
||||
<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي‍<br/>‍ل</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, subjoined tibetan</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-005.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="bo"><div id="testdiv"><span id="testspan">ལྷ་སའི་སྐད་ད་ལྟ</span></div></div>
|
||||
<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, spacing vowel sign</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. A spacing vowel sign should be wrapped to the next line with its base character.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-006.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिंदी हिंदी हिंदी</span></div></div>
|
||||
<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
<!--
|
||||
Notes:
|
||||
A typographic unit based on extended grapheme clusters groups base characters and combining characters together.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, combining diacritic</title>
|
||||
<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. An combining diacritic plus base character should be wrapped as a unit to the next line.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-007.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="my"><div id="testdiv"><span id="testspan">မြန်မာစာမြန်မာစာမြန်</span></div></div>
|
||||
<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
<!--
|
||||
Notes:
|
||||
A typographic unit based on extended grapheme clusters groups base characters and combining characters together.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all, syllabic cluster</title>
|
||||
<meta name="assert" content="[Exploratory test] word-break: break-all means lines may break between any two typographic letter units. An indic syllable cluster should be wrapped as a unit to the next line.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-break-all-ref-008.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: break-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिन्दी हिन्दी हिन्दी</span></div></div>
|
||||
<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
<!--
|
||||
Notes:
|
||||
This test is exploratory because indic conjuncts containing more than one consonant are not covered by the extended grapheme cluster definition, and therefore constitute more than one typographic unit, as defined in the CSS spec. Nevertheless, people using indic scripts expect the user agent to keep the orthographic syllable as a single unit.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
||||
<head>
|
||||
<title>CSS Test: word-break - break-all - basic cases</title>
|
||||
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
||||
<link rel="help" title="CSS Text Level 3: 5.2. Word Breaking Rules: the ‘word-break’ property" href="http://www.w3.org/TR/css-text-3/#word-break" />
|
||||
<link rel="match" href="reference/word-break-break-all-009-ref.xht"/>
|
||||
<meta name="flags" content="font" />
|
||||
<meta name="assert" content="Lines may break between any two grapheme clusters within words." />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.test span {
|
||||
word-break: break-all;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
p.test, p.control {
|
||||
border: 1px solid gray;
|
||||
color: blue;
|
||||
font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
|
||||
width: 10em;
|
||||
}
|
||||
span.attention {
|
||||
color: red;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if each pair of upper and lower text in the square box is identical.
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>Filler Text Filler Text Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>Filler Text Filler T<br />ext Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字 Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字 Fil<br />ler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字満たすための文字</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字満た<br />すための文字</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
<span class="attention">* You will need a Japanese font.</span><br />
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, latin</title>
|
||||
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-keep-all-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
|
||||
<div class="ref"><span>Latin latin latin<br/>latin</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, japanese</title>
|
||||
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-keep-all-ref-001.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語 日本語 日本語</span></div></div>
|
||||
<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, korean</title>
|
||||
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'. In this style, sequences of CJK characters do not break.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-keep-all-ref-002.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: keep-all, thai</title>
|
||||
<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words', except where opportunities exist due to dictionary-based breaking (such as in Thai).">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-keep-all-ref-003.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: keep-all; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="th"><div id="testdiv"><span id="testspan">แและ แและแและ</span></div></div>
|
||||
<div class="ref" lang="th"><span>แและ แและ<br/>แและ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
||||
<head>
|
||||
<title>CSS Test: word-break - keep-all - basic cases</title>
|
||||
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
||||
<link rel="help" title="CSS Text Level 3: 5.2. Word Breaking Rules: the ‘word-break’ property" href="http://www.w3.org/TR/css-text-3/#word-break" />
|
||||
<link rel="match" href="reference/word-break-keep-all-004-ref.xht"/>
|
||||
<meta name="flags" content="font" />
|
||||
<meta name="assert" content="Block characters can no longer create implied break points." />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.test span {
|
||||
word-break: keep-all;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
p.test, p.control {
|
||||
border: 1px solid gray;
|
||||
color: blue;
|
||||
font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
|
||||
width: 10em;
|
||||
}
|
||||
span.attention {
|
||||
color: red;
|
||||
}
|
||||
span.no_wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if each pair of upper and lower text in the square box is identical.
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>Filler Text Filler Text Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>Filler Text Filler<br />Text Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字 Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字<br />Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字満たすための文字</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="no_wrap">満たすための文字満たすための文字</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
<span class="attention">* You will need a Japanese font.</span><br />
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, zwsp</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules. A ZWSP character should provide a break point.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ref-001.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="en"><div id="testdiv"><span id="testspan">latinlatinlatin​latin</span></div></div>
|
||||
<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
||||
<head>
|
||||
<title>CSS Test: word-break - normal - basic cases</title>
|
||||
<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
|
||||
<link rel="help" title="CSS Text Level 3: 5.2. Word Breaking Rules: the ‘word-break’ property" href="http://www.w3.org/TR/css-text-3/#word-break" />
|
||||
<link rel="match" href="reference/word-break-normal-002-ref.xht"/>
|
||||
<meta name="flags" content="font" />
|
||||
<meta name="assert" content="Break lines according to their usual rules." />
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.test span {
|
||||
word-break: normal;
|
||||
}
|
||||
/* the CSS below is not part of the test */
|
||||
p.test, p.control {
|
||||
border: 1px solid gray;
|
||||
color: blue;
|
||||
font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
|
||||
width: 10em;
|
||||
}
|
||||
span.attention {
|
||||
color: red;
|
||||
}
|
||||
]]>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if each pair of upper and lower text in the square box is identical.
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>Filler Text Filler Text Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>Filler Text Filler<br />Text Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字 Filler Text</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字<br />Filler Text</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p class="test">
|
||||
<span>満たすための文字満たすための文字</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span>満たすための文字満た<br />すための文字</span>
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
<span class="attention">* You will need a Japanese font.</span><br />
|
||||
If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, arabic</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ar-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ar" dir="rtl"><div id="testdiv"><span id="testspan">العَرَبِيةُ العَرَبِيةُ العَرَبِيةُ</span></div></div>
|
||||
<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, tibetan</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-bo-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="tdd"><div id="testdiv"><span id="testspan">ལྷ་སའི་སྐད་ལྷ་སའི་སྐད་</span></div></div>
|
||||
<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, latin</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-en-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
|
||||
<div class="ref"><span>Latin latin latin<br/>latin</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, hindi</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-hi-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिंदी हिंदी हिंदी हिंदी</span></div></div>
|
||||
<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ja-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語</span></div></div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese hiragana</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ja-ref-001.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">にほんごにほんご</span></div></div>
|
||||
<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese katakana</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ja-ref-002.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">ニホンゴニホンゴ</span></div></div>
|
||||
<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, japanese</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ja-ref-004.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語。</span></div></div>
|
||||
<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, khmer</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-km-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="km"><div id="testdiv"><span id="testspan">ភាសាខ្មែរភាសាខ្មែរភាសាខ្មែរ</span></div></div>
|
||||
<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, korean</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules. Korean, which commonly exhibits two different behaviors, allows breaks between any two consecutive Hangul/Hanja.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-ko-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div>
|
||||
<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
<!--
|
||||
Notes:
|
||||
It is possible to break Korean at character or word boundaries, depending on author preference. Breaking at character boundaries tends to be more common in modern Korean text, so that has been chosen as the reference here. If the word breaks at word boundaries, that is not necessarily an error, but it is not what the spec describes for word-break: normal.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, lao</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-lo-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="lo"><div id="testdiv"><span id="testspan">ພາສາລາວພາສາລາວພາສາລາວ</span></div></div>
|
||||
<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, myanmar</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-my-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="my"><div id="testdiv"><span id="testspan">မြန်မာစာမြန်မာစာမြန်မာစာ</span></div></div>
|
||||
<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, tai nüa</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-tdd-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="tdd"><div id="testdiv"><span id="testspan">ᥖᥭᥰᥖᥬᥳᥑᥨᥒᥰ</span></div></div>
|
||||
<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, thai</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-th-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="th"><div id="testdiv"><span id="testspan">ภาษาไทยภาษาไทย</span></div></div>
|
||||
<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: normal, chinese</title>
|
||||
<meta name="assert" content="word-break: normal means words break according to their customary rules.">
|
||||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
|
||||
<link rel='match' href='reference/word-break-normal-zh-ref-000.html'>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<style type='text/css'>
|
||||
.test { word-break: normal; }
|
||||
/* the CSS below is not part of the test */
|
||||
.test, .ref { border: 1px solid orange; margin: 20px; padding: 10px; width: 390px; font: 36px/1 sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='instructions'>Test passes if the two orange boxes are the same.</div>
|
||||
<div class="test" lang="zh"><div id="testdiv"><span id="testspan">中國話中國話中國語</span></div></div>
|
||||
<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div>
|
||||
<script>
|
||||
var sentenceWidth = document.getElementById('testspan').offsetWidth
|
||||
document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue