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