<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - WebKit implements &quot;word-wrap&quot; as a weird sort of alias which shows up in serializations alongside its alias-target"
   href="https://bugs.webkit.org/show_bug.cgi?id=166782">166782</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>WebKit implements &quot;word-wrap&quot; as a weird sort of alias which shows up in serializations alongside its alias-target
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 10
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>CSS
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>dholbert&#64;mozilla.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>STR:
(1) Visit <a href="https://jsfiddle.net/5esq3oc8/">https://jsfiddle.net/5esq3oc8/</a>
(2) Inspect the serialization of the div's CSS rule for its &quot;style&quot; attribute. (Shown in an alert dialog)

EXPECTED RESULTS:
&quot;word-wrap&quot; should not appear (since it's an alias for &quot;overflow-wrap&quot;).

ACTUAL RESULTS:
&quot;word-wrap&quot; and &quot;overflow-wrap&quot; *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.


NOTES:
* This bug affects Chrome/Blink as well; the Blink instance of this bug report is <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=679068">https://bugs.chromium.org/p/chromium/issues/detail?id=679068</a>
* The spec text here is pretty hand-wavy, and Manish filed <a href="https://github.com/w3c/csswg-drafts/issues/866">https://github.com/w3c/csswg-drafts/issues/866</a> on that.  Right now it says &quot;UAs must treat word-wrap as an alternate name for the overflow-wrap property, as if it were a shorthand of overflow-wrap.&quot; <a href="https://drafts.csswg.org/css-text-3/#propdef-word-wrap">https://drafts.csswg.org/css-text-3/#propdef-word-wrap</a>
* That spec text seems to be basically describing the concept of an alias (&quot;an alternate name&quot;, &quot;as if it were a shorthand&quot; -- 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 &quot;overflow-wrap&quot; (<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6524680-update-word-wrap-to-overflow-wrap">https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6524680-update-word-wrap-to-overflow-wrap</a> )</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>