| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 .box { |
| 4 position: sticky; |
| 5 } |
| 6 |
| 7 .without-top { |
| 8 top: auto; |
| 9 } |
| 10 |
| 11 .with-top { |
| 12 top: 0px; |
| 13 } |
| 14 |
| 15 .with-bottom { |
| 16 bottom: 0px; |
| 17 } |
| 18 |
| 19 </style> |
| 20 |
| 21 <body> |
| 22 <div class="box without-top">Sticky, no top</div> |
| 23 <div class="box with-top">Sticky, with top</div> |
| 24 <div class="box with-bottom">Sticky, with bottom</div> |
| 25 </body> |
| 26 |
| 27 <!-- top should be auto when not specified for sticky elements. Same for the |
| 28 other attributes.--> |
| 29 <script> |
| 30 if (window.testRunner) |
| 31 testRunner.dumpAsText(); |
| 32 |
| 33 function doTest() { |
| 34 var boxes = document.getElementsByClassName('box'); |
| 35 for (var i = 0; i < boxes.length; ++i) { |
| 36 boxes[i].textContent += ': top = ' + getComputedStyle(boxes[i]).top; |
| 37 boxes[i].textContent += '; bottom = ' + getComputedStyle(boxes[i]).bottom; |
| 38 boxes[i].textContent += '; left = ' + getComputedStyle(boxes[i]).left; |
| 39 boxes[i].textContent += '; right = ' + getComputedStyle(boxes[i]).right; |
| 40 } |
| 41 } |
| 42 |
| 43 window.addEventListener('load', doTest, false); |
| 44 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2870983002:
Update return value of getComputedStyle for sticky elements (Closed)
