RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 08:57:34 +00:00
Code Issues Activity Actions

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
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> <html>
<head> <head>
<title>CSS attribute selector test</title> <title>CSS attribute selector test</title>
<style type="text/css"> <style type="text/css">
[hello=friends] { div {
background-color: #f0f; background-color: red;
color: white;
} }
div[id="foo"] { div[exists],
background-color: blue; div[exactMatch=" foobarbaz "],
color: #fff; div[containsWord~=go],
} div[containsString*=barb],
div[cool] { div[startsWithSegment|=foo],
background-color: green; div[startsWithString^=foobar-b],
color: #ffffff; div[endsWithString$=ar-baz] {
background-color: lime;
} }
</style> </style>
</head> </head>
<body> <body>
<div hello=friends>This div is hello, friends!</div> <h1>These should be green:</h1>
<div id="foo">This div has id="foo" and is bloo!</div> <div exists>HasAttribute</div>
<div cool="">This div has a "cool" attribute and a cool green color.</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> </body>
</html> </html>