Bug 106593 – StylePropertySet::asText() incorrectly serializes some styles.

• Component: CSS
• Status: NEW

[Bryan]

StylePropertySet::asText() incorrectly serializes some styles. This causes e.g. document.styleSheets[n].cssRules[m].cssText to generate the wrong CSS text in some cases. I've attached an HTML file which demonstrates one such case.

StylePropertySet::asText() is quite complex. It's trying to do clever things with background-position and background-repeat that I do not believe are necessary.

Here is a simpler implementation which correctly reserializes a CSSStyleDeclaration. This could be used in PropertySetCSSStyleDeclaration::cssText() in place of the current call to StylePropertySet::asText().

WTF::String SerializeCSSStyleDeclaration(WebCore::CSSStyleDeclaration* decl) {
  WTF::StringBuilder style_text;
  WTF::HashSet<WTF::String> emitted_properties;
  for (int i = 0; i < decl->length(); ++i) {
    WTF::String name = decl->item(i);
    if (name.isEmpty()) {
      continue;
    }

    // Now see if this property was part of a shorthand declaration,
    // e.g. background-image might have been part of a background
    // shorthand propertly declaration. If there is a shorthand, then
    // we emit the shorthand property instead if it hasn't already
    // been emitted.
    const WTF::String shorthand = decl->getPropertyShorthand(name);
    if (!shorthand.isEmpty()) {
      name = shorthand;
    }
    if (emitted_properties.contains(name)) {
      // If we encounter two properties that share the same shorthand,
      // we only want to emit that shorthand once.
      continue;
    }

    emitted_properties.add(name);
    const WTF::String value = decl->getPropertyValue(name);
    if (value.isEmpty()) {
      continue;
    }

    if (!style_text.isEmpty()) {
      style_text.append(';');
    }
    style_text.append(name);
    style_text.append(':');
    style_text.append(value);
    const WTF::String priority = decl->getPropertyPriority(name);
    if (!priority.isEmpty()) {
      style_text.append(" !");
      style_text.append(priority);
    }
  }
  return style_text.toString();
}

[Bryan]

Created attachment 182189 [details]
Simple example demonstrating the bug.

[Bryan]

Here is the spec for serializing a style rule:

http://dev.w3.org/csswg/cssom/#serialize-a-css-declaration-block

The implementation is slightly different from the one I've provided mostly around areas of emitting whitespace etc, but the core logic matches the implementation provided in the first comment pretty closely.

[Brent Fulgham]

This continues to be a problem in Safari 15.

[Radar WebKit Bug Importer]

<rdar://problem/96965843>

[Ahmad Saleem]

Chrome Canary 113 and Safari Technology Preview 165 are matching each other and WebKit ToT as well.

Only difference is with Firefox Nightly 113 on following:

getComputedStyle background for test div:

Where Firefox show: none

While Chrome & Safari show: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box