1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 13:57:35 +00:00

LibWeb: Implement attr() types :^)

Support the optional `<attr-type>` parameter to the `attr()` function,
which allows parsing the attribute's value as a variety of types,
instead of always as a string.
This commit is contained in:
Sam Atkins 2023-09-04 12:57:12 +01:00 committed by Andreas Kling
parent 6f45df5ced
commit 07039af982
6 changed files with 240 additions and 18 deletions

View file

@ -0,0 +1,25 @@
<!doctype html>
<style>
div {
width: 100px;
height: 20px;
border: 1px solid black;
}
.string::before {
content: attr(foo string, "WHF!");
}
.length {
width: attr(foo length, 200px);
}
.px {
width: attr(foo px, 200px);
}
.color {
background-color: attr(foo color, lime);
}
</style>
<div class="string"></div>
<div class="length" foo="90pizzas"></div>
<div class="px" foo="twohundred"></div>
<div class="color" foo="grunge"></div>
<div class="color" foo="rgb(0,0,0)"></div>

View file

@ -0,0 +1,22 @@
<!doctype html>
<style>
div {
width: 100px;
height: 20px;
border: 1px solid black;
}
.length {
width: 200px;
}
.px {
width: 200px;
}
.color {
background-color: #00ff00;
}
</style>
<div>WHF!</div>
<div class="length"></div>
<div class="px"></div>
<div class="color" foo="green"></div>
<div class="color" foo="#00ff00"></div>

View file

@ -0,0 +1,25 @@
<!doctype html>
<style>
div {
width: 100px;
height: 20px;
border: 1px solid black;
}
.string::before {
content: attr(foo string);
}
.length {
width: attr(foo length);
}
.px {
width: attr(foo px);
}
.color {
background-color: attr(foo color);
}
</style>
<div class="string" foo="WHF!"></div>
<div class="length" foo="200px"></div>
<div class="px" foo="200"></div>
<div class="color" foo="lime"></div>
<div class="color" foo="#00ff00"></div>

View file

@ -4,6 +4,8 @@
"css-any-link-selector.html": "css-any-link-selector-ref.html",
"css-attr-basic.html": "css-attr-ref.html",
"css-attr-fallback.html": "css-attr-ref.html",
"css-attr-typed.html": "css-attr-typed-ref.html",
"css-attr-typed-fallback.html": "css-attr-typed-ref.html",
"css-gradient-currentcolor.html": "css-gradient-currentcolor-ref.html",
"css-gradients.html": "css-gradients-ref.html",
"css-invalid-var.html": "css-invalid-var-ref.html",