| benjamin@webkit.org | fb8985b | 2015-02-15 06:11:51 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 | <head> |
| 4 | <style> |
| 5 | p { /* Ref-test must fix into 800*600, keep the margins small. */ |
| 6 | margin: 2px; |
| 7 | } |
| 8 | |
| 9 | [data-webkit] { |
| 10 | background-color: lightgrey; |
| 11 | color: blue; |
| 12 | border: none; |
| 13 | } |
| 14 | |
| 15 | [data-webkit~="is" i] { |
| 16 | color: white; |
| 17 | } |
| 18 | [data-webkit~="is"] { |
| 19 | color: red; |
| 20 | } |
| 21 | |
| 22 | [data-webkit|="is" i] { |
| 23 | border: 5px dashed orange; |
| 24 | background-color: lime; |
| 25 | } |
| 26 | [data-webkit|="is"] { |
| 27 | border: 2px solid purple; |
| 28 | } |
| 29 | |
| 30 | /* This rule is invalid. */ |
| 31 | [data-webkit i] { |
| 32 | background-color: red; |
| 33 | } |
| 34 | </style> |
| 35 | </head> |
| 36 | <body> |
| 37 | <p>This test verify basic styling of element using case-insensitive attribute value matching (e.g. [foo=bar i]). If the test succeed, each paragraph should be styled according to its description.</p> |
| 38 | <p data-webkit="">Light grey background, blue text, no border.</p> |
| 39 | <p data-webkit="is fast">Light grey background, red text, no border.</p> |
| 40 | <p data-webkit="IS fast">Light grey background, white text, no border.</p> |
| 41 | <p data-webkit="IS fast is FAST">Light grey background, red text, no border.</p> |
| 42 | <p data-webkit="is FAST">Light grey background, red text, no border.</p> |
| 43 | <p data-webkit="is">Green background, red text, solid purple border.</p> |
| 44 | <p data-webkit="IS">Green background, white text, dashed orange border.</p> |
| 45 | <p data-webkit="Is">Green background, white text, dashed orange border.</p> |
| 46 | <p data-webkit="Fast">Light grey background, blue text, no border.</p> |
| 47 | <p data-webkit="fast">Light grey background, blue text, no border.</p> |
| 48 | <p data-webkit="FAST">Light grey background, blue text, no border.</p> |
| 49 | <p data-webkit="is-Fast">Green background, blue text, solid purple border.</p> |
| 50 | <p data-webkit="Is-Fast">Green background, blue text, dashed orange border.</p> |
| 51 | <p data-webkit="Is-fast">Green background, blue text, dashed orange border.</p> |
| 52 | <p data-webkit="is-Fast Is-Fast">Green background, blue text, solid purple border.</p> |
| 53 | <p data-webkit="Is-fast Is-Fast">Green background, blue text, dashed orange border.</p> |
| 54 | </body> |
| 55 | </html> |
