line-breaking-011

CSS Text — line breaking at element boundary 3

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
For soft wrap opportunities defined by the boundary between two characters, the properties on nearest common ancestor of the two characters controls breaking.

Source

 1 <!DOCTYPE html>
 2 <html><head><meta charset="utf-8">
 3 <title>CSS Text — line breaking at element boundary 3</title>
 4 <meta content="For soft wrap opportunities defined by the boundary between two characters, the properties on nearest common ancestor of the two characters controls breaking." name="assert">
 5 <link href="https://www.w3.org/TR/css-text-3/#line-break-details" rel="help">
 6 <link href="reference/line-breaking-001-ref.htm" rel="match">
 7 <link href="http://florian.rivoal.net" rel="author" title="Florian Rivoal">
 8 <style>
 9 div {
10     color:green;
11     width: 1em;
12     line-height: 1em;
13     font-family: ahem;
14     white-space: normal;
15     font-size: 20px;
16 }
17 span {
18     white-space: pre;
19 }
20 .container {
21     position: relative;
22 }
23 .fail {
24     color: red;
25     position: absolute;
26     left: 0;
27     top: 1em;
28     z-index: -1;
29 }
30 </style>
31 </head><body>
32     <p>There should be a green rectangle and no red.</p>
33     <div class="container">
34         <div>X&#x200B;<span>X<span></span></span></div>
35         <div class="fail">X</div>
36     </div>
37 
38 
39 </body></html>