image.tentative.html (1166B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#repeated-headers"> 4 <link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> 5 <style> 6 .table { 7 display: table; 8 width: 100%; 9 } 10 .header { 11 display: table-header-group; 12 break-inside: avoid; 13 } 14 .filler { 15 display: table-row; 16 break-inside: avoid; 17 height: 350px; 18 } 19 img { 20 width: 100%; 21 height: 100px; 22 } 23 </style> 24 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 25 <div style="width:100px; height:100px; background:red;"> 26 <div style="columns:4; gap:0; column-fill:auto; height:500px;"> 27 <div class="table"> 28 <div class="header"> 29 <!-- The image src is a 1x1 green pixel. --> 30 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGhg+A8AAoQBgNXA8F0AAAAASUVORK5CYII="> 31 </div> 32 <div class="filler"></div> 33 <div class="filler"></div> 34 <div class="filler"></div> 35 <div class="filler"></div> 36 </div> 37 </div> 38 </div>