Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Starred by 9 users
Status: Fixed
Owner:
Closed: Aug 2013
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Compat



Sign in to add a comment
Object-fit not supported
Project Member Reported by msten...@opera.com, Apr 29 2013 Back to list
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.63 Safari/537.31

Example URL:

Steps to reproduce the problem:
Adding support for object-fit trivial, and the spec is in CR.
http://www.w3.org/TR/2012/CR-css3-images-20120417/

Same issue in WebKit's BTS: https://bugs.webkit.org/show_bug.cgi?id=52040

What is the expected behavior?

What went wrong?
N/A, and I'm starting to think that using the issue wizard to add feature requests probably isn't the right way. :)

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 Opera 12 (the property is prefixed)

Chrome version: 26.0.1410.63  Channel: stable
OS Version: 

I have a patch ready.
 
Comment 1 by msten...@opera.com, Apr 29 2013
See 236333 for the related object-position property.
Comment 2 by msten...@opera.com, Apr 29 2013
Regarding the patch: I should probably hold it back until the intent to implement and ship [1] has been LTGMed heavily enough (or add a patch with runtime flags).

[1] https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ucynLrNXheo
Comment 3 by msten...@opera.com, Jul 9 2013
Owner: msten...@opera.com
Status: Assigned
Comment 4 by msten...@opera.com, Jul 9 2013
Labels: Cr-Blink
Project Member Comment 5 by bugdroid1@chromium.org, Aug 22 2013
The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=156535

------------------------------------------------------------------------
r156535 | pdr@chromium.org | 2013-08-22T03:33:30.916810Z

Changed paths:
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/parsing-object-fit.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderHTMLCanvas.cpp?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyleConstants.h?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPropertyNames.in?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/StyleRareNonInheritedData.h?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-img-svg2-expected.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-shrink.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderReplaced.h?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/media/video-object-fit-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/media/video-object-fit.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/http/tests/css/object-fit-delayed-img-svg.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSComputedStyleDeclaration.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-object.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-grow-landscape.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-img-svg.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderImageResource.h?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-canvas-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-img-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-img.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-input-image-expected.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.h?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-grow-portrait-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-grow-portrait.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/platform/graphics/LayoutRect.h?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSProperty.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/resources/circle.svg?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/http/tests/css/resources/delayedCircle.php?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderCustom.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-img-svg2.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/resources/circles-portrait.png?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/platform/graphics/LayoutSize.h?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSParser-in.cpp?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderImage.h?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/resources/circles-portrait-small.png?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/resources/circle2.svg?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/http/tests/css/resources/circle.svg?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValueMappings.h?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-img-svg-expected.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/RenderStyle.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-embed-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-canvas.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/platform/graphics/LayoutRect.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-embed.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSProperties.in?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-input-image.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/media/video-object-fit-change-expected.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/fetch/ImageResource.h?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/page/RuntimeEnabledFeatures.in?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderImage.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-shrink-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/http/tests/css/object-fit-delayed-img-svg-expected.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/page/UseCounter.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-grow-landscape-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-object-expected.html?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/parsing-object-fit-expected.txt?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-video-poster-expected.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderVideo.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/object-fit-video-poster.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/fetch/ImageResource.cpp?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/page/RuntimeCSSEnabled.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/resources/circles-landscape.png?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/media/video-object-fit-change.html?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/StyleRareNonInheritedData.cpp?r1=156535&r2=156534&pathrev=156535
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/resources/circles-landscape-small.png?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderReplaced.cpp?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderImageResourceStyleImage.h?r1=156535&r2=156534&pathrev=156535
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/html.css?r1=156535&r2=156534&pathrev=156535

Add support for the object-fit CSS property.

This is hidden behind an "experimental" runtime flag named
"ObjectFitPosition". Once object-fit's "sister" property, object-position,
is implemented, the plan is to also put that behind this flag, too.

This is an implementation of object-fit as described in
http://www.w3.org/TR/2012/CR-css3-images-20120417/#object-fit

Object-fit is used to maintain the aspect ratio of replaced content
within its content box. All object-fit values except the initial one
('fill') will always ensure that the aspect ratio is retained, in
different ways (fit inside the content box, cover the content box, or
use intrinsic size). Painting is always clipped against the content
box, regardless of the 'overflow' property.

Video elements used to behave like 'object-fit:contain', while the
initial value is, as mentioned above, 'fill'. Therefore we need a
section for video in the UA style sheet.

Introducing RenderImageResource::intrinsicSize(). We cannot use
imageSize(), since it may return the extrinsic size for SVG images.

Parts of this patch (both code and layout tests) are based on work
originally done by Simon Fraser <simon.fraser@apple.com>.
See https://bugs.webkit.org/show_bug.cgi?id=52040

BUG= 236331 
R=pdr@chromium.org

Review URL: https://codereview.chromium.org/22482004

Patch from Morten Stenshorne <mstensho@opera.com>.
------------------------------------------------------------------------
Comment 6 by msten...@opera.com, Aug 22 2013
Status: Fixed
Project Member Comment 7 by bugdroid1@chromium.org, Oct 5 2013
The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=158982

------------------------------------------------------------------------
r158982 | mstensho@opera.com | 2013-10-05T07:46:14.501013Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/media/stable/video-object-fit-stable-expected.html?r1=158982&r2=158981&pathrev=158982
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/page/RuntimeEnabledFeatures.in?r1=158982&r2=158981&pathrev=158982
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt?r1=158982&r2=158981&pathrev=158982

Ship object-fit and object-position.

Change runtime flag ObjectFitPosition from experimental to stable.

BUG= 236331 , 236333 

Review URL: https://codereview.chromium.org/25761005
------------------------------------------------------------------------
Is it just me or we can't use object-fit/position in Canary by default?
Comment 9 by msten...@opera.com, Oct 8 2013
Both properties are enabled by default now (since Saturday), but I don't know how far behind Canary is.
Comment 10 Deleted
>chrome://version
>Google Chrome 32.0.1664.0
>Blink 537.36 (@158971)
>http://src.chromium.org/viewvc/blink?view=rev&rev=158982

158971 < 158982 so nevermind.
Comment 12 Deleted
Sign in to add a comment