Bug 220814

Summary: Top-side value erroneously serialized by getPropertyValue when shorthand is a custom property
Product: WebKit Reporter: Tyler Wilcock <twilco.o>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: esprehn+autocc, ews-watchlist, glenn, gyuyoung.kim, macpherson, menard
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Patch none

Description Tyler Wilcock 2021-01-21 12:38:40 PST 
Given `element.style.getPropertyValue(<shorthand property name>)`, if any of the associated longhands for this shorthand are pending substitution we should serialize an empty string, not the top-side value.

https://wpt.fyi/results/css/css-variables/variable-reference-shorthands.html?label=master&label=experimental&aligned&q=variable-reference-short

We fail the "target1 margin" test[1] (serializing "10px"):

```
<div id="target1" style="margin: var(--prop); margin-top: 10px"></div>
var testcases = [{ element: "target1", propertyName: "margin", expectedPropertyValue: "" }, ...]
```

because this:

https://github.com/WebKit/WebKit/blob/27018096404e5df088accf03481b693a8fd81eac/Source/WebCore/css/StyleProperties.cpp#L484#L485

unconditionally serializes the top shorthand value, which is normally fine except in this case where the shorthand is a custom property value.

Relevant spec: https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue

[1]: https://github.com/WebKit/WebKit/blob/27018096404e5df088accf03481b693a8fd81eac/LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-reference-shorthands.html#L25
Comment 1 Tyler Wilcock 2021-01-21 12:59:58 PST 
Created attachment 418074 [details]
Patch
Comment 2 Tyler Wilcock 2021-01-21 16:11:59 PST 
Nevermind, I think I want to go about this a different way.  I'm going to close this out.