-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-text] Allow flexibility where spec is undefined
Closes #19903
- Loading branch information
Showing
4 changed files
with
55 additions
and
20 deletions.
There are no files selected for viewing
20 changes: 20 additions & 0 deletions
20
css/css-text/word-break/reference/word-break-break-all-inline-006-a-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,20 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>word-break: break-all on inline element</title> | ||
<link rel='author' title='Jonathan Kew' href='mailto:[email protected]'> | ||
<style> | ||
div { | ||
border: solid 5px; | ||
margin: 5px; | ||
font-family: monospace; | ||
width: 6.1ch; | ||
padding: 1px; | ||
} | ||
.test { word-break: break-all; } | ||
.blue { border-color: blue; } | ||
.orange { border-color: orange; } | ||
</style> | ||
<p>Test passes if the black box is identical to either the blue or the orange one. | ||
<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> | ||
<div>aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> | ||
<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div> |
20 changes: 20 additions & 0 deletions
20
css/css-text/word-break/reference/word-break-break-all-inline-006-b-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,20 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>word-break: break-all on inline element</title> | ||
<link rel='author' title='Jonathan Kew' href='mailto:[email protected]'> | ||
<style> | ||
div { | ||
border: solid 5px; | ||
margin: 5px; | ||
font-family: monospace; | ||
width: 6.1ch; | ||
padding: 1px; | ||
} | ||
.test { word-break: break-all; } | ||
.blue { border-color: blue; } | ||
.orange { border-color: orange; } | ||
</style> | ||
<p>Test passes if the black box is identical to either the blue or the orange one. | ||
<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> | ||
<div>aaaabb<br>bbbbbb<br>bb<br>bccccc</div> | ||
<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div> |
9 changes: 0 additions & 9 deletions
9
css/css-text/word-break/reference/word-break-break-all-inline-006-ref.html
This file was deleted.
Oops, something went wrong.
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 |
---|---|---|
|
@@ -3,18 +3,22 @@ | |
<title>word-break: break-all on inline element</title> | ||
<meta name="assert" content="word-break: break-all works when specified on inline element"> | ||
<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'> | ||
<link rel='match' href='reference/word-break-break-all-inline-006-ref.html'> | ||
<link rel='match' href='reference/word-break-break-all-inline-006-a-ref.html'> | ||
<link rel='match' href='reference/word-break-break-all-inline-006-b-ref.html'> | ||
<link rel='author' title='Jonathan Kew' href='mailto:[email protected]'> | ||
<style> | ||
.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; } | ||
div { | ||
border: solid 5px; | ||
margin: 5px; | ||
font-family: monospace; | ||
width: 6.1ch; | ||
padding: 1px; | ||
} | ||
.test { word-break: break-all; } | ||
.blue { border-color: blue; } | ||
.orange { border-color: orange; } | ||
</style> | ||
<div>Test passes if the two boxes are the same.</div> | ||
<div class="testdiv">aaaa<span class="test">bbbbbbbbbbb</span>ccccc</div> | ||
<!-- | ||
Some browsers may decide to break before the last 'b', which is still conformant from the spec | ||
perspective. However, this test would fail in that case. Current spec states that behavior is | ||
undefined in the boundaries of the inline-box. See https://github.com/web-platform-tests/wpt/issues/19903 | ||
and https://github.com/w3c/csswg-drafts/issues/3897 for details. | ||
--> | ||
<div class="testdiv">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> | ||
<p>Test passes if the black box is identical to either the blue or the orange one. | ||
<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div> | ||
<div>aaaa<span class="test">bbbbbbbbbbb</span>ccccc</div> | ||
<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div> |