Bug 230389 – if border-radius includes a var(), the value is not readable from .style

• Component: CSS
• Status: RESOLVED FIXED

[Tuomas Karkkainen]

Created attachment 438447 [details]
html file demonstrating the issue

this css:

--v0: 50px;
border-radius: var(--v0);

is rendered correctly, but in JavaScript the value of [style].style.borderRadius is "".

[Tuomas Karkkainen]

these properties exhibit the same quirk:

border-block-width
border-inline-width
perspective-origin

[Radar WebKit Bug Importer]

<rdar://problem/83482301>

[Nikos Mouchtaris]

Created attachment 440324 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 440324 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=440324&action=review

> Source/WebCore/css/StyleProperties.cpp:149
>          if (shorthand.length() && is<CSSPendingSubstitutionValue>(getPropertyCSSValue(shorthand.properties()[0])))
> -            return String();
> +            return downcast<CSSPendingSubstitutionValue>(*getPropertyCSSValue(shorthand.properties()[0])).shorthandValue().cssText();

Can we avoid repeating getPropertyCSSValue(shorthand.properties()[0])?

[Nikos Mouchtaris]

Created attachment 440439 [details]
Patch

[Myles C. Maxfield]

Comment on attachment 440439 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=440439&action=review

> Source/WebCore/css/StyleProperties.cpp:162
> +                return downcast<CSSPendingSubstitutionValue>(*getPropertyCSSValue(shorthand.properties()[0])).shorthandValue().cssText();

I don't understand the [0] here. What if you have something like

element {
border-top-left-radius: var(--a);
border-top-right-radius: var(--b);
border-bottom-right-radius: var(--c);
border-bottom-left-radius: var(--d);
}
element.style.getPropertyValue("border-radius")

This code would appear to return var(--a), but that doesn't seem right. Am I misunderstanding the code? Or maybe the spec says that [0] is the correct behavior?

[Nikos Mouchtaris]

> This code would appear to return var(--a), but that doesn't seem right. Am I
> misunderstanding the code? Or maybe the spec says that [0] is the correct
> behavior?

So this return is only used if all longhand are pending substitution from a variable set by the shorthand (ie. border-radius: var(--a)), so using [0] doesn't matter as all longhand values are the same.

[Nikos Mouchtaris]

Created attachment 442756 [details]
Patch

[Darin Adler]

Comment on attachment 442756 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=442756&action=review

> Source/WebCore/ChangeLog:10
> +        Return correct string for shorthand CSS values set by var. Add extra checks for if all 
> +        longhand properties are pending values and if the requested shorthand property was set
> +        to a variable. 

Can we put this check into a separate function rather than making StyleProperties::getPropertyValue so long?

[Nikos Mouchtaris]

Created attachment 442760 [details]
fix shorthand property set to var bug

[Nikos Mouchtaris]

Created attachment 442767 [details]
fix shorthand property set to var bug

[EWS]

Committed r285015 (243659@main): <https://commits.webkit.org/243659@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 442767 [details].

[Oriol Brufau]

*** Bug 225209 has been marked as a duplicate of this bug. ***

[Oriol Brufau]

*** Bug 225206 has been marked as a duplicate of this bug. ***