<rdar://problem/56167918> To reproduce: 1. Open about:blank and inspect <body> 2. Under Style Attribute... 3. Add a new item of type "display" 4. Hit tab to go to the value field and press down arrow over a number of items. Select one. 5. Delete the value of the previously specified item and repeat step 4, selecting a different one. 6. Repeat step #5, but by typing part of the element and the accepting it using the enter key For example, I chose -webkit-inline-flex as the value this time, but it received value -webkit-box. Also the html elements inspector shows that I received style value: display: inline-flex;lex;ne-flex;n;ne-flex;ne-flex;
Over the last 3 years, I've seen >5 bugs like this one. The problem has been that text ranges (CSSProperty#styleSheetTextRange and CSSProperty#styleSheetTextRange) are out of sync with the text. I'm going to try a different approach this time. When saving CSS property changes, instead of relying on text ranges, format the entire CSSStyleDeclaration (using generateCSSRuleString or similar). This way we wouldn't need to use text ranges at all. CSSProperty model would be the single source of truth. The only downside is that the original formatting would get changed. I don't think it's that important. My guesstimate is that >90% of people use either CSS preprocessors or CSS in JS. They don't care about formatting. The remaining <10% might care about formatting, but even out of those I imagine <5% save entire CSS resources from Web Inspector. If this is more or less true, I'm willing to always save formatted CSS.