Status: FAIL | Duration: 30ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi
/css/css-grid/grid-lanes/item-placement/row-negative-margin-004.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Grid Lanes: Dense Packing with Negative Margins</title> <link rel="help" href="https://drafts.csswg.org/css-grid-3/"> <link rel="match" href="row-negative-margin-004-ref.html"> <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> <style> .grid-lanes { display: grid-lanes; grid-template-rows: repeat(4, 100px); grid-auto-flow: dense; grid-lanes-pack: dense; gap: 10px; margin-left: 100px; border: solid 2px blue; width: min-content; font-family: Ahem; font-size: 10px; } </style> </head> <body> <p>Test that negative margins affect the item's size and contribution to dense-packing.</p> <div class="grid-lanes"> <div style="background-color: lightcoral; width: 100px;">block</div> <div style="grid-row: span 4; background-color: lightcoral;">spanner</div> <!-- Item 1 should not contribute any size at all to the track opening in Track 2. --> <div style="background-color: lightgreen; width: 30px; margin-left: -45px;">Item 1</div> <div style="background-color: lightblue; width: 100px;">Item 2</div> <!-- Item 3 should add a stacking axis gap contribution to the left of Track 3. An item must be < 90px to fit into the track opening now. --> <div style="background-color: lightgreen; width: 30px; margin-left: -30px;">Item 3</div> <div style="background-color: lightblue; width: 90px; grid-row: 3;">Item 4</div> <!-- Item 5 should not contribute any size at all to the track opening in Track 2. --> <div style="background-color: lightgreen; width: 30px; margin-left: -40px;">Item 5</div> <div style="background-color: lightblue; width: 100px;">Item 6</div> <div style="background-color: lightcoral; width: 100px;">block</div> <div style="grid-row: span 4; background-color: lightcoral;">spanner</div> <!-- Item 7 should not affect the size of the track opening in Track 2 -- Item 8 & 9 will cover Item 7. --> <div style="background-color: lightgreen; width: 30px; margin-right: -45px;">Item 7</div> <div style="background-color: lightblue; width: 15px;">Item 8</div> <!-- Item 9's margin-right should still have an effect on the placement of the item on the right of it. --> <div style="background-color: lightblue; grid-row: 2; width: 40px; margin-right: -20px;">Item 9</div> <div style="background-color: steelblue; grid-row: 2; width: 45px;">Item 10</div> </div> </body> </html>
/css/css-grid/grid-lanes/item-placement/row-negative-margin-004-ref.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Grid Lanes: Dense Packing with Negative Margins</title> <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> <style> .grid { display: grid; grid-template-rows: repeat(4, 100px); gap: 10px; margin-left: 100px; border: solid 2px blue; width: min-content; font-family: Ahem; font-size: 10px; } </style> </head> <body> <p>Test that negative margins affect the item's size and contribution to dense-packing.</p> <div class="grid"> <!-- Section 1: Items dense-packed into openings created by "block" + spanner --> <div style="grid-row: 1; grid-column: 1; background-color: lightcoral; width: 100px;">block</div> <div style="grid-row: 2; grid-column: 1; display: flex;"> <!-- Item 1 at position 0 (contribution 0, overlaps Item 2) --> <div style="background-color: lightgreen; width: 30px; margin-left: -45px;">Item 1</div> <!-- Item 2 at position 0 (fills opening) --> <div style="background-color: lightblue; width: 100px; margin-left: 15px;">Item 2</div> </div> <div style="grid-row: 3; grid-column: 1; display: flex;"> <!-- Item 3 at position 0 (contribution 10, just the gap) --> <div style="background-color: lightgreen; width: 30px; margin-left: -30px;">Item 3</div> <!-- Item 4 at position 10 (fills remaining opening) --> <div style="background-color: lightblue; width: 90px; margin-left: 10px;">Item 4</div> </div> <div style="grid-row: 4; grid-column: 1; display: flex;"> <!-- Item 5 at position 0 (contribution 0, overlaps Item 6) --> <div style="background-color: lightgreen; width: 30px; margin-left: -40px;">Item 5</div> <!-- Item 6 at position 0 (fills opening) --> <div style="background-color: lightblue; width: 100px; margin-left: 10px;">Item 6</div> </div> <!-- Spanner 1 --> <div style="grid-row: 1 / span 4; grid-column: 2; background-color: lightcoral;">spanner</div> <!-- Section 2: Items dense-packed into openings created by "block 2" + spanner 2 --> <div style="grid-row: 1; grid-column: 3; background-color: lightcoral; width: 100px;">block</div> <div style="grid-row: 2; grid-column: 3; display: flex;"> <!-- Item 7 at position 0 (contribution 0, covered by Item 8) --> <div style="background-color: lightgreen; width: 30px; margin-right: -45px; overflow: hidden;">Item 7</div> <!-- Item 8 at position 0 (same as Item 7, contribution 25) --> <div style="background-color: lightblue; width: 15px; margin-left: 15px; position: relative;">Item 8</div> <!-- Item 9 at position 25 (contribution 30) --> <div style="background-color: lightblue; width: 40px; margin-left: 10px; margin-right: -20px; position: relative;">Item 9</div> <!-- Item 10 at position 55 (fills remaining opening) --> <div style="background-color: steelblue; width: 45px; margin-left: 10px; position: relative;">Item 10</div> </div> <!-- Spanner 2 --> <div style="grid-row: 1 / span 4; grid-column: 4; background-color: lightcoral;">spanner</div> </div> </body> </html>