Skip to content
Permalink
Browse files
if border-radius includes a var(), the value is not readable from .style
https://bugs.webkit.org/show_bug.cgi?id=230389

Reviewed by Myles Maxfield.
Source/WebCore:

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.

Test: css3/short-hand-var-serialization.html

* css/StyleProperties.cpp:
(WebCore::StyleProperties::getPropertyValue const):

LayoutTests:

* css3/short-hand-var-serialization-expected.txt: Added.
* css3/short-hand-var-serialization.html: Added.



Canonical link: https://commits.webkit.org/243659@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@285015 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
nmoucht committed Oct 29, 2021
1 parent 8898eac commit 988c0fd881df199d2f803cdcb38da47bd7c5a111
Showing 12 changed files with 140 additions and 31 deletions.
@@ -1,3 +1,13 @@
2021-10-28 Nikos Mouchtaris <nmouchtaris@apple.com>

if border-radius includes a var(), the value is not readable from .style
https://bugs.webkit.org/show_bug.cgi?id=230389

Reviewed by Myles Maxfield.

* css3/short-hand-var-serialization-expected.txt: Added.
* css3/short-hand-var-serialization.html: Added.

2021-10-28 Arcady Goldmints-Orlov <agoldmints@igalia.com>

[GLIB] Update test baselines. Unreviewed test gardening.
@@ -0,0 +1,15 @@
Test that shorthand css properties set to a variable return that variable when accessed through the style sheet.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


- Tests -
PASS styleSheet.rules[1].style.borderRadius is "var(--v0)"
PASS styleSheet.rules[2].style.margin is "var(--v0)"
PASS styleSheet.rules[3].style.borderBlockWidth is "var(--v0)"
PASS styleSheet.rules[4].style.borderInlineWidth is "var(--v0)"
PASS styleSheet.rules[5].style.perspectiveOrigin is "var(--v0)"
PASS successfullyParsed is true

TEST COMPLETE

@@ -0,0 +1,55 @@
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 3px solid red;
}
#div0 {
--v0: 50px;
border-radius: var(--v0);
}
#div1 {
--v0: 50px;
margin: var(--v0);
}

#div2 {
--v0: 50px;
border-block-width: var(--v0);
}

#div3 {
--v0: 50px;
border-inline-width: var(--v0);
}

#div4 {
--v0: left;
perspective-origin: var(--v0);
}
</style>
<script src="../resources/js-test-pre.js"></script>
</head>
<body>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script>
description('Test that shorthand css properties set to a variable return that variable when accessed through the style sheet.');

debug('- Tests -');
//var value = document.styleSheets[1].cssRules[1].style['borderRadius'];
var styleSheet = document.styleSheets[0];
shouldBeEqualToString('styleSheet.rules[1].style.borderRadius', "var(--v0)");
shouldBeEqualToString('styleSheet.rules[2].style.margin', "var(--v0)");
shouldBeEqualToString('styleSheet.rules[3].style.borderBlockWidth', "var(--v0)");
shouldBeEqualToString('styleSheet.rules[4].style.borderInlineWidth', "var(--v0)");
shouldBeEqualToString('styleSheet.rules[5].style.perspectiveOrigin', "var(--v0)");
</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>

This file was deleted.

This file was deleted.

@@ -1,14 +1,14 @@

PASS Logical longhands with variables - margin-inline-start
PASS Logical longhands with variables - margin-inline-end
FAIL Logical longhands with variables - margin-inline assert_equals: Specified value expected "" but got "var(--one) var(--two)"
PASS Logical longhands with variables - margin-inline
PASS Logical shorthand with 1 variable - margin-inline-start
PASS Logical shorthand with 1 variable - margin-inline-end
FAIL Logical shorthand with 1 variable - margin-inline assert_equals: Specified value expected "var(--one)" but got ""
PASS Logical shorthand with 1 variable - margin-inline
PASS Logical shorthand with 2 variables - margin-inline-start
PASS Logical shorthand with 2 variables - margin-inline-end
FAIL Logical shorthand with 2 variables - margin-inline assert_equals: Specified value expected "var(--one) var(--two)" but got ""
PASS Logical shorthand with 2 variables - margin-inline
PASS Logical shorthand with 1 variable and 1 length - margin-inline-start
PASS Logical shorthand with 1 variable and 1 length - margin-inline-end
FAIL Logical shorthand with 1 variable and 1 length - margin-inline assert_equals: Specified value expected "var(--one) 2px" but got ""
PASS Logical shorthand with 1 variable and 1 length - margin-inline

@@ -1,3 +1,3 @@

FAIL CSS variable references - shorthand properties - via CSSOM assert_equals: margin property value after calling setProperty expected "var(--prop)" but got ""
PASS CSS variable references - shorthand properties - via CSSOM

@@ -1,10 +1,10 @@

FAIL target1 margin assert_equals: expected "" but got "10px"
PASS target1 margin
PASS target1 margin-left
PASS target1 margin-top
PASS target1 margin-right
PASS target1 margin-bottom
FAIL target2 margin assert_equals: expected "var(--prop)" but got ""
PASS target2 margin
PASS target2 margin-left
PASS target2 margin-top
PASS target2 margin-right
@@ -14,5 +14,5 @@ PASS target3 margin-left
PASS target3 margin-top
PASS target3 margin-right
PASS target3 margin-bottom
FAIL target4 background assert_equals: expected "var(--prop)" but got ""
PASS target4 background

@@ -8,7 +8,7 @@ foo

PASS Shorthand serialization with shorthand and longhands mixed.
PASS Shorthand serialization with just longhands.
FAIL Shorthand serialization with variable and variable from other shorthand. assert_equals: expected "var(--a)" but got ""
PASS Shorthand serialization with variable and variable from other shorthand.
PASS Shorthand serialization after setting
FAIL Shorthand serialization with 'initial' value. assert_equals: expected "margin: initial;" but got ""
PASS Shorthand serialization with 'initial' value, one longhand with important flag.
@@ -1,3 +1,19 @@
2021-10-28 Nikos Mouchtaris <nmouchtaris@apple.com>

if border-radius includes a var(), the value is not readable from .style
https://bugs.webkit.org/show_bug.cgi?id=230389

Reviewed by Myles Maxfield.

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.

Test: css3/short-hand-var-serialization.html

* css/StyleProperties.cpp:
(WebCore::StyleProperties::getPropertyValue const):

2021-10-28 Chris Dumez <cdumez@apple.com>

Add stubs for the Web Locks API
@@ -125,6 +125,37 @@ MutableStyleProperties::MutableStyleProperties(const StyleProperties& other)
}
}

bool StyleProperties::shorthandHasVariableReference(CSSPropertyID propertyID, String& shorthandValue) const
{
auto shorthand = shorthandForProperty(propertyID);
if (shorthand.length()) {
size_t numSetFromShorthand = 0;
// Checks for shorthand property if any of its longhand properties have set to a variable
// or are all pending substitution
for (size_t i = 0; i < shorthand.length(); i++) {
auto cssPropertyValue = getPropertyCSSValue(shorthand.properties()[i]);

auto hasBeenSetFromLonghand = is<CSSVariableReferenceValue>(cssPropertyValue);
auto hasBeenSetFromShorthand = is<CSSPendingSubstitutionValue>(cssPropertyValue);
auto hasNotBeenSetFromRequestedShorthand = hasBeenSetFromShorthand && downcast<CSSPendingSubstitutionValue>(*cssPropertyValue).shorthandPropertyId() != propertyID;

// Request for shorthand value should return empty string if any longhand values have been
// set to a variable or if they were set to a variable by a different shorthand.
if (hasBeenSetFromLonghand || hasNotBeenSetFromRequestedShorthand)
return true;
if (hasBeenSetFromShorthand)
numSetFromShorthand += 1;
}
if (numSetFromShorthand) {
if (numSetFromShorthand != shorthand.length())
return true;
shorthandValue = downcast<CSSPendingSubstitutionValue>(* getPropertyCSSValue(shorthand.properties()[0])).shorthandValue().cssText();
return true;
}
}
return false;
}

String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
{
if (auto value = getPropertyCSSValue(propertyID)) {
@@ -144,9 +175,9 @@ String StyleProperties::getPropertyValue(CSSPropertyID propertyID) const
}

{
auto shorthand = shorthandForProperty(propertyID);
if (shorthand.length() && is<CSSPendingSubstitutionValue>(getPropertyCSSValue(shorthand.properties()[0])))
return String();
auto shorthandValue = String();
if (shorthandHasVariableReference(propertyID, shorthandValue))
return shorthandValue;
}

// Shorthand and 4-values properties
@@ -175,6 +175,7 @@ class StyleProperties : public StylePropertiesBase {
String fontVariantValue() const;
String textDecorationSkipValue() const;
void appendFontLonghandValueIfExplicit(CSSPropertyID, StringBuilder& result, String& value) const;
bool shorthandHasVariableReference(CSSPropertyID, String&) const;

friend class PropertySetCSSStyleDeclaration;
};

0 comments on commit 988c0fd

Please sign in to comment.