| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .square { |
| display: inline-block; |
| height: 128px; |
| width: 128px; |
| margin: 20px; |
| background-color: yellow; |
| } |
| |
| #webkit-box-shadow-before-box-shadow { |
| -webkit-box-shadow: 0 0 10px 1px red; |
| box-shadow: 0 0 12px 1px green; /* Should override -webkit-box-shadow */ |
| } |
| |
| #box-shadow-before-webkit-box-shadow { |
| box-shadow: 0 0 12px 1px red; |
| -webkit-box-shadow: 0 0 10px 1px green; /* Should override box-shadow */ |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Test that we apply box-shadow and -webkit-box-shadow in the order they are parsed. --> |
| <div class="square" id="webkit-box-shadow-before-box-shadow"></div> |
| <div class="square" id="box-shadow-before-webkit-box-shadow"></div> |
| </body> |
| </html> |
