| <!DOCTYPE html> |
| <style> |
| ::-webkit-scrollbar { |
| width: 0px; |
| height: 0px; |
| } |
| |
| body, html { |
| width: 100%; |
| height: 100%; |
| } |
| |
| body { |
| margin: 0px; |
| } |
| |
| #rootscroller { |
| width: 100%; |
| height: 100%; |
| overflow: auto; |
| will-change: transform; |
| background-image:linear-gradient(0deg, transparent 50%, #0a0 50%), |
| linear-gradient(90deg, #a00 50%, #0a0 50%); |
| background-size:75px 75px,75px 75px; |
| background-position:0 0, 0 25px; |
| } |
| |
| #parent { |
| width: 100%; |
| height: 100%; |
| } |
| |
| .spacer { |
| margin: 50px; |
| width: 20px; |
| height: 50%; |
| background-color: blue; |
| } |
| </style> |
| |
| <!--The root scroller and its child are colorful. The test applies a filter to |
| root scroller's parent. It passes if the output is entirely sepia colored.--> |
| <div id="parent"> |
| <div id="rootscroller"> |
| <div class="spacer"> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| window.onload = function() { |
| var parent = document.querySelector('#parent'); |
| var rootscroller = document.querySelector('#rootscroller'); |
| |
| document.rootScroller = rootscroller; |
| parent.style.filter = "sepia(100)"; |
| } |
| |
| </script> |