position-fixed-in-scroll-container.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!DOCTYPE html>
  2. <html reftest-async-scroll>
  3. <!-- In this test, the div |fixed| is fixed with respect to the
  4. page's root scroll frame, but there's also a subframe |scrollbox|
  5. which is async-scrolled and which generates a container layer
  6. (because of the opacity), so that its async transform is on an
  7. ancestor layer of |fixed|'s layer. We are testing that this
  8. async transform is correctly unapplied to keep |fixed| fixed. -->
  9. <style>
  10. body {
  11. height: 10000px;
  12. }
  13. .outer-opacity {
  14. opacity: 0.8;
  15. }
  16. .scrollbox {
  17. border: 1px solid black;
  18. width: 200px;
  19. height: 400px;
  20. overflow: hidden;
  21. }
  22. .inner-opacity {
  23. height: 1000px;
  24. opacity: 0.8;
  25. }
  26. .fixed {
  27. background: blue;
  28. width: 100px;
  29. height: 100px;
  30. position: fixed;
  31. }
  32. </style>
  33. <div class="outer-opacity">
  34. <div class="scrollbox"
  35. reftest-displayport-x="0" reftest-displayport-y="0"
  36. reftest-displayport-w="200" reftest-displayport-h="1000"
  37. reftest-async-scroll-x="0" reftest-async-scroll-y="50">
  38. <div class="inner-opacity">
  39. <div class="fixed"></div>
  40. </div>
  41. </div>
  42. </div>
  43. </html>