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

Issue 874629 link

Starred by 10 users
Status: Fixed
Owner:
█ loonyb...@chromium.org
Last visit > 30 days ago
Closed: Sep 11
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 1
Type: Feature



Sign in to add a comment

Implement intrinsic size attribute

Project Member Reported by loonyb...@chromium.org, Aug 15 
This is the tracking bug for the implementation of 'intrinsicsize' attribute. This attribute will be used to specify intrinsic size (therefore maintain aspect ratio) for media elements (<img>, <video>, and <svg:image>)


Link to explainer: https://github.com/ojanvafai/intrinsicsize-attribute

Link to chromestatus report: https://www.chromestatus.com/feature/4704436815396864

Comment 1 by loonyb...@chromium.org, Aug 15

Description: Show this description

Comment 2 by tobias.b...@gmail.com, Aug 22 

Just in case, i made a polyfill:
https://github.com/ojanvafai/intrinsicsize-attribute
Project Member

Comment 4 by bugdroid1@chromium.org, Aug 29 

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

commit bd4c33b5e81d495ecdac66b0375924d9565330cb
Author: Luna Lu <loonybear@chromium.org>
Date: Wed Aug 29 15:55:42 2018

Add intrinsicsize attribute to HTMLImageElement behind a flag

Design doc: https://docs.google.com/document/d/1yh_-ayeaFV0EjuR51U641zbrPAB0Baqj6UrC9bT9iqQ/edit#heading=h.y7amr11fn0tb

This CL implements "intrinsicsize" attribute for HTMLImageElement.
The value of "intrinsicsize" overrides the intrinsic size:

1. When no width and (or) height is specified, the value of
"intrinsicsize" will be used to determine the area to layout the image
content.

2. natualWidth and naturalHeight will return the density corrected
value of "intrinsicsize".

See explainer: https://github.com/ojanvafai/intrinsicsize-attribute/blob/master/README.md

BUG:  874629 
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: I519f01841ee3e761b22874dbecd74f7e6843e2a9
Reviewed-on: https://chromium-review.googlesource.com/1150725
Commit-Queue: Luna Lu <loonybear@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#587132}
[add] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicSize-with-responsive-images.tentative.https.sub.html
[add] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicSize-without-unsized-media.tentative.https.sub.html
[add] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-without-unsized-media.tentative.https.sub.html.headers
[add] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/http/tests/feature-policy/intrinsicsize-with-zoom-in-and-out.html
[add] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/http/tests/feature-policy/resources/green-circle.svg
[add] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/http/tests/feature-policy/resources/green.jpg
[add] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/http/tests/feature-policy/resources/green.png
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/webexposed/element-instance-property-listing-expected.txt
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/WebKit/LayoutTests/webexposed/global-interface-listing-expected.txt
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/blink/renderer/core/html/html_attribute_names.json5
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/blink/renderer/core/html/html_image_element.cc
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/blink/renderer/core/html/html_image_element.h
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/blink/renderer/core/html/html_image_element.idl
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/blink/renderer/core/layout/layout_image.cc
[modify] https://crrev.com/bd4c33b5e81d495ecdac66b0375924d9565330cb/third_party/blink/renderer/core/layout/layout_image.h

Comment 5 by loonyb...@chromium.org, Aug 29

Status: Started (was: Assigned)
Project Member

Comment 6 by bugdroid1@chromium.org, Aug 30 

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

commit 7086e61d83ab978a2e09555fbbc59ca0fedbc11c
Author: Luna Lu <loonybear@chromium.org>
Date: Thu Aug 30 18:24:08 2018

Add "intrinsicSize" attribute to HTMLVideoElement behind a flag

This CL is based on: https://chromium-review.googlesource.com/c/chromium/src/+/1150725

Design doc: https://docs.google.com/document/d/1yh_-ayeaFV0EjuR51U641zbrPAB0Baqj6UrC9bT9iqQ/edit#heading=h.y7amr11fn0tb

