From a98f5c7251dec834d82734d68f4bf6ad8efea069 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sat, 27 May 2023 13:19:49 +0200 Subject: [PATCH] LibWeb: Make resolved serialization of CSS `display` prefer short form 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/ :^) --- ...putedStyle-display-short-serialization.txt | 14 ++++++++ ...utedStyle-display-short-serialization.html | 32 +++++++++++++++++++ Tests/LibWeb/Text/input/include.js | 15 +++++++++ .../CSS/ResolvedCSSStyleDeclaration.cpp | 29 +++++++++++++++++ 4 files changed, 90 insertions(+) create mode 100644 Tests/LibWeb/Text/expected/css/getComputedStyle-display-short-serialization.txt create mode 100644 Tests/LibWeb/Text/input/css/getComputedStyle-display-short-serialization.html create mode 100644 Tests/LibWeb/Text/input/include.js diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-display-short-serialization.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-display-short-serialization.txt new file mode 100644 index 0000000000..a712393d9a --- /dev/null +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-display-short-serialization.txt @@ -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 diff --git a/Tests/LibWeb/Text/input/css/getComputedStyle-display-short-serialization.html b/Tests/LibWeb/Text/input/css/getComputedStyle-display-short-serialization.html new file mode 100644 index 0000000000..c535a8c4e8 --- /dev/null +++ b/Tests/LibWeb/Text/input/css/getComputedStyle-display-short-serialization.html @@ -0,0 +1,32 @@ + + diff --git a/Tests/LibWeb/Text/input/include.js b/Tests/LibWeb/Text/input/include.js new file mode 100644 index 0000000000..b986125636 --- /dev/null +++ b/Tests/LibWeb/Text/input/include.js @@ -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); +} diff --git a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp index 99a2987d8d..0f3179739a 100644 --- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp +++ b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp @@ -91,6 +91,35 @@ static ErrorOr> 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: