mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-05-17 16:42:54 +00:00
e40ad73ae7
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.
38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<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>
|