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