blob: 7c982c226923a206043e5891da3693c0dcb7fc34 [file] [log] [blame]
benjamin@webkit.org68d03b32015-01-29 02:05:10 +00001<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<style>
6 target {
7 display: block;
8 height: 20px;
9 min-width: 20px;
10 float: left;
11 margin: 2px;
12 }
13 target:matches([data-Foo], [data-Æøå], [data-Foo-Æøå]) {
14 background-color: green;
15 }
16 target:matches([data-FOO], [data-ÆØÅ], [data-FOO-ÆØÅ]) {
17 color: blue;
18 }
19 target:matches([data-foo], [data-æøå], [data-foo-æøå]) {
20 border: 2px dashed red;
21 }
22</style>
23</head>
24<body>
25 <p data-Foo data-ÆØÅ data-foo-æøå>In HTML, attribute name matching is case-insensitive but only in the ASCII range.</p>
26 <p data-foo data-Foo-Æøå data-Æøå>If the test succeed, each block should be styled as described.</p>
27 <target data-Foo>Green background, blue text, dashed red border.</target>
28 <target data-FOO>Green background, blue text, dashed red border.</target>
29 <target data-foo>Green background, blue text, dashed red border.</target>
30 <target data-Æøå>Green background color.</target>
31 <target data-ÆØÅ>Blue text.</target>
32 <target data-æøå>Dashed red border.</target>
33 <target data-Foo-Æøå>Green background color.</target>
34 <target data-FOO-ÆØÅ>Blue text.</target>
35 <target data-foo-æøå>Dashed red border.</target>
36</body>
37</html>