line-breaking-ic-003

CSS Text — line breaking at element boundary with ideographic caracters 1

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 with ideographic caracters 1</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-ic-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     background: green;
12     line-height: 1em;
13     width: 1em;
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     background: red;
26     position: absolute;
27     left: 0;
28     top: 1em;
29     z-index: -1;
30 }
31 </style>
32 </head><body>
33     <p>There should be a green rectangle and no red.</p>
34     <div class="container">
35         <div><span></span><span></span></div>
36         <div class="fail"></div>
37     <div>
38 
39 
40 </div></div></body></html>