⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 277997 in webkit


Ignore:
Timestamp:
May 24, 2021, 10:39:12 PM (5 years ago)
Author:
cathiechen
Message:

Use the parsed width and height attributes as a presentational hint for aspect-ratio CSS property
​https://bugs.webkit.org/show_bug.cgi?id=217529

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Update the expected results of test_computed_style which are passed now.

  • web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt:
  • web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio-expected.txt:

Source/WebCore:

The feature "mapping attributes width and height to aspect ratio" currently is handled by RenderReplaced::computeIntrinsicRatioInformation.
However, per [1], the non-negative width and height attributes are expected to be used as a presentational hint for the aspect-ratio property.
This patch addes HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle to apply the attributes to m_presentationAttributeStyle.
Also this patch supports the feature for <video> and <input> with type="image".

[1] ​https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property-(using-dimension-rules)

  • html/HTMLElement.cpp:

(WebCore::HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle): Apply attributes width / height to aspectRatio of style if they aren't negative.

  • html/HTMLElement.h:
  • html/HTMLImageElement.cpp:

(WebCore::HTMLImageElement::collectStyleForPresentationAttribute): Use attributes width and height as a presentational hint for aspect-ratio.

  • html/HTMLInputElement.cpp:

(WebCore::HTMLInputElement::collectStyleForPresentationAttribute): If isImageButton(), collect attributes width and height as aspect-ratio of m_presentationAttributeStyle.

  • html/HTMLVideoElement.cpp:

(WebCore::HTMLVideoElement::collectStyleForPresentationAttribute): Ditto.

  • rendering/RenderImage.cpp:

(WebCore::RenderImage::computeIntrinsicRatioInformation const): The intrinsicRatio is logicalAspectRatio()
if error image is not showing alt text.
(WebCore::RenderImage::canMapWidthHeightToAspectRatio const): Deleted. Remove the legacy code.

  • rendering/RenderImage.h:
  • rendering/RenderReplaced.cpp:

(WebCore::RenderReplaced::computeIntrinsicRatioInformation const): Ditto.
(WebCore::RenderReplaced::intrinsicAspectRatioFromWidthHeight const): Deleted. Ditto.

  • rendering/RenderReplaced.h:

