Skip to content

Commit

Permalink
Update isValueOutOfRangeForProperty() to account for more CSS properties
Browse files Browse the repository at this point in the history
https://bugs.webkit.org/show_bug.cgi?id=249050

Reviewed by Sam Weinig.

Update isValueOutOfRangeForProperty() to account for more CSS properties that
have range limits:
- border-image-width: length or percentage or number >= 0
  https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-width

- border-top-width, border-right-width, border-bottom-width, border-left-width: length >= 0
  https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-width

- row-gap, column-gap: length or percentage >= 0
  https://w3c.github.io/csswg-drafts/css-align/#column-row-gap

- column-width: length >= 0
  https://w3c.github.io/csswg-drafts/css-multicol-1/#propdef-column-width

- flex-basis: length or percentage >= 0
  https://w3c.github.io/csswg-drafts/css-flexbox/#flex-basis-property

- grid-auto-columns, grid-auto-rows: length or percentage >= 0
  https://w3c.github.io/csswg-drafts/css-grid/#auto-tracks

- line-height: length, number or percentage >= 0
  https://w3c.github.io/csswg-drafts/css-inline/#line-height-property

- max-height: length or percentage >= 0
  https://w3c.github.io/csswg-drafts/css2/#propdef-max-height

- max-width: length or percentage >= 0
  https://w3c.github.io/csswg-drafts/css2/#propdef-max-width

- outline-width: length >= 0
  https://w3c.github.io/csswg-drafts/css-ui/#outline-width

- scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-inline-end, scroll-padding-block-end: length or percentage >= 0
  https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-logical

- stroke-miterlimit: number >= 0
  https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty

- font-weight: number in range [1, 1000]
  https://w3c.github.io/csswg-drafts/css-fonts/#font-weight-prop

All these properties are covered by the WPT tests but the tests still fail because of:
- #7387 (a lot more tests start passing with this PR)

For now, I have extracted these test cases into their own layout test.

* LayoutTests/fast/css/css-typed-om/style-property-map-set-negative-value-expected.txt:
* LayoutTests/fast/css/css-typed-om/style-property-map-set-negative-value.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/animation-duration-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/animation-iteration-count-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/border-width-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/column-width-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/flex-basis-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/font-weight-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/gap-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/grid-auto-columns-rows-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/height-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/line-height-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/logical-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/outline-width-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/scroll-padding-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/stroke-miterlimit-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/width-expected.txt:
* Source/WebCore/css/typedom/CSSUnitValue.cpp:
(WebCore::isValueOutOfRangeForProperty):

Canonical link: https://commits.webkit.org/257757@main
  • Loading branch information
