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

Issue 630597 link

Starred by 10 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Feature

Blocked on:
issue 807653



Sign in to add a comment

Unprefix -webkit-image-set

Project Member Reported by phistuck@gmail.com, Jul 22 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

Example URL:

Steps to reproduce the problem:
Safari unprefixed -webkit-image-set. Chrome should, too.

What is the expected behavior?
image-set(...) works.

What went wrong?
image-set(...) does not work.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.103  Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

See https://trac.webkit.org/changeset/202765 for the WebKit change.

It should be a straightforward change, it does not seem like -webkit-image-set got a lot of attention in the past few years -
https://trac.webkit.org/search?q=webkit-image-set
 
Components: Blink>CSS
Labels: -OS-Windows -Type-Compat OS-All Type-Feature
Cc: y...@yoav.ws
Labels: Hotlist-Interop
Status: Available (was: Unconfirmed)
Spec: https://drafts.csswg.org/css-images-3/#image-set-notation
Owner: sunil.ra...@samsung.com
Status: Started (was: Available)
I have uploaded a patch here: https://codereview.chromium.org/2203773002/
Please have a look.

Comment 5 by yio...@gmail.com, Aug 15 2016

Please support the standard syntax: 

Each <string> inside image-set() represents a <url>, just like in image().

image-set( "foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi );

Comment 6 by phistuck@gmail.com, Aug 15 2016

#5 -
Does Safari support the standard syntax?

Comment 7 by yio...@gmail.com, Aug 17 2016

#6
@phistuck

It looks like they have plans to support

https://bugs.webkit.org/show_bug.cgi?id=159373#c10
https://bugs.webkit.org/show_bug.cgi?id=160934

Comment 8 by phistuck@gmail.com, Aug 17 2016

Unfortunately, a bug (with the NEW status) does not translate to plans. :(

Comment 9 by nainar@chromium.org, Aug 18 2016

Labels: Hotlist-Unprefix
Labels: Update-Quarterly
Labels: -Update-Quarterly
It looks like the intent had 3 LGTMs, so this should be ready to be implemented?

The only blocker is probably implementing this per the spec:

image-set() = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ] <resolution>

And since <image> allows <url> it would just be the addition of parsing <string>s and other <image> types.
<resolution> also needs to be updated to take x as a unit, I believe. https://drafts.csswg.org/css-values-4/#resolution-value

Comment 14 by e...@chromium.org, Jan 30 2018

Cc: sunil.ra...@samsung.com
Owner: ----
Status: Available (was: Started)
Owner: cnardi@chromium.org
Status: Started (was: Available)
Blockedon: 807653
Project Member

Comment 17 by bugdroid1@chromium.org, Feb 2 2018

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

commit c3eee4c456d5fae94443ca43f50487a37f3d3ede
Author: Chris Nardi <cnardi@chromium.org>
Date: Fri Feb 02 15:48:12 2018

Import wpt/css/css-images

Import wpt/css/css-images so existing images tests can be upstreamed.

No-Export: true
Bug: 630597
Change-Id: I034a5c02eb3b1b91aceea9579b3f6f84414a7a41
Reviewed-on: https://chromium-review.googlesource.com/898224
Commit-Queue: Chris Nardi <cnardi@chromium.org>
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Cr-Commit-Position: refs/heads/master@{#534059}
[modify] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/NeverFixTests
[modify] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/W3CImportExpectations
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations002.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations003.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations004.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/css-image-fallbacks-and-annotations005.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-border-box-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-border-box.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-button-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-button.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-content-box-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-content-box.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-crash-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-crash.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-move-stops-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradient-move-stops.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-border-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-border.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-transparent-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/gradients-with-transparent.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/image-fit-001.xht
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/image-fit-006.xht
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/img-orient-012.xht
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/linear-gradient-1.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/linear-gradient-2.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/linear-gradient-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-green.gif
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-green.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-green.svg
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-lime.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-maroon.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-navy.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-red.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/1x1-white.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/60x60-gg-rr.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/60x60-green.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/60x60-red.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/a-green.css
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/b-green.css
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/c-red.css
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/cat.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/import-green.css
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/import-red.css
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/intrinsic-size.jpg
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/intrinsic-size.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/pattern-grg-rgr-grg.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/pattern-grg-rrg-rgg.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/pattern-rgr-grg-rgr.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/pattern-tr.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/ruler-h-50%.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/ruler-h-50px.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/ruler-v-100px.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/ruler-v-50px.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/square-purple.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/square-teal.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/square-white.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/support/swatch-green.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/support/swatch-red.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/swatch-blue.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/swatch-green.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/swatch-lime.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/swatch-orange.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/swatch-red.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/swatch-white.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/swatch-yellow.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/test-bl.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/test-br.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/test-inner-half-size.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/test-outer.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/test-tl.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/support/test-tr.png
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-gradients-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-gradients.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-radial-gradients-ref.html
[add] https://crrev.com/c3eee4c456d5fae94443ca43f50487a37f3d3ede/third_party/WebKit/LayoutTests/external/wpt/css/css-images/tiled-radial-gradients.html

Project Member

Comment 18 by bugdroid1@chromium.org, May 12 2018

Cc: cnardi@chromium.org futhark@chromium.org
Owner: ----
Status: Available (was: Started)

Sign in to add a comment