absolute-positioning-grid-container-parent-001.html (4160B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolute positioning grid container parent</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="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as parent."> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <style> 10 11 .grid { 12 grid-template-columns: 50px 100px 150px; 13 grid-template-rows: 25px 50px 100px; 14 width: 300px; 15 height: 200px; 16 border: 5px solid black; 17 margin: 20px 30px; 18 padding: 5px 15px; 19 } 20 21 .container { 22 width: 500px; 23 height: 400px; 24 } 25 26 .relative { 27 /* Ensures that the element is the containing block of the absolutely positioned elements. */ 28 position: relative; 29 } 30 31 .absolute { 32 position: absolute; 33 } 34 35 </style> 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 <script type="text/javascript"> 40 setup({ explicit_done: true }); 41 </script> 42 <body onload="document.fonts.ready.then(() => { checkLayout('.container'); })"> 43 44 <div id="log"></div> 45 46 <div class="container relative"> 47 <div class="grid"> 48 <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> 49 </div> 50 </div> 51 52 <div class="container relative"> 53 <div class="grid"> 54 <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> 55 </div> 56 </div> 57 58 <div class="container relative"> 59 <div class="grid"> 60 <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> 61 </div> 62 </div> 63 64 <div class="container"> 65 <div class="grid relative"> 66 <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div> 67 </div> 68 </div> 69 70 <div class="container"> 71 <div class="grid relative"> 72 <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div> 73 </div> 74 </div> 75 76 <div class="container"> 77 <div class="grid relative"> 78 <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="65" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div> 79 </div> 80 </div> 81 82 <div class="container relative"> 83 <div class="grid directionRTL"> 84 <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> 85 </div> 86 </div> 87 88 <div class="container relative"> 89 <div class="grid directionRTL"> 90 <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> 91 </div> 92 </div> 93 94 <div class="container relative"> 95 <div class="grid directionRTL"> 96 <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> 97 </div> 98 </div> 99 100 <div class="container"> 101 <div class="grid relative directionRTL"> 102 <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div> 103 </div> 104 </div> 105 106 <div class="container"> 107 <div class="grid relative directionRTL"> 108 <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div> 109 </div> 110 </div> 111 112 <div class="container"> 113 <div class="grid relative directionRTL"> 114 <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div> 115 </div> 116 </div> 117 118 </body>