grid-paint-positioned-children-001-ref.html (967B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid paint positioned children reference file</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <style> 6 .grid { 7 border: 2px solid black; 8 width: 100px; 9 height: 40px; 10 background: gray; 11 } 12 13 .abs { 14 height: 5px; 15 float: left; 16 } 17 18 #item { 19 width: 90px; 20 height: 30px; 21 margin-top: 10px; 22 } 23 </style> 24 25 <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> 26 27 <div class="grid"> 28 <div class="abs" style="background: purple; width: 10px;"></div> 29 <div class="abs" style="background: orange; width: 20px;"></div> 30 <div class="abs" style="background: yellow; width: 30px;"></div> 31 <div class="abs" style="background: magenta; width: 40px;"></div> 32 <div id="item" style="background: cyan;"</div> 33 </div>