position-sticky-container.html (4141B)
1 <!doctype html> 2 <title>Table parts sticky containers</title> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <script src='/resources/testharness.js'></script> 5 <script src='/resources/testharnessreport.js'></script> 6 <link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org" /> 7 <link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> 8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5020"/> 9 <style> 10 body { 11 margin: 0; 12 } 13 main * { 14 box-sizing: border-box; 15 } 16 17 main .scroller { 18 width: 350px; 19 height: 302px; 20 overflow-y: scroll; 21 outline-offset: -1px; 22 outline: gray solid 1px; 23 } 24 main .padblock { 25 width: 300px; 26 height: 400px; 27 outline-offset: -2px; 28 outline: black dotted 2px; 29 } 30 main table { 31 border-spacing: 0; 32 } 33 34 main td { 35 width: 100px; 36 height: 25px; 37 } 38 .sticky { 39 position:sticky; 40 top: 0; 41 background: rgba(0,255,0, 0.3); 42 } 43 44 </style> 45 <main> 46 <div class="scroller"> 47 <div class="padblock">top</div> 48 <table> 49 <thead> 50 <tr> 51 <td>h:0,0</td> 52 <td>h:0,1</td> 53 <td>h:0,2</td> 54 </tr> 55 <tr > 56 <td>h:1,0</td> 57 <td >h:1,1</td> 58 <td>h:1,2</td> 59 </tr> 60 <tr> 61 <td>h:2,0</td> 62 <td>h:2,1</td> 63 <td>h:2,2</td> 64 </tr> 65 </thead> 66 <tbody> 67 <tr> 68 <td>b:0,0</td> 69 <td>b:0,1</td> 70 <td>b:0,2</td> 71 </tr> 72 <tr> 73 <td>b:1,0</td> 74 <td>b:1,1</td> 75 <td>b:1,2</td> 76 </tr> 77 <tr> 78 <td>b:2,0</td> 79 <td>b:2,1</td> 80 <td>b:2,2</td> 81 </tr> 82 </tbody> 83 <tfoot> 84 <tr> 85 <td>f:0,0</td> 86 <td>f:0,1</td> 87 <td>f:0,2</td> 88 </tr> 89 <tr> 90 <td>f:1,0</td> 91 <td>f:1,1</td> 92 <td>f:1,2</td> 93 </tr> 94 <tr> 95 <td>f:2,0</td> 96 <td>f:2,1</td> 97 <td>f:2,2</td> 98 </tr> 99 </tfoot> 100 </table> 101 <div class="padblock">bottom</div> 102 </div> 103 </main> 104 <script> 105 106 function scrollTo(y) { 107 let scroller = document.querySelector("main .scroller"); 108 scroller.scrollTop = y; 109 } 110 111 test( () => { 112 // Setup 113 let target = document.querySelector("main tbody tr:nth-child(2) td:nth-child(2)"); 114 let scroller = document.querySelector("main .scroller"); 115 target.classList.toggle("sticky"); 116 117 // Tests 118 scrollTo(0); 119 assert_equals(target.getBoundingClientRect().top, 500, "intrinsic position"); 120 121 scrollTo(600); 122 assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); 123 124 scrollTo(640); 125 assert_equals(target.getBoundingClientRect().top, -40, "sticking to the table bottom"); 126 127 // Teardown 128 target.classList.toggle("sticky"); 129 }, "TD sticky container is table"); 130 131 test( () => { 132 // Setup 133 let target = document.querySelector("main tbody tr:nth-child(2)"); 134 let scroller = document.querySelector("main .scroller"); 135 target.classList.toggle("sticky"); 136 137 // Tests 138 scrollTo(0); 139 assert_equals(target.getBoundingClientRect().top, 500, "intrinsic position"); 140 141 scrollTo(600); 142 assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); 143 144 scrollTo(640); 145 assert_equals(target.getBoundingClientRect().top, -40, "sticking to the table bottom"); 146 // Teardown 147 target.classList.toggle("sticky"); 148 }, "TR sticky container is table"); 149 150 151 test( () => { 152 // Setup 153 let target = document.querySelector("main tbody"); 154 let scroller = document.querySelector("main .scroller"); 155 target.classList.toggle("sticky"); 156 157 // Tests 158 scrollTo(0); 159 assert_equals(target.getBoundingClientRect().top, 475, "intrinsic position"); 160 161 scrollTo(550); 162 assert_equals(target.getBoundingClientRect().top, 0, "sticking to the table"); 163 164 scrollTo(600); 165 assert_equals(target.getBoundingClientRect().top, -50, "sticking to the table bottom"); 166 167 // Teardown 168 target.classList.toggle("sticky"); 169 }, "TBODY sticky container is table"); 170 171 </script>