grid-paint-positioned-children-001.html (1284B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid paint positioned children</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> 6 <link rel="match" href="grid-paint-positioned-children-001-ref.html"> 7 <link rel="stylesheet" href="/css/support/grid.css"> 8 <style> 9 .grid { 10 border: 2px solid black; 11 position: relative; 12 width: 100px; 13 14 grid-template-columns: 10px 20px 30px 40px; 15 16 padding-top: 10px; 17 } 18 19 .abs { 20 height: 5px; 21 position: absolute; 22 width: 100%; 23 } 24 25 #item { 26 width: 90px; 27 height: 30px; 28 } 29 30 </style> 31 32 <p>This test passes if you see a gray box with a black border color with 5 rectangles inside. The first line contains a purple, orange, yellow and magenta boxes. Bellow them you should see a 90px cyan box.</p> 33 34 <div class="grid"> 35 <div id="item" style="grid-column: 1 / -1; background: cyan;"></div> 36 <div class="abs" style="grid-column: 1 / 2; background: purple;"></div> 37 <div class="abs" style="grid-column: 2 / 3; background: orange;"></div> 38 <div class="abs" style="grid-column: 3 / 4; background: yellow;"></div> 39 <div class="abs" style="grid-column: 4 / 5; background: magenta;"></div> 40 </div>