51 lines
1.8 KiB
HTML
51 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
/* Specificity of (0, 1, 1). */
|
|
p.target {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Specificity of (0, 1, 0). */
|
|
.target {
|
|
background-color: red;
|
|
color: blue;
|
|
border: none;
|
|
}
|
|
|
|
/* This should also have a specificity of (0, 1, 0). It should have higher precedence
|
|
than the previous rule due to the position in the stylesheet. */
|
|
[data-webkit="rocks" i] {
|
|
background-color: lime;
|
|
border: 15px solid red;
|
|
padding: 25px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Specificity of (0, 1, 0). */
|
|
[data-webkit="rocks"] {
|
|
border: 3px dashed orange;
|
|
}
|
|
|
|
/* Specificity of (0, 0, 1). */
|
|
p {
|
|
margin: 2px; /* Ref-test must fix into 800*600, keep the margins small. */
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Specificity of (0, 0, 0). */
|
|
* {
|
|
background-color: white;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test the specificity of the case-insensitive attribute selector. If the test pass, each line should be styled as described by its text.</p>
|
|
<p data-webkit>Black text, white background, no border.</p>
|
|
<p class="target" data-webkit="ROCKS">Green background, bold blue text, solid red border.</p>
|
|
<p class="target" data-webkit="rocks">Green background, bold blue text, dashed orange border.</p>
|
|
<p class="target" data-webkit="Rocks">Green background, bold blue text, solid red border.</p>
|
|
</body>
|
|
</html> |