column-flow-tolerance-infinite.html (1542B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Grid Lanes Test: Infinite value of flow-tolerance</title> 5 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#item-slack"> 7 <link rel="match" href="column-flow-tolerance-infinite-ref.html"> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <style> 10 .grid-lanes { 11 display: grid-lanes; 12 grid-lanes-direction: column; 13 background: gray; 14 grid-template-columns: repeat(4, 1fr); 15 flow-tolerance: infinite; 16 gap: 20px; 17 padding: 20px; 18 width: 380px; 19 font: 15px/1 Ahem; 20 } 21 22 .auto-item { 23 padding: 10px; 24 width: 50px; 25 background: lightskyblue; 26 } 27 </style> 28 <body> 29 <p>Test that the infinite tie threshold for grid-lanes is correctly resolved.</p> 30 <div class="grid-lanes"> 31 <div class="auto-item" style="height: 40px">1</div> 32 <div class="auto-item" style="height: 30px">2</div> 33 <div class="auto-item" style="height: 20px">3</div> 34 <div class="auto-item" style="height: 10px">4</div> 35 <div class="auto-item" style="height: 40px">5</div> 36 <div class="auto-item" style="height: 30px">6</div> 37 <div class="auto-item" style="height: 20px">7</div> 38 <div class="auto-item" style="height: 10px">8</div> 39 <div class="auto-item" style="height: 40px">9</div> 40 <div class="auto-item" style="height: 30px">10</div> 41 <div class="auto-item" style="height: 20px">11</div> 42 <div class="auto-item" style="height: 10px">12</div> 43 </div> 44 </body> 45 </html>