Skip to content

Commit

Permalink
CSS Keywords should be lowercased during serialization
Browse files Browse the repository at this point in the history
https://bugs.webkit.org/show_bug.cgi?id=249438

Reviewed by Sam Weinig.

CSS Keywords should be lowercased during serialization:
- https://www.w3.org/TR/cssom-1/#serialize-a-css-component-value

* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/color-interpolation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/pointer-events-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/shape-rendering-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/text-rendering-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/inheritance-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/parsing/color-interpolation-filters-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/filter-effects/parsing/color-interpolation-filters-parsing-valid-expected.txt:
Rebaseline WPT tests now that more checks are passing.

* Source/WebCore/css/CSSPrimitiveValue.cpp:
(WebCore::CSSPrimitiveValue::formatNumberForCustomCSSText const):
Call nameStringForSerialization() instead of nameString() since we are serializing.
This makes sure that the identifier is serialized as lowercase.

* Source/WebCore/css/typedom/CSSStyleValueFactory.cpp:
(WebCore::CSSStyleValueFactory::reifyValue):
Per https://drafts.css-houdini.org/css-typed-om-1/#reify-ident, we should create
a CSSKeywordValue from the *serialization* of the identifier, which means that
the identifier would become lowercase.

* Source/WebCore/css/process-css-values.py:
(GenerationContext):
Generate nameStringForSerialization() which provides the name string of the
keyword as lowercase, for the purpose of serialization.

Canonical link: https://commits.webkit.org/258024@main
  • Loading branch information
cdumez committed Dec 17, 2022
1 parent 689b0ba commit 5c14835
Show file tree
Hide file tree
Showing 29 changed files with 109 additions and 71 deletions.
Expand Up @@ -48,8 +48,8 @@ clip: auto;
clip-path: none;
clip-rule: nonzero;
color: rgb(0, 0, 0);
color-interpolation: sRGB;
color-interpolation-filters: linearRGB;
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
column-count: auto;
column-fill: balance;
column-gap: normal;
Expand Down
Expand Up @@ -47,8 +47,8 @@ clip: auto
clip-path: none
clip-rule: nonzero
color: rgb(0, 0, 0)
color-interpolation: sRGB
color-interpolation-filters: linearRGB
color-interpolation: srgb
color-interpolation-filters: linearrgb
column-count: auto
column-fill: balance
column-gap: normal
Expand Down
8 changes: 4 additions & 4 deletions LayoutTests/fast/css/image-rendering-parsing-expected.txt
Expand Up @@ -19,11 +19,11 @@ PASS div.style.getPropertyCSSValue('image-rendering').cssValueType is CSSValue.C
PASS div.style.getPropertyValue('image-rendering') is "-webkit-optimize-contrast"
PASS getComputedStyle(div).getPropertyValue('image-rendering') is "crisp-edges"
PASS div.style.getPropertyCSSValue('image-rendering').cssValueType is CSSValue.CSS_PRIMITIVE_VALUE
PASS div.style.getPropertyValue('image-rendering') is "optimizeSpeed"
PASS getComputedStyle(div).getPropertyValue('image-rendering') is "optimizeSpeed"
PASS div.style.getPropertyValue('image-rendering') is "optimizespeed"
PASS getComputedStyle(div).getPropertyValue('image-rendering') is "optimizespeed"
PASS div.style.getPropertyCSSValue('image-rendering').cssValueType is CSSValue.CSS_PRIMITIVE_VALUE
PASS div.style.getPropertyValue('image-rendering') is "optimizeQuality"
PASS getComputedStyle(div).getPropertyValue('image-rendering') is "optimizeQuality"
PASS div.style.getPropertyValue('image-rendering') is "optimizequality"
PASS getComputedStyle(div).getPropertyValue('image-rendering') is "optimizequality"
PASS successfullyParsed is true

