blob: 781bf477eef5a80ee5e7cc1a5d9b6455fbe5ef3f [file] [log] [blame]
<!doctype html>
<html>
<head>
<style>
p { /* Ref-test must fix into 800*600, keep the margins small. */
margin: 2px;
}
[data-webkit] {
background-color: red;
color: blue;
border: none;
}
[data-webkit="ROCKS!" i] {
color: white;
}
[data-webkit="rocks!"] {
color: red;
font-weight: bold;
}
[data-webkit^="RO" i] {
border: 5px dashed orange;
background-color: lime;
}
[data-webkit^="ro"] {
border: 2px solid purple;
}
/* This rule is invalid. */
[data-webkit i] {
background-color: red;
}
</style>
</head>
<body>
<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>
<p data-webkit>Red background, blue text, no border.</p>
<p data-webkit="ROCKS!">Green background, white text, dashed orange border.</p>
<p data-webkit="rocks!">Green background, red text, solid purple border.</p>
<p data-webkit="Rocks!">Green background, white text, dashed orange border.</p>
<p data-webkit="ROCKS">Green background, blue text, dashed orange border.</p>
<p data-webkit="rocks">Green background, blue text, solid purple border.</p>
<p data-webkit="Rocks">Green background, blue text, dashed orange border.</p>
<p data-webkit="roar">Green background, blue text, solid purple border.</p>
<p data-webkit="Roar">Green background, blue text, dashed orange border.</p>
<p data-webkit="ROAR">Green background, blue text, dashed orange border.</p>
</body>
</html>