fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2025-12-22 09:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Allow setting shorthand CSS properties via CSSStyleDeclaration

Browse Source 
We now expand shorthands into their respective longhand values when
assigning to a shorthand named property on a CSSStyleDeclaration.

We also make sure that shorthands can be round-tripped by correctly
routing named property access through the getPropertyValue() AO,
and expanding it to handle shorthands as well.

A lot of WPT tests for CSS parsing rely on these mechanisms and should
now start working. :^)

Note that multi-level recursive shorthands like `border` don't work
100% correctly yet. We're going to need a bunch more logic to properly
serialize e.g `border-width` or `border` itself.
This commit is contained in:
Andreas Kling
2024-09-21 20:11:03 +02:00
committed by Andreas Kling
parent 6fe43e9f73
commit e40ad73ae7
3 changed files with 138 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
Tests/LibWeb/Text/expected/css/set-style-declaration-shorthand.txt Normal file
View File

@@ -0,0 +1,46 @@
Setting flex: 'none'; becomes...
flex-basis: 'auto'
flex-grow: '0'
flex-shrink: '0'
flex: '0 0 auto'
e.style.length: 3
> [0] flex-grow
> [1] flex-shrink
> [2] flex-basis
Setting flex: 'auto 1 2'; becomes...
flex-basis: 'auto'
flex-grow: '1'
flex-shrink: '2'
flex: '1 2 auto'
e.style.length: 3
> [0] flex-grow
> [1] flex-shrink
> [2] flex-basis
Setting flex: ''; becomes...
flex-basis: ''
flex-grow: ''
flex-shrink: ''
flex: ''
e.style.length: 0
Setting border: '1px solid red'; becomes...
border-width: '1px 1px 1px 1px'
border-style: 'solid solid solid solid'
border-color: 'rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)'
border: ''
e.style.length: 12
> [0] border-top-width
> [1] border-right-width
> [2] border-bottom-width
> [3] border-left-width
> [4] border-top-style
> [5] border-right-style
> [6] border-bottom-style
> [7] border-left-style
> [8] border-top-color
> [9] border-right-color
> [10] border-bottom-color
> [11] border-left-color

38
Tests/LibWeb/Text/input/css/set-style-declaration-shorthand.html Normal file
View File

@@ -0,0 +1,38 @@
<script src="../include.js"></script>
<script>
function testFlexValue(value) {
let e = document.createElement("div");
e.style.flex = value;
println("Setting flex: '" + value + "'; becomes...");
println(" flex-basis: '" + e.style.flexBasis + "'");
println(" flex-grow: '" + e.style.flexGrow + "'");
println(" flex-shrink: '" + e.style.flexShrink + "'");
println(" flex: '" + e.style.flex + "'");
println(" e.style.length: " + e.style.length);
for (let p = 0; p < e.style.length; ++p) {
println(" > [" + p + "] " + e.style[p]);
}
println("");
}
function testBorderValue(value) {
let e = document.createElement("div");
e.style.border = value;
println("Setting border: '" + value + "'; becomes...");
println(" border-width: '" + e.style.getPropertyValue('border-width') + "'");
println(" border-style: '" + e.style.borderStyle + "'");
println(" border-color: '" + e.style.borderColor + "'");
println(" border: '" + e.style.border + "'");
println(" e.style.length: " + e.style.length);
for (let p = 0; p < e.style.length; ++p) {
println(" > [" + p + "] " + e.style[p]);
}
println("");
}
test(() => {
testFlexValue("none");
testFlexValue("auto 1 2");
testFlexValue("");
testBorderValue("1px solid red");
});
</script>