Bug 245105

Summary:	CSS properties set to 'initial' don't roundtrip from CSSOM correctly
Product:	WebKit	Reporter:	Ahmad Saleem <ahmad.saleem792>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	ap, bfulgham, karlcow, obrufau, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	Safari Technology Preview
Hardware:	Unspecified
OS:	Unspecified
See Also:	https://bugs.webkit.org/show_bug.cgi?id=245104

Description Ahmad Saleem 2022-09-12 16:58:57 PDT

Hi Team,

I was going through Chrome MonoRail and came across another test case, where Webkit is different from other browsers:

Link - https://jsbin.com/lezefopa/1/edit?html,console,output

Chrome Bug - https://bugs.chromium.org/p/chromium/issues/detail?id=358273

____

*** Safari 16 on macOS 12.6 ***

.foo { } 

*** Safari Technology Preview 153 ***

.foo { }

*** Chrome Canary 107 ***

.foo { background: initial; border: initial; padding: initial; position: initial; opacity: initial; }

*** Firefox Nightly 106 ***

.foo { background: initial; border: initial; padding: initial; position: initial; opacity: initial; } 


______

I think matching with other browsers would be great.

If it is duplicate, please mark this as such. Thanks!

Comment 1 Radar WebKit Bug Importer 2022-09-19 16:59:18 PDT

<rdar://problem/100147342>

Comment 2 Karl Dubost 2022-09-22 04:43:29 PDT

  <style>
    .foo {
      background: initial;
      border: initial;
      padding: initial;
      position: initial;
      opacity: initial;
    }    
  </style>

with 

document.querySelector('style').sheet.cssRules[0].cssText


> The cssText attribute must return a serialization of the CSS rule. On setting the cssText attribute must do nothing.

https://drafts.csswg.org/cssom/#serialize-a-css-rule

if I comment out this part 

git diff
diff --git a/Source/WebCore/css/StyleProperties.cpp b/Source/WebCore/css/StyleProperties.cpp
index 1768f465451d..769da676ae45 100644
--- a/Source/WebCore/css/StyleProperties.cpp
+++ b/Source/WebCore/css/StyleProperties.cpp
@@ -1750,8 +1750,8 @@ StringBuilder StyleProperties::asTextInternal() const
         } else
             value = property.value()->cssText();
 
-        if (propertyID != CSSPropertyCustom && value == "initial"_s && !CSSProperty::isInheritedProperty(propertyID))
-            continue;
+        // if (propertyID != CSSPropertyCustom && value == "initial"_s && !CSSProperty::isInheritedProperty(propertyID))
+        //     continue;
 
         if (numDecls++)
             result.append(' ');


I get for the test result:


.foo { background-image: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border: initial; padding: initial; position: initial; opacity: initial; }

which almost fixes it except for background shorthand which gets expanded.
(that might break other things.) 

Maybe it needs a function similar to 
https://searchfox.org/wubkat/rev/abe3878de54ffed9a6eb6de74e246bee9739e209/Source/WebCore/css/StyleProperties.cpp#1135-1157

Comment 3 Karl Dubost 2022-09-22 04:59:52 PDT

ah there's also a different behavior for background with regards to shorthands.

.foo {
      background: green;
    }

and

document.querySelector('style').sheet.cssRules[0].cssText


will return: 

in chrome
.foo { background: green; } 

in firefox
.foo { background: green; } 

but in safari
.foo { background-color: green; }

Comment 4 Karl Dubost 2022-09-22 05:28:52 PDT

The modification in comment #2 would fix:
http://wpt.live/css/cssom/shorthand-serialization.html

but is breaking the third test.
http://wpt.live/css/cssom/border-shorthand-serialization.html

Comment 5 Oriol Brufau 2022-09-23 06:55:32 PDT


*** This bug has been marked as a duplicate of bug 185953 ***