| <html> |
| <head> |
| <style> |
| .test { |
| width: 200px; |
| height: 200px; |
| border:10px solid black; |
| background-color:lime; |
| -webkit-mask-image: url(url-not-found), url(url-not-found), url(url-not-found), url(url-not-found), url(url-not-found), url(url-not-found), url(url-not-found), url(url-not-found), url(url-not-found); |
| -webkit-mask-position: top left, top right, bottom left, bottom right, top center, center right, bottom center, center left, center; |
| -webkit-mask-origin: border; |
| -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-x, repeat-y, repeat; |
| -webkit-mask-composite: copy; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=26084">WebKit Bug 26084: Bug 26084: Multiple missing images in webkit-mask-image prevent rendering</a></p> |
| <div class="test">This text should be visible.</div> |
| <p>If the test passes, you should be able to see a lime square with a black border. Inside the border, you should see the text: This text should be visible.</p> |
| </body> |
| </html> |
| |