Revert use of SVG <mask> elements for -webkit-mask-image (r176798, r177494, r186180)
[WebKit-https.git] / LayoutTests / css3 / masking / mask-svg-script-mask-to-none.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             p {
6                 margin: 0px;
7             }
8             #maskedElement {
9                 width: 400px;
10                 height: 400px;
11                 background-color: green;
12                 -webkit-mask-image:url('resources/masks.svg#lowerHalf');
13             }
14             #redElement {
15                 width: 400px;
16                 height: 400px;
17                 background-color: red;
18                 position: absolute;
19                 z-index: -1;
20             }
21         </style>
22     </head>
23
24     <body>
25         <p><a href="https://bugs.webkit.org/show_bug.cgi?id=129682">Bug 129682</a> - On success, you should see a blue rectangle and no red.</p>
26         <p>This test sets the mask-image via CSS to a &lt;mask&gt; element from an external SVG file and then changes it to 'none' via a script.</p>
27         <div id="redElement"></div>
28         <div id="maskedElement"></div>
29         <script>
30             var maskedElement = document.getElementById("maskedElement");
31             maskedElement.style.cssText += "-webkit-mask-image:none;background-color: blue";
32         </script>
33     </body>
34 </html>