226903 2021-06-10 16:15:58 -0700 Web Inspector: Style panel display incomplete CSS declarations for JS-created styles 2021-06-11 10:48:36 -0700 1 1 1 Unclassified WebKit Web Inspector WebKit Nightly Build All All NEW InRadar P2 Normal --- 1 nvasilyev webkit-unassigned inspector-bugzilla-changes webkit-bug-importer oldest_to_newest 1768796 0 431158 nvasilyev 2021-06-10 16:15:58 -0700 Created attachment 431158 [HTML] Reduction Steps: 1. Open the attached HTML page 2. Inspect <div id=foo> 3. Open Style panel Expected: ``` font: 24px sans-serif; background: url(https://webkit.org/wp-content/themes/webkit/images/webkit.svg) center center / cover no-repeat fixed;} ``` Which is the same text as it's specified in JS. Actual: ``` font-size: 24px; font-family: sans-serif; ``` `background` is missing, which is misleading. `font` shortcut expanded, into two longhand properties, which isn't ideal. Notes: The bug was initially discovered on https://www.disneyplus.com/home. CSS-in-JS is very common on the modern web. It's used by React Native and other UI frameworks. 1768797 1 webkit-bug-importer 2021-06-10 16:18:47 -0700 <rdar://problem/79166098> 431158 2021-06-10 16:15:58 -0700 2021-06-10 16:15:58 -0700 [HTML] Reduction cssom-styles-bug.html text/html 467 nvasilyev PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04Ij4K ICAgIDx0aXRsZT5KUyBjcmVhdGVkIHN0eWxlczwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+CjxkaXYg aWQ9Zm9vPkpTIGNyZWF0ZWQgc3R5bGVzPC9kaXY+CjxzY3JpcHQ+CmxldCBzdHlsZSA9IGRvY3Vt ZW50LmNyZWF0ZUVsZW1lbnQoInN0eWxlIik7CmRvY3VtZW50LmJvZHkuYXBwZW5kKHN0eWxlKTsK bGV0IHJ1bGVUZXh0ID0gYCNmb28gewogICAgZm9udDogMjRweCBzYW5zLXNlcmlmOwogICAgYmFj a2dyb3VuZDogdXJsKGh0dHBzOi8vd2Via2l0Lm9yZy93cC1jb250ZW50L3RoZW1lcy93ZWJraXQv aW1hZ2VzL3dlYmtpdC5zdmcpIGNlbnRlciBjZW50ZXIgLyBjb3ZlciBuby1yZXBlYXQgZml4ZWQ7 fQpgOwpzdHlsZS5zaGVldC5pbnNlcnRSdWxlKHJ1bGVUZXh0LCAwKTsKPC9zY3JpcHQ+CjwvYm9k eT4KPC9odG1sPgo=