Bug 166782

Summary: WebKit implements "word-wrap" as a weird sort of alias which shows up in serializations alongside its alias-target
Product: WebKit Reporter: Daniel Holbert <dholbert>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal    
Priority: P2    
Version: Safari 10   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.chromium.org/p/chromium/issues/detail?id=679068

Description Daniel Holbert 2017-01-06 15:48:51 PST
(1) Visit https://jsfiddle.net/5esq3oc8/
(2) Inspect the serialization of the div's CSS rule for its "style" attribute. (Shown in an alert dialog)

"word-wrap" should not appear (since it's an alias for "overflow-wrap").

"word-wrap" and "overflow-wrap" *BOTH* appear, despite the fact that the former is an alias for the latter!  In contrast, the other alias included in this testcase (-webkit-align-items) does not show up -- for that one, only the main property appears in the serialization.

* This bug affects Chrome/Blink as well; the Blink instance of this bug report is https://bugs.chromium.org/p/chromium/issues/detail?id=679068
* The spec text here is pretty hand-wavy, and Manish filed https://github.com/w3c/csswg-drafts/issues/866 on that.  Right now it says "UAs must treat word-wrap as an alternate name for the overflow-wrap property, as if it were a shorthand of overflow-wrap." https://drafts.csswg.org/css-text-3/#propdef-word-wrap
* That spec text seems to be basically describing the concept of an alias ("an alternate name", "as if it were a shorthand" -- notably *not* saying that it's *actually* a shorthand).  So, WebKit should be doing its standard legacy aliasing thing here, just like it does for -webkit-align-items. I'm not sure why it has different behavior for this one special property. Probably some weird historical cruft, I'm guessing, which can be cleaned up now? :)

I tested in Safari 10 on sierra and got ACTUAL RESULTS. Chrome 57 dev edition also gives ACTUAL RESULTS.
Firefox Nightly 53 gives EXPECTED RESULTS. Edge 14 gives an entirely different behavior because they don't yet support "overflow-wrap" (https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6524680-update-word-wrap-to-overflow-wrap )