absolute-positioning-definite-sizes-001.html (1379B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolute positioning definite sizes</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 <meta name="flags" content="ahem"> 7 <meta name="assert" content="Items should extend to fill the width of the absolutely positioned grid container."> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .grid { 11 display: grid; 12 grid-template: 50px 1fr / 1fr; 13 14 position: absolute; 15 left: 50px; 16 top: 50px; 17 18 width: 200px; 19 height: 200px; 20 21 border: 7px solid #ccc; 22 font: 10px/1 Ahem; 23 } 24 25 .row1 { 26 grid-row-start: 1; 27 background-color: yellow; 28 } 29 30 .row2 { 31 grid-row-start: 2; 32 background-color: cyan; 33 } 34 </style> 35 <script src="/resources/testharness.js"></script> 36 <script src="/resources/testharnessreport.js"></script> 37 <script src="/resources/check-layout-th.js"></script> 38 <script type="text/javascript"> 39 setup({ explicit_done: true }); 40 </script> 41 42 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 43 44 <div id="log"></div> 45 46 <div class="grid"> 47 <div class="row1" data-expected-height="50" data-expected-width="200">XXX X</div> 48 <div class="row2" data-expected-height="150" data-expected-width="200">XX XXX XX</div> 49 </div> 50 51 </body>