Backdrop Filter should repaint when changed via script
[WebKit-https.git] / LayoutTests / css3 / filters / backdrop / dynamic-backdrop-filter-change.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <style>
6         .background {
7             height: 100px;
8             width: 100px;
9             padding: 50px;
10             background-image: repeating-linear-gradient(black 0px, black 25px, white 25px, white 50px);
11             border: 1px solid black;
12         }
13         
14         #box {
15             height: 100px;
16             width: 100px;
17             -webkit-backdrop-filter: blur(0px);
18         }
19         
20         #box.changed {
21             -webkit-backdrop-filter: blur(20px);
22         }
23     </style>
24     <script>
25         if (window.testRunner)
26             testRunner.notifyDone();
27
28         window.addEventListener('load', function() {
29             window.setTimeout(function() {
30                 document.getElementById('box').classList.add('changed');
31             }, 0);
32         }, false);
33     </script>
34 </head>
35 <body>
36 <div class="background">
37     <div id="box">
38     </div>
39 </div>
40 </body>
41 </html>