TEST COMPLETE
Expand Down
6 changes: 3 additions & 3 deletions LayoutTests/fast/css/image-rendering-parsing.html
Expand Up @@ -16,7 +16,7 @@
document.body.appendChild(div);
div.setAttribute("style", "image-rendering: " + value);
shouldBe("div.style.getPropertyCSSValue('image-rendering').cssValueType", 'CSSValue.CSS_PRIMITIVE_VALUE');
shouldBeEqualToString("div.style.getPropertyValue('image-rendering')", value);
shouldBeEqualToString("div.style.getPropertyValue('image-rendering')", value.toLowerCase());
shouldBeEqualToString("getComputedStyle(div).getPropertyValue('image-rendering')", computedValue);

document.body.removeChild(div);
Expand All @@ -27,8 +27,8 @@
testImageRendering('pixelated', 'pixelated');
testImageRendering('-webkit-crisp-edges', 'crisp-edges');
testImageRendering('-webkit-optimize-contrast', 'crisp-edges');
testImageRendering('optimizeSpeed', 'optimizeSpeed');
testImageRendering('optimizeQuality', 'optimizeQuality');
testImageRendering('optimizeSpeed', 'optimizespeed');
testImageRendering('optimizeQuality', 'optimizequality');

successfullyParsed = true;
</script>
Expand Down
6 changes: 3 additions & 3 deletions LayoutTests/fast/css/parsing-text-rendering-expected.txt
Expand Up @@ -4,9 +4,9 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE


PASS test("text-rendering: auto;") is "auto"
PASS test("text-rendering: optimizeSpeed;") is "optimizeSpeed"
PASS test("text-rendering: optimizeLegibility;") is "optimizeLegibility"
PASS test("text-rendering: geometricPrecision;") is "geometricPrecision"
PASS test("text-rendering: optimizeSpeed;") is "optimizespeed"
PASS test("text-rendering: optimizeLegibility;") is "optimizelegibility"
PASS test("text-rendering: geometricPrecision;") is "geometricprecision"
PASS test("text-rendering: auto auto;") is ""
PASS test("text-rendering: optimizeCoconuts;") is ""
PASS test("text-rendering: 15;") is ""
Expand Down
6 changes: 3 additions & 3 deletions LayoutTests/fast/css/resources/parsing-text-rendering.js
Expand Up @@ -12,9 +12,9 @@ function test(value)
}

shouldBe('test("text-rendering: auto;")', '"auto"');
shouldBe('test("text-rendering: optimizeSpeed;")', '"optimizeSpeed"');
shouldBe('test("text-rendering: optimizeLegibility;")', '"optimizeLegibility"');
shouldBe('test("text-rendering: geometricPrecision;")', '"geometricPrecision"');
shouldBe('test("text-rendering: optimizeSpeed;")', '"optimizespeed"');
shouldBe('test("text-rendering: optimizeLegibility;")', '"optimizelegibility"');
shouldBe('test("text-rendering: geometricPrecision;")', '"geometricprecision"');