cdumez committed Dec 12, 2022
1 parent 9906850 commit e864f38
Show file tree
Hide file tree
Showing 18 changed files with 295 additions and 54 deletions.
Expand Up @@ -3,10 +3,130 @@ Checks that calling StylePropertyMap.set() with a negative value wraps it into a
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS target.attributeStyleMap.set('width', new CSSUnitValue(-3.14, 'percent')) did not throw exception.
PASS target.style.width is "calc(-3.14%)"
PASS target.attributeStyleMap.set('border-block-start-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderBlockStartWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-block-end-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderBlockEndWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-inline-start-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderInlineStartWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-inline-end-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderInlineEndWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-top-left-radius', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderTopLeftRadius is "calc(-32px)"
PASS target.attributeStyleMap.set('border-top-right-radius', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderTopRightRadius is "calc(-32px)"
PASS target.attributeStyleMap.set('border-bottom-right-radius', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderBottomRightRadius is "calc(-32px)"
PASS target.attributeStyleMap.set('border-bottom-left-radius', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderBottomLeftRadius is "calc(-32px)"
PASS target.attributeStyleMap.set('border-top-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderTopWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-right-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderRightWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-bottom-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderBottomWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-left-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderLeftWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('border-image-outset', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderImageOutset is "calc(-32px)"
PASS target.attributeStyleMap.set('border-image-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.borderImageWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('column-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.columnWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('flex-basis', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.flexBasis is "calc(-32px)"
PASS target.attributeStyleMap.set('grid-auto-columns', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.gridAutoColumns is "calc(-32px)"
PASS target.attributeStyleMap.set('grid-auto-rows', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.gridAutoRows is "calc(-32px)"
PASS target.attributeStyleMap.set('line-height', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.lineHeight is "calc(-32px)"
PASS target.attributeStyleMap.set('max-height', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.maxHeight is "calc(-32px)"
PASS target.attributeStyleMap.set('max-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.maxWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('outline-width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.outlineWidth is "calc(-32px)"
PASS target.attributeStyleMap.set('perspective', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.perspective is "calc(-32px)"
PASS target.attributeStyleMap.set('row-gap', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.rowGap is "calc(-32px)"
PASS target.attributeStyleMap.set('column-gap', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.columnGap is "calc(-32px)"
PASS target.attributeStyleMap.set('scroll-padding-inline-start', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.scrollPaddingInlineStart is "calc(-32px)"
PASS target.attributeStyleMap.set('scroll-padding-block-start', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.scrollPaddingBlockStart is "calc(-32px)"
PASS target.attributeStyleMap.set('scroll-padding-inline-end', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.scrollPaddingInlineEnd is "calc(-32px)"
PASS target.attributeStyleMap.set('scroll-padding-block-end', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.scrollPaddingBlockEnd is "calc(-32px)"
PASS target.attributeStyleMap.set('width', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.width is "calc(-32px)"
PASS target.attributeStyleMap.set('border-top-left-radius', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.borderTopLeftRadius is "calc(-32%)"
PASS target.attributeStyleMap.set('border-top-right-radius', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.borderTopRightRadius is "calc(-32%)"
PASS target.attributeStyleMap.set('border-bottom-right-radius', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.borderBottomRightRadius is "calc(-32%)"
PASS target.attributeStyleMap.set('border-bottom-left-radius', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.borderBottomLeftRadius is "calc(-32%)"
PASS target.attributeStyleMap.set('border-image-slice', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.borderImageSlice is "calc(-32%)"
PASS target.attributeStyleMap.set('border-image-width', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.borderImageWidth is "calc(-32%)"
PASS target.attributeStyleMap.set('flex-basis', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.flexBasis is "calc(-32%)"
PASS target.attributeStyleMap.set('grid-auto-columns', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.gridAutoColumns is "calc(-32%)"
PASS target.attributeStyleMap.set('grid-auto-rows', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.gridAutoRows is "calc(-32%)"
PASS target.attributeStyleMap.set('line-height', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.lineHeight is "calc(-32%)"
PASS target.attributeStyleMap.set('max-height', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.maxHeight is "calc(-32%)"
PASS target.attributeStyleMap.set('max-width', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.maxWidth is "calc(-32%)"
PASS target.attributeStyleMap.set('row-gap', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.rowGap is "calc(-32%)"
PASS target.attributeStyleMap.set('column-gap', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.columnGap is "calc(-32%)"
PASS target.attributeStyleMap.set('scroll-padding-inline-start', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.scrollPaddingInlineStart is "calc(-32%)"
PASS target.attributeStyleMap.set('scroll-padding-block-start', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.scrollPaddingBlockStart is "calc(-32%)"
PASS target.attributeStyleMap.set('scroll-padding-inline-end', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.scrollPaddingInlineEnd is "calc(-32%)"
PASS target.attributeStyleMap.set('scroll-padding-block-end', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.scrollPaddingBlockEnd is "calc(-32%)"
PASS target.attributeStyleMap.set('width', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.width is "calc(-32%)"
PASS target.attributeStyleMap.set('animation-iteration-count', new CSSUnitValue(-32, 'number')) did not throw exception.
PASS target.style.animationIterationCount is "calc(-32)"
PASS target.attributeStyleMap.set('border-image-outset', new CSSUnitValue(-32, 'number')) did not throw exception.
PASS target.style.borderImageOutset is "calc(-32)"
PASS target.attributeStyleMap.set('border-image-slice', new CSSUnitValue(-32, 'number')) did not throw exception.
PASS target.style.borderImageSlice is "calc(-32)"
PASS target.attributeStyleMap.set('border-image-width', new CSSUnitValue(-32, 'number')) did not throw exception.
PASS target.style.borderImageWidth is "calc(-32)"
PASS target.attributeStyleMap.set('line-height', new CSSUnitValue(-32, 'number')) did not throw exception.
PASS target.style.lineHeight is "calc(-32)"
PASS target.attributeStyleMap.set('stroke-miterlimit', new CSSUnitValue(-32, 'number')) did not throw exception.
PASS target.style.strokeMiterlimit is "calc(-32)"
PASS target.attributeStyleMap.set('animation-duration', new CSSUnitValue(-32, 's')) did not throw exception.
PASS target.style.animationDuration is "calc(-32s)"
PASS target.attributeStyleMap.set('background-size', new CSSUnitValue(-32, 'percent')) did not throw exception.
PASS target.style.backgroundSize is "calc(-32%) auto"
PASS target.attributeStyleMap.set('background-size', new CSSUnitValue(-32, 'px')) did not throw exception.
PASS target.style.backgroundSize is "calc(-32px) auto"
PASS target.attributeStyleMap.set('font-weight', new CSSUnitValue(0, 'number')) did not throw exception.
PASS target.style.fontWeight is "1"
PASS target.attributeStyleMap.set('font-weight', new CSSUnitValue(-32, 'number')) did not throw exception.
PASS target.style.fontWeight is "1"
PASS target.attributeStyleMap.set('font-weight', new CSSUnitValue(100, 'number')) did not throw exception.
PASS target.style.fontWeight is "100"
PASS target.attributeStyleMap.set('font-weight', new CSSUnitValue(1001, 'number')) did not throw exception.
PASS target.style.fontWeight is "1000"
PASS successfullyParsed is true

TEST COMPLETE
Expand Down
Expand Up @@ -6,12 +6,95 @@
<script>
description("Checks that calling StylePropertyMap.set() with a negative value wraps it into a calc.");

function toCamelCase(variable)
{
return variable.replace(/-([a-z])/g, function(str, letter) {
return letter.toUpperCase();
});
}

target = document.getElementById("target");
shouldNotThrow("target.attributeStyleMap.set('width', new CSSUnitValue(-3.14, 'percent'))");
shouldBeEqualToString("target.style.width", "calc(-3.14%)");

shouldNotThrow("target.attributeStyleMap.set('perspective', new CSSUnitValue(-32, 'px'))");
shouldBeEqualToString("target.style.perspective", "calc(-32px)");
negative_length_properties = [
'border-block-start-width', 'border-block-end-width', 'border-inline-start-width', 'border-inline-end-width', // https://w3c.github.io/csswg-drafts/css-logical/#border-width
'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-radius
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', // https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-width
'border-image-outset', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-outset
'border-image-width', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-width
'column-width', // https://w3c.github.io/csswg-drafts/css-multicol-1/#propdef-column-width
'flex-basis', // https://w3c.github.io/csswg-drafts/css-flexbox/#flex-basis-property
'grid-auto-columns', 'grid-auto-rows', // https://w3c.github.io/csswg-drafts/css-grid/#auto-tracks
'line-height', // https://w3c.github.io/csswg-drafts/css-inline/#line-height-property
'max-height', // https://w3c.github.io/csswg-drafts/css2/#propdef-max-height
'max-width', // https://w3c.github.io/csswg-drafts/css2/#propdef-max-width
'outline-width', // https://w3c.github.io/csswg-drafts/css-ui/#outline-width
'perspective', // https://w3c.github.io/csswg-drafts/css-transforms-2/#perspective-property
'row-gap', 'column-gap', // https://w3c.github.io/csswg-drafts/css-align/#column-row-gap
'scroll-padding-inline-start', 'scroll-padding-block-start', 'scroll-padding-inline-end', 'scroll-padding-block-end', // https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-logical
'width', // https://w3c.github.io/csswg-drafts/css-sizing-3/#propdef-width
];
negative_percent_properties = [
'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-radius
'border-image-slice', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-slice
'border-image-width', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-width
'flex-basis', // https://w3c.github.io/csswg-drafts/css-flexbox/#flex-basis-property
'grid-auto-columns', 'grid-auto-rows', // https://w3c.github.io/csswg-drafts/css-grid/#auto-tracks
'line-height', // https://w3c.github.io/csswg-drafts/css-inline/#line-height-property
'max-height', // https://w3c.github.io/csswg-drafts/css2/#propdef-max-height
'max-width', // https://w3c.github.io/csswg-drafts/css2/#propdef-max-width
'row-gap', 'column-gap', // https://w3c.github.io/csswg-drafts/css-align/#column-row-gap
'scroll-padding-inline-start', 'scroll-padding-block-start', 'scroll-padding-inline-end', 'scroll-padding-block-end', // https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-logical
'width', // https://w3c.github.io/csswg-drafts/css-sizing-3/#propdef-width
];
negative_number_properties = [
'animation-iteration-count', // https://w3c.github.io/csswg-drafts/css-animations/#animation-iteration-count
'border-image-outset', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-outset
'border-image-slice', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-slice
'border-image-width', // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-image-width
'line-height', // https://w3c.github.io/csswg-drafts/css-inline/#line-height-property
'stroke-miterlimit', // https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty
];
negative_time_properties = [
'animation-duration', // https://w3c.github.io/csswg-drafts/css-animations/#animation-duration
];

for (let property of negative_length_properties) {
shouldNotThrow("target.attributeStyleMap.set('" + property + "', new CSSUnitValue(-32, 'px'))");
shouldBeEqualToString("target.style." + toCamelCase(property), "calc(-32px)");
}

for (let property of negative_percent_properties) {
shouldNotThrow("target.attributeStyleMap.set('" + property + "', new CSSUnitValue(-32, 'percent'))");
shouldBeEqualToString("target.style." + toCamelCase(property), "calc(-32%)");
}

for (let property of negative_number_properties) {
shouldNotThrow("target.attributeStyleMap.set('" + property + "', new CSSUnitValue(-32, 'number'))");
shouldBeEqualToString("target.style." + toCamelCase(property), "calc(-32)");
}

for (let property of negative_time_properties) {
shouldNotThrow("target.attributeStyleMap.set('" + property + "', new CSSUnitValue(-32, 's'))");
shouldBeEqualToString("target.style." + toCamelCase(property), "calc(-32s)");
}

// Special cases.

// https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-size
shouldNotThrow("target.attributeStyleMap.set('background-size', new CSSUnitValue(-32, 'percent'))");
shouldBeEqualToString("target.style.backgroundSize", "calc(-32%) auto");
shouldNotThrow("target.attributeStyleMap.set('background-size', new CSSUnitValue(-32, 'px'))");
shouldBeEqualToString("target.style.backgroundSize", "calc(-32px) auto");

// https://w3c.github.io/csswg-drafts/css-fonts/#font-weight-prop
shouldNotThrow("target.attributeStyleMap.set('font-weight', new CSSUnitValue(0, 'number'))");
shouldBeEqualToString("target.style.fontWeight", "1");
shouldNotThrow("target.attributeStyleMap.set('font-weight', new CSSUnitValue(-32, 'number'))");
shouldBeEqualToString("target.style.fontWeight", "1");
shouldNotThrow("target.attributeStyleMap.set('font-weight', new CSSUnitValue(100, 'number'))");
shouldBeEqualToString("target.style.fontWeight", "100");
shouldNotThrow("target.attributeStyleMap.set('font-weight', new CSSUnitValue(1001, 'number'))");
shouldBeEqualToString("target.style.fontWeight", "1000");
</script>
</body>
</html>
@@ -1,7 +1,7 @@

PASS Can set 'animation-duration' to CSS-wide keywords
FAIL Can set 'animation-duration' to var() references assert_equals: expected 2 but got 1
FAIL Can set 'animation-duration' to a time Invalid values
FAIL Can set 'animation-duration' to a time assert_equals: expected "CSSUnitValue" but got "CSSMathSum"
PASS Setting 'animation-duration' to a length throws TypeError
PASS Setting 'animation-duration' to a percent throws TypeError
PASS Setting 'animation-duration' to an angle throws TypeError
Expand Down
Expand Up @@ -2,7 +2,7 @@
PASS Can set 'animation-iteration-count' to CSS-wide keywords
FAIL Can set 'animation-iteration-count' to var() references assert_equals: expected 2 but got 1
PASS Can set 'animation-iteration-count' to the 'infinite' keyword
FAIL Can set 'animation-iteration-count' to a number Invalid values
FAIL Can set 'animation-iteration-count' to a number assert_equals: expected "CSSUnitValue" but got "CSSMathSum"
PASS Setting 'animation-iteration-count' to a length throws TypeError
PASS Setting 'animation-iteration-count' to a percent throws TypeError
PASS Setting 'animation-iteration-count' to a time throws TypeError
Expand Down

0 comments on commit e864f38

Please sign in to comment.