1673677-2.html (1478B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Testcase for bug 1673677</title> 4 <style> 5 .flex { 6 display: flex; 7 align-items: baseline; 8 border: 1px solid; 9 margin-bottom: 5px; 10 width: fit-content; 11 } 12 .wrapper { 13 /* Explicitly specify size, due to bug 1166120 */ 14 inline-size: 125px; 15 block-size: 100px; 16 } 17 table, tr, td { 18 border: 1px solid; 19 border-width: 2px 2px 4px 4px; 20 padding: 3px 3px 6px 6px; 21 margin: 8px 8px 12px 12px; 22 border-spacing: 0; 23 } 24 td { 25 vertical-align: baseline; 26 line-height: 0; 27 } 28 .filler-nested-table { 29 inline-size: 50px; 30 block-size: 75px; 31 background: purple; 32 display: inline-block; 33 } 34 .filler { 35 inline-size: 40px; 36 block-size: 30px; 37 background: pink; 38 display: inline-block; 39 } 40 </style> 41 <div class="flex"> 42 <div class="wrapper"> 43 <table style="writing-mode: vertical-lr;"> 44 <tr><td><div class="filler-nested-table"></div></td></tr> 45 </table> 46 </div> 47 <div><div class="filler"></div></div> 48 </div> 49 <div class="flex" style="writing-mode: vertical-lr;"> 50 <div class="wrapper"> 51 <table style="writing-mode: horizontal-tb;"> 52 <tr><td><div class="filler-nested-table"></div></td></tr> 53 </table> 54 </div> 55 <div><div class="filler"></div></div> 56 </div> 57 <div class="flex" style="writing-mode: vertical-rl;"> 58 <div class="wrapper"> 59 <table style="writing-mode: horizontal-tb;"> 60 <tr><td><div class="filler-nested-table"></div></td></tr> 61 </table> 62 </div> 63 <div><div class="filler"></div></div> 64 </div>