This CL implements "intrinsicSize" attribute for HTMLVideoElement.
The value of "intrinsicSize" overrides the intrinsic size:

1. When no width and (or) height is specified, the value of
"intrinsicSize" will be used to determine the area to layout the video
content.

2. videoWidth and videoHeight will return the value defined by
"intrinsicSize".

See explainer: https://github.com/ojanvafai/intrinsicsize-attribute/blob/master/README.md

Bug:  874629 
Change-Id: If4aeceee2299c50aa7b4c9bdf8fef7cb3e7eea70
Reviewed-on: https://chromium-review.googlesource.com/1191926
Commit-Queue: Luna Lu <loonybear@chromium.org>
Reviewed-by: Steve Kobes <skobes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#587667}
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicSize-without-unsized-media.tentative.https.sub.html
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/WebKit/LayoutTests/webexposed/element-instance-property-listing-expected.txt
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/WebKit/LayoutTests/webexposed/global-interface-listing-expected.txt
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/blink/renderer/core/html/html_image_element.cc
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/blink/renderer/core/html/media/html_video_element.cc
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/blink/renderer/core/html/media/html_video_element.h
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/blink/renderer/core/html/media/html_video_element.idl
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/blink/renderer/core/layout/layout_video.cc
[modify] https://crrev.com/7086e61d83ab978a2e09555fbbc59ca0fedbc11c/third_party/blink/renderer/core/layout/layout_video.h
Project Member

Comment 7 by bugdroid1@chromium.org, Aug 30 

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

commit 4ac27ef92b7aa7d25ff4add8aa97925fd2cdef67
Author: Luna Lu <loonybear@chromium.org>
Date: Thu Aug 30 21:26:12 2018

HTMLImageElement intrinsicSize attribute override intrinsic aspect ratio for responsive images

The CL https://chromium.googlesource.com/chromium/src/+/bd4c33b5e81d495ecdac66b0375924d9565330cb
did not handle responsive images correctly. This CL resets
overridden_intrinsic_size_:
When source is chosen using W descriptor, 'sizes' sets the new width
of the overridden_intrinsic_size_, and the new height is calculated
by the aspect ratio defined by the intrinsicSize attribute.

Bug:  874629 
Change-Id: I16b2f6c2fb9ae741144ba509c57f1e033c8cdc17
Reviewed-on: https://chromium-review.googlesource.com/1195801
Commit-Queue: Luna Lu <loonybear@chromium.org>
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#587774}
[modify] https://crrev.com/4ac27ef92b7aa7d25ff4add8aa97925fd2cdef67/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicSize-with-responsive-images.tentative.https.sub.html
[modify] https://crrev.com/4ac27ef92b7aa7d25ff4add8aa97925fd2cdef67/third_party/blink/renderer/core/html/html_image_element.cc
[modify] https://crrev.com/4ac27ef92b7aa7d25ff4add8aa97925fd2cdef67/third_party/blink/renderer/core/html/html_image_element.h
Project Member

Comment 8 by bugdroid1@chromium.org, Sep 10 

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

commit 67f6a55513642f2d838d9de705bf4fdb79da36f9
Author: Luna Lu <loonybear@chromium.org>
Date: Mon Sep 10 19:02:00 2018

Move the common parsing logic for intrinsicSize attribute to a shared namespace

The logic for parsing intrinsicSize attribute is shared among
HTML{Image,Video}Element and SVGImageElement. Moving it to
blink/core/html/media/media_element_parser_helpers to avoidredundant
code.

