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