blob: 3f1472c7ec93cacde754c2dcddaaeb36c3bfa29e [file] [log] [blame]
<!DOCTYPE html>
<!--
| Wrapping is only performed at an allowed break point, called a soft wrap
| opportunity. In most writing systems, in the absence of hyphenation a soft
| wrap opportunity occurs only at word boundaries.
| https://www.w3.org/TR/css3-text/#soft-wrap-opportunity
|
| Wrapping cannot occur before the line is justified. Inline elements with
| non-zero margins, padding, and borders in a box justify the line.
| https://www.w3.org/TR/CSS21/visuren.html#phantom-line-box
|
| While the spec is not clear as to whether the start or end edge of an
| inline element with non-zero margins, padding, and borders justifies the
| line, both WebKit and Firefox treat the end edge as the point where
| justification occurs; resultantly, Cobalt also treats the end edge as the
| point of justification.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
font-size: 20px;
}
div {
overflow-wrap: normal;
}
.containing-block {
background-color: #03a9f4;
width: 202px;
}
.overflow-padding-span {
padding: 0px 0px 0px 220px;
}
.colored-span {
background-color: #aeea00;
}
</style>
</head>
<body>
<div class="containing-block">
<div><span class="overflow-padding-span colored-span"> test</span></div>
<div><span><span class="overflow-padding-span colored-span"> test</span></span></div>
<div><span class="overflow-padding-span colored-span"><span> test</span></span></div>
<div><span><span class="overflow-padding-span colored-span"><span> test</span></span></span></div>
<div><span class="overflow-padding-span colored-span"> </span>test</div>
<div><span><span class="overflow-padding-span colored-span"> </span>test</span></div>
<div><span class="overflow-padding-span colored-span"></span> test</div>
<div><span class="overflow-padding-span colored-span"></span><span> test</span></div>
</div>
</body>
</html>