-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added two new test to evaluate the break-word+break-spaces combinatio…
…n. (#16124)
- Loading branch information
1 parent
a0367a9
commit 90589d6
Showing
2 changed files
with
78 additions
and
0 deletions.
There are no files selected for viewing
40 changes: 40 additions & 0 deletions
40
css/css-text/overflow-wrap/overflow-wrap-break-word-008.html
This file contains 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,40 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text Test: overflow-wrap:break-word + white-space:break-spaces</title> | ||
| <link rel="author" title="Javier Fernandez" href="mailto:[email protected]" /> | ||
| <link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property"> | ||
| <link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces"> | ||
| <meta name="flags" content="ahem"> | ||
| <link rel="match" href="reference/overflow-wrap-break-word-001-ref.html"> | ||
| <meta name="assert" content="break-word + break-spaces do allow a break | ||
| between the last character of a word and the first space of a sequence of preserved spaces | ||
| if there are no other wrapping opportunities earlier in the line"> | ||
| <style> | ||
| div { | ||
| position: relative; | ||
| font-family: Ahem; | ||
| font-size: 25px; | ||
| line-height: 1em; | ||
| } | ||
| .red { | ||
| position: absolute; | ||
| color: green; | ||
| width: 100px; | ||
| height: 100px; | ||
| white-space: pre; | ||
| } | ||
| .test { | ||
| background: green; | ||
| color: red; | ||
| width: 4ch; | ||
| z-index: -1; | ||
|
|
||
| white-space: break-spaces; | ||
| overflow-wrap: break-word; | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> | ||
| <div class="red">XXXX<br> <br>XXXX<br></div> | ||
| <div class="test">XXXX XXXX </div> |
This file contains 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,38 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text Test: word-break:break-word + white-space:break-spaces</title> | ||
| <link rel="author" title="Javier Fernandez" href="mailto:[email protected]" /> | ||
| <link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property"> | ||
| <link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word"> | ||
| <meta name="flags" content="ahem"> | ||
| <link rel="match" href="reference/white-space-break-spaces-005-ref.html"> | ||
| <meta name="assert" content="break-word + break-spaces do allow a break | ||
| between the last character of a word and the first space of a sequence of preserved spaces | ||
| if there are no other wrapping opportunities earlier in the line"> | ||
| <style> | ||
| div { | ||
| position: relative; | ||
| font: 25px/1 Ahem; | ||
| } | ||
| .red { | ||
| position: absolute; | ||
| color: green; | ||
| width: 100px; | ||
| height: 100px; | ||
| white-space: pre; | ||
| } | ||
| .test { | ||
| background: green; | ||
| color: red; | ||
| width: 4ch; | ||
| z-index: -1; | ||
|
|
||
| white-space: break-spaces; | ||
| word-break: break-word; | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> | ||
| <div class="red">XXXX<br> <br>XXXX<br></div> | ||
| <div class="test">XXXX XXXX </div> |