| <!DOCTYPE html> |
| <script src="resources/text-based-repaint.js"></script> |
| <script> |
| function repaintTest() { |
| document.getElementById('fixed').style.backgroundColor = 'green'; |
| } |
| onload = function() { |
| document.getElementById('transformed').scrollTop = 50; |
| runRepaintTest(); |
| } |
| </script> |
| <style> |
| #transformed { |
| position: absolute; |
| top: 50px; |
| left: 100px; |
| transform: translateX(0); |
| overflow: scroll; |
| width: 300px; |
| height: 300px; |
| } |
| #fixed { |
| position: fixed; |
| top: 150px; |
| left: 100px; |
| width: 100px; |
| height: 100px; |
| background-color: red; |
| } |
| #relative { |
| position: relative; |
| top: 50px; |
| left: 50px; |
| } |
| /* to make the transformed container scrollable */ |
| #content { |
| width: 1000px; |
| height: 1000px; |
| } |
| </style> |
| Tests invalidation of a fixed-position descendant of a transformed scrolled element. |
| Passes if there is a green box at the center of the scrollable area. |
| <div id="transformed"> |
| <div id="relative"> |
| <div id="fixed"></div> |
| <div id="content"></div> |
| </div> |
| </div> |
