RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-06-01 06:28:13 +00:00
Code Issues Activity Actions

LibWeb: Add CSS property 'border'

Browse source 
This makes it possible to write shorter CSS. Instead of writing
.foo {
        border-width: 3px;
        border-style: solid;
        border-color: blue;
}
it is now possible to write
.foo {
        border: 3px solid blue;
}
while the order of values is irrelevant.
Currently only the basic values are supported. More values should be
added in the future.

Three more value specific parse functions were added:
parse_line_width, parse_color, and parse_line_style

Additionally a few test cases were added to borders.html.
This commit is contained in:
myphs 2020-03-20 20:29:39 +01:00 • committed by Andreas Kling
parent 12e8efd74e
commit 0891f860f7
4 changed files with 205 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

79
Base/home/anon/www/borders.html
View file

@ -19,9 +19,88 @@
border-bottom-style: solid;
border-left-style: solid;
}
#bar {
border: 30px solid orange;
}
#bene {
border: solid;
}
#salvete {
border: 30px;
border-color: grey;
border-style: solid;
}
#amici {
border: aquamarine;
border-width: 30px;
border-style: solid;
}
#resetting {
border: 100px;
border: orange;
border: solid;
}
#three-px-solid-blue-separate {
border-width: 3px;
border-style: solid;
border-color: blue;
}
#three-px-solid-blue {
border: 3px solid blue;
}
#foo-but-actually-resetted {
border-top-color: red;
border-right-color: lime;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 40px;
border-right-width: 30px;
border-bottom-width: 20px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border: solid;
}
#double-width {
border: 50px 100px solid red;
}
#double-style {
border: 50px solid dotted red;
}
#double-color {
border: 50px solid red blue;
}
#double-width-solo {
border: 50px 100px;
}
#double-style-solo {
border: solid dotted;
}
#double-color-solo {
border: red blue;
}
</style>
</head>
<body>
<div id="foo">One day at a time!</div>
<div id="bar">Another day at another time!</div>
<div id="bene">bene</div>
<div id="salvete">salvete</div>
<div id="amici">amici</div>
<div id="resetting">resetting</div>
<div id="three-px-solid-blue-separate">three px solid blue separate</div>
<div id="three-px-solid-blue">three px solid blue</div>
<div id="foo-but-actually-resetted">foo but actually resetted</div>
<div id="double-width">double width</div>
<div id="double-style">double style</div>
<div id="double-color">double color</div>
<div id="double-width-solo">double width solo</div>
<div id="double-style-solo">double style solo</div>
<div id="double-color-solo">double color solo</div>
</body>
</html>