-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tests for text-wrap: balance and br
Related to w3c/csswg-drafts#9112
- Loading branch information
Showing
3 changed files
with
202 additions
and
0 deletions.
There are no files selected for viewing
63 changes: 63 additions & 0 deletions
63
css/css-text/white-space/reference/text-wrap-balance-004-misref.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,63 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" > | ||
| <meta charset="utf-8"> | ||
| <title>CSS test reference</title> | ||
| <link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> | ||
|
|
||
| <style> | ||
| section { | ||
| width: 50ch; | ||
| font-family: monospace; | ||
| } | ||
| .test { color: blue; } | ||
| .ref { color: orange; } | ||
| .mis { color: magenta; } | ||
|
|
||
| </style> | ||
|
|
||
| <p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. | ||
|
|
||
| <section class=test> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| <br> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </section> | ||
|
|
||
| <section class=ref> | ||
| <div> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| </div> | ||
| <div> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class=mis> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| <br> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </section> |
69 changes: 69 additions & 0 deletions
69
css/css-text/white-space/reference/text-wrap-balance-004-ref.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,69 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" > | ||
| <meta charset="utf-8"> | ||
| <title>CSS test reference</title> | ||
| <link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> | ||
|
|
||
| <style> | ||
| section { | ||
| width: 50ch; | ||
| font-family: monospace; | ||
| } | ||
| .test, .ref { | ||
| text-wrap: balance; | ||
| } | ||
| .test { color: blue; } | ||
| .ref { color: orange; } | ||
| .mis { color: magenta; } | ||
|
|
||
| </style> | ||
|
|
||
| <p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. | ||
|
|
||
| <section class=test> | ||
| <div> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| </div> | ||
| <div> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class=ref> | ||
| <div> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| </div> | ||
| <div> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class=mis> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| <br> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </section> |
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,70 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" > | ||
| <meta charset="utf-8"> | ||
| <title>CSS test: balancing and forced breaks</title> | ||
| <link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> | ||
| <link rel='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'> | ||
| <meta name="assert" content="Groups of lines separated by a forced line break are processed separately."> | ||
| <link rel="match" href="reference/text-wrap-balance-004-ref.html"> | ||
| <link rel="mismatch" href="reference/text-wrap-balance-004-misref.html"> | ||
|
|
||
| <style> | ||
| section { | ||
| width: 50ch; | ||
| font-family: monospace; | ||
| } | ||
| .test, .ref { | ||
| text-wrap: balance; | ||
| } | ||
| .test { color: blue; } | ||
| .ref { color: orange; } | ||
| .mis { color: magenta; } | ||
|
|
||
| </style> | ||
|
|
||
| <p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. | ||
|
|
||
| <section class=test> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| <br> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </section> | ||
|
|
||
| <section class=ref> | ||
| <div> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| </div> | ||
| <div> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class=mis> | ||
| Lorem ipsum dolor sit amet, | ||
| consectetur adipiscing elit, | ||
| sed do eiusmod tempor incididunt | ||
| ut labore et dolore magna aliqua. | ||
| Ut enim ad minim veniam, | ||
| quis nostrud exercitation ullamco laboris nisi | ||
| ut aliquip ex ea commodo consequat. | ||
| <br> | ||
| Duis aute irure dolor in reprehenderit | ||
| in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. | ||
| </section> |