RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 10:18:11 +00:00
Code Issues Activity Actions

LibWeb: Make resolved serialization of CSS display prefer short form

Browse source 
Although we translate e.g `block` to `block flow` for internal use in
the engine, CSS-DISPLAY-3 tells us to use the short form in
serializations for compatibility reasons.

This adds 9 points to our score on https://html5test.com/ :^)
This commit is contained in:
Andreas Kling 2023-05-27 13:19:49 +02:00
parent 8defd55349
commit a98f5c7251
4 changed files with 90 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Tests/LibWeb/Text/expected/css/getComputedStyle-display-short-serialization.txt Normal file
View file

@ -0,0 +1,14 @@
none => none
block => block
flow-root => flow-root
inline => inline
inline-block => inline-block
run-in => run-in
list-item => list-item
flex => flex
inline-flex => inline-flex
grid => grid
inline-grid => inline-grid
ruby => ruby
table => table
inline-table => inline-table

32
Tests/LibWeb/Text/input/css/getComputedStyle-display-short-serialization.html Normal file
View file

@ -0,0 +1,32 @@
<script src="../include.js"></script>
<script>
test(() => {
const e = document.createElement("div");
document.body.appendChild(e);
function checkDisplay(display) {
e.style.display = display;
const computedStyle = getComputedStyle(e);
const serialized = computedStyle.display;
println(display + " => " + serialized);
}
for (display of [
"none",
"block",
"flow-root",
"inline",
"inline-block",
"run-in",
"list-item",
"flex",
"inline-flex",
"grid",
"inline-grid",
"ruby",
"table",
"inline-table",
]) {
checkDisplay(display);
}
e.remove();
});
</script>

15
Tests/LibWeb/Text/input/include.js Normal file
View file

@ -0,0 +1,15 @@
var __outputElement = null;
function println(s) {
__outputElement.appendChild(document.createTextNode(s + "\n"));
}
document.addEventListener("DOMContentLoaded", function () {
__outputElement = document.createElement("pre");
__outputElement.setAttribute("id", "out");
document.body.appendChild(__outputElement);
});
function test(f) {
document.addEventListener("DOMContentLoaded", f);
}

29
Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -91,6 +91,35 @@ static ErrorOr<RefPtr<StyleValue>> style_value_for_display(CSS::Display display)
return IdentifierStyleValue::create(CSS::ValueID::None);
if (display.is_outside_and_inside()) {
// NOTE: Following the precedence rules of “most backwards-compatible, then shortest”,
// serialization of equivalent display values uses the “Short display” column.
if (display == CSS::Display::from_short(CSS::Display::Short::Block))
return IdentifierStyleValue::create(CSS::ValueID::Block);
if (display == CSS::Display::from_short(CSS::Display::Short::FlowRoot))
return IdentifierStyleValue::create(CSS::ValueID::FlowRoot);
if (display == CSS::Display::from_short(CSS::Display::Short::Inline))
return IdentifierStyleValue::create(CSS::ValueID::Inline);
if (display == CSS::Display::from_short(CSS::Display::Short::InlineBlock))
return IdentifierStyleValue::create(CSS::ValueID::InlineBlock);
if (display == CSS::Display::from_short(CSS::Display::Short::RunIn))
return IdentifierStyleValue::create(CSS::ValueID::RunIn);
if (display == CSS::Display::from_short(CSS::Display::Short::ListItem))
return IdentifierStyleValue::create(CSS::ValueID::ListItem);
if (display == CSS::Display::from_short(CSS::Display::Short::Flex))
return IdentifierStyleValue::create(CSS::ValueID::Flex);
if (display == CSS::Display::from_short(CSS::Display::Short::InlineFlex))
return IdentifierStyleValue::create(CSS::ValueID::InlineFlex);
if (display == CSS::Display::from_short(CSS::Display::Short::Grid))
return IdentifierStyleValue::create(CSS::ValueID::Grid);
if (display == CSS::Display::from_short(CSS::Display::Short::InlineGrid))
return IdentifierStyleValue::create(CSS::ValueID::InlineGrid);
if (display == CSS::Display::from_short(CSS::Display::Short::Ruby))
return IdentifierStyleValue::create(CSS::ValueID::Ruby);
if (display == CSS::Display::from_short(CSS::Display::Short::Table))
return IdentifierStyleValue::create(CSS::ValueID::Table);
if (display == CSS::Display::from_short(CSS::Display::Short::InlineTable))
return IdentifierStyleValue::create(CSS::ValueID::InlineTable);
StyleValueVector values;
switch (display.outside()) {
case CSS::Display::Outside::Inline: