Add tests on properties of text-spacing and hanging/each-line of text-indent #23
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" > | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text: text-indent: each-line</title> | ||
| <meta name="flags" content="font"> | ||
| <meta name="assert" id="assert" content="text-indent:each-line indents all lines after a forced line break"> | ||
| <link rel="help" title="CSS Text Level 3: 8.1. First Line Indentation: the text-indent property" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> | ||
| <link rel="author" title="hiroshi takase" href="mailto:takase@est.co.jp"> | ||
| <link rel="stylesheet" href="../../fonts/metadata_styles.css"/> | ||
| <style> | ||
| @font-face { | ||
| font-family: 'webfont'; | ||
| src: url('../../fonts/ahem-extra/AHEM_default.TTF') format('opentype'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
| #test, #ref { | ||
| position: absolute; | ||
| top: 0; | ||
| font-family: webfont; | ||
| width: 20em; | ||
| } | ||
| #test { | ||
| color: green; | ||
| } | ||
| #ref { | ||
| color: red; | ||
| z-index: -100; | ||
| } | ||
| .hi5 { | ||
| padding-left: 5em; | ||
| } | ||
| /* the CSS above is not part of the test */ | ||
| #test { | ||
| text-indent: 5em each-line; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p class="instructions">Test passes if there is no red visible on the page.</p> | ||
|
|
||
| <div style="position:relative"> | ||
| <div id="test">XXXX pppp XXXX pppp XXXX pppp XXXX<br>XXXX pppp XXXX pppp XXXX pppp XXXX<br>XXXX pppp XXXX pppp XXXX pppp XXXX</div> | ||
| <div id="ref"><span class="hi5">XXXX pppp XXXX </span><br>pppp XXXX pppp XXXX<br><span class="hi5">XXXX pppp XXXX </span><br>pppp XXXX pppp XXXX<br><span class="hi5">XXXX pppp XXXX </span><br>pppp XXXX pppp XXXX</div> | ||
|
|
||
| <div id="info"> | ||
| <p id="assertion"></p><script>document.getElementById('assertion').textContent='Assertion: '+document.getElementById('assert').content</script> | ||
| <ul class="notes"> | ||
| <li><code>each-line</code> is set to <code>text-indent</code>. The total width of text is set to shorter than length of each line, each line or block is shown in two lines with text-indent at each line first position after a forced line break.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" > | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text: text-indent: hanging each-line</title> | ||
| <meta name="flags" content="font"> | ||
| <meta name="assert" id="assert" content="text-indent: hanging each-line indents all lines except lines after a forced line break"> | ||
| <link rel="help" title="CSS Text Level 3: 8.1. First Line Indentation: the text-indent property" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> | ||
| <link rel="author" title="hiroshi takase" href="mailto:takase@est.co.jp"> | ||
| <link rel="stylesheet" href="../../fonts/metadata_styles.css"/> | ||
| <style> | ||
| @font-face { | ||
| font-family: 'webfont'; | ||
| src: url('../../fonts/ahem-extra/AHEM_default.TTF') format('opentype'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
| #test, #ref { | ||
| position: absolute; | ||
| top: 0; | ||
| font-family: webfont; | ||
| width: 20em; | ||
| } | ||
| #test { | ||
| color: green; | ||
| } | ||
| #ref { | ||
| color: red; | ||
| z-index: -100; | ||
| } | ||
| .hi5 { | ||
| padding-left: 5em; | ||
| } | ||
| /* the CSS above is not part of the test */ | ||
| #test { | ||
| text-indent: 5em hanging each-line; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p class="instructions">Test passes if there is no red visible on the page.</p> | ||
|
|
||
| <div style="position:relative"> | ||
| <div id="test">XXXX pppp XXXX pppp XXXX pppp XXXX pppp XXXX pppp<br>XXXX pppp XXXX pppp XXXX pppp XXXX pppp XXXX pppp XXXX</div> | ||
| <div id="ref">XXXX pppp XXXX pppp<br><span class="hi5">XXXX pppp XXXX</span><br><span class="hi5">pppp XXXX pppp</span><br>XXXX pppp XXXX pppp<br><span class="hi5">XXXX pppp XXXX</span><br><span class="hi5">pppp XXXX pppp</span></div> | ||
|
|
||
| <div id="info"> | ||
| <p id="assertion"></p><script>document.getElementById('assertion').textContent='Assertion: '+document.getElementById('assert').content</script> | ||
| <ul class="notes"> | ||
| <li><code>each-line</code> with <code>hanging</code> is set to <code>text-indent</code>. The total width of text is set to shorter than length of each line, each line or block is shown in three lines with text-indent at each line first position except ones after a forced line break.</li> | ||
| <li>This test depends on <code>hanging</code> of <code>text-indent</code>.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" > | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text: text-indent: hanging</title> | ||
| <meta name="flags" content="font"> | ||
| <meta name="assert" id="assert" content="text-indent:hanging indents all lines except the first"> | ||
| <link rel="help" title="CSS Text Level 3: 8.1. First Line Indentation: the text-indent property" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> | ||
| <link rel="author" title="hiroshi takase" href="mailto:takase@est.co.jp"> | ||
| <link rel="stylesheet" href="../../fonts/metadata_styles.css"/> | ||
| <style> | ||
| @font-face { | ||
| font-family: 'webfont'; | ||
| src: url('../../fonts/ahem-extra/AHEM_default.TTF') format('opentype'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
| #test, #ref { | ||
| position:absolute; top:0; | ||
| font-family: webfont; | ||
| width: 20em; | ||
| } | ||
| #test { | ||
| color: green; | ||
| } | ||
| #ref { | ||
| color: red; | ||
| z-index: -100; | ||
| } | ||
| .refspace { | ||
| padding-left: 5em; | ||
| } | ||
| /* the CSS above is not part of the test */ | ||
| #test { | ||
| text-indent: 5em hanging; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p class="instructions">Test passes if there is no red visible on the page.</p> | ||
|
|
||
| <div style="position:relative"> | ||
| <div id="test">XXXX pppp XXXX pppp XXXX pppp XXXX pppp XXXX</div> | ||
|
Contributor
There was a problem hiding this comment. I don't think this test works. And the test would be that the green block is visible, but no red. The colour of the test text should not be green. |
||
| <div id="ref">XXXX pppp XXXX pppp <br><span class="refspace">XXXX pppp XXXX </span><br><span class="refspace">pppp XXXX</span></div> | ||
| </div> | ||
|
|
||
| <div id="info"> | ||
| <p id="assertion"></p><script>document.getElementById('assertion').textContent='Assertion: '+document.getElementById('assert').content</script> | ||
| <ul class="notes"> | ||
| <li><code>hanging</code> is set to <code>text-indent</code>. Each line after a soft break should have indent with specified length.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" > | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text: text-indent: hanging</title> | ||
| <meta name="flags" content="font"> | ||
| <meta name="assert" id="assert" content="text-indent:hanging indents all lines except the first including a forced line break"> | ||
| <link rel="help" title="CSS Text Level 3: 8.1. First Line Indentation: the text-indent property" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> | ||
| <link rel="author" title="hiroshi takase" href="mailto:takase@est.co.jp"> | ||
| <link rel="stylesheet" href="../../fonts/metadata_styles.css"/> | ||
| <style> | ||
| @font-face { | ||
| font-family: 'webfont'; | ||
| src: url('../../fonts/ahem-extra/AHEM_default.TTF') format('opentype'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
| #test, #ref { | ||
| position:absolute; top:0; | ||
| font-family: webfont; | ||
| width: 20em; | ||
| } | ||
| #test { | ||
| color: green; | ||
| } | ||
| #ref { | ||
| color: red; | ||
| z-index: -100; | ||
| } | ||
| .refspace { | ||
| padding-left: 5em; | ||
| } | ||
| /* the CSS above is not part of the test */ | ||
| #test { | ||
| text-indent: 5em hanging; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <p class="instructions">Test passes if there is no red visible on the page.</p> | ||
|
|
||
| <div style="position:relative"> | ||
| <div id="test">XXXX pppp XXXX pppp XXXX pppp XXXX<br>pppp XXXX pppp XXXX pppp XXXX</div> | ||
| <div id="ref">XXXX pppp XXXX pppp <br><span class="refspace">XXXX pppp XXXX</span><br><span class="refspace">pppp XXXX pppp </span><br><span class="refspace">XXXX pppp XXXX</span></div> | ||
| </div> | ||
|
|
||
| <div id="info"> | ||
| <p id="assertion"></p><script>document.getElementById('assertion').textContent='Assertion: '+document.getElementById('assert').content</script> | ||
| <ul class="notes"> | ||
| <li><code>hanging</code> is set to <code>text-indent</code>. Each line after a soft and forced break (all except for the first line) should have indent with specified length.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test: text-spacing: allow-end</title> | ||
| <meta name="flags" content="font"> | ||
| <meta name="assert" id="assert" content="text-spacing:allow-end sets fullwidth closing punctuation with half-width glyphs (flush) at the end of each line if it does not otherwise fit prior to justification; otherwise set the punctuation with full-width glyphs."> | ||
| <link rel="author" title="Hiroshi Takase" href="mailto:takase@est.co.jp"> | ||
| <link rel="help" title="CSS Text Level 4: 10.2. Character Class Spacing: the text-spacing property" href="https://www.w3.org/TR/css-text-4/#text-spacing-property"> | ||
| <link rel="stylesheet" href="../../fonts/metadata_styles.css"> | ||
| <style> | ||
| @font-face { | ||
| font-family: 'webfont'; | ||
| src: url('../../fonts/mplus-1p-regular.woff') format('woff2'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| div.ref, div.test { | ||
| font: 3em/1em webfont; | ||
| width: 8.55em; | ||
| height: 3em; | ||
| } | ||
| .ref, .test { | ||
| position: absolute; | ||
| top: 0; | ||
| } | ||
| .ref { | ||
| color: red; | ||
| z-index: -1; | ||
| } | ||
| /* the CSS above is not part of the test */ | ||
|
|
||
| .test { text-spacing: allow-end; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p class="instructions">Test passes if there is no red visible on the page.</p> | ||
|
|
||
| <div style="position: relative;" lang="ja"> | ||
| <div class="ref">行末カギ「ベタ組<span style="display:inline-block;width:0.5em;margin-right:-0.5em">」</span></div> | ||
| <div class="test" lang="ja">行末カギ「ベタ組」</div> | ||
| </div> | ||
|
|
||
| <div id="info"> | ||
| <p id="assertion"></p><script>document.getElementById('assertion').textContent='Assertion: '+document.getElementById('assert').content</script> | ||
| <ul class="notes"> | ||
| <li><code>text-spacing</code> is set to <code>allow-end</code>. The total width of text is set to 0.45 em shorter than all in full-width, the 」character at the end of line should be a half-width size.</li> | ||
| <li>The red reference text has -0.5 em margin to trim the blank half of the glyph, and should be completely covered by the black test text.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </body></html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text: text-spacing: ideograph-alpha</title> | ||
| <meta name="flags" content="font"> | ||
| <meta name="assert" id="assert" content="text-spacing:ideograp-alpha creates 1/4em extra spacing between runs of ideographs and non-ideographic letters."> | ||
| <link rel="author" title="Jun Tajima" href="mailto:tajima@sanyosha.co.jp"> | ||
| <link rel="help" title="CSS Text Level 4: 10.2. Character Class Spacing: the text-spacing property" href="https://www.w3.org/TR/css-text-4/#text-spacing-property"> | ||
| <link rel="stylesheet" href="../../fonts/metadata_styles.css"> | ||
| <style> | ||
| @font-face { | ||
| font-family: 'webfont'; | ||
| src: url('../../fonts/mplus-1p-regular.woff') format('woff2'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| div.test, div.ref { | ||
| font: 3em/1em webfont; | ||
| } | ||
| .ref { | ||
| color: red; | ||
| position: absolute; | ||
| top: 0; | ||
| z-index: -1; | ||
| } | ||
| span.space { | ||
| display: inline-block; | ||
| width: 0.25em; | ||
| } | ||
| /* the CSS above is not part of the test */ | ||
|
|
||
| .test { text-spacing: ideograph-alpha; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p class="instructions">Test passes if there is no red visible on the page.</p> | ||
| <div style="position: relative" lang="ja"> | ||
| <div class="test">あいうabcえお</div> | ||
| <div class="ref">あいう<span class="space"></span>abc<span class="space"></span>えお</div> | ||
| </div> | ||
|
|
||
| <div id="info"> | ||
| <p id="assertion"></p><script>document.getElementById('assertion').textContent='Assertion: '+document.getElementById('assert').content</script> | ||
| <ul class="notes"> | ||
| <li>Black characters are applied <code>ideograph-alpha</code> for <code>text-spacing</code>. Red characters have 0.25em extra spacing between runs of ideographs and non-ideographic letters, so should be completely covered by the black test text.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
|
|
||
| </body></html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test: text-spacing: ideograph-numeric</title> | ||
| <meta name="flags" content="font"> | ||
| <meta name="assert" id="assert" content="The browser can handle text-spacing as ideograph-numeric properly."> | ||
| <meta name="assert" id="assert" content="text-spacing:ideograp-numeric creates 1/4em extra spacing between runs of ideographs and non-ideographic numerals glyphs."> | ||
| <link rel="author" title="Jun Tajima" href="mailto:tajima@sanyosha.co.jp"> | ||
| <link rel="help" title="CSS Text Level 4: 10.2. Character Class Spacing: the text-spacing property" href="https://www.w3.org/TR/css-text-4/#text-spacing-property"> | ||
| <link rel="stylesheet" href="../../fonts/metadata_styles.css"> | ||
| <style> | ||
| @font-face { | ||
| font-family: 'webfont'; | ||
| src: url('../../fonts/mplus-1p-regular.woff') format('woff2'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| div.test, div.ref { | ||
| font: 3em/1em webfont; | ||
| width: 7.5em; | ||
| height: 1em; | ||
| } | ||
| .ref { | ||
| color: red; | ||
| position: absolute; | ||
| top: 0; | ||
| z-index: -1; | ||
| } | ||
| span.space { | ||
| display: inline-block; | ||
| width: 0.25em; | ||
| } | ||
| /* the CSS above is not part of the test */ | ||
|
|
||
| .test { text-spacing: ideograph-numeric; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p class="instructions">Test passes if there is no red visible on the page.</p> | ||
| <div style="position: relative;" lang="ja"> | ||
| <div class="test">あいう123えお</div> | ||
| <div class="ref">あいう<span class="space"></span>123<span class="space">えお</div> | ||
| </div> | ||
|
|
||
|
|
||
| <div id="info"> | ||
| <p id="assertion"></p><script>document.getElementById('assertion').textContent='Assertion: '+document.getElementById('assert').content</script> | ||
| <ul class="notes"> | ||
| <li>Black characters are applied <code>ideographic-numeric</code> for <code>text-spacing</code>. Red characters have 0.25em extra spacing between runs of ideographs and non-ideographic numerals, so should be completely covered by the black test text.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
|
|
||
| </body></html> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It might be useful to add a
/* the CSS above is not part of the test */line after this line, like other i18n tests.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Really thank you for pointing this! This point was dropped from my last-time check list...