| <!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-image: url(resources/gradient.gif); |
| } |
| |
| div |
| { |
| padding: 1px; |
| float: left; |
| } |
| |
| p |
| { |
| clear: both; |
| } |
| |
| .negative |
| { |
| background-position: -13px -13px; |
| } |
| |
| .positive |
| { |
| background-position: 13px 13px; |
| } |
| </style> |
| </head> |
| <body> |
| <p> |
| 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 background images are ignored</i>. |
| </p> |
| <p>Element with background image starting at (-13, -13) with no-repeat set:</p> |
| <div class="negative s300" style="background-repeat: no-repeat;"></div> |
| <div class="negative s250" style="background-repeat: no-repeat;"></div> |
| <div class="negative s200" style="background-repeat: no-repeat;"></div> |
| |
| <p>Element with background image starting at (-13, -13) with repeat-y set:</p> |
| <div class="negative s300" style="background-repeat: repeat-y"></div> |
| <div class="negative s250" style="background-repeat: repeat-y"></div> |
| <div class="negative s200" style="background-repeat: repeat-y"></div> |
| |
| <p>Element with background image starting at (-13, -13) with repeat-x set:</p> |
| <div class="negative s300" style="background-repeat: repeat-x"></div> |
| <div class="negative s250" style="background-repeat: repeat-x"></div> |
| <div class="negative s200" style="background-repeat: repeat-x"></div> |
| |
| <p>Element with background image starting at (13, 13) with no-repeat set:</p> |
| <div class="positive s300" style="background-repeat: no-repeat;"></div> |
| <div class="positive s250" style="background-repeat: no-repeat;"></div> |
| <div class="positive s200" style="background-repeat: no-repeat;"></div> |
| |
| <p>Element with background image starting at (13, 13) with repeat-y set:</p> |
| <div class="positive s300" style="background-repeat: repeat-y"></div> |
| <div class="positive s250" style="background-repeat: repeat-y"></div> |
| <div class="positive s200" style="background-repeat: repeat-y"></div> |
| |
| <p>Element with background image starting at (13, 13) with repeat-x set:</p> |
| <div class="positive s300" style="background-repeat: repeat-x"></div> |
| <div class="positive s250" style="background-repeat: repeat-x"></div> |
| <div class="positive s200" style="background-repeat: repeat-x"></div> |
| |
| <p style="position:absolute;height:5000px"></p> |
| <table style="clear:both; -webkit-transform: translate(650px, -150px) rotate(45deg); -webkit-transform-origin: 100% 0" border=5><tr><td> |
| <div class="negative s300" style="background-repeat: no-repeat;"></div> |
| <div class="negative s250" style="background-repeat: no-repeat;"></div> |
| <div class="negative s200" style="background-repeat: no-repeat;"></div> |
| |
| <p>Element with background image starting at (-13, -13) with repeat-y set:</p> |
| <div class="negative s300" style="background-repeat: repeat-y"></div> |
| <div class="negative s250" style="background-repeat: repeat-y"></div> |
| <div class="negative s200" style="background-repeat: repeat-y"></div> |
| |
| <p>Element with background image starting at (-13, -13) with repeat-x set:</p> |
| <div class="negative s300" style="background-repeat: repeat-x"></div> |
| <div class="negative s250" style="background-repeat: repeat-x"></div> |
| <div class="negative s200" style="background-repeat: repeat-x"></div> |
| |
| <p>Element with background image starting at (13, 13) with no-repeat set:</p> |
| <div class="positive s300" style="background-repeat: no-repeat;"></div> |
| <div class="positive s250" style="background-repeat: no-repeat;"></div> |
| <div class="positive s200" style="background-repeat: no-repeat;"></div> |
| |
| <p>Element with background image starting at (13, 13) with repeat-y set:</p> |
| <div class="positive s300" style="background-repeat: repeat-y"></div> |
| <div class="positive s250" style="background-repeat: repeat-y"></div> |
| <div class="positive s200" style="background-repeat: repeat-y"></div> |
| |
| <p>Element with background image starting at (13, 13) with repeat-x set:</p> |
| <div class="positive s300" style="background-repeat: repeat-x"></div> |
| <div class="positive s250" style="background-repeat: repeat-x"></div> |
| <div class="positive s200" style="background-repeat: repeat-x"></div> |
| </table> |
| </body> |
| </html> |
