forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-text] overflow-wrap and intrinsic sizing
Goes together with the spec changes for w3c/csswg-drafts#2465
- Loading branch information
Showing
8 changed files
with
226 additions
and
0 deletions.
There are no files selected for viewing
47 changes: 47 additions & 0 deletions
47
css/css-text/overflow-wrap/overflow-wrap-intrinsic-size-001.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,47 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text Test: min-content sizing and overflow-wrap:break-spaces</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> | ||
| <meta name="flags" content=""> | ||
| <link rel="match" href="reference/overflow-wrap-intrinsic-size-001-ref.html"> | ||
| <meta name="assert" content="When overflow-wrap includes break-spaces, preserved spaces at the end of the line do affect the intrinsic min-content size"> | ||
| <style> | ||
| aside { | ||
| float: left; | ||
| white-space: pre-wrap; | ||
| background: green; | ||
| overflow-wrap: break-spaces; | ||
| } | ||
| .bwbs { overflow-wrap: break-word break-spaces; } | ||
| div { | ||
| font-family: monospace; | ||
| color: transparent; | ||
| font-size: 50px; | ||
| width: 0ch; | ||
| } | ||
|
|
||
| #red { | ||
| position: absolute; | ||
| background: red; | ||
| width: auto; | ||
| z-index: -1; | ||
| } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a green rectangle below and no red. | ||
| <div id=red>XS<br>S<br>XS<br>S</div> | ||
| <div> | ||
| <aside>X </aside> | ||
| <aside class=bwbs>X </aside> | ||
| </div> | ||
| <!-- Note: the space immediately following the X does not get wrapped, | ||
| even under break-spaces+break-word: | ||
| The parent of the flow is 0-width, | ||
| so the float is min-content sized, | ||
| which should leave enough room for both the X and one space. | ||
| break-space+break-word would allow for an emergency wrap before the space | ||
| if the float itself was sized too small, | ||
| but it isn't. | ||
| --> |
39 changes: 39 additions & 0 deletions
39
css/css-text/overflow-wrap/overflow-wrap-intrinsic-size-002.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,39 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text Test: max-content sizing and overflow-wrap with break-spaces</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> | ||
| <meta name="flags" content=""> | ||
| <link rel="match" href="reference/overflow-wrap-intrinsic-size-002-ref.html"> | ||
| <meta name="assert" content="When overflow-wrap includes break-spaces, preserved spaces at the end of the line do affect the intrinsic max-content size"> | ||
| <style> | ||
| aside { | ||
| float: left; | ||
| white-space: pre-wrap; | ||
| background: blue; | ||
| } | ||
| aside:last-of-type { | ||
| float:right; | ||
| } | ||
| div { | ||
| color: transparent; | ||
| font-family: monospace; | ||
| font-size: 50px; | ||
| width: 3ch; | ||
| /* both floats should take the full 3ch, | ||
| one on each line | ||
| and therefore line up to look like a single large box. | ||
| If the spaces are not taken into account for min-content sizing, | ||
| the floats will leave a gap between them */ | ||
| } | ||
| .owbs { overflow-wrap: break-spaces; } | ||
| .owbwbs { overflow-wrap: break-word break-spaces; } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a single blue rectangle below. | ||
| <div> | ||
| <aside class=owbs>X </aside> | ||
| <aside class=owbwbs>X </aside> | ||
| </div> |
38 changes: 38 additions & 0 deletions
38
css/css-text/overflow-wrap/overflow-wrap-intrinsic-size-003.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,38 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text Test: min-content sizing and overflow-wrap without break-spaces</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> | ||
| <meta name="flags" content=""> | ||
| <link rel="match" href="reference/overflow-wrap-intrinsic-size-003-ref.html"> | ||
| <meta name="assert" content="When overflow-wrap does not include break-spaces, preserved spaces at the end of the line do not affect the intrinsic min-content size"> | ||
| <style> | ||
| aside { | ||
| float: left; | ||
| white-space: pre-wrap; | ||
| background: red; | ||
| } | ||
| div { | ||
| color: transparent; | ||
| font-size: 50px; | ||
| width: 0ch; | ||
| } | ||
| .own { overflow-wrap: normal; } | ||
| .owbw{ overflow-wrap: break-word; } | ||
|
|
||
| #green { | ||
| position: absolute; | ||
| background: green; | ||
| z-index: 1; | ||
| width: auto; | ||
| } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a green rectangle below and no red. | ||
| <div id=green>X<br>X</div> | ||
| <div> | ||
| <aside class=own>X </aside> | ||
| <aside class=owbw>X </aside> | ||
| </div> | ||
|
|
32 changes: 32 additions & 0 deletions
32
css/css-text/overflow-wrap/overflow-wrap-intrinsic-size-004.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,32 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Text Test: max-content sizing and overflow-wrap without break-spaces</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> | ||
| <meta name="flags" content=""> | ||
| <link rel="match" href="reference/overflow-wrap-intrinsic-size-004-ref.html"> | ||
| <meta name="assert" content="When overflow-wrap does not include break-spaces, preserved spaces at the end of the line do not affect the intrinsic max-content size"> | ||
| <style> | ||
| aside { | ||
| float: left; | ||
| white-space: pre-wrap; | ||
| background: blue; | ||
| margin-bottom: 1em; | ||
| } | ||
| div { | ||
| color: transparent; | ||
| font-family: monospace; | ||
| font-size: 50px; | ||
| width: 5ch; /* enough room for both floats if their max-content size does not include the preserved spaces, | ||
| but not enough if they do, causing a line break in that case. */ | ||
| } | ||
| .own { overflow-wrap: normal; } | ||
| .owbw{ overflow-wrap: break-word; } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a single blue rectangle below. | ||
| <div> | ||
| <aside class=own>X </aside> | ||
| <aside class=owbw>X </aside> | ||
| </div> |
15 changes: 15 additions & 0 deletions
15
css/css-text/overflow-wrap/reference/overflow-wrap-intrinsic-size-001-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,15 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>test reference</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <style> | ||
| div { | ||
| font-family: monospace; | ||
| color: transparent; | ||
| font-size: 50px; | ||
| background: green; | ||
| } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a green rectangle below and no red. | ||
| <div>XS<br>S<br>XS<br>S</div> |
19 changes: 19 additions & 0 deletions
19
css/css-text/overflow-wrap/reference/overflow-wrap-intrinsic-size-002-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,19 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>test reference</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <style> | ||
| div { | ||
| color: transparent; | ||
| background: blue; | ||
| font-family: monospace; | ||
| font-size: 50px; | ||
| width: 3ch; | ||
| } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a single blue rectangle below. | ||
| <div> | ||
| XXX<br> | ||
| XXX | ||
| </div> |
14 changes: 14 additions & 0 deletions
14
css/css-text/overflow-wrap/reference/overflow-wrap-intrinsic-size-003-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,14 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>test reference</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <style> | ||
| div { | ||
| color: transparent; | ||
| font-size: 50px; | ||
| background: green; | ||
| } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a green rectangle below and no red. | ||
| <div>X<br>X</div> |
22 changes: 22 additions & 0 deletions
22
css/css-text/overflow-wrap/reference/overflow-wrap-intrinsic-size-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,22 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>test reference</title> | ||
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> | ||
| <style> | ||
| aside { | ||
| float: left; | ||
| background: blue; | ||
| } | ||
| div { | ||
| color: transparent; | ||
| font-family: monospace; | ||
| font-size: 50px; | ||
| width: 5ch; | ||
| } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a single blue rectangle below. | ||
| <div> | ||
| <aside class=own>X</aside> | ||
| <aside class=owbw>X</aside> | ||
| </div> |