shouldBeEqualToString('test("text-rendering: auto auto;")', '');
shouldBeEqualToString('test("text-rendering: optimizeCoconuts;")', '');
Expand Down
Expand Up @@ -5,8 +5,8 @@ PASS Can set 'color-interpolation' to CSS-wide keywords: unset
PASS Can set 'color-interpolation' to CSS-wide keywords: revert
PASS Can set 'color-interpolation' to var() references: var(--A)
PASS Can set 'color-interpolation' to the 'auto' keyword: auto
FAIL Can set 'color-interpolation' to the 'srgb' keyword: srgb assert_equals: expected "srgb" but got "sRGB"
FAIL Can set 'color-interpolation' to the 'linearrgb' keyword: linearrgb assert_equals: expected "linearrgb" but got "linearRGB"
PASS Can set 'color-interpolation' to the 'srgb' keyword: srgb
PASS Can set 'color-interpolation' to the 'linearrgb' keyword: linearrgb
PASS Setting 'color-interpolation' to a length: 0px throws TypeError
PASS Setting 'color-interpolation' to a length: -3.14em throws TypeError
PASS Setting 'color-interpolation' to a length: 3.14cm throws TypeError
Expand Down
Expand Up @@ -5,9 +5,9 @@ PASS Can set 'pointer-events' to CSS-wide keywords: unset
PASS Can set 'pointer-events' to CSS-wide keywords: revert
PASS Can set 'pointer-events' to var() references: var(--A)
PASS Can set 'pointer-events' to the 'bounding-box' keyword: bounding-box
FAIL Can set 'pointer-events' to the 'visiblepainted' keyword: visiblepainted assert_equals: expected "visiblepainted" but got "visiblePainted"
FAIL Can set 'pointer-events' to the 'visiblefill' keyword: visiblefill assert_equals: expected "visiblefill" but got "visibleFill"
FAIL Can set 'pointer-events' to the 'visiblestroke' keyword: visiblestroke assert_equals: expected "visiblestroke" but got "visibleStroke"
PASS Can set 'pointer-events' to the 'visiblepainted' keyword: visiblepainted
PASS Can set 'pointer-events' to the 'visiblefill' keyword: visiblefill
PASS Can set 'pointer-events' to the 'visiblestroke' keyword: visiblestroke
PASS Can set 'pointer-events' to the 'visible' keyword: visible
PASS Can set 'pointer-events' to the 'painted' keyword: painted
PASS Can set 'pointer-events' to the 'fill' keyword: fill
Expand Down
Expand Up @@ -5,9 +5,9 @@ PASS Can set 'shape-rendering' to CSS-wide keywords: unset
PASS Can set 'shape-rendering' to CSS-wide keywords: revert
PASS Can set 'shape-rendering' to var() references: var(--A)
PASS Can set 'shape-rendering' to the 'auto' keyword: auto
FAIL Can set 'shape-rendering' to the 'optimizespeed' keyword: optimizespeed assert_equals: expected "optimizespeed" but got "optimizeSpeed"
PASS Can set 'shape-rendering' to the 'optimizespeed' keyword: optimizespeed
PASS Can set 'shape-rendering' to the 'crispedges' keyword: crispedges
FAIL Can set 'shape-rendering' to the 'geometricprecision' keyword: geometricprecision assert_equals: expected "geometricprecision" but got "geometricPrecision"
PASS Can set 'shape-rendering' to the 'geometricprecision' keyword: geometricprecision
PASS Setting 'shape-rendering' to a length: 0px throws TypeError
PASS Setting 'shape-rendering' to a length: -3.14em throws TypeError
PASS Setting 'shape-rendering' to a length: 3.14cm throws TypeError
Expand Down
Expand Up @@ -5,9 +5,9 @@ PASS Can set 'text-rendering' to CSS-wide keywords: unset
PASS Can set 'text-rendering' to CSS-wide keywords: revert
PASS Can set 'text-rendering' to var() references: var(--A)
PASS Can set 'text-rendering' to the 'auto' keyword: auto
FAIL Can set 'text-rendering' to the 'optimizespeed' keyword: optimizespeed assert_equals: expected "optimizespeed" but got "optimizeSpeed"
FAIL Can set 'text-rendering' to the 'optimizelegibility' keyword: optimizelegibility assert_equals: expected "optimizelegibility" but got "optimizeLegibility"
FAIL Can set 'text-rendering' to the 'geometricprecision' keyword: geometricprecision assert_equals: expected "geometricprecision" but got "geometricPrecision"
PASS Can set 'text-rendering' to the 'optimizespeed' keyword: optimizespeed
PASS Can set 'text-rendering' to the 'optimizelegibility' keyword: optimizelegibility
PASS Can set 'text-rendering' to the 'geometricprecision' keyword: geometricprecision
PASS Setting 'text-rendering' to a length: 0px throws TypeError
PASS Setting 'text-rendering' to a length: -3.14em throws TypeError
PASS Setting 'text-rendering' to a length: 3.14cm throws TypeError
Expand Down
Expand Up @@ -7,7 +7,7 @@ FAIL Testing 'alignment-baseline'. assert_equals: Value Test. expected "baseline
FAIL Testing 'baseline-shift'. assert_equals: Value Test. expected "sub" but got "baseline"
PASS Testing 'clip-rule'.
PASS Testing 'color'.
FAIL Testing 'color-interpolation-filters'. assert_equals: Default value. expected "" but got "linearRGB"
FAIL Testing 'color-interpolation-filters'. assert_equals: Default value. expected "" but got "linearrgb"
PASS Testing 'cursor'.
PASS Testing 'direction'.
FAIL Testing 'display'. assert_equals: Value Test. expected "block" but got "inline"
Expand Down
@@ -1,8 +1,8 @@

