1134849-orthogonal-inline.html (1182B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test for bug 1134849</title> 6 <style> 7 div { display: inline-block; vertical-align: top; 8 inline-size: 12em; block-size: 15em; 9 border: solid silver; margin: 10px; } 10 p { margin: 5px; } 11 .h { writing-mode: horizontal-tb; } 12 .v-lr { writing-mode: vertical-lr; } 13 .v-rl { writing-mode: vertical-rl; } 14 span, b { display: inline; } /* but because they're orthogonal, this will compute to inline-block */ 15 </style> 16 </head> 17 <body> 18 <div class="h"> 19 <p>The <span class="v-lr" id="test">quick <b>brown</b> fox</span> jumps over<br>the <b class="v-rl">lazy</b> dog.</p> 20 </div> 21 <div class="v-lr"> 22 <p>The <span class="h">quick <b>brown</b> fox</span> jumps over<br>the <b class="h">lazy</b> dog.</p> 23 </div> 24 <div class="v-rl"> 25 <p>The <span class="h">quick <b>brown</b> fox</span> jumps over<br>the <b class="h">lazy</b> dog.</p> 26 </div> 27 <br> 28 <script> 29 /* this should append "inline-block" to the document, not "inline" */ 30 document.write(window.getComputedStyle(document.querySelector("#test")).display); 31 </script> 32 </body> 33 </html>