eol-spaces-bidi-002-ref.html (1992B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text 3 test reference</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 6 <style> 7 @font-face { 8 font-family: "Hasubi Mono"; 9 src: url("/fonts/hasubi-mono/HasubiMono-Regular.woff2"); 10 } 11 12 div { 13 font-family: "Hasubi Mono", monospace; 14 border: solid blue; 15 font-size: 1.5em; 16 white-space: pre; 17 } 18 .ref { 19 border-color: orange; 20 } 21 .w6 { width: 6.01ch; } 22 .w7 { width: 7.01ch; } 23 .w8 { width: 8.01ch; } 24 .w9 { width: 9.01ch; } 25 26 .blue { background: #aaaaff; } 27 .red { background: #ffaaaa; } 28 .green { background: #aaffaa; } 29 .pink { background: #ffaaff; } 30 .yellow { background: #ffffaa; } 31 </style> 32 33 <p>Test passes if each pair of blue / orange boxes are identical (except for the color of their border). 34 35 36 <div class="w6"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<br>ب<span class=yellow> </span></div> 37 <div class="w6 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<br>ب<span class=yellow> </span></div> 38 39 <hr> 40 41 <div class="w7"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span><br>ب<span class=yellow> </span></div> 42 <div class="w7 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span><br>ب<span class=yellow> </span></div> 43 44 <hr> 45 46 <div class="w8"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div> 47 <div class="w8 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div> 48 49 <hr> 50 51 <div class="w9"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div> 52 <div class="w9 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>