mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
242c342fad
Now that we support more types of attribute selectors in the parser, we need a way to test them. :^)
40 lines
1.5 KiB
HTML
40 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>CSS attribute selector test</title>
|
|
<style type="text/css">
|
|
div {
|
|
background-color: red;
|
|
}
|
|
div[exists],
|
|
div[exactMatch=" foobarbaz "],
|
|
div[containsWord~=go],
|
|
div[containsString*=barb],
|
|
div[startsWithSegment|=foo],
|
|
div[startsWithString^=foobar-b],
|
|
div[endsWithString$=ar-baz] {
|
|
background-color: lime;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>These should be green:</h1>
|
|
<div exists>HasAttribute</div>
|
|
<div exactMatch=" foobarbaz ">ExactMatch</div>
|
|
<div containsWord="words go here">ContainsWord</div>
|
|
<div containsString="foobarbaz">ContainsString</div>
|
|
<div startsWithSegment="foo-bar-baz">StartsWithSegment</div>
|
|
<div startsWithString="foobar-baz">StartsWithString</div>
|
|
<div endsWithString="foobar-baz">EndsWithString</div>
|
|
|
|
<h1>These should be red:</h1>
|
|
<div doesntexist>HasAttribute</div>
|
|
<div exactMatch="foobarbaz">ExactMatch</div>
|
|
<div containsWord="words exist here">ContainsWord</div>
|
|
<div containsString="foobar baz">ContainsString</div>
|
|
<div startsWithSegment="fool-bar-baz">StartsWithSegment</div>
|
|
<div startsWithString="fooba-r-baz">StartsWithString</div>
|
|
<div endsWithString="fooba-r-baz">EndsWithString</div>
|
|
</body>
|
|
</html>
|