1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-09 09:34:57 +09:00

LibWeb: Parse and propagate white-space-collapse CSS property

This commit is contained in:
Callum Law 2025-05-16 18:32:31 +12:00 committed by Jelle Raaijmakers
parent 3989059227
commit ea30356fba
Notes: github-actions[bot] 2025-05-29 10:06:12 +00:00
17 changed files with 321 additions and 180 deletions

View file

@ -830,6 +830,12 @@ WhiteSpace ComputedProperties::white_space() const
return keyword_to_white_space(value.to_keyword()).release_value();
}
WhiteSpaceCollapse ComputedProperties::white_space_collapse() const
{
auto const& value = property(PropertyID::WhiteSpaceCollapse);
return keyword_to_white_space_collapse(value.to_keyword()).release_value();
}
Optional<LengthOrCalculated> ComputedProperties::letter_spacing() const
{
auto const& value = property(PropertyID::LetterSpacing);

View file

@ -101,6 +101,7 @@ public:
Vector<CursorData> cursor() const;
Variant<LengthOrCalculated, NumberOrCalculated> tab_size() const;
WhiteSpace white_space() const;
WhiteSpaceCollapse white_space_collapse() const;
WordBreak word_break() const;
Optional<LengthOrCalculated> word_spacing() const;
Optional<LengthOrCalculated> letter_spacing() const;

View file

@ -101,6 +101,7 @@ public:
static CSS::ContentVisibility content_visibility() { return CSS::ContentVisibility::Visible; }
static CursorData cursor() { return { CSS::Cursor::Auto }; }
static CSS::WhiteSpace white_space() { return CSS::WhiteSpace::Normal; }
static CSS::WhiteSpaceCollapse white_space_collapse() { return CSS::WhiteSpaceCollapse::Collapse; }
static CSS::WordBreak word_break() { return CSS::WordBreak::Normal; }
static CSS::LengthOrCalculated word_spacing() { return CSS::Length::make_px(0); }
static LengthOrCalculated letter_spacing() { return CSS::Length::make_px(0); }
@ -423,6 +424,7 @@ public:
Vector<ShadowData> const& text_shadow() const { return m_inherited.text_shadow; }
CSS::Positioning position() const { return m_noninherited.position; }
CSS::WhiteSpace white_space() const { return m_inherited.white_space; }
CSS::WhiteSpaceCollapse white_space_collapse() const { return m_inherited.white_space_collapse; }
CSS::LengthOrCalculated word_spacing() const { return m_inherited.word_spacing; }
LengthOrCalculated letter_spacing() const { return m_inherited.letter_spacing; }
CSS::FlexDirection flex_direction() const { return m_noninherited.flex_direction; }
@ -616,6 +618,7 @@ protected:
CSS::TextTransform text_transform { InitialValues::text_transform() };
CSS::LengthPercentage text_indent { InitialValues::text_indent() };
CSS::WhiteSpace white_space { InitialValues::white_space() };
CSS::WhiteSpaceCollapse white_space_collapse { InitialValues::white_space_collapse() };
CSS::WordBreak word_break { InitialValues::word_break() };
CSS::LengthOrCalculated word_spacing { InitialValues::word_spacing() };
LengthOrCalculated letter_spacing { InitialValues::letter_spacing() };
@ -819,6 +822,7 @@ public:
void set_webkit_text_fill_color(Color value) { m_inherited.webkit_text_fill_color = value; }
void set_position(CSS::Positioning position) { m_noninherited.position = position; }
void set_white_space(CSS::WhiteSpace value) { m_inherited.white_space = value; }
void set_white_space_collapse(CSS::WhiteSpaceCollapse value) { m_inherited.white_space_collapse = value; }
void set_word_spacing(CSS::LengthOrCalculated value) { m_inherited.word_spacing = move(value); }
void set_word_break(CSS::WordBreak value) { m_inherited.word_break = value; }
void set_letter_spacing(CSS::LengthOrCalculated value) { m_inherited.letter_spacing = value; }

View file

@ -676,6 +676,14 @@
"pre-line",
"pre-wrap"
],
"white-space-collapse": [
"collapse",
"discard",
"preserve",
"preserve-breaks",
"preserve-spaces",
"break-spaces"
],
"word-break": [
"normal",
"keep-all",

View file

@ -102,6 +102,7 @@
"both-edges",
"bottom",
"break-all",
"break-spaces",
"break-word",
"browser",
"butt",
@ -157,6 +158,7 @@
"diagonal-fractions",
"difference",
"disc",
"discard",
"disclosure-closed",
"disclosure-open",
"discretionary-ligatures",
@ -376,6 +378,9 @@
"pre",
"pre-line",
"pre-wrap",
"preserve",
"preserve-breaks",
"preserve-spaces",
"progress",
"progress-bar",
"progressive",

View file

@ -3126,6 +3126,14 @@
"white-space"
]
},
"white-space-collapse": {
"animation-type": "discrete",
"inherited": true,
"initial": "collapse",
"valid-types": [
"white-space-collapse"
]
},
"width": {
"animation-type": "by-computed-value",
"inherited": false,

View file

@ -643,6 +643,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
computed_values.set_tab_size(computed_style.tab_size());
computed_values.set_white_space(computed_style.white_space());
computed_values.set_white_space_collapse(computed_style.white_space_collapse());
computed_values.set_word_break(computed_style.word_break());
if (auto word_spacing = computed_style.word_spacing(); word_spacing.has_value())
computed_values.set_word_spacing(word_spacing.value());

View file

@ -436,7 +436,7 @@ bool pseudo_element_supports_property(PseudoElement pseudo_element, PropertyID p
// FIXME: text-wrap-mode
// FIXME: text-wrap-style
append_property("white-space"sv);
// FIXME: white-space-collapse
append_property("white-space-collapse"sv);
// FIXME: white-space-trim
append_property("word-break"sv);
// FIXME: word-space-transform

View file

@ -58,183 +58,184 @@ All properties associated with getComputedStyle(document.body):
"55": "text-transform",
"56": "visibility",
"57": "white-space",
"58": "word-break",
"59": "word-spacing",
"60": "word-wrap",
"61": "writing-mode",
"62": "align-content",
"63": "align-items",
"64": "align-self",
"65": "animation-delay",
"66": "animation-direction",
"67": "animation-duration",
"68": "animation-fill-mode",
"69": "animation-iteration-count",
"70": "animation-name",
"71": "animation-play-state",
"72": "animation-timing-function",
"73": "appearance",
"74": "aspect-ratio",
"75": "backdrop-filter",
"76": "background-attachment",
"77": "background-blend-mode",
"78": "background-clip",
"79": "background-color",
"80": "background-image",
"81": "background-origin",
"82": "background-position-x",
"83": "background-position-y",
"84": "background-repeat",
"85": "background-size",
"86": "block-size",
"87": "border-block-end-color",
"88": "border-block-end-style",
"89": "border-block-end-width",
"90": "border-block-start-color",
"91": "border-block-start-style",
"92": "border-block-start-width",
"93": "border-bottom-color",
"94": "border-bottom-left-radius",
"95": "border-bottom-right-radius",
"96": "border-bottom-style",
"97": "border-bottom-width",
"98": "border-inline-end-color",
"99": "border-inline-end-style",
"100": "border-inline-end-width",
"101": "border-inline-start-color",
"102": "border-inline-start-style",
"103": "border-inline-start-width",
"104": "border-left-color",
"105": "border-left-style",
"106": "border-left-width",
"107": "border-right-color",
"108": "border-right-style",
"109": "border-right-width",
"110": "border-top-color",
"111": "border-top-left-radius",
"112": "border-top-right-radius",
"113": "border-top-style",
"114": "border-top-width",
"115": "bottom",
"116": "box-shadow",
"117": "box-sizing",
"118": "clear",
"119": "clip",
"120": "clip-path",
"121": "column-count",
"122": "column-gap",
"123": "column-span",
"124": "column-width",
"125": "contain",
"126": "content",
"127": "content-visibility",
"128": "counter-increment",
"129": "counter-reset",
"130": "counter-set",
"131": "cx",
"132": "cy",
"133": "display",
"134": "filter",
"135": "flex-basis",
"136": "flex-direction",
"137": "flex-grow",
"138": "flex-shrink",
"139": "flex-wrap",
"140": "float",
"141": "grid-auto-columns",
"142": "grid-auto-flow",
"143": "grid-auto-rows",
"144": "grid-column-end",
"145": "grid-column-start",
"146": "grid-row-end",
"147": "grid-row-start",
"148": "grid-template-areas",
"149": "grid-template-columns",
"150": "grid-template-rows",
"151": "height",
"152": "inline-size",
"153": "inset-block-end",
"154": "inset-block-start",
"155": "inset-inline-end",
"156": "inset-inline-start",
"157": "isolation",
"158": "justify-content",
"159": "justify-items",
"160": "justify-self",
"161": "left",
"162": "margin-block-end",
"163": "margin-block-start",
"164": "margin-bottom",
"165": "margin-inline-end",
"166": "margin-inline-start",
"167": "margin-left",
"168": "margin-right",
"169": "margin-top",
"170": "mask-image",
"171": "mask-type",
"172": "max-block-size",
"173": "max-height",
"174": "max-inline-size",
"175": "max-width",
"176": "min-block-size",
"177": "min-height",
"178": "min-inline-size",
"179": "min-width",
"180": "mix-blend-mode",
"181": "object-fit",
"182": "object-position",
"183": "opacity",
"184": "order",
"185": "outline-color",
"186": "outline-offset",
"187": "outline-style",
"188": "outline-width",
"189": "overflow-x",
"190": "overflow-y",
"191": "padding-block-end",
"192": "padding-block-start",
"193": "padding-bottom",
"194": "padding-inline-end",
"195": "padding-inline-start",
"196": "padding-left",
"197": "padding-right",
"198": "padding-top",
"199": "position",
"200": "r",
"201": "right",
"202": "rotate",
"203": "row-gap",
"204": "rx",
"205": "ry",
"206": "scale",
"207": "scrollbar-gutter",
"208": "scrollbar-width",
"209": "stop-color",
"210": "stop-opacity",
"211": "table-layout",
"212": "text-decoration-color",
"213": "text-decoration-style",
"214": "text-decoration-thickness",
"215": "text-overflow",
"216": "top",
"217": "touch-action",
"218": "transform",
"219": "transform-box",
"220": "transform-origin",
"221": "transition-behavior",
"222": "transition-delay",
"223": "transition-duration",
"224": "transition-property",
"225": "transition-timing-function",
"226": "translate",
"227": "unicode-bidi",
"228": "user-select",
"229": "vertical-align",
"230": "view-transition-name",
"231": "width",
"232": "x",
"233": "y",
"234": "z-index"
"58": "white-space-collapse",
"59": "word-break",
"60": "word-spacing",
"61": "word-wrap",
"62": "writing-mode",
"63": "align-content",
"64": "align-items",
"65": "align-self",
"66": "animation-delay",
"67": "animation-direction",
"68": "animation-duration",
"69": "animation-fill-mode",
"70": "animation-iteration-count",
"71": "animation-name",
"72": "animation-play-state",
"73": "animation-timing-function",
"74": "appearance",
"75": "aspect-ratio",
"76": "backdrop-filter",
"77": "background-attachment",
"78": "background-blend-mode",
"79": "background-clip",
"80": "background-color",
"81": "background-image",
"82": "background-origin",
"83": "background-position-x",
"84": "background-position-y",
"85": "background-repeat",
"86": "background-size",
"87": "block-size",
"88": "border-block-end-color",
"89": "border-block-end-style",
"90": "border-block-end-width",
"91": "border-block-start-color",
"92": "border-block-start-style",
"93": "border-block-start-width",
"94": "border-bottom-color",
"95": "border-bottom-left-radius",
"96": "border-bottom-right-radius",
"97": "border-bottom-style",
"98": "border-bottom-width",
"99": "border-inline-end-color",
"100": "border-inline-end-style",
"101": "border-inline-end-width",
"102": "border-inline-start-color",
"103": "border-inline-start-style",
"104": "border-inline-start-width",
"105": "border-left-color",
"106": "border-left-style",
"107": "border-left-width",
"108": "border-right-color",
"109": "border-right-style",
"110": "border-right-width",
"111": "border-top-color",
"112": "border-top-left-radius",
"113": "border-top-right-radius",
"114": "border-top-style",
"115": "border-top-width",
"116": "bottom",
"117": "box-shadow",
"118": "box-sizing",
"119": "clear",
"120": "clip",
"121": "clip-path",
"122": "column-count",
"123": "column-gap",
"124": "column-span",
"125": "column-width",
"126": "contain",
"127": "content",
"128": "content-visibility",
"129": "counter-increment",
"130": "counter-reset",
"131": "counter-set",
"132": "cx",
"133": "cy",
"134": "display",
"135": "filter",
"136": "flex-basis",
"137": "flex-direction",
"138": "flex-grow",
"139": "flex-shrink",
"140": "flex-wrap",
"141": "float",
"142": "grid-auto-columns",
"143": "grid-auto-flow",
"144": "grid-auto-rows",
"145": "grid-column-end",
"146": "grid-column-start",
"147": "grid-row-end",
"148": "grid-row-start",
"149": "grid-template-areas",
"150": "grid-template-columns",
"151": "grid-template-rows",
"152": "height",
"153": "inline-size",
"154": "inset-block-end",
"155": "inset-block-start",
"156": "inset-inline-end",
"157": "inset-inline-start",
"158": "isolation",
"159": "justify-content",
"160": "justify-items",
"161": "justify-self",
"162": "left",
"163": "margin-block-end",
"164": "margin-block-start",
"165": "margin-bottom",
"166": "margin-inline-end",
"167": "margin-inline-start",
"168": "margin-left",
"169": "margin-right",
"170": "margin-top",
"171": "mask-image",
"172": "mask-type",
"173": "max-block-size",
"174": "max-height",
"175": "max-inline-size",
"176": "max-width",
"177": "min-block-size",
"178": "min-height",
"179": "min-inline-size",
"180": "min-width",
"181": "mix-blend-mode",
"182": "object-fit",
"183": "object-position",
"184": "opacity",
"185": "order",
"186": "outline-color",
"187": "outline-offset",
"188": "outline-style",
"189": "outline-width",
"190": "overflow-x",
"191": "overflow-y",
"192": "padding-block-end",
"193": "padding-block-start",
"194": "padding-bottom",
"195": "padding-inline-end",
"196": "padding-inline-start",
"197": "padding-left",
"198": "padding-right",
"199": "padding-top",
"200": "position",
"201": "r",
"202": "right",
"203": "rotate",
"204": "row-gap",
"205": "rx",
"206": "ry",
"207": "scale",
"208": "scrollbar-gutter",
"209": "scrollbar-width",
"210": "stop-color",
"211": "stop-opacity",
"212": "table-layout",
"213": "text-decoration-color",
"214": "text-decoration-style",
"215": "text-decoration-thickness",
"216": "text-overflow",
"217": "top",
"218": "touch-action",
"219": "transform",
"220": "transform-box",
"221": "transform-origin",
"222": "transition-behavior",
"223": "transition-delay",
"224": "transition-duration",
"225": "transition-property",
"226": "transition-timing-function",
"227": "translate",
"228": "unicode-bidi",
"229": "user-select",
"230": "vertical-align",
"231": "view-transition-name",
"232": "width",
"233": "x",
"234": "y",
"235": "z-index"
}
All properties associated with document.body.style by default:
{}

View file

@ -646,6 +646,8 @@ All supported properties and their default values exposed from CSSStylePropertie
'visibility': 'visible'
'whiteSpace': 'normal'
'white-space': 'normal'
'whiteSpaceCollapse': 'collapse'
'white-space-collapse': 'collapse'
'width': '284px'
'wordBreak': 'normal'
'word-break': 'normal'

View file

@ -56,6 +56,7 @@ text-shadow: none
text-transform: none
visibility: visible
white-space: normal
white-space-collapse: collapse
word-break: normal
word-spacing: normal
word-wrap: normal
@ -84,7 +85,7 @@ background-position-x: 0%
background-position-y: 0%
background-repeat: repeat
background-size: auto auto
block-size: 1290px
block-size: 1305px
border-block-end-color: rgb(0, 0, 0)
border-block-end-style: none
border-block-end-width: medium
@ -149,7 +150,7 @@ grid-row-start: auto
grid-template-areas: none
grid-template-columns: none
grid-template-rows: none
height: 2265px
height: 2280px
inline-size: 784px
inset-block-end: auto
inset-block-start: auto

View file

@ -0,0 +1,9 @@
Harness status: OK
Found 4 tests
4 Pass
Pass Property white-space-collapse value 'collapse'
Pass Property white-space-collapse value 'preserve'
Pass Property white-space-collapse value 'preserve-breaks'
Pass Property white-space-collapse value 'break-spaces'

View file

@ -0,0 +1,11 @@
Harness status: OK
Found 6 tests
6 Pass
Pass e.style['white-space-collapse'] = "auto" should not set the property value
Pass e.style['white-space-collapse'] = "none" should not set the property value
Pass e.style['white-space-collapse'] = "collapse preserve" should not set the property value
Pass e.style['white-space-collapse'] = "preserve preserve-breaks" should not set the property value
Pass e.style['white-space-collapse'] = "delicious collapse" should not set the property value
Pass e.style['white-space-collapse'] = "5px" should not set the property value

View file

@ -0,0 +1,14 @@
Harness status: OK
Found 9 tests
9 Pass
Pass e.style['white-space-collapse'] = "collapse" should set the property value
Pass e.style['white-space-collapse'] = "preserve" should set the property value
Pass e.style['white-space-collapse'] = "preserve-breaks" should set the property value
Pass e.style['white-space-collapse'] = "break-spaces" should set the property value
Pass e.style['white-space-collapse'] = "initial" should set the property value
Pass e.style['white-space-collapse'] = "inherit" should set the property value
Pass e.style['white-space-collapse'] = "unset" should set the property value
Pass e.style['white-space-collapse'] = "revert" should set the property value
Pass e.style['white-space-collapse'] = "revert-layer" should set the property value

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text: getComputedStyle().whiteSpace</title>
<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">
<meta name="assert" content="white-space computed value is specified keyword.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("white-space-collapse", "collapse");
test_computed_value("white-space-collapse", "preserve");
test_computed_value("white-space-collapse", "preserve-breaks");
test_computed_value("white-space-collapse", "break-spaces");
</script>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Module Test: parsing white-space-collapse with invalid values</title>
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing">
<meta name="assert" content="white-space-collapse supports only the grammar 'collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("white-space-collapse", "auto");
test_invalid_value("white-space-collapse", "none");
test_invalid_value("white-space-collapse", "collapse preserve");
test_invalid_value("white-space-collapse", "preserve preserve-breaks");
test_invalid_value("white-space-collapse", "delicious collapse");
test_invalid_value("white-space-collapse", "5px");
</script>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Module Test: parsing white-space-collapse with valid values</title>
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing">
<meta name="assert" content="white-space-collapse supports the full grammar 'collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("white-space-collapse", "collapse");
test_valid_value("white-space-collapse", "preserve");
test_valid_value("white-space-collapse", "preserve-breaks");
test_valid_value("white-space-collapse", "break-spaces");
test_valid_value("white-space-collapse", "initial");
test_valid_value("white-space-collapse", "inherit");
test_valid_value("white-space-collapse", "unset");
test_valid_value("white-space-collapse", "revert");
test_valid_value("white-space-collapse", "revert-layer");
</script>
</body>
</html>