grid-column-axis-alignment-sticky-positioned-items-001.html (2322B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> 6 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos"> 7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"> 8 <link rel="stylesheet" href="../../support/alignment.css"> 9 <meta name="assert" content="Sticky positioned grid items are aligned correcly."> 10 <style> 11 .container { 12 border: solid 1px; 13 overflow: auto; 14 height: 500px; 15 } 16 .grid { 17 position: relative; 18 float: left; 19 display: grid; 20 grid-template-columns: 75px 75px 75px 75px; 21 grid-template-rows: 100px 100px 100px 300px; 22 background: grey; 23 height: 400px; 24 margin-right: 20px; 25 } 26 .sticky { 27 position: -webkit-sticky; 28 position: sticky; 29 width: 20px; 30 height: 20px; 31 background-color: #cae8ca; 32 } 33 .item1 { 34 top: 0px; 35 grid-column: 1; 36 grid-row: 1; 37 } 38 .item2 { 39 top: 0px; 40 grid-column: 2; 41 grid-row: 2; 42 } 43 .item3 { 44 top: 0px; 45 grid-column: 3; 46 grid-row: 3; 47 } 48 .item4 { 49 grid-column: 4; 50 grid-row: 4; 51 background: lightgrey; 52 } 53 .scroll { overflow: auto; } 54 </style> 55 <script src="/resources/testharness.js"></script> 56 <script src="/resources/testharnessreport.js"></script> 57 <script src="/resources/check-layout-th.js"></script> 58 <body onload="checkLayout('.grid')"> 59 <div class="container"> 60 <div style="height:30px"></div> 61 <div class="grid"> 62 <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div> 63 <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div> 64 <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div> 65 <div class="item4"></div> 66 </div> 67 <div class="grid scroll"> 68 <div class="item1 sticky alignSelfStart" data-offset-x="0" data-offset-y="0"></div> 69 <div class="item2 sticky alignSelfCenter" data-offset-x="75" data-offset-y="140"></div> 70 <div class="item3 sticky alignSelfEnd" data-offset-x="150" data-offset-y="280"></div> 71 <div class="item4"></div> 72 </div> 73 <div style="height:2000px"></div> 74 </div> 75 </body>