grid-filled-blue-yellow-green-overlapped-100px-squares.html (934B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <style> 6 #main { 7 position: relative; 8 } 9 10 #main div { 11 width: 100px; 12 height: 100px; 13 } 14 15 .blue { 16 background-color: blue; 17 position: absolute; 18 left: 0px; 19 top: 0px; 20 } 21 22 .yellow { 23 background-color: yellow; 24 position: absolute; 25 left: 25px; 26 top: 25px; 27 } 28 29 .green { 30 background-color: green; 31 position: absolute; 32 left: 50px; 33 top: 50px; 34 } 35 </style> 36 <p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p> 37 38 <div id="main"> 39 <div class="blue"></div> 40 <div class="yellow"></div> 41 <div class="green"></div> 42 </div>