Correct getComputedStyle() for invalid pseudo-elements

https://bugs.webkit.org/show_bug.cgi?id=243539
rdar://98504661

Reviewed by Tim Nguyen.

Give CSSComputedStyleDeclaration separate constructors for its distinct
callers. Then make CSSComputedStyleDeclaration account for invalid
pseudo-elements by allowing std::nullopt as value for
m_pseudoElementSpecifier. In this state CSSComputedStyleDeclaration
serves as an empty immutable CSSStyleDeclaration.

This appears to be the most straightforward way to create an empty
immutable CSSStyleDeclaration that is exposed to JavaScript in WebKit.
(Various other attempts were made in the creation of this patch, in
particular quite some time went into researching making
ImmutableStyleProperties have some of the features of
MutableStyleProperties.)

The pseudo-element parsing logic is moved to getComputedStyle() as it's
somewhat separate from the function of a CSSComputedStyleDeclaration.
This also matches the model of the specification better.

* LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt:
* LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-highlight-api/highlight-pseudo-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-inheritance-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-visited-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-pseudos-visited-computed-001-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/mix-blend-mode-only-on-transition-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-group-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-image-pair-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-new-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-old-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/style-inheritance-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/cssom/getComputedStyle-pseudo-expected.txt:
* Source/WebCore/css/CSSComputedStyleDeclaration.cpp:
(WebCore::CSSComputedStyleDeclaration::CSSComputedStyleDeclaration):
(WebCore::CSSComputedStyleDeclaration::create):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue const):
(WebCore::CSSComputedStyleDeclaration::copyProperties const):
(WebCore::CSSComputedStyleDeclaration::getPropertyValue const):
(WebCore::CSSComputedStyleDeclaration::length const):
(WebCore::CSSComputedStyleDeclaration::item const):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
(WebCore::CSSComputedStyleDeclaration::getPropertyValue):
* Source/WebCore/css/CSSComputedStyleDeclaration.h:
* Source/WebCore/page/LocalDOMWindow.cpp:
(WebCore::LocalDOMWindow::getComputedStyle const):

Canonical link: https://commits.webkit.org/272543@main

LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element-expected.txt

@@ -60,7 +60,7 @@ PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element wit
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :first-letter and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :before and got 'rgb(165, 42, 42)'
 PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :after and got 'rgb(165, 42, 42)'
-PASS Expected 'rgb(165, 42, 42)' for color in the computed style for element with id testNoPseudoElement and pseudo-element :garbage and got 'rgb(165, 42, 42)'
+PASS Expected '' for color in the computed style for element with id testNoPseudoElement and pseudo-element :garbage and got ''
 PASS Expected '100px' for height in the computed style for element with id testNoPseudoElement and pseudo-element null and got '100px'
 PASS Expected '100px' for width in the computed style for element with id testNoPseudoElement and pseudo-element null and got '100px'
 PASS Expected 'auto' for height in the computed style for element with id testNoPseudoElement and pseudo-element :after and got 'auto'

LayoutTests/fast/css/getComputedStyle/getComputedStyle-with-pseudo-element.html

@@ -177,7 +177,7 @@
         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':first-letter', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':before', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
-        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':garbage', 'property' : 'color', 'expectedValue' : 'rgb(165, 42, 42)' },
+        { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':garbage', 'property' : 'color', 'expectedValue' : '' },
         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'height', 'expectedValue' : '100px' },
         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : null, 'property' : 'width', 'expectedValue' : '100px' },
         { 'elementId' : 'testNoPseudoElement', 'pseudoElement' : ':after', 'property' : 'height', 'expectedValue' : 'auto' },

LayoutTests/imported/w3c/web-platform-tests/css/css-highlight-api/highlight-pseudo-computed-expected.txt

@@ -1,13 +1,13 @@
 
-FAIL getComputedStyle() for ::highlight(foo) assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
-FAIL Different getComputedStyle() for ::highlight(bar) and same element assert_equals: Background color is cyan. expected "rgb(0, 255, 255)" but got "rgba(0, 0, 0, 0)"
-PASS getComputedStyle() for ::highlight(foo): should be element's default
-PASS getComputedStyle() for ::highlight(foo)) should be element's default
-PASS getComputedStyle() for ::highlight(foo)( should be element's default
+FAIL getComputedStyle() for ::highlight(foo) assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got ""
+FAIL Different getComputedStyle() for ::highlight(bar) and same element assert_equals: Background color is cyan. expected "rgb(0, 255, 255)" but got ""
+FAIL getComputedStyle() for ::highlight(foo): should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo)) should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo)( should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
 PASS getComputedStyle() for ::highlight should be element's default
-PASS getComputedStyle() for ::highlight(foo)(foo) should be element's default
-PASS getComputedStyle() for ::highlight(foo)() should be element's default
-PASS getComputedStyle() for :::highlight(foo) should be element's default
-PASS getComputedStyle() for ::highlight(foo). should be element's default
-PASS getComputedStyle() for ::highlight(foo,bar) should be element's default
+FAIL getComputedStyle() for ::highlight(foo)(foo) should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo)() should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
+FAIL getComputedStyle() for :::highlight(foo) should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo). should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo,bar) should be element's default assert_equals: Background color is element's default. expected "rgba(0, 0, 0, 0)" but got ""
 

LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-expected.txt

@@ -1,12 +1,12 @@
 
 PASS getComputedStyle() for ::selection at #target1
 PASS getComputedStyle() for ::selection at #target2
-FAIL getComputedStyle() for ::target-text at #target1 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgb(0, 128, 0)"
-FAIL getComputedStyle() for ::target-text at #target2 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgba(0, 0, 0, 0)"
+FAIL getComputedStyle() for ::target-text at #target1 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got ""
+FAIL getComputedStyle() for ::target-text at #target2 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got ""
 PASS getComputedStyle() for ::spelling-error at #target1
 PASS getComputedStyle() for ::spelling-error at #target2
 PASS getComputedStyle() for ::grammar-error at #target1
 PASS getComputedStyle() for ::grammar-error at #target2
-FAIL getComputedStyle() for ::highlight(foo) at #target1 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgb(0, 128, 0)"
-FAIL getComputedStyle() for ::highlight(foo) at #target2 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgba(0, 0, 0, 0)"
+FAIL getComputedStyle() for ::highlight(foo) at #target1 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo) at #target2 assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got ""
 

LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-inheritance-expected.txt

@@ -1,7 +1,7 @@
 
 FAIL getComputedStyle() for ::selection assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgba(0, 0, 0, 0)"
-FAIL getComputedStyle() for ::target-text assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgba(0, 0, 0, 0)"
+FAIL getComputedStyle() for ::target-text assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got ""
 FAIL getComputedStyle() for ::spelling-error assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgba(0, 0, 0, 0)"
 FAIL getComputedStyle() for ::grammar-error assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgba(0, 0, 0, 0)"
-FAIL getComputedStyle() for ::highlight(foo) assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got "rgba(0, 0, 0, 0)"
+FAIL getComputedStyle() for ::highlight(foo) assert_equals: Background color is lime. expected "rgb(0, 255, 0)" but got ""
 

LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-visited-expected.txt

@@ -1,12 +1,12 @@
 
 PASS getComputedStyle() for ::selection at #target1
 PASS getComputedStyle() for ::selection at #target2
-PASS getComputedStyle() for ::target-text at #target1
-PASS getComputedStyle() for ::target-text at #target2
+FAIL getComputedStyle() for ::target-text at #target1 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
+FAIL getComputedStyle() for ::target-text at #target2 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
 PASS getComputedStyle() for ::spelling-error at #target1
 PASS getComputedStyle() for ::spelling-error at #target2
 PASS getComputedStyle() for ::grammar-error at #target1
 PASS getComputedStyle() for ::grammar-error at #target2
-PASS getComputedStyle() for ::highlight(foo) at #target1
-PASS getComputedStyle() for ::highlight(foo) at #target2
+FAIL getComputedStyle() for ::highlight(foo) at #target1 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo) at #target2 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
 

LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001-expected.txt

@@ -1,12 +1,12 @@
 
 FAIL getComputedStyle() for ::selection at #child1 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
 FAIL getComputedStyle() for ::selection at #child2 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
-FAIL getComputedStyle() for ::target-text at #child1 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
-FAIL getComputedStyle() for ::target-text at #child2 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
+FAIL getComputedStyle() for ::target-text at #child1 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got ""
+FAIL getComputedStyle() for ::target-text at #child2 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got ""
 FAIL getComputedStyle() for ::spelling-error at #child1 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
 FAIL getComputedStyle() for ::spelling-error at #child2 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
 FAIL getComputedStyle() for ::grammar-error at #child1 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
 FAIL getComputedStyle() for ::grammar-error at #child2 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
-FAIL getComputedStyle() for ::highlight(foo) at #child1 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
-FAIL getComputedStyle() for ::highlight(foo) at #child2 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got "rgba(0, 0, 0, 0)"
+FAIL getComputedStyle() for ::highlight(foo) at #child1 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo) at #child2 assert_equals: Background color is green. expected "rgb(0, 128, 0)" but got ""
 

LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/highlight-pseudos-visited-computed-001-expected.txt

@@ -1,12 +1,12 @@
 
 PASS getComputedStyle() for ::selection at #target1
 PASS getComputedStyle() for ::selection at #target2
-FAIL getComputedStyle() for ::target-text at #target1 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got "rgb(0, 0, 238)"
-FAIL getComputedStyle() for ::target-text at #target2 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got "rgb(0, 0, 238)"
+FAIL getComputedStyle() for ::target-text at #target1 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
+FAIL getComputedStyle() for ::target-text at #target2 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
 PASS getComputedStyle() for ::spelling-error at #target1
 PASS getComputedStyle() for ::spelling-error at #target2
 PASS getComputedStyle() for ::grammar-error at #target1
 PASS getComputedStyle() for ::grammar-error at #target2
-FAIL getComputedStyle() for ::highlight(foo) at #target1 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got "rgb(0, 0, 238)"
-FAIL getComputedStyle() for ::highlight(foo) at #target2 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got "rgb(0, 0, 238)"
+FAIL getComputedStyle() for ::highlight(foo) at #target1 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
+FAIL getComputedStyle() for ::highlight(foo) at #target2 assert_equals: Color is lime. expected "rgb(0, 255, 0)" but got ""
 

LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/mix-blend-mode-only-on-transition-expected.txt

@@ -1,3 +1,3 @@
 
-FAIL Blend modes are set up on paired transitions assert_equals: expected "isolate" but got "auto"
+FAIL Blend modes are set up on paired transitions assert_equals: expected "auto" but got ""
 

LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-group-expected.txt

@@ -1,6 +1,6 @@
 
-FAIL :only-child should match because ::view-transition-group is generated for root element only promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-group is generated for multiple elements promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should match because ::view-transition-group is generated for sub element only promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-group is generated for multiple sub elements promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
+FAIL :only-child should match because ::view-transition-group is generated for root element only promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-group is generated for multiple elements promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should match because ::view-transition-group is generated for sub element only promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-group is generated for multiple sub elements promise_test: Unhandled rejection with value: " and "
 

LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-image-pair-expected.txt

@@ -1,3 +1,3 @@
 
-FAIL :only-child should always match for ::view-transition-image-pair promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
+FAIL :only-child should always match for ::view-transition-image-pair promise_test: Unhandled rejection with value: " and "
 

LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-new-expected.txt

@@ -1,8 +1,8 @@
 
-FAIL :only-child should match because ::view-transition-old is not generated (none to root) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-old is generated (root to root) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-old is generated (element to root) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should match because ::view-transition-old is not generated (none to element) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-old is generated (root to element) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-old is generated (element to element) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
+FAIL :only-child should match because ::view-transition-old is not generated (none to root) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-old is generated (root to root) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-old is generated (element to root) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should match because ::view-transition-old is not generated (none to element) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-old is generated (root to element) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-old is generated (element to element) promise_test: Unhandled rejection with value: " and "
 

LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/only-child-old-expected.txt

@@ -1,8 +1,8 @@
 
-FAIL :only-child should match because ::view-transition-new is not generated (root to none) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-new is generated (root to root) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-new is generated (root to element) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should match because ::view-transition-new is not generated (element to none) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-new is generated (element to root) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
-FAIL :only-child should not match because ::view-transition-new is generated (element to element) promise_test: Unhandled rejection with value: "rgb(0, 0, 0) and rgb(0, 0, 0)"
+FAIL :only-child should match because ::view-transition-new is not generated (root to none) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-new is generated (root to root) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-new is generated (root to element) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should match because ::view-transition-new is not generated (element to none) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-new is generated (element to root) promise_test: Unhandled rejection with value: " and "
+FAIL :only-child should not match because ::view-transition-new is generated (element to element) promise_test: Unhandled rejection with value: " and "
 

LayoutTests/imported/w3c/web-platform-tests/css/css-view-transitions/style-inheritance-expected.txt

@@ -1,6 +1,6 @@
-CONSOLE MESSAGE: Unhandled Promise Rejection: Error: assert_equals: group expected "rgb(255, 0, 0)" but got "rgba(0, 0, 0, 0)"
+CONSOLE MESSAGE: Unhandled Promise Rejection: Error: assert_equals: group expected "rgb(255, 0, 0)" but got ""
 
-Harness Error (FAIL), message = Unhandled rejection: assert_equals: group expected "rgb(255, 0, 0)" but got "rgba(0, 0, 0, 0)"
+Harness Error (FAIL), message = Unhandled rejection: assert_equals: group expected "rgb(255, 0, 0)" but got ""
 
 PASS style inheritance of pseudo elements