grid-positioned-items-gaps-002-rtl.html (1668B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</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"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"> 7 <meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps."> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <style> 10 11 .grid { 12 grid-template-columns: 100px 100px 100px 100px; 13 grid-template-rows: 50px 50px 50px 50px; 14 width: 800px; 15 height: 600px; 16 border: 5px solid black; 17 margin: 30px; 18 padding: 15px; 19 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 20 position: relative; 21 } 22 23 .grid > div { 24 position: absolute; 25 top: 0; 26 bottom: 0; 27 left: 0; 28 right: 0; 29 background-color: lime; 30 } 31 32 </style> 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script src="/resources/check-layout-th.js"></script> 36 37 <body onload="checkLayout('.grid')"> 38 39 <div id="log"></div> 40 41 <div class="grid directionRTL" style="gap: 10%;"> 42 <div style="grid-column: 2 / 4; grid-row: 2 / 4;" 43 data-offset-x="355" data-offset-y="125" data-expected-width="280" data-expected-height="160"> 44 </div> 45 </div> 46 47 <div class="grid directionRTL" style="gap: calc(10% + 25px);"> 48 <div style="grid-column: 2 / 4; grid-row: 2 / 4;" 49 data-offset-x="305" data-offset-y="150" data-expected-width="305" data-expected-height="185"> 50 </div> 51 </div> 52 53 </body>