Skip to content

Commit

Permalink
WIP: Actually run simplification, including returning a non-calc value
Browse files Browse the repository at this point in the history 
Returning a non-calc value is turning up all kinds of weird little bugs,
so I've been tackling them one by one. Currently there are some
color-function failures that need looking at.

Probably some changes here need splitting out too.
  • Loading branch information
@AtkinsSJ
AtkinsSJ committed Jan 27, 2025
1 parent 435c16f commit d51f170
Show file tree
Hide file tree
Showing 15 changed files with 306 additions and 235 deletions.
143 changes: 89 additions & 54 deletions Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Libraries/LibWeb/CSS/Parser/Parser.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ class Parser {
};
Optional<PropertyAndValue> parse_css_value_for_properties(ReadonlySpan<PropertyID>, TokenStream<ComponentValue>&);
RefPtr<CSSStyleValue> parse_builtin_value(TokenStream<ComponentValue>&);
RefPtr<CalculatedStyleValue> parse_calculated_value(ComponentValue const&);
RefPtr<CSSStyleValue> parse_calculated_value(ComponentValue const&);
RefPtr<CustomIdentStyleValue> parse_custom_ident_value(TokenStream<ComponentValue>&, std::initializer_list<StringView> blacklist);
// NOTE: Implemented in generated code. (GenerateCSSMathFunctions.cpp)
RefPtr<CalculationNode> parse_math_function(Function const&, CalculationContext const&);
Expand Down
33 changes: 33 additions & 0 deletions Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,15 @@
#include <AK/TypeCasts.h>
#include <LibWeb/CSS/Percentage.h>
#include <LibWeb/CSS/PropertyID.h>
#include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
#include <LibWeb/CSS/StyleValues/FlexStyleValue.h>
#include <LibWeb/CSS/StyleValues/FrequencyStyleValue.h>
#include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
#include <LibWeb/CSS/StyleValues/TimeStyleValue.h>

