Status: FAIL | Duration: 13ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Grid Lanes Test: evaluate how baseline alignment with multi-span items affects intrinsic track sizes</title> <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing-performance"> <link rel="match" href="grid-lanes-baseline-alignment-affects-intrinsic-size-008-ref.html"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> <style> .grid-lanes { display: grid-lanes; width: 200px; margin-bottom: 20px; align-items: baseline; background: lightgray; font-family: Ahem; line-height: 1; flow-tolerance: 0; } </style> </head> <body> <!-- Two 1-span items in rows 1 and 3, and a singular 3-span item across all rows. Row 2 is fixed at 30px. The 3-span item participates in its start-most row (row 1) for first-baseline alignment. Ahem 10px: baseline=8. Ahem 20px: baseline=16. Row 1 shared baseline = max(16, 50+16) = 66. lightblue: shim = 66-16 = 50, contribution = 40+50 = 90 lightgreen (spans rows 1-3): shim = 0, contribution = 70 Row 3: only lightyellow, no shim, contribution = 10. Row 1 = 90, Row 2 = 30 (fixed), Row 3 = 10 --> <div class="grid-lanes" style="grid-template-rows: minmax(0px, auto) 30px minmax(0px, auto);"> <div style="font-size: 20px; padding-bottom: 20px; width: 50px; background: lightblue; grid-row: 1;">É</div> <div style="font-size: 10px; width: 50px; background: lightyellow; grid-row: 3;">É</div> <div style="font-size: 20px; padding-top: 50px; width: 50px; background: lightgreen; grid-row: 1 / span 3;">É</div> </div> <!-- Three 1-span items in rows 1-3, and two 2-span items overlapping rows 1-2 and 2-3. Row 2 is fixed at 20px. The 2-span items have larger baselines (padding-top:30px and 25px) than the 1-span items, and they participate in their start-most row for first-baseline alignment. Ahem 10px: baseline=8. Ahem 20px: baseline=16. Row 1 shared baseline = max(8, 30+16) = 46. coral: shim = 46-8 = 38, contribution = 10+38 = 48 gold (spans rows 1-2): shim = 0, contribution = 50 Row 3 shared baseline = max(8, 25+16) = 41. lightsalmon: shim = 41-8 = 33, contribution = 10+33 = 43 palegreen (spans rows 2-3): shim = 0, contribution = 45 Row 1 = 48, Row 2 = 20 (fixed), Row 3 = 25 --> <div class="grid-lanes" style="grid-template-rows: minmax(0px, auto) 20px minmax(0px, auto);"> <div style="font-size: 10px; width: 50px; background: coral; grid-row: 1;">É</div> <div style="font-size: 10px; width: 50px; background: plum; grid-row: 2;">É</div> <div style="font-size: 10px; width: 50px; background: lightsalmon; grid-row: 3;">É</div> <div style="font-size: 20px; padding-top: 30px; width: 50px; background: gold; grid-row: 1 / span 2;">É</div> <div style="font-size: 20px; padding-top: 25px; width: 50px; background: palegreen; grid-row: 2 / span 2;">É</div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> <style> .grid { display: grid; grid-template-columns: repeat(5, 50px); width: 200px; margin-bottom: 20px; align-items: baseline; background: lightgray; font-family: Ahem; line-height: 1; } </style> </head> <body> <div class="grid" style="grid-template-rows: minmax(0px, auto) 30px minmax(0px, auto);"> <div style="font-size: 20px; padding-bottom: 20px; width: 50px; background: lightblue; grid-row: 1;">É</div> <div style="font-size: 10px; width: 50px; background: lightyellow; grid-row: 3;">É</div> <div style="font-size: 20px; padding-top: 50px; width: 50px; background: lightgreen; grid-row: 1 / span 3;">É</div> </div> <div class="grid" style="grid-template-rows: minmax(0px, auto) 20px minmax(0px, auto);"> <div style="font-size: 10px; width: 50px; background: coral; grid-row: 1;">É</div> <div style="font-size: 10px; width: 50px; background: plum; grid-row: 2;">É</div> <div style="font-size: 10px; width: 50px; background: lightsalmon; grid-row: 3;">É</div> <div style="font-size: 20px; padding-top: 30px; width: 50px; background: gold; grid-row: 1 / span 2;">É</div> <div style="font-size: 20px; padding-top: 25px; width: 50px; background: palegreen; grid-row: 2 / span 2;">É</div> </div> </body> </html>