Skip to content

Commit

Permalink
Merge pull request #9716 from mrego/css-text-viewport
Browse files Browse the repository at this point in the history 
[css-text] Modify reference tests so they fit in the viewport
  • Loading branch information
@mrego
mrego committed Mar 1, 2018
2 parents 9c3df0e + abec443 commit 0d843d4
Show file tree
Hide file tree
Showing 60 changed files with 3,133 additions and 2,213 deletions.
91 changes: 50 additions & 41 deletions css/css-text/hanging-punctuation/hanging-punctuation-allow-end-001.xht
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
margin-left: 2em;
width: 10em
}
div.wrapper {
display: inline-block;
border: 1px solid;
margin: 10px;
padding: 10px;
}
span.attention {
color: red;
}
Expand All @@ -35,59 +41,62 @@
<p>
Test passes if each pair of upper and lower text in the square box is identical.
</p>
<hr />
<div>
IDEOGRAPHIC COMMA
</div>
<div class="parent">
<div class="test">
これらは満たす文字で、それらも満たす文字です。
<div class="wrapper">
<div>
IDEOGRAPHIC COMMA
</div>
<br />
<div class="no-wrap">
これらは満たす文字で、<br />それらも満たす文字で<br />す。
<div class="parent">
<div class="test">
これらは満たす文字で、それらも満たす文字です。
</div>
<br />
<div class="no-wrap">
これらは満たす文字で、<br />それらも満たす文字で<br />す。
</div>
</div>
</div>
<hr />
<div>
IDEOGRAPHIC FULL STOP
</div>
<div class="parent">
<div class="test">
これは満たす文字です。
<div class="wrapper">
<div>
IDEOGRAPHIC FULL STOP
</div>
<br />
<div class="no-wrap">
これは満たす文字です。
<div class="parent">
<div class="test">
これは満たす文字です。
</div>
<br />
<div class="no-wrap">
これは満たす文字です。
</div>
</div>
</div>
<hr />
<div>
HALFWIDTH IDEOGRAPHIC COMMA
</div>
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡
<div class="wrapper">
<div>
HALFWIDTH IDEOGRAPHIC COMMA
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
</div>
</div>
</div>
<hr />
<div>
HALFWIDTH IDEOGRAPHIC FULL STOP
</div>
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡
<div class="wrapper">
<div>
HALFWIDTH IDEOGRAPHIC FULL STOP
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
</div>
</div>
</div>
<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.
Expand Down
91 changes: 50 additions & 41 deletions css/css-text/hanging-punctuation/hanging-punctuation-first-001.xht
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@
margin-left: 2em;
width: 10em
}
div.wrapper {
display: inline-block;
border: 1px solid;
margin: 10px;
padding: 10px;
}
span.attention {
color: red;
}
Expand All @@ -39,59 +45,62 @@
<p>
Test passes if each pair of upper and lower text in the square box is identical.
</p>
<hr />
<div>
Opening brackets
</div>
<div class="parent">
<div class="test">
「これは、満たすための文字です。」
<div class="wrapper">
<div>
Opening brackets
</div>
<br />
<div class="no-wrap">
<span class="hanging">「これは、満たすための</span><br />文字です。」
<div class="parent">
<div class="test">
「これは、満たすための文字です。」
</div>
<br />
<div class="no-wrap">
<span class="hanging">「これは、満たすための</span><br />文字です。」
</div>
</div>
</div>
<hr />
<div>
Closing brackets
</div>
<div class="parent">
<div class="test">
これは、「満たす文字」です。
<div class="wrapper">
<div>
Closing brackets
</div>
<br />
<div class="no-wrap">
これは、「満たす文<br />字」です。
<div class="parent">
<div class="test">
これは、「満たす文字」です。
</div>
<br />
<div class="no-wrap">
これは、「満たす文<br />字」です。
</div>
</div>
</div>
<hr />
<div>
Initial quotes
</div>
<div class="parent">
<div class="test">
“これは、満たすための文字です。”
<div class="wrapper">
<div>
Initial quotes
</div>
<br />
<div class="no-wrap">
<span class="hanging">“これは、満たすための</span><br />文字です。”
<div class="parent">
<div class="test">
“これは、満たすための文字です。”
</div>
<br />
<div class="no-wrap">
<span class="hanging">“これは、満たすための</span><br />文字です。”
</div>
</div>
</div>
<hr />
<div>
Final quotes
</div>
<div class="parent">
<div class="test">
これは、“満たす文字”です。
<div class="wrapper">
<div>
Final quotes
</div>
<br />
<div class="no-wrap">
これは、“満たす文<br />字”です。
<div class="parent">
<div class="test">
これは、“満たす文字”です。
</div>
<br />
<div class="no-wrap">
これは、“満たす文<br />字”です。
</div>
</div>
</div>
<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.
Expand Down
91 changes: 50 additions & 41 deletions css/css-text/hanging-punctuation/hanging-punctuation-force-end-001.xht
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
margin-left: 2em;
width: 10em
}
div.wrapper {
display: inline-block;
border: 1px solid;
margin: 10px;
padding: 10px;
}
span.attention {
color: red;
}
Expand All @@ -35,59 +41,62 @@
<p>
Test passes if each pair of upper and lower text in the square box is identical.
</p>
<hr />
<div>
IDEOGRAPHIC COMMA
</div>
<div class="parent">
<div class="test">
これらは満たす文字で、それらも満たす文字です。
<div class="wrapper">
<div>
IDEOGRAPHIC COMMA
</div>
<br />
<div class="no-wrap">
これらは満たす文字で、<br />それらも満たす文字で<br />す。
<div class="parent">
<div class="test">
これらは満たす文字で、それらも満たす文字です。
</div>
<br />
<div class="no-wrap">
これらは満たす文字で、<br />それらも満たす文字で<br />す。
</div>
</div>
</div>
<hr />
<div>
IDEOGRAPHIC FULL STOP
</div>
<div class="parent">
<div class="test">
これは満たす文字です。
<div class="wrapper">
<div>
IDEOGRAPHIC FULL STOP
</div>
<br />
<div class="no-wrap">
これは満たす文字です。
<div class="parent">
<div class="test">
これは満たす文字です。
</div>
<br />
<div class="no-wrap">
これは満たす文字です。
</div>
</div>
</div>
<hr />
<div>
HALFWIDTH IDEOGRAPHIC COMMA
</div>
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡
<div class="wrapper">
<div>
HALFWIDTH IDEOGRAPHIC COMMA
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
</div>
</div>
</div>
<hr />
<div>
HALFWIDTH IDEOGRAPHIC FULL STOP
</div>
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡
<div class="wrapper">
<div>
HALFWIDTH IDEOGRAPHIC FULL STOP
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
<div class="parent">
<div class="test">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡
</div>
<br />
<div class="no-wrap">
ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
</div>
</div>
</div>
<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.
Expand Down
Loading

0 comments on commit 0d843d4

Please sign in to comment.