namespace Web::CSS {

Expand Down Expand Up @@ -298,6 +307,30 @@ CalculatedStyleValue::CalculationResult NumericCalculationNode::resolve(Calculat
return CalculatedStyleValue::CalculationResult::from_value(m_value, context, numeric_type());
}

RefPtr<CSSStyleValue> NumericCalculationNode::to_style_value(CalculationContext const& context) const
{
// TODO: Clamp values to the range allowed by the context.
return m_value.visit(
[&](Number const& number) -> RefPtr<CSSStyleValue> {
// FIXME: Returning infinity or NaN as a NumberStyleValue isn't valid.
// This is a temporary fix until value-clamping is implemented here.
// In future, we can remove these two lines and return NonnullRefPtr again.
if (!isfinite(number.value()))
return nullptr;

if (context.resolve_numbers_as_integers)
return IntegerStyleValue::create(llround(number.value()));
return NumberStyleValue::create(number.value());
},
[](Angle const& angle) -> RefPtr<CSSStyleValue> { return AngleStyleValue::create(angle); },
[](Flex const& flex) -> RefPtr<CSSStyleValue> { return FlexStyleValue::create(flex); },
[](Frequency const& frequency) -> RefPtr<CSSStyleValue> { return FrequencyStyleValue::create(frequency); },
[](Length const& length) -> RefPtr<CSSStyleValue> { return LengthStyleValue::create(length); },
[](Percentage const& percentage) -> RefPtr<CSSStyleValue> { return PercentageStyleValue::create(percentage); },
[](Resolution const& resolution) -> RefPtr<CSSStyleValue> { return ResolutionStyleValue::create(resolution); },
[](Time const& time) -> RefPtr<CSSStyleValue> { return TimeStyleValue::create(time); });
}

void NumericCalculationNode::dump(StringBuilder& builder, int indent) const
{
builder.appendff("{: >{}}NUMERIC({})\n", "", indent, m_value.visit([](auto& it) { return it.to_string(); }));
Expand Down
3 changes: 3 additions & 0 deletions Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class CalculationNode;
// Contains the context available at parse-time.
struct CalculationContext {
Optional<ValueType> percentages_resolve_as {};
bool resolve_numbers_as_integers = false;
};
// Contains the context for resolving the calculation.
struct CalculationResolutionContext {
Expand Down Expand Up @@ -267,6 +268,8 @@ class NumericCalculationNode final : public CalculationNode {
virtual CalculatedStyleValue::CalculationResult resolve(CalculationResolutionContext const&) const override;
virtual NonnullRefPtr<CalculationNode> with_simplified_children(CalculationContext const&, CalculationResolutionContext const&) const override { return *this; }

RefPtr<CSSStyleValue> to_style_value(CalculationContext const&) const;

NumericValue const& value() const { return m_value; }

virtual void dump(StringBuilder&, int indent) const override;
Expand Down
264 changes: 132 additions & 132 deletions Tests/LibWeb/Text/expected/css/calc-coverage.txt
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,80 @@
animation-delay: 'calc(2s)' -> 'calc(2s)'
animation-delay: 'calc(2s)' -> '2s'
animation-delay: 'calc(2s * var(--n))' -> '4s'
animation-duration: 'calc(2s)' -> 'calc(2s)'
animation-duration: 'calc(2s)' -> '2s'
animation-duration: 'calc(2s * var(--n))' -> '4s'
animation-iteration-count: 'calc(2)' -> 'calc(2)'
animation-iteration-count: 'calc(2)' -> '2'
animation-iteration-count: 'calc(2 * var(--n))' -> '4'
backdrop-filter: 'grayscale(calc(2%))' -> 'grayscale(calc(2%))'
backdrop-filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(calc(2% * 2))'
backdrop-filter: 'grayscale(calc(0.02))' -> 'grayscale(calc(0.02))'
backdrop-filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(calc(0.02 * 2))'
background-position-x: 'calc(2px)' -> 'calc(2px)'
background-position-x: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
background-position-y: 'calc(2%)' -> 'calc(2%)'
background-position-y: 'calc(2% * var(--n))' -> '4%'
background-size: 'calc(2px * var(--n)) calc(2%)' -> 'calc(2px * 2) 2%'
background-size: 'calc(2px * var(--n)) calc(2% * var(--n))' -> 'calc(2px * 2) 4%'
border-bottom-left-radius: 'calc(2px)' -> 'calc(2px)'
border-bottom-left-radius: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
border-bottom-right-radius: 'calc(2%)' -> 'calc(2%)'
border-bottom-right-radius: 'calc(2% * var(--n))' -> '4%'
border-bottom-width: 'calc(2px)' -> 'calc(2px)'
border-bottom-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
border-left-width: 'calc(2px)' -> 'calc(2px)'
border-left-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
border-right-width: 'calc(2px)' -> 'calc(2px)'
border-right-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
border-spacing: 'calc(2px)' -> 'calc(2px)'
border-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
border-top-left-radius: 'calc(2px)' -> 'calc(2px)'
border-top-left-radius: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
border-top-right-radius: 'calc(2%)' -> 'calc(2%)'
border-top-right-radius: 'calc(2% * var(--n))' -> '4%'
border-top-width: 'calc(2px)' -> 'calc(2px)'
border-top-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
bottom: 'calc(2px)' -> 'calc(2px)'
bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
clip-path: 'polygon(calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))' -> 'polygon(nonzero, calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))'
clip-path: 'polygon(calc(0px * var(--n)) calc(2px * var(--n)), calc(2px * var(--n)) calc(0px * var(--n)), calc(2px * var(--n)) calc(2px * var(--n)))' -> 'polygon(nonzero, calc(0px * 2) calc(2px * 2), calc(2px * 2) calc(0px * 2), calc(2px * 2) calc(2px * 2))'
clip-path: 'polygon(calc(0%) calc(2%), calc(2%) calc(0%), calc(2%) calc(2%))' -> 'polygon(nonzero, calc(0%) calc(2%), calc(2%) calc(0%), calc(2%) calc(2%))'
clip-path: 'polygon(calc(0% * var(--n)) calc(2% * var(--n)), calc(2% * var(--n)) calc(0% * var(--n)), calc(2% * var(--n)) calc(2% * var(--n)))' -> 'polygon(nonzero, calc(0% * 2) calc(2% * 2), calc(2% * 2) calc(0% * 2), calc(2% * 2) calc(2% * 2))'
column-count: 'calc(2)' -> 'calc(2)'
backdrop-filter: 'grayscale(calc(2%))' -> 'grayscale(2%)'
backdrop-filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(4%)'
backdrop-filter: 'grayscale(calc(0.02))' -> 'grayscale(0.02)'
backdrop-filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(0.04)'
background-position-x: 'calc(2px)' -> '2px'
background-position-x: 'calc(2px * var(--n))' -> '4px'
background-position-y: 'calc(2%)' -> '2%'
background-position-y: 'calc(2% * var(--n))' -> '4px'
background-size: 'calc(2px * var(--n)) calc(2%)' -> '4px 2%'
background-size: 'calc(2px * var(--n)) calc(2% * var(--n))' -> '4px 4px'
border-bottom-left-radius: 'calc(2px)' -> '2px'
border-bottom-left-radius: 'calc(2px * var(--n))' -> '4px'
border-bottom-right-radius: 'calc(2%)' -> '2%'
border-bottom-right-radius: 'calc(2% * var(--n))' -> '4px'
border-bottom-width: 'calc(2px)' -> '2px'
border-bottom-width: 'calc(2px * var(--n))' -> '4px'
border-left-width: 'calc(2px)' -> '2px'
border-left-width: 'calc(2px * var(--n))' -> '4px'
border-right-width: 'calc(2px)' -> '2px'
border-right-width: 'calc(2px * var(--n))' -> '4px'
border-spacing: 'calc(2px)' -> '2px'
border-spacing: 'calc(2px * var(--n))' -> '4px'
border-top-left-radius: 'calc(2px)' -> '2px'
border-top-left-radius: 'calc(2px * var(--n))' -> '4px'
border-top-right-radius: 'calc(2%)' -> '2%'
border-top-right-radius: 'calc(2% * var(--n))' -> '4px'
border-top-width: 'calc(2px)' -> '2px'
border-top-width: 'calc(2px * var(--n))' -> '4px'
bottom: 'calc(2px)' -> '2px'
bottom: 'calc(2px * var(--n))' -> '4px'
clip-path: 'polygon(calc(0px) calc(2px), calc(2px) calc(0px), calc(2px) calc(2px))' -> 'polygon(nonzero, 0px 2px, 2px 0px, 2px 2px)'
clip-path: 'polygon(calc(0px * var(--n)) calc(2px * var(--n)), calc(2px * var(--n)) calc(0px * var(--n)), calc(2px * var(--n)) calc(2px * var(--n)))' -> 'polygon(nonzero, 0px 4px, 4px 0px, 4px 4px)'
clip-path: 'polygon(calc(0%) calc(2%), calc(2%) calc(0%), calc(2%) calc(2%))' -> 'polygon(nonzero, 0% 2%, 2% 0%, 2% 2%)'
clip-path: 'polygon(calc(0% * var(--n)) calc(2% * var(--n)), calc(2% * var(--n)) calc(0% * var(--n)), calc(2% * var(--n)) calc(2% * var(--n)))' -> 'polygon(nonzero, 0% 4%, 4% 0%, 4% 4%)'
column-count: 'calc(2)' -> '2'
column-count: 'calc(2 * var(--n))' -> '4'
column-gap: 'calc(2px)' -> 'calc(2px)'
column-gap: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
column-width: 'calc(2px)' -> 'calc(2px)'
column-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
counter-increment: 'foo calc(2)' -> 'foo calc(2)'
column-gap: 'calc(2px)' -> '2px'
column-gap: 'calc(2px * var(--n))' -> '4px'
column-width: 'calc(2px)' -> '2px'
column-width: 'calc(2px * var(--n))' -> '4px'
counter-increment: 'foo calc(2)' -> 'foo 2'
counter-increment: 'foo calc(2 * var(--n))' -> 'foo 4'
counter-reset: 'foo calc(2)' -> 'foo calc(2)'
counter-reset: 'foo calc(2)' -> 'foo 2'
counter-reset: 'foo calc(2 * var(--n))' -> 'foo 4'
counter-set: 'foo calc(2)' -> 'foo calc(2)'
counter-set: 'foo calc(2)' -> 'foo 2'
counter-set: 'foo calc(2 * var(--n))' -> 'foo 4'
cx: 'calc(2px)' -> 'calc(2px)'
cx: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
cy: 'calc(2%)' -> 'calc(2%)'
cy: 'calc(2% * var(--n))' -> '4%'
fill-opacity: 'calc(2)' -> 'calc(2)'
cx: 'calc(2px)' -> '2px'
cx: 'calc(2px * var(--n))' -> '4px'
cy: 'calc(2%)' -> '2%'
cy: 'calc(2% * var(--n))' -> '4px'
fill-opacity: 'calc(2)' -> '2'
fill-opacity: 'calc(2 * var(--n))' -> '4'
filter: 'grayscale(calc(2%))' -> 'grayscale(calc(2%))'
filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(calc(2% * 2))'
filter: 'grayscale(calc(0.02))' -> 'grayscale(calc(0.02))'
filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(calc(0.02 * 2))'
flex-basis: 'calc(2px)' -> 'calc(2px)'
flex-basis: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
flex-grow: 'calc(2)' -> 'calc(2)'
filter: 'grayscale(calc(2%))' -> 'grayscale(2%)'
filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(4%)'
filter: 'grayscale(calc(0.02))' -> 'grayscale(0.02)'
filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(0.04)'
flex-basis: 'calc(2px)' -> '2px'
flex-basis: 'calc(2px * var(--n))' -> '4px'
flex-grow: 'calc(2)' -> '2'
flex-grow: 'calc(2 * var(--n))' -> '4'
flex-shrink: 'calc(2)' -> 'calc(2)'
flex-shrink: 'calc(2)' -> '2'
flex-shrink: 'calc(2 * var(--n))' -> '4'
font-feature-settings: ''test' calc(2)' -> '"test" calc(2)'
font-feature-settings: ''test' calc(2)' -> '"test" 2'
font-feature-settings: ''test' calc(2 * var(--n))' -> '"test" 4'
font-size: 'calc(2px)' -> '2px'
font-size: 'calc(2px * var(--n))' -> '4px'
font-variation-settings: ''test' calc(2)' -> '"test" calc(2)'
font-variation-settings: ''test' calc(2)' -> '"test" 2'
font-variation-settings: ''test' calc(2 * var(--n))' -> '"test" 4'
font-weight: 'calc(2)' -> '2'
font-weight: 'calc(2 * var(--n))' -> '4'
font-width: 'calc(2%)' -> 'calc(2%)'
font-width: 'calc(2%)' -> '2%'
font-width: 'calc(2% * var(--n))' -> '4%'
grid-auto-columns: 'calc(2fr)' -> 'auto'
grid-auto-columns: 'calc(2fr * var(--n))' -> 'auto'
Expand All @@ -86,85 +86,85 @@ grid-template-rows: 'calc(2fr)' -> 'auto'
grid-template-rows: 'calc(2fr * var(--n))' -> 'auto'
height: 'calc(2px)' -> '2px'
height: 'calc(2px * var(--n))' -> '4px'
left: 'calc(2px)' -> 'calc(2px)'
left: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
letter-spacing: 'calc(2px)' -> 'calc(2px)'
letter-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
left: 'calc(2px)' -> '2px'
left: 'calc(2px * var(--n))' -> '4px'
letter-spacing: 'calc(2px)' -> '2px'
letter-spacing: 'calc(2px * var(--n))' -> '4px'
line-height: 'calc(2)' -> '32px'
line-height: 'calc(2 * var(--n))' -> '64px'
margin-bottom: 'calc(2px)' -> 'calc(2px)'
margin-bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
margin-left: 'calc(2%)' -> 'calc(2%)'
margin-left: 'calc(2% * var(--n))' -> '4%'
margin-right: 'calc(2px)' -> 'calc(2px)'
margin-right: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
margin-top: 'calc(2%)' -> 'calc(2%)'
margin-top: 'calc(2% * var(--n))' -> '4%'
margin-bottom: 'calc(2px)' -> '2px'
margin-bottom: 'calc(2px * var(--n))' -> '4px'
margin-left: 'calc(2%)' -> '2%'
margin-left: 'calc(2% * var(--n))' -> '4px'
margin-right: 'calc(2px)' -> '2px'
margin-right: 'calc(2px * var(--n))' -> '4px'
margin-top: 'calc(2%)' -> '2%'
margin-top: 'calc(2% * var(--n))' -> '4px'
math-depth: 'calc(2)' -> '2'
math-depth: 'calc(2 * var(--n))' -> '4'
max-height: 'calc(2px)' -> 'calc(2px)'
max-height: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
max-width: 'calc(2%)' -> 'calc(2%)'
max-width: 'calc(2% * var(--n))' -> '4%'
min-height: 'calc(2px)' -> 'calc(2px)'
min-height: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
min-width: 'calc(2%)' -> 'calc(2%)'
min-width: 'calc(2% * var(--n))' -> '4%'
opacity: 'calc(2)' -> 'calc(2)'
max-height: 'calc(2px)' -> '2px'
max-height: 'calc(2px * var(--n))' -> '4px'
max-width: 'calc(2%)' -> '2%'
max-width: 'calc(2% * var(--n))' -> '4px'
min-height: 'calc(2px)' -> '2px'
min-height: 'calc(2px * var(--n))' -> '4px'
min-width: 'calc(2%)' -> '2%'
min-width: 'calc(2% * var(--n))' -> '4px'
opacity: 'calc(2)' -> '2'
opacity: 'calc(2 * var(--n))' -> '4'
order: 'calc(2)' -> 'calc(2)'
order: 'calc(2)' -> '2'
order: 'calc(2 * var(--n))' -> '4'
outline-offset: 'calc(2px)' -> 'calc(2px)'
outline-offset: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
outline-width: 'calc(2px)' -> 'calc(2px)'
outline-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
padding-bottom: 'calc(2px)' -> 'calc(2px)'
padding-bottom: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
padding-left: 'calc(2%)' -> 'calc(2%)'
padding-left: 'calc(2% * var(--n))' -> '4%'
padding-right: 'calc(2px)' -> 'calc(2px)'
padding-right: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
padding-top: 'calc(2%)' -> 'calc(2%)'
padding-top: 'calc(2% * var(--n))' -> '4%'
r: 'calc(2px)' -> 'calc(2px)'
r: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
right: 'calc(2%)' -> 'calc(2%)'
right: 'calc(2% * var(--n))' -> '4%'
row-gap: 'calc(2%)' -> 'calc(2%)'
row-gap: 'calc(2% * var(--n))' -> '4%'
rx: 'calc(2px)' -> 'calc(2px)'
rx: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
ry: 'calc(2%)' -> 'calc(2%)'
ry: 'calc(2% * var(--n))' -> '4%'
stop-opacity: 'calc(2)' -> 'calc(2)'
outline-offset: 'calc(2px)' -> '2px'
outline-offset: 'calc(2px * var(--n))' -> '4px'
outline-width: 'calc(2px)' -> '2px'
outline-width: 'calc(2px * var(--n))' -> '4px'
padding-bottom: 'calc(2px)' -> '2px'
padding-bottom: 'calc(2px * var(--n))' -> '4px'
padding-left: 'calc(2%)' -> '2%'
padding-left: 'calc(2% * var(--n))' -> '4px'
padding-right: 'calc(2px)' -> '2px'
padding-right: 'calc(2px * var(--n))' -> '4px'
padding-top: 'calc(2%)' -> '2%'
padding-top: 'calc(2% * var(--n))' -> '4px'
r: 'calc(2px)' -> '2px'
r: 'calc(2px * var(--n))' -> '4px'
right: 'calc(2%)' -> '2%'
right: 'calc(2% * var(--n))' -> '4px'
row-gap: 'calc(2%)' -> '2%'
row-gap: 'calc(2% * var(--n))' -> '4px'
rx: 'calc(2px)' -> '2px'
rx: 'calc(2px * var(--n))' -> '4px'
ry: 'calc(2%)' -> '2%'
ry: 'calc(2% * var(--n))' -> '4px'
stop-opacity: 'calc(2)' -> '2'
stop-opacity: 'calc(2 * var(--n))' -> '4'
stroke-opacity: 'calc(2%)' -> 'calc(2%)'
stroke-opacity: 'calc(2%)' -> '2%'
stroke-opacity: 'calc(2% * var(--n))' -> '4%'
stroke-width: 'calc(2px)' -> 'calc(2px)'
stroke-width: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
tab-size: 'calc(2px)' -> 'calc(2px)'
tab-size: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
text-decoration-thickness: 'calc(2px)' -> 'calc(2px)'
text-decoration-thickness: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
text-indent: 'calc(2%)' -> 'calc(2%)'
text-indent: 'calc(2% * var(--n))' -> '4%'
top: 'calc(2%)' -> 'calc(2%)'
top: 'calc(2% * var(--n))' -> '4%'
transform-origin: 'calc(2px) calc(2%)' -> 'calc(2px) calc(2%)'
transform-origin: 'calc(2px * var(--n)) calc(2% * var(--n))' -> 'calc(2px * 2) 4%'
transition-delay: 'calc(2s)' -> 'calc(2s)'
stroke-width: 'calc(2px)' -> '2px'
stroke-width: 'calc(2px * var(--n))' -> '4px'
tab-size: 'calc(2px)' -> '2px'
tab-size: 'calc(2px * var(--n))' -> '4px'
text-decoration-thickness: 'calc(2px)' -> '2px'
text-decoration-thickness: 'calc(2px * var(--n))' -> '4px'
text-indent: 'calc(2%)' -> '2%'
text-indent: 'calc(2% * var(--n))' -> '4px'
top: 'calc(2%)' -> '2%'
top: 'calc(2% * var(--n))' -> '4px'
transform-origin: 'calc(2px) calc(2%)' -> '2px 2%'
transform-origin: 'calc(2px * var(--n)) calc(2% * var(--n))' -> '4px 4px'
transition-delay: 'calc(2s)' -> '2s'
transition-delay: 'calc(2s * var(--n))' -> '4s'
transition-duration: 'calc(2s)' -> 'calc(2s)'
transition-duration: 'calc(2s)' -> '2s'
transition-duration: 'calc(2s * var(--n))' -> '4s'
vertical-align: 'calc(2px)' -> 'calc(2px)'
vertical-align: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
width: 'calc(2%)' -> '15.6875px'
width: 'calc(2% * var(--n))' -> '31.35938px'
word-spacing: 'calc(2px)' -> 'calc(2px)'
word-spacing: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
x: 'calc(2px)' -> 'calc(2px)'
x: 'calc(2px * var(--n))' -> 'calc(2px * 2)'
y: 'calc(2%)' -> 'calc(2%)'
y: 'calc(2% * var(--n))' -> '4%'
z-index: 'calc(2)' -> 'calc(2)'
vertical-align: 'calc(2px)' -> '2px'
vertical-align: 'calc(2px * var(--n))' -> '4px'
width: 'calc(2%)' -> '15.67188px'
width: 'calc(2% * var(--n))' -> '4px'
word-spacing: 'calc(2px)' -> '2px'
word-spacing: 'calc(2px * var(--n))' -> '4px'
x: 'calc(2px)' -> '2px'
x: 'calc(2px * var(--n))' -> '4px'
y: 'calc(2%)' -> '2%'
y: 'calc(2% * var(--n))' -> '4px'
z-index: 'calc(2)' -> '2'
z-index: 'calc(2 * var(--n))' -> '4'
6 changes: 3 additions & 3 deletions Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-parsing-001.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ Harness status: OK

Found 18 tests

16 Pass
2 Fail
17 Pass
1 Fail
Pass Default column-gap is 'normal'
Pass column-gap accepts pixels
Pass column-gap accepts em
Pass column-gap accepts vw
Pass column-gap accepts percentage
Fail column-gap accepts calc()
Pass column-gap accepts calc()
Fail column-gap accepts calc() mixing fixed and percentage values
Pass Initial column-gap is 'normal'
Pass Initial column-gap is 'normal' 2
Expand Down
Loading

0 comments on commit d51f170

Please sign in to comment.