Sizing of background gradient violates specifications
Reported by
martin-e...@mail.de,
Apr 4 2018
|
||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Example URL: any Steps to reproduce the problem: 1.Create a div-element with defined width and height. 2.Set its background-origin to 'border-box'; 3.Set its background-image to a gradient (any type). 4.Set its background-size to '50%'. What is the expected behavior? The gradient should cover the left half of the element, having half its width and full its height. What went wrong? The gradient shrinks to the upper left quart of the element, having (correctly) half its width and uncorrectly half its height. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 65.0.3325.181 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: I provide a html- and two png-files to reproduce the issue. All files must be loaded in the same location. I provide also two screenshots (1 Chrome, 1 Firefox) from these files. The gradients in row 2, 3, and 5 seems to be incorrect. All images are displayed correctly, only serving to better understanding. In my opinion this behaviour violates the specifications of 'background: auto' and 'gradient'.
,
Apr 4 2018
,
Apr 4 2018
You're right, it is a failure to adhere to the spec. Specifically, "An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%." Gradients have no intrinsic ratio or size, so should be using 100% for auto. https://drafts.csswg.org/css-backgrounds-3/#background-size We're probably also failing for SVG with no viewbox and other generated images.
,
Apr 4 2018
Will it be fixed to meet the spec ? I'm working on a little script to animate gradients, therefore have to calculate the length of the colorline (= the length where the colorstops position percentage refers to). It's impossible without knowing the gradients outer dimensions, and these are only calculable using the background-size.
,
Apr 4 2018
Fixing it to meet the spec right now. Should land with no problem for M-67, probably won't merge for M-66.
,
Apr 4 2018
That's fine. For older browsers I'll simply force 'auto' to '100%', whereever a gradient is attached (IE has the same problem). Thank you.
,
Apr 5 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/48c774d129845a4734ac955d1d5407069dd066ce commit 48c774d129845a4734ac955d1d5407069dd066ce Author: Stephen Chenney <schenney@chromium.org> Date: Thu Apr 05 22:42:50 2018 Fix background-size auto when no intrinsic size According to the spec, https://drafts.csswg.org/css-backgrounds-3/#background-size, a background-size of "auto" with no intrinsic ratio or size should use 100% for the auto value. Instead we were using the positioning area's intrinsic ratio. Fix it. R=fmalita@chromium.org BUG= 828842 Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Change-Id: Ia8d665ff2c725c9e40a89c0e160584feedc41b86 Reviewed-on: https://chromium-review.googlesource.com/996214 Commit-Queue: Stephen Chenney <schenney@chromium.org> Reviewed-by: Florin Malita <fmalita@chromium.org> Cr-Commit-Position: refs/heads/master@{#548596} [add] https://crrev.com/48c774d129845a4734ac955d1d5407069dd066ce/third_party/WebKit/LayoutTests/css3/background/background-auto-no-intrinsic-expected.html [add] https://crrev.com/48c774d129845a4734ac955d1d5407069dd066ce/third_party/WebKit/LayoutTests/css3/background/background-auto-no-intrinsic.html [modify] https://crrev.com/48c774d129845a4734ac955d1d5407069dd066ce/third_party/WebKit/LayoutTests/platform/mac/css3/masking/mask-luminance-gradient-expected.png [modify] https://crrev.com/48c774d129845a4734ac955d1d5407069dd066ce/third_party/WebKit/LayoutTests/platform/win/css3/masking/mask-luminance-gradient-expected.png [modify] https://crrev.com/48c774d129845a4734ac955d1d5407069dd066ce/third_party/WebKit/Source/core/paint/BackgroundImageGeometry.cpp
,
Apr 12 2018
|
||||||||||||||
►
Sign in to add a comment |
||||||||||||||
Comment 1 by dtapu...@chromium.org
, Apr 4 2018