sections-and-captions-mixed-order.html (1261B)
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-break-3/#parallel-flows"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> 5 <style> 6 #table > div { 7 background: green; 8 } 9 </style> 10 <link rel="match" href="sections-and-captions-mixed-order-ref.html"> 11 <p>There should be four columns with the numbers from 1 to 20 in ascending 12 order. No red should be seen.</p> 13 <div style="columns:4; column-gap:0; column-fill:auto; width:200px; line-height:20px; height:100px; orphans:1; widows:1; background:red;"> 14 <div id="table" style="display:table; width:100%;"> 15 <div style="display:table-caption; caption-side:bottom;">14</div> 16 <div style="display:table-caption;">1</div> 17 <div style="display:table-footer-group;">8<br>9<br>10<br>11<br>12<br>13</div> 18 <div style="display:table-row-group;">4</div> 19 <div style="display:table-row-group;">5<br>6</div> 20 <div style="display:table-footer-group;">7</div> 21 <div style="display:table-header-group;">3</div> 22 <div style="display:table-caption; caption-side:bottom;">15<br>16<br>17<br>18<br>19<br>20</div> 23 <div style="display:table-caption;">2</div> 24 </div> 25 </div>