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.
| Wrapping cannot occur before the line is justified. Inline elements with
| non-zero margins, padding, and borders in a box justify the line.
| 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.
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;
<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>