| <!DOCTYPE HTML> |
| <html> |
| <style type="text/css"> |
| .s300 |
| { |
| width: 30px; |
| height: 30px; |
| } |
| |
| .s250 |
| { |
| width: 25px; |
| height: 25px; |
| } |
| |
| .s200 |
| { |
| width: 20px; |
| height: 20px; |
| } |
| |
| div |
| { |
| margin: 6px; |
| border: 1px dotted green; |
| background-color: black; |
| -webkit-mask-image: url(resources/white.gif); |
| -webkit-mask-origin: padding; |
| -webkit-mask-size: 25px 25px; |
| } |
| |
| div |
| { |
| padding: 1px; |
| float: left; |
| } |
| |
| p |
| { |
| clear: both; |
| } |
| |
| .negative |
| { |
| -webkit-mask-position: -13px -13px; |
| } |
| |
| .positive |
| { |
| -webkit-mask-position: 13px 13px; |
| } |
| </style> |
| </head> |
| <body> |
| <p> |
| Mask version of test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=5399">http://bugs.webkit.org/show_bug.cgi?id=5399</a> |
| no-repeat on negatively positioned fill images is ignored</i>. |
| </p> |
| <p>Element with mask image starting at (-13, -13) with no-repeat set:</p> |
| <div class="negative s300" style="-webkit-mask-repeat: no-repeat;"></div> |
| <div class="negative s250" style="-webkit-mask-repeat: no-repeat;"></div> |
| <div class="negative s200" style="-webkit-mask-repeat: no-repeat;"></div> |
| |
| <p>Element with mask image starting at (-13, -13) with repeat-y set:</p> |
| <div class="negative s300" style="-webkit-mask-repeat: repeat-y"></div> |
| <div class="negative s250" style="-webkit-mask-repeat: repeat-y"></div> |
| <div class="negative s200" style="-webkit-mask-repeat: repeat-y"></div> |
| |
| <p>Element with mask image starting at (-13, -13) with repeat-x set:</p> |
| <div class="negative s300" style="-webkit-mask-repeat: repeat-x"></div> |
| <div class="negative s250" style="-webkit-mask-repeat: repeat-x"></div> |
| <div class="negative s200" style="-webkit-mask-repeat: repeat-x"></div> |
| |
| <p>Element with mask image starting at (13, 13) with no-repeat set:</p> |
| <div class="positive s300" style="-webkit-mask-repeat: no-repeat;"></div> |
| <div class="positive s250" style="-webkit-mask-repeat: no-repeat;"></div> |
| <div class="positive s200" style="-webkit-mask-repeat: no-repeat;"></div> |
| |
| <p>Element with mask image starting at (13, 13) with repeat-y set:</p> |
| <div class="positive s300" style="-webkit-mask-repeat: repeat-y"></div> |
| <div class="positive s250" style="-webkit-mask-repeat: repeat-y"></div> |
| <div class="positive s200" style="-webkit-mask-repeat: repeat-y"></div> |
| |
| <p>Element with mask image starting at (13, 13) with repeat-x set:</p> |
| <div class="positive s300" style="-webkit-mask-repeat: repeat-x"></div> |
| <div class="positive s250" style="-webkit-mask-repeat: repeat-x"></div> |
| <div class="positive s200" style="-webkit-mask-repeat: repeat-x"></div> |
| </body> |
| </html> |
