grid-positioned-items-implicit-grid-001.html (3562B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid positioned items implicit grid</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="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid"> 7 <meta name="assert" content="This test checks the behavior of the absolutely positioned grid items placed on the implicit grid."> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <link rel="stylesheet" href="/css/support/grid.css"> 10 <style> 11 12 .grid { 13 width: 200px; 14 height: 200px; 15 border: 5px solid black; 16 margin: 30px; 17 padding: 15px; 18 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 19 position: relative; 20 } 21 22 .grid-columns-rows { 23 grid-template-columns: 100px; 24 grid-template-rows: 50px; 25 } 26 27 .absolute { 28 position: absolute; 29 } 30 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 <script type="text/javascript"> 36 setup({ explicit_done: true }); 37 </script> 38 39 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 40 41 <div id="log"></div> 42 43 <div class="grid"> 44 <div class="sizedToGridArea absolute secondRowSecondColumn" 45 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 46 </div> 47 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 48 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 49 </div> 50 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 51 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 52 </div> 53 </div> 54 55 <div class="grid grid-columns-rows"> 56 <div class="sizedToGridArea absolute secondRowSecondColumn" 57 data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165"> 58 </div> 59 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 60 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 61 </div> 62 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 63 data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165"> 64 </div> 65 </div> 66 67 <div class="grid directionRTL"> 68 <div class="sizedToGridArea absolute secondRowSecondColumn" 69 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 70 </div> 71 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 72 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 73 </div> 74 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 75 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 76 </div> 77 </div> 78 79 <div class="grid grid-columns-rows directionRTL"> 80 <div class="sizedToGridArea absolute secondRowSecondColumn" 81 data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165"> 82 </div> 83 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 84 data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> 85 </div> 86 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 87 data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165"> 88 </div> 89 </div> 90 91 </body>