mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-21 12:05:15 +00:00
LibWeb/CSS: Don't serialize longhands which match their initial values
Shorthand subproperties that match their initial values are now excluded from serialization, by default. Properties where this behavior is not desired, like `gap`, are special-cased.
This commit is contained in:
Tim Ledbetter
parent
69050da929
commit
455e0a95ff
6 changed files with 144 additions and 27 deletions
|
|
@ -279,6 +279,13 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
|
|||
return "normal"_string;
|
||||
return MUST(String::join(' ', values));
|
||||
}
|
||||
case PropertyID::Gap: {
|
||||
auto row_gap = longhand(PropertyID::RowGap);
|
||||
auto column_gap = longhand(PropertyID::ColumnGap);
|
||||
if (row_gap == column_gap)
|
||||
return row_gap->to_string(mode);
|
||||
return MUST(String::formatted("{} {}", row_gap->to_string(mode), column_gap->to_string(mode)));
|
||||
}
|
||||
case PropertyID::GridArea: {
|
||||
auto& row_start = longhand(PropertyID::GridRowStart)->as_grid_track_placement();
|
||||
auto& column_start = longhand(PropertyID::GridColumnStart)->as_grid_track_placement();
|
||||
|
|
@ -411,13 +418,21 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
|
|||
|
||||
StringBuilder builder;
|
||||
auto first = true;
|
||||
for (auto& value : m_properties.values) {
|
||||
for (size_t i = 0; i < m_properties.values.size(); ++i) {
|
||||
auto value = m_properties.values[i];
|
||||
auto value_string = value->to_string(mode);
|
||||
auto initial_value_string = property_initial_value(m_properties.sub_properties[i])->to_string(mode);
|
||||
if (value_string == initial_value_string)
|
||||
continue;
|
||||
if (first)
|
||||
first = false;
|
||||
else
|
||||
builder.append(' ');
|
||||
builder.append(value->to_string(mode));
|
||||
}
|
||||
if (builder.is_empty())
|
||||
return m_properties.values.first()->to_string(mode);
|
||||
|
||||
return MUST(builder.to_string());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'WebkitAlignSelf': 'auto'
|
||||
'webkitAlignSelf': 'auto'
|
||||
'-webkit-align-self': 'auto'
|
||||
'WebkitAnimation': 'none 0s ease 1 normal running 0s none'
|
||||
'webkitAnimation': 'none 0s ease 1 normal running 0s none'
|
||||
'-webkit-animation': 'none 0s ease 1 normal running 0s none'
|
||||
'WebkitAnimation': 'none'
|
||||
'webkitAnimation': 'none'
|
||||
'-webkit-animation': 'none'
|
||||
'WebkitAnimationDelay': '0s'
|
||||
'webkitAnimationDelay': '0s'
|
||||
'-webkit-animation-delay': '0s'
|
||||
|
|
@ -111,9 +111,9 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'WebkitTransformOrigin': '50% 50%'
|
||||
'webkitTransformOrigin': '50% 50%'
|
||||
'-webkit-transform-origin': '50% 50%'
|
||||
'WebkitTransition': 'all 0s ease 0s'
|
||||
'webkitTransition': 'all 0s ease 0s'
|
||||
'-webkit-transition': 'all 0s ease 0s'
|
||||
'WebkitTransition': 'all'
|
||||
'webkitTransition': 'all'
|
||||
'-webkit-transition': 'all'
|
||||
'WebkitTransitionDelay': '0s'
|
||||
'webkitTransitionDelay': '0s'
|
||||
'-webkit-transition-delay': '0s'
|
||||
|
|
@ -137,7 +137,7 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'align-items': 'normal'
|
||||
'alignSelf': 'auto'
|
||||
'align-self': 'auto'
|
||||
'animation': 'none 0s ease 1 normal running 0s none'
|
||||
'animation': 'none'
|
||||
'animationDelay': '0s'
|
||||
'animation-delay': '0s'
|
||||
'animationDirection': 'normal'
|
||||
|
|
@ -184,25 +184,25 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'background-size': 'auto auto'
|
||||
'blockSize': '0px'
|
||||
'block-size': '0px'
|
||||
'border': '0px none rgb(0, 0, 0)'
|
||||
'borderBlockEnd': 'medium none rgb(0, 0, 0)'
|
||||
'border-block-end': 'medium none rgb(0, 0, 0)'
|
||||
'border': '0px rgb(0, 0, 0)'
|
||||
'borderBlockEnd': 'rgb(0, 0, 0)'
|
||||
'border-block-end': 'rgb(0, 0, 0)'
|
||||
'borderBlockEndColor': 'rgb(0, 0, 0)'
|
||||
'border-block-end-color': 'rgb(0, 0, 0)'
|
||||
'borderBlockEndStyle': 'none'
|
||||
'border-block-end-style': 'none'
|
||||
'borderBlockEndWidth': 'medium'
|
||||
'border-block-end-width': 'medium'
|
||||
'borderBlockStart': 'medium none rgb(0, 0, 0)'
|
||||
'border-block-start': 'medium none rgb(0, 0, 0)'
|
||||
'borderBlockStart': 'rgb(0, 0, 0)'
|
||||
'border-block-start': 'rgb(0, 0, 0)'
|
||||
'borderBlockStartColor': 'rgb(0, 0, 0)'
|
||||
'border-block-start-color': 'rgb(0, 0, 0)'
|
||||
'borderBlockStartStyle': 'none'
|
||||
'border-block-start-style': 'none'
|
||||
'borderBlockStartWidth': 'medium'
|
||||
'border-block-start-width': 'medium'
|
||||
'borderBottom': '0px none rgb(0, 0, 0)'
|
||||
'border-bottom': '0px none rgb(0, 0, 0)'
|
||||
'borderBottom': '0px rgb(0, 0, 0)'
|
||||
'border-bottom': '0px rgb(0, 0, 0)'
|
||||
'borderBottomColor': 'rgb(0, 0, 0)'
|
||||
'border-bottom-color': 'rgb(0, 0, 0)'
|
||||
'borderBottomLeftRadius': '0px'
|
||||
|
|
@ -217,24 +217,24 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'border-collapse': 'separate'
|
||||
'borderColor': 'rgb(0, 0, 0)'
|
||||
'border-color': 'rgb(0, 0, 0)'
|
||||
'borderInlineEnd': 'medium none rgb(0, 0, 0)'
|
||||
'border-inline-end': 'medium none rgb(0, 0, 0)'
|
||||
'borderInlineEnd': 'rgb(0, 0, 0)'
|
||||
'border-inline-end': 'rgb(0, 0, 0)'
|
||||
'borderInlineEndColor': 'rgb(0, 0, 0)'
|
||||
'border-inline-end-color': 'rgb(0, 0, 0)'
|
||||
'borderInlineEndStyle': 'none'
|
||||
'border-inline-end-style': 'none'
|
||||
'borderInlineEndWidth': 'medium'
|
||||
'border-inline-end-width': 'medium'
|
||||
'borderInlineStart': 'medium none rgb(0, 0, 0)'
|
||||
'border-inline-start': 'medium none rgb(0, 0, 0)'
|
||||
'borderInlineStart': 'rgb(0, 0, 0)'
|
||||
'border-inline-start': 'rgb(0, 0, 0)'
|
||||
'borderInlineStartColor': 'rgb(0, 0, 0)'
|
||||
'border-inline-start-color': 'rgb(0, 0, 0)'
|
||||
'borderInlineStartStyle': 'none'
|
||||
'border-inline-start-style': 'none'
|
||||
'borderInlineStartWidth': 'medium'
|
||||
'border-inline-start-width': 'medium'
|
||||
'borderLeft': '0px none rgb(0, 0, 0)'
|
||||
'border-left': '0px none rgb(0, 0, 0)'
|
||||
'borderLeft': '0px rgb(0, 0, 0)'
|
||||
'border-left': '0px rgb(0, 0, 0)'
|
||||
'borderLeftColor': 'rgb(0, 0, 0)'
|
||||
'border-left-color': 'rgb(0, 0, 0)'
|
||||
'borderLeftStyle': 'none'
|
||||
|
|
@ -243,8 +243,8 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'border-left-width': '0px'
|
||||
'borderRadius': '0px'
|
||||
'border-radius': '0px'
|
||||
'borderRight': '0px none rgb(0, 0, 0)'
|
||||
'border-right': '0px none rgb(0, 0, 0)'
|
||||
'borderRight': '0px rgb(0, 0, 0)'
|
||||
'border-right': '0px rgb(0, 0, 0)'
|
||||
'borderRightColor': 'rgb(0, 0, 0)'
|
||||
'border-right-color': 'rgb(0, 0, 0)'
|
||||
'borderRightStyle': 'none'
|
||||
|
|
@ -255,8 +255,8 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'border-spacing': '0px'
|
||||
'borderStyle': 'none'
|
||||
'border-style': 'none'
|
||||
'borderTop': '0px none rgb(0, 0, 0)'
|
||||
'border-top': '0px none rgb(0, 0, 0)'
|
||||
'borderTop': '0px rgb(0, 0, 0)'
|
||||
'border-top': '0px rgb(0, 0, 0)'
|
||||
'borderTopColor': 'rgb(0, 0, 0)'
|
||||
'border-top-color': 'rgb(0, 0, 0)'
|
||||
'borderTopLeftRadius': '0px'
|
||||
|
|
@ -496,7 +496,7 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'object-position': '50% 50%'
|
||||
'opacity': '1'
|
||||
'order': '0'
|
||||
'outline': 'rgb(0, 0, 0) none 0px'
|
||||
'outline': 'rgb(0, 0, 0) 0px'
|
||||
'outlineColor': 'rgb(0, 0, 0)'
|
||||
'outline-color': 'rgb(0, 0, 0)'
|
||||
'outlineOffset': '0px'
|
||||
|
|
@ -606,7 +606,7 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'transform-box': 'view-box'
|
||||
'transformOrigin': '50% 50%'
|
||||
'transform-origin': '50% 50%'
|
||||
'transition': 'all 0s ease 0s'
|
||||
'transition': 'all'
|
||||
'transitionDelay': '0s'
|
||||
'transition-delay': '0s'
|
||||
'transitionDuration': '0s'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 6 tests
|
||||
|
||||
6 Pass
|
||||
Pass e.style['border'] = "1px dotted red" should set the property value
|
||||
Pass e.style['border'] = "green double thin" should set the property value
|
||||
Pass e.style['border-top'] = "thin" should set the property value
|
||||
Pass e.style['border-right'] = "double" should set the property value
|
||||
Pass e.style['border-bottom'] = "green" should set the property value
|
||||
Pass e.style['border-left'] = "1px dotted red" should set the property value
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 20 tests
|
||||
|
||||
20 Pass
|
||||
Pass e.style['outline'] = "rgba(10, 20, 30, 0.4)" should set the property value
|
||||
Pass e.style['outline'] = "auto" should set the property value
|
||||
Pass e.style['outline'] = "none" should set the property value
|
||||
Pass e.style['outline'] = "dotted" should set the property value
|
||||
Pass e.style['outline'] = "dashed" should set the property value
|
||||
Pass e.style['outline'] = "solid" should set the property value
|
||||
Pass e.style['outline'] = "double" should set the property value
|
||||
Pass e.style['outline'] = "groove" should set the property value
|
||||
Pass e.style['outline'] = "ridge" should set the property value
|
||||
Pass e.style['outline'] = "inset" should set the property value
|
||||
Pass e.style['outline'] = "outset" should set the property value
|
||||
Pass e.style['outline'] = "0" should set the property value
|
||||
Pass e.style['outline'] = "1px" should set the property value
|
||||
Pass e.style['outline'] = "calc(2em + 3ex)" should set the property value
|
||||
Pass e.style['outline'] = "thin" should set the property value
|
||||
Pass e.style['outline'] = "medium" should set the property value
|
||||
Pass e.style['outline'] = "thick" should set the property value
|
||||
Pass e.style['outline'] = "dashed thin" should set the property value
|
||||
Pass e.style['outline'] = "medium rgba(10, 20, 30, 0.4)" should set the property value
|
||||
Pass e.style['outline'] = "3px ridge rgba(10, 20, 30, 0.4)" should set the property value
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Module Level 3: parsing border with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-shorthands">
|
||||
<meta name="assert" content="border supports the full grammar '<line-width> || <line-style> || <color>'.">
|
||||
<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("border", "1px dotted red");
|
||||
test_valid_value("border", "green double thin", "thin double green");
|
||||
|
||||
test_valid_value("border-top", "thin", ["thin", "thin none"]);
|
||||
test_valid_value("border-right", "double", ["double", "medium double"]);
|
||||
test_valid_value("border-bottom", "green", ["green", "medium none green"]);
|
||||
test_valid_value("border-left", "1px dotted red");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS UI Level 3: parsing outline with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values">
|
||||
<meta name="assert" content="outline supports the full grammar '<outline-color> || <outline> || <outline>'.">
|
||||
<meta name="assert" content="outline serializes in canonical order, with shortest possible serialization.">
|
||||
<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("outline", "rgba(10, 20, 30, 0.4)");
|
||||
|
||||
test_valid_value("outline", "auto");
|
||||
test_valid_value("outline", "none", ["currentcolor", "none", "medium"]);
|
||||
test_valid_value("outline", "dotted");
|
||||
test_valid_value("outline", "dashed");
|
||||
test_valid_value("outline", "solid");
|
||||
test_valid_value("outline", "double");
|
||||
test_valid_value("outline", "groove");
|
||||
test_valid_value("outline", "ridge");
|
||||
test_valid_value("outline", "inset");
|
||||
test_valid_value("outline", "outset");
|
||||
|
||||
test_valid_value("outline", "0", "0px");
|
||||
test_valid_value("outline", "1px");
|
||||
test_valid_value("outline", "calc(2em + 3ex)");
|
||||
test_valid_value("outline", "thin");
|
||||
test_valid_value("outline", "medium", ["currentcolor", "none", "medium"]);
|
||||
test_valid_value("outline", "thick");
|
||||
|
||||
test_valid_value("outline", "dashed thin");
|
||||
test_valid_value("outline", "medium rgba(10, 20, 30, 0.4)", ["rgba(10, 20, 30, 0.4) medium", "rgba(10, 20, 30, 0.4)"]);
|
||||
|
||||
test_valid_value("outline", "3px ridge rgba(10, 20, 30, 0.4)", "rgba(10, 20, 30, 0.4) ridge 3px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue