Bug 247771

Summary: CSSOM serializes most shorthands without checking !important flag
Product: WebKit Reporter: Oriol Brufau <obrufau>
Component: CSSAssignee: Oriol Brufau <obrufau>
Status: RESOLVED FIXED    
Severity: Normal CC: webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=247769
https://github.com/web-platform-tests/wpt/pull/36984

Description Oriol Brufau 2022-11-10 16:25:38 PST
From https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue

3. If important flags of all declarations in list are same, then return the serialization of list.
4. Return the empty string. 

Run this code:

var allCSSProps = new Set();
for (let obj = document.createElement("div").style; obj; obj = Reflect.getPrototypeOf(obj)) {
  for (let name of Object.getOwnPropertyNames(obj)) {
    let prop = name.replace(/[A-Z]/g, c => "-" + c.toLowerCase());
    if (CSS.supports(prop, "initial")) {
      allCSSProps.add(prop);
    }
  }
}
var style = document.createElement("div").style;
var bad = [];
var good = [];
for (let prop of allCSSProps) {
  style.cssText = "";
  style.setProperty(prop, "initial");
  if (style.length > 1) {
    style.setProperty(style[0], "initial", "important");
    if (style.getPropertyValue(prop) !== "") {
      bad.push(prop);
    } else good.push(prop);
  }
}
bad;

Expected: empty array

Actual: [
  "-epub-text-emphasis",
  "-webkit-animation",
  "-webkit-border-after",
  "-webkit-border-before",
  "-webkit-border-end",
  "-webkit-border-start",
  "-webkit-column-rule",
  "-webkit-columns",
  "-webkit-flex",
  "-webkit-flex-flow",
  "-webkit-mask",
  "-webkit-mask-position",
  "-webkit-perspective-origin",
  "-webkit-text-decoration",
  "-webkit-text-emphasis",
  "-webkit-text-stroke",
  "-webkit-transform-origin",
  "-webkit-transition",
  "animation",
  "background",
  "background-position",
  "border-block-end",
  "border-block-start",
  "border-bottom",
  "border-inline-end",
  "border-inline-start",
  "border-left",
  "border-right",
  "border-spacing",
  "border-top",
  "column-rule",
  "columns",
  "container",
  "flex",
  "flex-flow",
  "font",
  "font-synthesis",
  "font-variant",
  "grid-area",
  "grid-column",
  "grid-row",
  "grid-template",
  "list-style",
  "marker",
  "mask",
  "mask-position",
  "outline",
  "perspective-origin",
  "place-content",
  "place-items",
  "place-self",
  "text-emphasis",
  "transform-origin",
  "transition"
]
Comment 1 Oriol Brufau 2022-11-15 12:59:43 PST
Pull request: https://github.com/WebKit/WebKit/pull/6523
Comment 2 EWS 2022-11-16 23:59:51 PST
Committed 256774@main (dc7aed5d4dc6): <https://commits.webkit.org/256774@main>

Reviewed commits have been landed. Closing PR #6523 and removing active labels.
Comment 3 Radar WebKit Bug Importer 2022-11-17 00:00:17 PST
<rdar://problem/102454608>