testing/web-platform/tests/css/css-anchor-position/sticky-anchor-position-invalid.html

   1 <!DOCTYPE html>
   2 <title>Anchor queries in sticky positioning is invalid</title>
   3 <link rel="author" href="mailto:xiaochengh@chromium.org">
   4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#valid-anchor-function">
   5 <link rel="match" href="reference/sticky-anchor-position-invalid-ref.html">
   6 <style>
   7 #scroll-container {
   8   width: 200px;
   9   height: 200px;
  10   overflow-y: scroll;
  11 }
  12
  13 #scroller {
  14   height: 400px;
  15 }
  16
  17 #sticky {
  18   position: sticky;
  19   height: 150px;
  20   background: green;
  21   top: anchor(--invalid top, 42px); /* Should use the fallback */
  22 }
  23 </style>
  24 <div id="scroll-container">
  25   <div id="scroller">
  26     <div id="sticky">
  27     </div>
  28   </div>
  29 </div>
  30 <script>
  31 document.getElementById("scroll-container").scrollTop = 50;
  32 </script>