FAIL Property backdrop-filter has initial value none assert_true: backdrop-filter doesn't seem to be supported in the computed style expected true got false
FAIL Property backdrop-filter does not inherit assert_true: expected true got false
FAIL Property color-interpolation-filters has initial value linearrgb assert_equals: expected "linearrgb" but got "linearRGB"
FAIL Property color-interpolation-filters inherits assert_equals: expected "srgb" but got "sRGB"
PASS Property color-interpolation-filters has initial value linearrgb
PASS Property color-interpolation-filters inherits
PASS Property filter has initial value none
PASS Property filter does not inherit
PASS Property flood-color has initial value rgb(0, 0, 0)
Expand Down
@@ -1,5 +1,5 @@

PASS Property color-interpolation-filters value 'auto'
FAIL Property color-interpolation-filters value 'srgb' assert_equals: expected "srgb" but got "sRGB"
FAIL Property color-interpolation-filters value 'linearrgb' assert_equals: expected "linearrgb" but got "linearRGB"
PASS Property color-interpolation-filters value 'srgb'
PASS Property color-interpolation-filters value 'linearrgb'

@@ -1,6 +1,6 @@

PASS e.style['color-interpolation-filters'] = "auto" should set the property value
FAIL e.style['color-interpolation-filters'] = "sRGB" should set the property value assert_equals: serialization should be canonical expected "srgb" but got "sRGB"
FAIL e.style['color-interpolation-filters'] = "linearRGB" should set the property value assert_equals: serialization should be canonical expected "linearrgb" but got "linearRGB"
FAIL e.style['color-interpolation-filters'] = "LiNeArRgB" should set the property value assert_equals: serialization should be canonical expected "linearrgb" but got "linearRGB"
PASS e.style['color-interpolation-filters'] = "sRGB" should set the property value
PASS e.style['color-interpolation-filters'] = "linearRGB" should set the property value
PASS e.style['color-interpolation-filters'] = "LiNeArRgB" should set the property value

@@ -1,9 +1,9 @@

PASS e.style['pointer-events'] = "auto" should set the property value
PASS e.style['pointer-events'] = "bounding-box" should set the property value
FAIL e.style['pointer-events'] = "visiblePainted" should set the property value assert_equals: serialization should be canonical expected "visiblepainted" but got "visiblePainted"
FAIL e.style['pointer-events'] = "visibleFill" should set the property value assert_equals: serialization should be canonical expected "visiblefill" but got "visibleFill"
FAIL e.style['pointer-events'] = "visibleStroke" should set the property value assert_equals: serialization should be canonical expected "visiblestroke" but got "visibleStroke"
PASS e.style['pointer-events'] = "visiblePainted" should set the property value
PASS e.style['pointer-events'] = "visibleFill" should set the property value
PASS e.style['pointer-events'] = "visibleStroke" should set the property value
PASS e.style['pointer-events'] = "visible" should set the property value
PASS e.style['pointer-events'] = "painted" should set the property value
PASS e.style['pointer-events'] = "fill" should set the property value
Expand Down
Expand Up @@ -29,12 +29,12 @@ PASS Property marker-end has initial value none
FAIL Property marker-end inherits assert_equals: expected "url(\"https://example/com/diagram.svg#marker\")" but got "none"
PASS Property paint-order has initial value normal
FAIL Property paint-order inherits assert_equals: expected "markers stroke" but got "normal"
FAIL Property color-interpolation has initial value srgb assert_equals: expected "srgb" but got "sRGB"
FAIL Property color-interpolation inherits assert_equals: expected "linearrgb" but got "linearRGB"
PASS Property color-interpolation has initial value srgb
PASS Property color-interpolation inherits
PASS Property shape-rendering has initial value auto
FAIL Property shape-rendering inherits assert_equals: expected "optimizespeed" but got "optimizeSpeed"
PASS Property shape-rendering inherits
PASS Property text-rendering has initial value auto
FAIL Property text-rendering inherits assert_equals: expected "optimizespeed" but got "optimizeSpeed"
PASS Property text-rendering inherits
PASS Property image-rendering has initial value auto
FAIL Property image-rendering inherits assert_equals: expected "optimizequality" but got "optimizeQuality"
PASS Property image-rendering inherits

