Bug 102504 - Text Autosizing: Skip blocks with background images
Summary: Text Autosizing: Skip blocks with background images
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: timvolodine
URL: http://www.flickr.com/tour/#section=s...
Depends on:
Blocks: FontBoosting 102509
  Show dependency treegraph
Reported: 2012-11-16 07:10 PST by John Mellor
Modified: 2016-09-19 15:12 PDT (History)
7 users (show)

See Also:

Screenshot of flickr.com list markers (392.88 KB, image/png)
2012-11-16 07:11 PST, John Mellor
no flags Details
Patch (7.73 KB, patch)
2012-12-21 09:17 PST, timvolodine
no flags Details | Formatted Diff | Diff
Patch (7.96 KB, patch)
2012-12-28 13:26 PST, timvolodine
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description John Mellor 2012-11-16 07:10:49 PST
When applying Text Autosizing to blocks of text with a fixed-height background image, it's common for the text to wrap and exceed the height of the background image.

For example on above Flickr url, they have made custom numbered list markers like:

    li > .num {
        color: #fff;
        /* tour_blue-circle.png is an 18x18 blue bullet */
        background: url(http://l.yimg.com/g/images/tour/tour_blue-circle.png) no-repeat;
    <li><span class="num">2</span> (text goes here...) </li>

This is perfectly reasonable, but Text Autosizing ends up making the number spill out of the blue circle, and since the number and page background are both white this means it disappears!

We need to fix this category of bugs in one of two ways:
1. Skip blocks with fixed-height background images, when deciding what to autosize.
2. Scale fixed-height background images up in proportion to the text size multiplier (or even better, take wrapping into account to work out the exact height gain due to Text Autosizing).

As a short/medium-term fix, I recommend going with option 1. Once that's in place we can investigate option 2 (with lower priority).

For option 1, the main thing we need to decide is what should count as a fixed height background image: for example a block with its vertical background-size set to "contain", "cover" or a percentage value should not count as fixed. It's less clear whether a block with its vertical background-repeat set to "repeat" should count as flexible height (especially since the default value is "repeat", and so if designers don't expect the contents to exceed the size of the background image they will often leave it as its default value despite not wanting the background to repeat).

As a starting point style->hasBackgroundImage() can tell us which blocks have background images :)
Comment 1 John Mellor 2012-11-16 07:11:27 PST
Created attachment 174678 [details]
Screenshot of flickr.com list markers
Comment 2 John Mellor 2012-11-16 07:18:00 PST
Hmm, and I've been talking about blocks with fixed-height background images, but this particular example is of course an inline span with a fixed-height background image - so I guess it's not enough to do this check for blocks only. Though disabling Text Autosizing for part but not all of a line is really bad. So perhaps the scaling up approach is more practical...
Comment 3 timvolodine 2012-12-21 09:17:55 PST
Created attachment 180529 [details]
Comment 4 Kenneth Rohde Christiansen 2012-12-21 11:49:16 PST
Comment on attachment 180529 [details]

View in context: https://bugs.webkit.org/attachment.cgi?id=180529&action=review

> Source/WebCore/ChangeLog:9
> +        Prevent autosizing of containers containing elements with background images.
> +

It is always good to write the reasoning behind such a change
Comment 5 timvolodine 2012-12-28 13:26:47 PST
Created attachment 180897 [details]
Comment 6 timvolodine 2012-12-28 13:29:22 PST
uploaded a new patch with a more detailed description as suggested by Kenneth.
(looks like lost the review+ tag in the process)
Comment 7 John Mellor 2013-01-10 09:28:24 PST
Code-wise this seems fine (possibly a slight shame to introduce a separate tree traveral rather than reusing the one from containerContainsOneOfTags, but the run time will still be O(n), and I guess it's arguably clearer).

However Tim and I looked at the effect this has on websites and, while it improves the rendering of a lot of sites, it also worsens the rendering of a lot of other sites. It's quite common to include background-images inline (e.g. on a span's ::before or ::after pseudo-element), and in these cases we were no longer autosizing whole paragraphs, that did in fact require autosizing.

Tim's going to try tweaking this so it only skips blocks containing elements with background images if those elements also contain text. De-prioritizing this slightly though, as it's not as urgent as some other Text Autosizing issues.
Comment 8 Anders Carlsson 2014-02-05 11:01:39 PST
Comment on attachment 180897 [details]

Clearing review flag on patches from before 2014. If this patch is still relevant, please reset the r? flag.
Comment 9 Daniel Bates 2016-09-19 15:12:11 PDT
Marking this bug Resolved WontFix because the TEXT_AUTOSIZING feature was removed in <https://trac.webkit.org/changeset/206119> (bug #162167). See bug 84186, comment 32 for more details.