| <!DOCTYPE html> |
| <style> |
| #box { |
| position: absolute; |
| width: 200px; |
| height: 200px; |
| background-color: green; |
| } |
| #filter { |
| position: absolute; |
| width: 200px; |
| height: 200px; |
| transform: translateZ(0); |
| -webkit-clip-path: circle(80px at 100px); |
| } |
| .backdrop { |
| -webkit-backdrop-filter: invert(); |
| } |
| </style> |
| <div id="box"></div> |
| <div id="filter"></div> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| setTimeout(function() { |
| document.getElementById("filter").classList.add("backdrop"); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, 0); |
| </script> |