(WebCore::RenderReplaced::canMapWidthHeightToAspectRatio const): Deleted. Ditto.

Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r277970 r277997  
     12021-05-24  Cathie Chen  <cathiechen@igalia.com>
     2
     3        Use the parsed width and height attributes as a presentational hint for aspect-ratio CSS property
     4        https://bugs.webkit.org/show_bug.cgi?id=217529
     5
     6        Reviewed by Antti Koivisto.
     7
     8        Update the expected results of test_computed_style which are passed now.
     9
     10        * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt:
     11        * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio-expected.txt:
     12
    1132021-05-24  Cameron McCormack  <heycam@apple.com>
    214

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt

    r276521 r277997  
    55PASS Create, append and test immediately: <img> with attributes width=0.8, height=0.2
    66PASS Create, append and test immediately: <img> with attributes width=50% height=25%
    7 FAIL Computed style test: img with {"width":"10","height":"20"} assert_equals: expected "auto 10 / 20" but got "auto"
    8 FAIL Computed style test: input with {"type":"image","width":"10","height":"20"} assert_equals: expected "auto 10 / 20" but got "auto"
     7PASS Computed style test: img with {"width":"10","height":"20"}
     8PASS Computed style test: input with {"type":"image","width":"10","height":"20"}
    99PASS Computed style test: input with {"type":"submit","width":"10","height":"20"}
    10 FAIL Computed style test: img with {"width":"0","height":"1"} assert_equals: expected "auto 0 / 1" but got "auto"
    11 FAIL Computed style test: input with {"type":"image","width":"0","height":"1"} assert_equals: expected "auto 0 / 1" but got "auto"
     10PASS Computed style test: img with {"width":"0","height":"1"}
     11PASS Computed style test: input with {"type":"image","width":"0","height":"1"}
    1212PASS Computed style test: input with {"type":"submit","width":"0","height":"1"}
    13 FAIL Computed style test: img with {"width":"1","height":"0"} assert_equals: expected "auto 1 / 0" but got "auto"
    14 FAIL Computed style test: input with {"type":"image","width":"1","height":"0"} assert_equals: expected "auto 1 / 0" but got "auto"
     13PASS Computed style test: img with {"width":"1","height":"0"}
     14PASS Computed style test: input with {"type":"image","width":"1","height":"0"}
    1515PASS Computed style test: input with {"type":"submit","width":"1","height":"0"}
    16 FAIL Computed style test: img with {"width":"0","height":"0"} assert_equals: expected "auto 0 / 0" but got "auto"
    17 FAIL Computed style test: input with {"type":"image","width":"0","height":"0"} assert_equals: expected "auto 0 / 0" but got "auto"
     16PASS Computed style test: img with {"width":"0","height":"0"}
     17PASS Computed style test: input with {"type":"image","width":"0","height":"0"}
    1818PASS Computed style test: input with {"type":"submit","width":"0","height":"0"}
    19 FAIL Computed style test: img with {"width":"0.5","height":"1.5"} assert_equals: expected "auto 0.5 / 1.5" but got "auto"
    20 FAIL Computed style test: input with {"type":"image","width":"0.5","height":"1.5"} assert_equals: expected "auto 0.5 / 1.5" but got "auto"
     19PASS Computed style test: img with {"width":"0.5","height":"1.5"}
     20PASS Computed style test: input with {"type":"image","width":"0.5","height":"1.5"}
    2121PASS Computed style test: input with {"type":"submit","width":"0.5","height":"1.5"}
    2222PASS Computed style test: img with {"width":null,"height":null}

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio-expected.txt

    r277321 r277997  
    11
    22
    3 FAIL Video width and height attributes are not used to infer aspect-ratio assert_approx_equals: expected 2.5 +/- 0.001 but got Infinity
    4 FAIL Computed style test: video with {"width":"10","height":"20"} assert_equals: expected "auto 10 / 20" but got "auto"
    5 FAIL Computed style test: video with {"width":"0.5","height":"1.5"} assert_equals: expected "auto 0.5 / 1.5" but got "auto"
     3PASS Video width and height attributes are not used to infer aspect-ratio
     4PASS Computed style test: video with {"width":"10","height":"20"}
     5PASS Computed style test: video with {"width":"0.5","height":"1.5"}
    66PASS Computed style test: video with {"width":"0","height":"1"}
    77PASS Computed style test: video with {"width":"1","height":"0"}

  • trunk/Source/WebCore/ChangeLog

    r277996 r277997  
     12021-05-24  Cathie Chen  <cathiechen@igalia.com>
     2
     3        Use the parsed width and height attributes as a presentational hint for aspect-ratio CSS property
     4        https://bugs.webkit.org/show_bug.cgi?id=217529
     5
     6        Reviewed by Antti Koivisto.
     7
     8        The feature "mapping attributes width and height to aspect ratio" currently is handled by RenderReplaced::computeIntrinsicRatioInformation.
     9        However, per [1], the non-negative width and height attributes are expected to be used as a presentational hint for the aspect-ratio property.
     10        This patch addes HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle to apply the attributes to m_presentationAttributeStyle.
     11        Also this patch supports the feature for <video> and <input> with type="image".
     12
     13        [1] https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property-(using-dimension-rules)
     14
     15        * html/HTMLElement.cpp:
     16        (WebCore::HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle): Apply attributes width / height to aspectRatio of style if they aren't negative.
     17        * html/HTMLElement.h:
     18        * html/HTMLImageElement.cpp:
     19        (WebCore::HTMLImageElement::collectStyleForPresentationAttribute): Use attributes width and height as a presentational hint for aspect-ratio.
     20        * html/HTMLInputElement.cpp:
     21        (WebCore::HTMLInputElement::collectStyleForPresentationAttribute): If isImageButton(), collect attributes width and height as aspect-ratio of m_presentationAttributeStyle.
     22        * html/HTMLVideoElement.cpp:
     23        (WebCore::HTMLVideoElement::collectStyleForPresentationAttribute): Ditto.
     24        * rendering/RenderImage.cpp:
     25        (WebCore::RenderImage::computeIntrinsicRatioInformation const): The intrinsicRatio is logicalAspectRatio()
     26        if error image is not showing alt text.
     27        (WebCore::RenderImage::canMapWidthHeightToAspectRatio const): Deleted. Remove the legacy code.
     28        * rendering/RenderImage.h:
     29        * rendering/RenderReplaced.cpp:
     30        (WebCore::RenderReplaced::computeIntrinsicRatioInformation const): Ditto.
     31        (WebCore::RenderReplaced::intrinsicAspectRatioFromWidthHeight const): Deleted. Ditto.
     32        * rendering/RenderReplaced.h:
     33        (WebCore::RenderReplaced::canMapWidthHeightToAspectRatio const): Deleted. Ditto.
     34
    1352021-05-24  Commit Queue  <commit-queue@webkit.org>
    236

  • trunk/Source/WebCore/html/HTMLElement.cpp

    r277527 r277997  
    2929#include "CSSPropertyNames.h"
    3030#include "CSSValueKeywords.h"
     31#include "CSSValueList.h"
    3132#include "CSSValuePool.h"
    3233#include "Chrome.h"
    … …  
    621622}
    622623
     624void HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle(MutableStyleProperties& style)
     625{
     626    if (!document().settings().aspectRatioOfImgFromWidthAndHeightEnabled())
     627        return;
     628
     629    double width = parseValidHTMLFloatingPointNumber(attributeWithoutSynchronization(widthAttr)).valueOr(-1);
     630    if (width < 0)
     631        return;
     632    double height = parseValidHTMLFloatingPointNumber(attributeWithoutSynchronization(heightAttr)).valueOr(-1);
     633    if (height < 0)
     634        return;
     635
     636    auto ratioList = CSSValueList::createSlashSeparated();
     637    ratioList->append(CSSValuePool::singleton().createValue(width, CSSUnitType::CSS_NUMBER));
     638    ratioList->append(CSSValuePool::singleton().createValue(height, CSSUnitType::CSS_NUMBER));
     639    auto list = CSSValueList::createSpaceSeparated();
     640    list->append(CSSValuePool::singleton().createIdentifierValue(CSSValueAuto));
     641    list->append(ratioList);
     642
     643    style.setProperty(CSSPropertyAspectRatio, RefPtr<CSSValue>(WTFMove(list)));
     644}
     645
    623646void HTMLElement::applyAlignmentAttributeToStyle(const AtomString& alignment, MutableStyleProperties& style)
    624647{

  • trunk/Source/WebCore/html/HTMLElement.h

    r276746 r277997  
    155155    void addHTMLColorToStyle(MutableStyleProperties&, CSSPropertyID, const String& color);
    156156
     157    void applyAspectRatioFromWidthAndHeightAttributesToStyle(MutableStyleProperties&);
    157158    void applyAlignmentAttributeToStyle(const AtomString&, MutableStyleProperties&);
    158159    void applyBorderAttributeToStyle(const AtomString&, MutableStyleProperties&);

  • trunk/Source/WebCore/html/HTMLImageElement.cpp

    r277967 r277997  
    116116void HTMLImageElement::collectStyleForPresentationAttribute(const QualifiedName& name, const AtomString& value, MutableStyleProperties& style)
    117117{
    118     if (name == widthAttr)
     118    if (name == widthAttr) {
    119119        addHTMLLengthToStyle(style, CSSPropertyWidth, value);
    120     else if (name == heightAttr)
     120        applyAspectRatioFromWidthAndHeightAttributesToStyle(style);
     121    } else if (name == heightAttr) {
    121122        addHTMLLengthToStyle(style, CSSPropertyHeight, value);
    122     else if (name == borderAttr)
     123        applyAspectRatioFromWidthAndHeightAttributesToStyle(style);
     124    } else if (name == borderAttr)
    123125        applyBorderAttributeToStyle(value, style);
    124126    else if (name == vspaceAttr) {

  • trunk/Source/WebCore/html/HTMLInputElement.cpp

    r277269 r277997  
    708708        if (m_inputType->shouldRespectHeightAndWidthAttributes())
    709709            addHTMLLengthToStyle(style, CSSPropertyWidth, value);
     710        if (isImageButton())
     711            applyAspectRatioFromWidthAndHeightAttributesToStyle(style);
    710712    } else if (name == heightAttr) {
    711713        if (m_inputType->shouldRespectHeightAndWidthAttributes())
    712714            addHTMLLengthToStyle(style, CSSPropertyHeight, value);
     715        if (isImageButton())
     716            applyAspectRatioFromWidthAndHeightAttributesToStyle(style);
    713717    } else if (name == borderAttr && isImageButton())
    714718        applyBorderAttributeToStyle(value, style);

  • trunk/Source/WebCore/html/HTMLVideoElement.cpp

    r277986 r277997  
    114114void HTMLVideoElement::collectStyleForPresentationAttribute(const QualifiedName& name, const AtomString& value, MutableStyleProperties& style)
    115115{
    116     if (name == widthAttr)
     116    if (name == widthAttr) {
    117117        addHTMLLengthToStyle(style, CSSPropertyWidth, value);
    118     else if (name == heightAttr)
     118        applyAspectRatioFromWidthAndHeightAttributesToStyle(style);
     119    } else if (name == heightAttr) {
    119120        addHTMLLengthToStyle(style, CSSPropertyHeight, value);
    120     else
     121        applyAspectRatioFromWidthAndHeightAttributesToStyle(style);
     122    } else
    121123        HTMLMediaElement::collectStyleForPresentationAttribute(name, value, style);
    122124}

  • trunk/Source/WebCore/rendering/RenderImage.cpp

    r277321 r277997  
    843843}
    844844
    845 bool RenderImage::canMapWidthHeightToAspectRatio() const
    846 {
    847     // The aspectRatioOfImgFromWidthAndHeight only applies to <img>.
    848     return is<HTMLImageElement>(element()) && !isShowingAltText();
    849 }
    850 
    851845void RenderImage::computeIntrinsicRatioInformation(FloatSize& intrinsicSize, double& intrinsicRatio) const
    852846{
    … …  
    866860    // Don't compute an intrinsic ratio to preserve historical WebKit behavior if we're painting alt text and/or a broken image.
    867861    if (shouldDisplayBrokenImageIcon()) {
    868         if (!style().hasAspectRatio()) {
    869             intrinsicRatio = intrinsicAspectRatioFromWidthHeight().valueOr(1);
    870             return;
    871         }
    872         intrinsicRatio = 1;
     862        if (settings().aspectRatioOfImgFromWidthAndHeightEnabled()
     863            && style().aspectRatioType() == AspectRatioType::AutoAndRatio && !isShowingAltText())
     864            intrinsicRatio = style().logicalAspectRatio();
     865        else
     866            intrinsicRatio = 1;
    873867        return;
    874868    }

  • trunk/Source/WebCore/rendering/RenderImage.h

    r276521 r277997  
    104104    }
    105105
    106     bool canMapWidthHeightToAspectRatio() const override;
    107 
    108106private:
    109107    const char* renderName() const override { return "RenderImage"; }

  • trunk/Source/WebCore/rendering/RenderReplaced.cpp

    r277802 r277997  
    479479}
    480480
    481 Optional<double> RenderReplaced::intrinsicAspectRatioFromWidthHeight() const
    482 {
    483     if (!settings().aspectRatioOfImgFromWidthAndHeightEnabled())
    484         return Optional<double>();
    485 
    486     if (!canMapWidthHeightToAspectRatio())
    487         return Optional<double>();
    488 
    489     ASSERT(element());
    490     double attributeWidth = parseValidHTMLFloatingPointNumber(element()->getAttribute(HTMLNames::widthAttr)).valueOr(0);
    491     double attributeHeight = parseValidHTMLFloatingPointNumber(element()->getAttribute(HTMLNames::heightAttr)).valueOr(0);
    492     if (attributeWidth > 0 && attributeHeight > 0)
    493         return attributeWidth / attributeHeight;
    494 
    495     return Optional<double>();
    496 }
    497 
    498481void RenderReplaced::computeIntrinsicRatioInformation(FloatSize& intrinsicSize, double& intrinsicRatio) const
    499482{
    … …  
    511494        return;
    512495
    513     if (intrinsicSize.isEmpty()) {
    514         intrinsicRatio = intrinsicAspectRatioFromWidthHeight().valueOr(0);
     496    if (intrinsicSize.isEmpty())
    515497        return;
    516     }
    517498
    518499    intrinsicRatio = intrinsicSize.width() / intrinsicSize.height();

  • trunk/Source/WebCore/rendering/RenderReplaced.h

    r277802 r277997  
    6464    void computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const final;
    6565
    66     // This function determines if the object is allowed to compute aspect ratio from attributes width and height.
    67     virtual bool canMapWidthHeightToAspectRatio() const { return false; }
    68     Optional<double> intrinsicAspectRatioFromWidthHeight() const;
    69 
    7066    virtual LayoutUnit minimumReplacedHeight() const { return 0_lu; }
    7167
Note: See TracChangeset for help on using the changeset viewer.