106593 2013-01-10 12:05:36 -0800 StylePropertySet::asText() incorrectly serializes some styles. 2023-03-16 19:20:35 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=190496 InRadar P2 Normal --- 1 bmcquade webkit-unassigned ahmad.saleem792 apavlov bfulgham menard webkit-bug-importer zalan oldest_to_newest 804618 0 bmcquade 2013-01-10 12:05:36 -0800 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(); } 804620 1 182189 bmcquade 2013-01-10 12:07:47 -0800 Created attachment 182189 Simple example demonstrating the bug. 804650 2 bmcquade 2013-01-10 12:47:10 -0800 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. 1883250 3 bfulgham 2022-07-13 12:01:36 -0700 This continues to be a problem in Safari 15. 1883251 4 webkit-bug-importer 2022-07-13 12:01:49 -0700 <rdar://problem/96965843> 1942008 5 ahmad.saleem792 2023-03-16 19:20:35 -0700 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 182189 2013-01-10 12:07:47 -0800 2013-01-10 12:07:47 -0800 Simple example demonstrating the bug. badcssex.html text/html 3520 bmcquade PGh0bWw+CjxoZWFkPgoKPCEtLSB0aGUgZmlyc3Qgc3R5bGUgYmxvY2sgaXMgZm9yIHN0eWxlcyB1 c2VkIHRvIGhlbHAgZGlzcGxheSBvdXIgcmVzdWx0IGNvbnRlbnQgb24gdGhlIHBhZ2UgLS0+Cjxz dHlsZT4KYm9keSB7IG1heC13aWR0aDogMTAyNHB4OyB9CmRpdiB7IHBhZGRpbmc6IDEwcHg7IG1h cmdpbjogNXB4OyB9CnNwYW4geyBib3JkZXI6IDFweCBzb2xpZCBibGFjazsgZGlzcGxheTppbmxp bmUtYmxvY2s7IH0KPC9zdHlsZT4KCjwhLS0gdGhlIHNlY29uZCBzdHlsZSBibG9jayBjb250YWlu cyBvdXIgdGVzdCBjYXNlcy4gLmZvbyBhcHBsaWVzIGEgYmFja2dyb3VuZC1jb2xvciwgdGhlbiAj ZXhhbXBsZSByZXNldHMgYWxsIGJhY2tncm91bmQgcHJvcGVydGllcyB0byAnaW5pdGlhbCcgdmlh IGJhY2tncm91bmQ6bm9uZS4gLS0+CjxzdHlsZSBpZD0idGVzdFN0eWxlcyI+LmZvbyB7IGJhY2tn cm91bmQtY29sb3I6IHJlZDsgfQojZXhhbXBsZSB7IGJhY2tncm91bmQ6IG5vbmU7IH0KI2V4YW1w bGUge2JvcmRlcjogM3B4IHNvbGlkIGJsdWU7IH0KPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KPGgx PkNTUyBzdHlsZSBzZXJpYWxpemF0aW9uIGlzc3VlcyBpbiBXZWJLaXQ8L2gxPgo8cD5UaGlzIHBh Z2UgZGVtb25zdHJhdGVzIGhvdyB0aGUgY3VycmVudCBDU1Mgc3R5bGUgc2VyaWFsaXphdGlvbiBp biBXZWJLaXQgZG9lcyBub3QgYWx3YXlzIHdvcmsgY29ycmVjdGx5LiBUaGUgYnJva2VuIGxvZ2lj IGlzIGluIFN0eWxlUHJvcGVydHlTZXQ6OmFzVGV4dCgpLjwvcD4KCjwhLS0gdGhlIGRpdiB3ZSdy ZSB1c2luZyBmb3IgdGVzdGluZy4gYm90aCB0ZXN0IHJ1bGVzIGFwcGx5LCBidXQgI2V4YW1wbGUg aGFzIGEgaGlnaGVyIHNwZWNpZmljaXR5LCBzbyBiYWNrZ3JvdW5kOm5vbmUgcmVzZXRzIGFsbCBi YWNrZ3JvdW5kIHByb3BlcnRpZXMgKGluY2x1ZGluZyBjb2xvcikgdG8gdGhlaXIgaW5pdGlhbCB2 YWx1ZXMuIC0tPgo8aDI+VGVzdCBjYXNlPC9oMj4KPGRpdiBjbGFzcz0iZm9vIiBpZD0iZXhhbXBs ZSI+SGVyZSBpcyBvdXIgdGVzdCBkaXYsIHdpdGggYSBmZXcgc3R5bGVzIGFwcGxpZWQuPC9kaXY+ CjxoMj5JbnNwZWN0aW5nIHRoZSBzdHlsZXMgb2Ygb3VyIHRlc3QgZGl2PC9oMj4KPHA+VGhlIGFi b3ZlIGRpdiBoYXMgdGhlIGZvbGxvd2luZyBzdHlsZXMgYXBwbGllZDo8L3A+CjxkaXY+aW5uZXJU ZXh0IGZvciB0ZXN0IHN0eWxlIGJsb2NrOiA8c3BhbiBpZD0idGVzdFN0eWxlc1RleHQiPjwvZGl2 Pgo8ZGl2PgpnZXRDb21wdXRlZFN0eWxlIGJhY2tncm91bmQgZm9yIHRlc3QgZGl2OiA8c3BhbiBp ZD0iY29tcHV0ZWRTdHlsZSI+PC9zcGFuPi4KPC9kaXY+CjxwPk5vdGljZSB0aGF0IHRoZSBjb21w dXRlZCBzdHlsZSBzaG93cyB0aGF0ICNleGFtcGxlIHN1Y2Nlc3NmdWxseSByZXNldHMgYWxsIGJh Y2tncm91bmQgcHJvcGVydGllcywgY2hhbmdpbmcgdGhlIGJhY2tncm91bmQgY29sb3IgYmFjayB0 byBpdHMgaW5pdGlhbCB2YWx1ZS4gVGhpcyBpcyBleHBlY3RlZC48L3A+CjxwPkhvd2V2ZXIsIHdo ZW4gcmVmbGVjdGluZyBlYWNoIHN0eWxlJ3MgY3NzVGV4dCB0aHJvdWdoIEphdmFTY3JpcHQgd2Ug c2VlIHRoYXQgI2V4YW1wbGUgZG9lcyBub3QgY29udGFpbiAnYmFja2dyb3VuZDpub25lJyBidXQg cmF0aGVyIGEgc3Vic2V0IG9mIHRoZSBleHBhbmRlZCBiYWNrZ3JvdW5kIHByb3BlcnRpZXM6PC9w Pgo8ZGl2Pgpkb2N1bWVudC5zdHlsZVNoZWV0c1sxXS5jc3NSdWxlc1tuXS5jc3NUZXh0OiA8c3Bh biBpZD0iY3NzVGV4dCI+PC9zcGFuPi4KPC9kaXY+CjxwPi5mb28gaXMgc2VyaWFsaXplZCBjb3Jy ZWN0bHksIGJ1dCAjYmFyIGlzIHNlcmlhbGl6ZWQgaW5jb3JyZWN0bHkuIFRoZSBzdHlsZSBzaG91 bGQgY29udGFpbiBhbGwgYmFja2dyb3VuZCBwcm9wZXJ0aWVzIHJlc2V0IHRvIHRoZWlyIGluaXRp YWwgdmFsdWVzLiBTZWUgPGEgaHJlZj0iaHR0cDovL3d3dy53My5vcmcvVFIvMjAxMi9DUi1jc3Mz LWJhY2tncm91bmQtMjAxMjA3MjQvI3RoZS1iYWNrZ3JvdW5kIj50aGUgQ1NTMyBiYWNrZ3JvdW5k IHNwZWNpZmljYXRpb248L2E+LCB3aGljaCBzYXlzOgo8YmxvY2txdW90ZT5HaXZlbiBhIHZhbGlk IGRlY2xhcmF0aW9uLCBmb3IgZWFjaCBsYXllciB0aGUgc2hvcnRoYW5kIGZpcnN0IHNldHMgdGhl IGNvcnJlc3BvbmRpbmcgbGF5ZXIgb2YgZWFjaCBvZiAnYmFja2dyb3VuZC1pbWFnZScsICdiYWNr Z3JvdW5kLXBvc2l0aW9uJywgJ2JhY2tncm91bmQtc2l6ZScsICdiYWNrZ3JvdW5kLXJlcGVhdCcs ICdiYWNrZ3JvdW5kLW9yaWdpbicsICdiYWNrZ3JvdW5kLWNsaXAnIGFuZCAnYmFja2dyb3VuZC1h dHRhY2htZW50JyB0byB0aGF0IHByb3BlcnR5J3MgaW5pdGlhbCB2YWx1ZSwgdGhlbiBhc3NpZ25z IGFueSBleHBsaWNpdCB2YWx1ZXMgc3BlY2lmaWVkIGZvciB0aGlzIGxheWVyIGluIHRoZSBkZWNs YXJhdGlvbi4gRmluYWxseSAnYmFja2dyb3VuZC1jb2xvcicgaXMgc2V0IHRvIHRoZSBzcGVjaWZp ZWQgY29sb3IsIGlmIGFueSwgZWxzZSBzZXQgdG8gaXRzIGluaXRpYWwgdmFsdWUuPC9ibG9ja3F1 b3RlPgo8L3A+CjxoMj5EaXYgd2l0aCB0aGUgcmVmbGVjdGVkIHN0eWxlcyBmcm9tIHdlYmtpdCBh cHBsaWVkPC9oMj4KPHA+QmVsb3csIHdlIGFwcGx5IHRoZSBzdHlsZXMgZnJvbSB0aGUgc2VyaWFs aXplZCBjc3NUZXh0IHRvIHRoZSBkaXYuIE5vdGljZSBpdCBoYXMgYSByZWQgYmFja2dyb3VuZCwg d2hpY2ggaXMgaW5jb3JyZWN0Lgo8ZGl2IGlkPSJ0YXJnZXQiPkhlcmUgaXMgYSBkaXYgd2l0aCB0 aGUgc2VyaWFsaXplZCBjc3NUZXh0IGFwcGxpZWQuPC9kaXY+CjxzY3JpcHQ+CmZ1bmN0aW9uIGFu YWx5emVTdHlsZSgpIHsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3Rlc3RTdHlsZXNUZXh0Jyku aW5uZXJUZXh0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3Rlc3RTdHlsZXMnKS5pbm5lclRl eHQ7CnZhciBlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2V4YW1wbGUnKTsKdmFyIGNvbXB1 dGVkU3R5bGUgPSB3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShlKTsKdmFyIGNvbXB1dGVkQmFja2dy b3VuZCA9IGNvbXB1dGVkU3R5bGUuYmFja2dyb3VuZDsKdmFyIHJ1bGUxID0gZG9jdW1lbnQuc3R5 bGVTaGVldHNbMV0uY3NzUnVsZXNbMF07CnZhciBydWxlMiA9IGRvY3VtZW50LnN0eWxlU2hlZXRz WzFdLmNzc1J1bGVzWzFdOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY29tcHV0ZWRTdHlsZScp LmlubmVyVGV4dCA9IGNvbXB1dGVkQmFja2dyb3VuZDsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQo J2Nzc1RleHQnKS5pbm5lclRleHQgPSBbcnVsZTEuY3NzVGV4dCwgcnVsZTIuY3NzVGV4dF0uam9p bignXG4nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RhcmdldCcpLnN0eWxlLmNzc1RleHQg PSBbcnVsZTEuc3R5bGUuY3NzVGV4dCwgcnVsZTIuc3R5bGUuY3NzVGV4dF0uam9pbignOycpOwp9 CmFuYWx5emVTdHlsZSgpOwo8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg==