1673677-3-ref.html (1616B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Reference case 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 .inner-table { 42 contain: layout; 43 } 44 </style> 45 <div class="grid"> 46 <div class="wrapper"> 47 <table class="inner-table" style="writing-mode: vertical-lr;"> 48 <tr><td><div class="filler-nested-table"></div></td></tr> 49 </table> 50 </div> 51 <div><div class="filler"></div></div> 52 </div> 53 <div class="grid" style="writing-mode: vertical-lr;"> 54 <div class="wrapper"> 55 <table class="inner-table" style="writing-mode: horizontal-tb;"> 56 <tr><td><div class="filler-nested-table"></div></td></tr> 57 </table> 58 </div> 59 <div><div class="filler"></div></div> 60 </div> 61 <div class="grid" style="writing-mode: vertical-rl;"> 62 <div class="wrapper"> 63 <table class="inner-table" style="writing-mode: horizontal-tb;"> 64 <tr><td><div class="filler-nested-table"></div></td></tr> 65 </table> 66 </div> 67 <div><div class="filler"></div></div> 68 </div>