system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Base: Expand test page for CSS attribute selectors

Browse source 
Now that we support more types of attribute selectors in the parser,
we need a way to test them. :^)
This commit is contained in:
Sam Atkins 2021-07-28 12:24:12 +01:00 committed by Andreas Kling
parent 6034fc0ee6
commit 242c342fad
1 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
Base/res/html/misc/attrselectors.html
View file

@ -1,24 +1,39 @@
<!doctype html>
<html>
<head>
<title>CSS attribute selector test</title>
<style type="text/css">
[hello=friends] {
background-color: #f0f;
color: white;
div {
background-color: red;
}
div[id="foo"] {
background-color: blue;
color: #fff;
}
div[cool] {
background-color: green;
color: #ffffff;
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>
<div hello=friends>This div is hello, friends!</div>
<div id="foo">This div has id="foo" and is bloo!</div>
<div cool="">This div has a "cool" attribute and a cool green color.</div>
<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>