@@ -1,5 +1,5 @@

PASS Property color-interpolation value 'auto'
FAIL Property color-interpolation value 'srgb' assert_equals: expected "srgb" but got "sRGB"
FAIL Property color-interpolation value 'linearrgb' assert_equals: expected "linearrgb" but got "linearRGB"
PASS Property color-interpolation value 'srgb'
PASS Property color-interpolation value 'linearrgb'

@@ -1,5 +1,5 @@

PASS Property image-rendering value 'auto'
FAIL Property image-rendering value 'optimizequality' assert_equals: expected "optimizequality" but got "optimizeQuality"
FAIL Property image-rendering value 'optimizespeed' assert_equals: expected "optimizespeed" but got "optimizeSpeed"
PASS Property image-rendering value 'optimizequality'
PASS Property image-rendering value 'optimizespeed'

@@ -1,5 +1,5 @@

PASS e.style['image-rendering'] = "auto" should set the property value
FAIL e.style['image-rendering'] = "optimizequality" should set the property value assert_equals: serialization should be canonical expected "optimizequality" but got "optimizeQuality"
FAIL e.style['image-rendering'] = "optimizespeed" should set the property value assert_equals: serialization should be canonical expected "optimizespeed" but got "optimizeSpeed"
PASS e.style['image-rendering'] = "optimizequality" should set the property value
PASS e.style['image-rendering'] = "optimizespeed" should set the property value

@@ -1,6 +1,6 @@

PASS Property shape-rendering value 'auto'
FAIL Property shape-rendering value 'optimizespeed' assert_equals: expected "optimizespeed" but got "optimizeSpeed"
PASS Property shape-rendering value 'optimizespeed'
PASS Property shape-rendering value 'crispedges'
FAIL Property shape-rendering value 'geometricprecision' assert_equals: expected "geometricprecision" but got "geometricPrecision"
PASS Property shape-rendering value 'geometricprecision'

@@ -1,6 +1,6 @@

PASS e.style['shape-rendering'] = "auto" should set the property value
FAIL e.style['shape-rendering'] = "optimizespeed" should set the property value assert_equals: serialization should be canonical expected "optimizespeed" but got "optimizeSpeed"
PASS e.style['shape-rendering'] = "optimizespeed" should set the property value
PASS e.style['shape-rendering'] = "crispedges" should set the property value
FAIL e.style['shape-rendering'] = "geometricprecision" should set the property value assert_equals: serialization should be canonical expected "geometricprecision" but got "geometricPrecision"
PASS e.style['shape-rendering'] = "geometricprecision" should set the property value

@@ -1,6 +1,6 @@

