New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 679068 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Jun 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocking:
issue 410112



Sign in to add a comment

Chrome implements "word-wrap" as a weird sort of alias which shows up in serializations alongside its alias-target

Project Member Reported by dholb...@gmail.com, Jan 6 2017

Issue description

Chrome Version: 57.0.2970.0 (Official Build) dev (64-bit)
OS: Ubuntu 16.04 64-bit

What steps will reproduce the problem?
(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)

What is the expected result?
"word-wrap" should not appear (since it's an alias for "overflow-wrap").

What happens instead?
"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.


Please use labels and text to provide additional information.
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

This is 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, Blink 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.
 

Comment 1 by dholb...@gmail.com, Jan 6 2017

Also, I forgot to mention -- for comparison, Firefox gives "expected result".

I did a bit of source code digging, and I think the relevant difference between these two sorts of aliasing is shown in this file:
https://chromium.googlesource.com/chromium/src/+blame/072f5a503cddfe46f59dfdc03cee69a328ca9e57/third_party/WebKit/Source/core/css/CSSProperties.in#474

Specifically, it has:
> word-wrap inherited, name_for_methods=OverflowWrap
as compared to:
> -webkit-align-items alias_for=align-items

The former seems to be defining a "real" property (whose methods/data are shared with another property), whereas the latter is defining an alias.

Is there a reason Blink is doing this special different form of aliasing for 'word-wrap'?

Comment 2 by dholb...@gmail.com, Jan 6 2017

(For completeness, I tested Edge 14 as well -- it doesn't seem to recognize 'overflow-wrap' as being a valid property name. So in Edge, 'word-wrap' is the one and only name for this property.)

Comment 3 by dholb...@gmail.com, Jan 6 2017

I filed https://bugs.webkit.org/show_bug.cgi?id=166782 for this same bug in WebKit, BTW.
Status: Available (was: Untriaged)
I don't see any reason for this to not be a proper alias.

Comment 6 by kojii@chromium.org, Jan 9 2017

I don't know how this affects, but historically this is a property MS proposed and implemented decades ago. Then WG didn't like the name but it was too widely used that they had to support both names.

So maybe this was done intentionally for backward compatibility reasons when WG tried to rename the widely used property. Maybe not, but I guess we need to investigate possible impacts if we were fixing this.
Labels: Hotlist-Interop
Labels: Update-Quarterly

Comment 9 by meade@chromium.org, Oct 31 2017

Cc: bugsnash@chromium.org
Labels: Code-Parser Hotlist-GoodFirstBug
Right now we're using name_for_methods to set application methods for word-wrap to the same as OverflowWrap. If it's really supposed to be treated like a shorthand for overflow-wrap, we should make it specify a word-wrap in "longhands" instead.

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/CSSProperties.json5?l=3679
It should not be treated like a shorthand. See 
https://github.com/w3c/csswg-drafts/issues/866#issuecomment-271028230 for why.

Im pretty sure the spec only uses this hand-wavy "as if it were a shorthand" language because aliases aren't specced yet (or weren't when this text was written). But the concept it is describing is really an alias, and browsers already have aliases implemented, so that's what we should use here.
Note that we already use shorthands to implement aliasing for the following properties:

page-break-after/break-after
-webkit-column-break-after/break-after
page-break-before/break-before
-webkit-column-break-before/break-before
page-break-inside/break-inside
-webkit-column-break-inside/break-inside

This may just be because you can't have more than one alias on a property
Huh, and for those ones (at least the one I tested, "-webkit-column-break-before"), Chrome doesn't hit the hypothetical problem that I referenced in comment 10.  Specifically: the longhand gets serialized in terms of itself (even if it was specified with the shorthand), rather than serializing to the (legacy) shorthand: https://jsfiddle.net/rfr5vgd1/  Even though normally longhands are serialized as shorthands when possible, as shown in dbaron's github-comment that I linked in comment 10.

So maybe treating "word-wrap" as a true shorthand wouldn't be so bad, as long as it matches this behavior & the legacy property name doesn't inadvertantly insert itself into the serialization.
Blocking: 410112
Labels: -Update-Quarterly
Project Member

Comment 15 by bugdroid1@chromium.org, Jun 7 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/34bf22460b1945c47d41e61676e29dd4b07ba665

commit 34bf22460b1945c47d41e61676e29dd4b07ba665
Author: Chris Nardi <cnardi@chromium.org>
Date: Thu Jun 07 17:48:22 2018

Convert word-wrap to an alias of overflow-wrap

word-wrap was previously defined as its own property in
CSSProperties.json5, but with the same behavior as overflow-wrap.
However, this meant that word-wrap showed up alongside word-wrap in
cssText. This patch converts word-wrap to be an alias of overflow-wrap,
as this will prevent the issue of both properties showing up in cssText
and matches the resolution in
https://github.com/w3c/csswg-drafts/issues/866.

Bug:  679068 
Change-Id: I3d415eb1cde9a92dffa2a045ba5fa8b015eeb2d7
Reviewed-on: https://chromium-review.googlesource.com/1073677
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Chris Nardi <cnardi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#565331}
[add] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/WebKit/LayoutTests/external/wpt/css/css-text/overflow-wrap/word-wrap-alias.html
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-listing-expected.txt
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-listing-expected.txt
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/WebKit/LayoutTests/svg/css/getComputedStyle-listing-expected.txt
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-property-listing-expected.txt
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/WebKit/LayoutTests/webexposed/css-property-listing-expected.txt
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/blink/renderer/core/css/BUILD.gn
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/blink/renderer/core/css/CSSProperties.json5
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/blink/renderer/core/css/css_computed_style_declaration.cc
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/blink/renderer/core/css/parser/css_parser_fast_paths.cc
[delete] https://crrev.com/a104d69d615a05c0dd1335ee995aafac1317ccb6/third_party/blink/renderer/core/css/properties/longhands/word_wrap_custom.cc
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/blink/renderer/core/frame/use_counter.cc
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/blink/renderer/core/html/forms/html_text_area_element.cc
[modify] https://crrev.com/34bf22460b1945c47d41e61676e29dd4b07ba665/third_party/blink/renderer/core/html/html_element.cc

Owner: cnardi@chromium.org
Status: Fixed (was: Available)
Project Member

Comment 17 by bugdroid1@chromium.org, Jul 4

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/96d2540a5d087cc6f959177882bb9a29654de009

commit 96d2540a5d087cc6f959177882bb9a29654de009
Author: Oriol Brufau <obrufau@igalia.com>
Date: Wed Jul 04 21:05:53 2018

Update word-wrap's use counter to 'alias-word-wrap'

In r565331 word-wrap became an alias but enums.xml was not updated.
Running update_use_counter_css.py renames word-wrap to alias-word-wrap.

BUG= 679068 

Change-Id: Ib4c86928437bc7c065968e4f5396d2333600a5ff
Reviewed-on: https://chromium-review.googlesource.com/1126258
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#572655}
[modify] https://crrev.com/96d2540a5d087cc6f959177882bb9a29654de009/tools/metrics/histograms/enums.xml

Sign in to add a comment