Bug:  874629 
Change-Id: I20e1dc6b626eb86e8919c621b1c98401eaa9d201
Reviewed-on: https://chromium-review.googlesource.com/1217163
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Luna Lu <loonybear@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590008}
[modify] https://crrev.com/67f6a55513642f2d838d9de705bf4fdb79da36f9/third_party/blink/renderer/core/html/BUILD.gn
[modify] https://crrev.com/67f6a55513642f2d838d9de705bf4fdb79da36f9/third_party/blink/renderer/core/html/html_image_element.cc
[modify] https://crrev.com/67f6a55513642f2d838d9de705bf4fdb79da36f9/third_party/blink/renderer/core/html/html_image_element.h
[modify] https://crrev.com/67f6a55513642f2d838d9de705bf4fdb79da36f9/third_party/blink/renderer/core/html/media/html_video_element.cc
[modify] https://crrev.com/67f6a55513642f2d838d9de705bf4fdb79da36f9/third_party/blink/renderer/core/html/media/html_video_element.h
[add] https://crrev.com/67f6a55513642f2d838d9de705bf4fdb79da36f9/third_party/blink/renderer/core/html/media/media_element_parser_helpers.cc
[add] https://crrev.com/67f6a55513642f2d838d9de705bf4fdb79da36f9/third_party/blink/renderer/core/html/media/media_element_parser_helpers.h
Project Member

Comment 9 by bugdroid1@chromium.org, Sep 10 

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

commit 6e91cad54241e5ecc64a22c5c01432179cb91ee2
Author: Luna Lu <loonybear@chromium.org>
Date: Mon Sep 10 21:17:06 2018

Add intrinsicSize attribute to SVGImageElement

Design doc: https://docs.google.com/document/d/1yh_-ayeaFV0EjuR51U641zbrPAB0Baqj6UrC9bT9iqQ/edit#heading=h.y7amr11fn0tb

This CL implements "intrinsicSize" attribute to SVGImageElement. This
attribute has been added to HTMLImageElement and HTMLVideoElement.
The value of "intrinsicSize" overrides the intrinsic size:

1. When no width and height is specified, the value of "intrinsicSize"
specifies the <svg:image> element's layout size.
2. When one dimension is specified, the value of "intrinsicSize" is
used as an aspect ratio to determine the other dimension.
3. If both width and height are specified, "intrinsicSize" has no
effect.

Bug:  874629 
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: I9023d6cf7a818c983155efc12505f1d6fd18de43
Reviewed-on: https://chromium-review.googlesource.com/1210544
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Luna Lu <loonybear@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590065}
[add] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-svg-image-ref.html
[add] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-svg-image.tentative.html
[rename] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-with-responsive-images.tentative.html
[rename] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-without-unsized-media.tentative.https.sub.html
[modify] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/WebKit/LayoutTests/webexposed/element-instance-property-listing-expected.txt
[modify] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/blink/renderer/core/layout/svg/layout_svg_image.cc
[modify] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/blink/renderer/core/layout/svg/layout_svg_image.h
[modify] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/blink/renderer/core/svg/svg_attribute_names.json5
[modify] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/blink/renderer/core/svg/svg_image_element.cc
[modify] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/blink/renderer/core/svg/svg_image_element.h
[modify] https://crrev.com/6e91cad54241e5ecc64a22c5c01432179cb91ee2/third_party/blink/renderer/core/svg/svg_image_element.idl
Project Member

Comment 10 by bugdroid1@chromium.org, Sep 11 

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

commit 55b20e2468a1537c2891b87cdb41cb676b3b538d
Author: Luna Lu <loonybear@chromium.org>
Date: Tue Sep 11 16:45:38 2018

Update "unsized-media" policy with respect to "intrinsicSize" attribute

For details, please see https://docs.google.com/document/d/1yh_-ayeaFV0EjuR51U641zbrPAB0Baqj6UrC9bT9iqQ/edit#heading=h.7qo26jlhd6ob

BUG: 874113,  874629 
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Change-Id: I0762229d550bb7b06518f22657113b4a52e3da6b
Reviewed-on: https://chromium-review.googlesource.com/1199858
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Luna Lu <loonybear@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590346}
[add] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-with-unsized-media.tentative.https.sub.html
[copy] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-with-unsized-media.tentative.https.sub.html.headers
[rename] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/unsized-media.tentative.https.sub.html
[rename] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/unsized-media.tentative.https.sub.html.headers
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/css/resolver/style_adjuster.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/html/html_image_element.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/html/html_image_element.h
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/html/media/html_video_element.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/html/media/html_video_element.h
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/html/media/media_element_parser_helpers.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/html/media/media_element_parser_helpers.h
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/layout/layout_image.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/layout/layout_video.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/layout/layout_video.h
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/layout/svg/layout_svg_image.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/svg/svg_image_element.cc
[modify] https://crrev.com/55b20e2468a1537c2891b87cdb41cb676b3b538d/third_party/blink/renderer/core/svg/svg_image_element.h