PASS Property text-rendering value 'auto'
FAIL Property text-rendering value 'optimizespeed' assert_equals: expected "optimizespeed" but got "optimizeSpeed"
FAIL Property text-rendering value 'optimizelegibility' assert_equals: expected "optimizelegibility" but got "optimizeLegibility"
FAIL Property text-rendering value 'geometricprecision' assert_equals: expected "geometricprecision" but got "geometricPrecision"
PASS Property text-rendering value 'optimizespeed'
PASS Property text-rendering value 'optimizelegibility'
PASS Property text-rendering value 'geometricprecision'

@@ -1,6 +1,6 @@

PASS e.style['text-rendering'] = "auto" should set the property value
FAIL e.style['text-rendering'] = "optimizespeed" should set the property value assert_equals: serialization should be canonical expected "optimizespeed" but got "optimizeSpeed"
FAIL e.style['text-rendering'] = "optimizelegibility" should set the property value assert_equals: serialization should be canonical expected "optimizelegibility" but got "optimizeLegibility"
FAIL e.style['text-rendering'] = "geometricprecision" should set the property value assert_equals: serialization should be canonical expected "geometricprecision" but got "geometricPrecision"
PASS e.style['text-rendering'] = "optimizespeed" should set the property value
PASS e.style['text-rendering'] = "optimizelegibility" should set the property value
PASS e.style['text-rendering'] = "geometricprecision" should set the property value

8 changes: 4 additions & 4 deletions LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Expand Up @@ -94,9 +94,9 @@ rect: style.getPropertyValue(clip-rule) : nonzero
rect: style.getPropertyCSSValue(clip-rule) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(color) : rgb(0, 0, 0)
rect: style.getPropertyCSSValue(color) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(color-interpolation) : sRGB
rect: style.getPropertyValue(color-interpolation) : srgb
rect: style.getPropertyCSSValue(color-interpolation) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(color-interpolation-filters) : linearRGB
rect: style.getPropertyValue(color-interpolation-filters) : linearrgb
rect: style.getPropertyCSSValue(color-interpolation-filters) : [object CSSPrimitiveValue]
rect: style.getPropertyValue(column-count) : auto
rect: style.getPropertyCSSValue(column-count) : [object CSSPrimitiveValue]
Expand Down Expand Up @@ -602,9 +602,9 @@ g: style.getPropertyValue(clip-rule) : nonzero
g: style.getPropertyCSSValue(clip-rule) : [object CSSPrimitiveValue]
g: style.getPropertyValue(color) : rgb(0, 0, 0)
g: style.getPropertyCSSValue(color) : [object CSSPrimitiveValue]
g: style.getPropertyValue(color-interpolation) : sRGB
g: style.getPropertyValue(color-interpolation) : srgb
g: style.getPropertyCSSValue(color-interpolation) : [object CSSPrimitiveValue]
g: style.getPropertyValue(color-interpolation-filters) : linearRGB
g: style.getPropertyValue(color-interpolation-filters) : linearrgb
g: style.getPropertyCSSValue(color-interpolation-filters) : [object CSSPrimitiveValue]
g: style.getPropertyValue(column-count) : auto
g: style.getPropertyCSSValue(column-count) : [object CSSPrimitiveValue]
Expand Down
4 changes: 2 additions & 2 deletions LayoutTests/svg/css/shape-rendering-parsing-expected.txt
Expand Up @@ -6,8 +6,8 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
PASS document.defaultView.getComputedStyle(group, null).shapeRendering is "auto"
PASS document.defaultView.getComputedStyle(group, null).shapeRendering is "crispedges"
PASS document.defaultView.getComputedStyle(group, null).shapeRendering is "crispedges"
PASS document.defaultView.getComputedStyle(group, null).shapeRendering is "optimizeSpeed"
PASS document.defaultView.getComputedStyle(group, null).shapeRendering is "geometricPrecision"
PASS document.defaultView.getComputedStyle(group, null).shapeRendering is "optimizespeed"
PASS document.defaultView.getComputedStyle(group, null).shapeRendering is "geometricprecision"
PASS successfullyParsed is true

TEST COMPLETE
Expand Down

0 comments on commit 5c14835

Please sign in to comment.