grid-row-axis-alignment-sticky-positioned-items-001.html (2420B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Self-Alignment along row 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/#row-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-justify-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 width: 500px; 15 } 16 .grid { 17 position: relative; 18 display: grid; 19 grid-template-columns: 100px 100px 100px 300px; 20 grid-template-rows: 75px 75px 75px 75px; 21 background: grey; 22 width: 400px; 23 margin-bottom: 20px; 24 } 25 .sticky { 26 position: -webkit-sticky; 27 position: sticky; 28 width: 20px; 29 height: 20px; 30 background-color: #cae8ca; 31 } 32 .item1 { 33 left: 0px; 34 grid-column: 1; 35 grid-row: 1; 36 } 37 .item2 { 38 left: 0px; 39 grid-column: 2; 40 grid-row: 2; 41 } 42 .item3 { 43 left: 0px; 44 grid-column: 3; 45 grid-row: 3; 46 } 47 .item4 { 48 grid-column: 4; 49 grid-row: 4; 50 background: lightgrey; 51 } 52 .scroll { overflow: auto; } 53 </style> 54 <script src="/resources/testharness.js"></script> 55 <script src="/resources/testharnessreport.js"></script> 56 <script src="/resources/check-layout-th.js"></script> 57 <body onload="checkLayout('.grid')"> 58 <div class="container"> 59 <div style="width: 30px; float:left; height: 10px;"></div> 60 <div class="grid"> 61 <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div> 62 <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div> 63 <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div> 64 <div class="item4"></div> 65 </div> 66 <div style="width: 30px; float:left; height: 10px;"></div> 67 <div class="grid scroll"> 68 <div class="item1 sticky justifySelfStart" data-offset-x="0" data-offset-y="0"></div> 69 <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div> 70 <div class="item3 sticky justifySelfEnd" data-offset-x="280" data-offset-y="150"></div> 71 <div class="item4"></div> 72 </div> 73 <div style="width: 2000px; height: 10px;"></div> 74 </div> 75 </body>