Comment 11 by loonyb...@chromium.org, Sep 11

Description: Show this description

Comment 12 by loonyb...@chromium.org, Sep 11

Description: Show this description
Project Member

Comment 13 by bugdroid1@chromium.org, Sep 11 

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

commit 21b4181d1ba86700176f7bcb55a1db9171374c12
Author: Luna Lu <loonybear@chromium.org>
Date: Tue Sep 11 19:25:05 2018

move wpt for intrinsicsize to the right directory

TBR: iclelland@chromium.org
Bug:  874629 
Change-Id: Ia5346b73344bf33dd1446591b85acf0d6a608e9b
Reviewed-on: https://chromium-review.googlesource.com/1220091
Commit-Queue: Luna Lu <loonybear@chromium.org>
Reviewed-by: Luna Lu <loonybear@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590435}
[delete] https://crrev.com/8ee01678ce0afa3b0028df16eb532185bfb830af/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-svg-image-ref.html
[delete] https://crrev.com/8ee01678ce0afa3b0028df16eb532185bfb830af/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-svg-image.tentative.html
[delete] https://crrev.com/8ee01678ce0afa3b0028df16eb532185bfb830af/third_party/WebKit/LayoutTests/external/wpt/feature-policy/experimental-features/intrinsicsize-without-unsized-media.tentative.https.sub.html
[add] https://crrev.com/21b4181d1ba86700176f7bcb55a1db9171374c12/third_party/WebKit/LayoutTests/external/wpt/html/semantics/embedded-content/svg/intrinsicsize/intrinsicsize-svg-image-ref.html
[add] https://crrev.com/21b4181d1ba86700176f7bcb55a1db9171374c12/third_party/WebKit/LayoutTests/external/wpt/html/semantics/embedded-content/svg/intrinsicsize/intrinsicsize-svg-image.tentative.html
[rename] https://crrev.com/21b4181d1ba86700176f7bcb55a1db9171374c12/third_party/WebKit/LayoutTests/external/wpt/html/semantics/embedded-content/the-img-element/intrinsicsize/intrinsicsize-with-responsive-images.tentative.html
[add] https://crrev.com/21b4181d1ba86700176f7bcb55a1db9171374c12/third_party/WebKit/LayoutTests/external/wpt/html/semantics/embedded-content/the-img-element/intrinsicsize/intrinsicsize-without-unsized-media.tentative.https.sub.html
[rename] https://crrev.com/21b4181d1ba86700176f7bcb55a1db9171374c12/third_party/WebKit/LayoutTests/external/wpt/html/semantics/embedded-content/the-img-element/intrinsicsize/intrinsicsize-without-unsized-media.tentative.https.sub.html.headers
[add] https://crrev.com/21b4181d1ba86700176f7bcb55a1db9171374c12/third_party/WebKit/LayoutTests/external/wpt/html/semantics/embedded-content/the-video-element/intrinsicsize/intrinsicsize-without-unsized-media.tentative.https.sub.html
[copy] https://crrev.com/21b4181d1ba86700176f7bcb55a1db9171374c12/third_party/WebKit/LayoutTests/external/wpt/html/semantics/embedded-content/the-video-element/intrinsicsize/intrinsicsize-without-unsized-media.tentative.https.sub.html.headers

Comment 14 by loonyb...@chromium.org, Sep 11

Status: Fixed (was: Started)
Now that intrinsic size is implemented behind a flag and has (tentative) WPT coverage. So closing this as fixed.
►

Sign in to add a comment