| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .square { |
| display: inline-block; |
| height: 128px; |
| width: 128px; |
| background-repeat: no-repeat; |
| border-left: 32px solid #00FF00; |
| } |
| |
| #webkit-background-origin-before-background-origin { |
| background-image: url("../resources/red-square-in-green-square.png"); |
| -webkit-background-origin: padding; |
| background-origin: border-box; /* Should override -webkit-background-origin */ |
| } |
| |
| #background-origin-before-webkit-background-origin { |
| background-image: url("../resources/red-square-in-green-square.png"); |
| background-origin: padding-box; |
| -webkit-background-origin: border; /* Should override background-origin */ |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Tests that we apply background-origin and -webkit-background-origin in the order they are parsed. --> |
| <div class="square" id="webkit-background-origin-before-background-origin"></div> |
| <div class="square" id="background-origin-before-webkit-background-origin"></div> |
| </body> |
| </html> |
