Attachment #431642 for bug #222368

View Details Raw Unified Return to Bug 222368

| Differences between



2021-06-17  Cathie Chen  <cathiechen@igalia.com>

        Implement width and height attributes on source elements of <picture>
        https://bugs.webkit.org/show_bug.cgi?id=222368

        Reviewed by NOBODY (OOPS!).

        This patch implement
        According to [1], the source element supports dimension attributes. The img element can use the width
        and height attributes of the source element to determine its rendered dimensions and aspect-ratio.
        In order to implement this, add m_sourceElement to HTMLImageElement to indicate the source element that
        is selected. Also add invalidateAttributeMapping() to synchronous the changes of source's attributes
        to the img element. Then add collectExtraStyleForPresentationalHints() to collect style from source attributes.

        [1] https://html.spec.whatwg.org/#the-source-element

        * dom/ElementData.h:
        * dom/StyledElement.cpp:
        (WebCore::StyledElement::rebuildPresentationalHintStyle): collectExtraStyleForPresentationalHints() when rebuild.
        * dom/StyledElement.h:
        (WebCore::StyledElement::collectExtraStyleForPresentationalHints): Add an interface to collect extra style from other elements.
        * html/HTMLElement.cpp:
        (WebCore::HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle): Add width and height attributes as input variables.
        * html/HTMLElement.h:
        * html/HTMLImageElement.cpp:
        (WebCore::HTMLImageElement::collectPresentationalHintsForAttribute):
        (WebCore::HTMLImageElement::collectExtraStyleForPresentationalHints): If source element has width or height attributes, apply them
        to width, height and aspect-ratio of the style.
        (WebCore::HTMLImageElement::bestFitSourceFromPictureElement): Keep the source element.
        (WebCore::HTMLImageElement::selectImageSource): Reset the source element to null if no candidate is found.
        (WebCore::HTMLImageElement::sourceElement const):
        (WebCore::HTMLImageElement::setSourceElement):
        (WebCore::HTMLImageElement::invalidateAttributeMapping): Invalidate the presentationalHintStyle.
        * html/HTMLImageElement.h:
        * html/HTMLInputElement.cpp:
        (WebCore::HTMLInputElement::collectPresentationalHintsForAttribute):
        * html/HTMLPictureElement.cpp:
        (WebCore::HTMLPictureElement::sourceAttributeChanged): Call invalidateAttributeMapping if source element's attributes are changed.
        * html/HTMLPictureElement.h:
        * html/HTMLSourceElement.cpp:
        (WebCore::HTMLSourceElement::attributeChanged): Call sourceAttributeChanged if width or height attributes are changed.
        * html/HTMLSourceElement.h:
        * html/HTMLSourceElement.idl:
        * html/HTMLVideoElement.cpp:
        (WebCore::HTMLVideoElement::collectPresentationalHintsForAttribute):

2021-06-11  Megan Gardner  <megan_gardner@apple.com>

        Rename AppHighlight group to QuickNote to correctly reflect feature.

Lines 170-175 private: a/Source/WebCore/dom/ElementData.h_sec1
- a/Source/WebCore/dom/ElementData.h +1 lines
170	friend class ShareableElementData;	170	friend class ShareableElementData;
171	friend class UniqueElementData;	171	friend class UniqueElementData;
172	friend class SVGElement;	172	friend class SVGElement;
		173	friend class HTMLImageElement;
173		174
174	void destroy();	175	void destroy();
175		176

Lines 296-301 void StyledElement::rebuildPresentationalHintStyle() a/Source/WebCore/dom/StyledElement.cpp_sec1
- a/Source/WebCore/dom/StyledElement.cpp +2 lines
296	for (const Attribute& attribute : attributesIterator())	296	for (const Attribute& attribute : attributesIterator())
297	collectPresentationalHintsForAttribute(attribute.name(), attribute.value(), static_cast<MutableStyleProperties&>(*style));	297	collectPresentationalHintsForAttribute(attribute.name(), attribute.value(), static_cast<MutableStyleProperties&>(*style));
298		298
		299	collectExtraStyleForPresentationalHints(static_cast<MutableStyleProperties&>(*style));
		300
299	// ShareableElementData doesn't store presentation attribute style, so make sure we have a UniqueElementData.	301	// ShareableElementData doesn't store presentation attribute style, so make sure we have a UniqueElementData.
300	UniqueElementData& elementData = ensureUniqueElementData();	302	UniqueElementData& elementData = ensureUniqueElementData();
301		303

Lines 64-69 public: a/Source/WebCore/dom/StyledElement.h_sec1
- a/Source/WebCore/dom/StyledElement.h +1 lines
64	const StyleProperties* presentationalHintStyle() const;	64	const StyleProperties* presentationalHintStyle() const;
65	virtual void collectPresentationalHintsForAttribute(const QualifiedName&, const AtomString&, MutableStyleProperties&) { }	65	virtual void collectPresentationalHintsForAttribute(const QualifiedName&, const AtomString&, MutableStyleProperties&) { }
66	virtual const StyleProperties* additionalPresentationalHintStyle() const { return nullptr; }	66	virtual const StyleProperties* additionalPresentationalHintStyle() const { return nullptr; }
		67	virtual void collectExtraStyleForPresentationalHints(MutableStyleProperties&) { }
67		68
68	protected:	69	protected:
69	StyledElement(const QualifiedName& name, Document& document, ConstructionType type)	70	StyledElement(const QualifiedName& name, Document& document, ConstructionType type)



    return { };
}

void HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle(StringView widthAttribute, StringView heightAttribute, MutableStyleProperties& style)
{
    if (!document().settings().aspectRatioOfImgFromWidthAndHeightEnabled())
        return;

    auto dimensionWidth = parseHTMLDimension(widthAttribute);
    if (!dimensionWidth || dimensionWidth->type != HTMLDimension::Type::Pixel)
        return;
    auto dimensionHeight = parseHTMLDimension(heightAttribute);
    if (!dimensionHeight || dimensionHeight->type != HTMLDimension::Type::Pixel)
        return;


Lines 157-163 protected: a/Source/WebCore/html/HTMLElement.h_sec1
- a/Source/WebCore/html/HTMLElement.h -1 / +1 lines
157		157
158	void addHTMLColorToStyle(MutableStyleProperties&, CSSPropertyID, const String& color);	158	void addHTMLColorToStyle(MutableStyleProperties&, CSSPropertyID, const String& color);
159		159
160	void applyAspectRatioFromWidthAndHeightAttributesToStyle(MutableStyleProperties&);	160	void applyAspectRatioFromWidthAndHeightAttributesToStyle(StringView widthAttribute, StringView heightAttribute, MutableStyleProperties&);
161	void applyAlignmentAttributeToStyle(const AtomString&, MutableStyleProperties&);	161	void applyAlignmentAttributeToStyle(const AtomString&, MutableStyleProperties&);
162	void applyBorderAttributeToStyle(const AtomString&, MutableStyleProperties&);	162	void applyBorderAttributeToStyle(const AtomString&, MutableStyleProperties&);
163		163



#include "HTMLDocument.h"
#include "HTMLFormElement.h"
#include "HTMLImageLoader.h"
#include "HTMLMapElement.h"
#include "HTMLParserIdioms.h"
#include "HTMLPictureElement.h"
#include "HTMLMapElement.h"
#include "HTMLSourceElement.h"
#include "HTMLSrcsetParser.h"
#include "LazyLoadImageObserver.h"

{
    if (name == widthAttr) {
        addHTMLMultiLengthToStyle(style, CSSPropertyWidth, value);
        applyAspectRatioFromWidthAndHeightAttributesToStyle(value, attributeWithoutSynchronization(heightAttr), style);
    } else if (name == heightAttr) {
        addHTMLMultiLengthToStyle(style, CSSPropertyHeight, value);
        applyAspectRatioFromWidthAndHeightAttributesToStyle(attributeWithoutSynchronization(widthAttr), value, style);
    } else if (name == borderAttr)
        applyBorderAttributeToStyle(value, style);
    else if (name == vspaceAttr) {

        HTMLElement::collectPresentationalHintsForAttribute(name, value, style);
}

void HTMLImageElement::collectExtraStyleForPresentationalHints(MutableStyleProperties& style)
{
    if (!sourceElement())
        return;
    auto widthAttrFromSource = sourceElement()->attributeWithoutSynchronization(widthAttr);
    auto heightAttrFromSource = sourceElement()->attributeWithoutSynchronization(heightAttr);
    if (widthAttrFromSource.isNull() && heightAttrFromSource.isNull())
        return;

    if (!widthAttrFromSource.isNull())
        addHTMLLengthToStyle(style, CSSPropertyWidth, widthAttrFromSource);
    else
        addPropertyToPresentationalHintStyle(style, CSSPropertyWidth, CSSValueAuto);

    if (!heightAttrFromSource.isNull())
        addHTMLLengthToStyle(style, CSSPropertyHeight, heightAttrFromSource);
    else
        addPropertyToPresentationalHintStyle(style, CSSPropertyHeight, CSSValueAuto);

    if (!widthAttrFromSource.isNull() && !heightAttrFromSource.isNull())
        applyAspectRatioFromWidthAndHeightAttributesToStyle(widthAttrFromSource, heightAttrFromSource, style);
    else
        addPropertyToPresentationalHintStyle(style, CSSPropertyAspectRatio, CSSValueAuto);
}

const AtomString& HTMLImageElement::imageSourceURL() const
{
    return m_bestFitImageURL.isEmpty() ? attributeWithoutSynchronization(srcAttr) : m_bestFitImageURL;

        auto sourceSize = sizesParser.length();

        candidate = bestFitSourceForImageAttributes(document().deviceScaleFactor(), nullAtom(), srcset, sourceSize);
        if (!candidate.isEmpty()) {
            setSourceElement(&source);
            break;
        }
    }

    return candidate;

    // First look for the best fit source from our <picture> parent if we have one.
    ImageCandidate candidate = bestFitSourceFromPictureElement();
    if (candidate.isEmpty()) {
        setSourceElement(nullptr);
        // If we don't have a <picture> or didn't find a source, then we use our own attributes.
        SizesAttributeParser sizesParser(attributeWithoutSynchronization(sizesAttr).string(), document(), &m_mediaQueryDynamicResults);
        auto sourceSize = sizesParser.length();

    return ReferrerPolicy::EmptyString;
}

HTMLSourceElement* HTMLImageElement::sourceElement() const
{
    return m_sourceElement.get();
}

void HTMLImageElement::setSourceElement(HTMLSourceElement* sourceElement)
{
    if (m_sourceElement.get() == sourceElement)
        return;
    m_sourceElement = makeWeakPtr(sourceElement);
    invalidateAttributeMapping();
}

void HTMLImageElement::invalidateAttributeMapping()
{
    ensureUniqueElementData().setPresentationalHintStyleIsDirty(true);
    invalidateStyle();
}

}

Lines 150-155 private: a/Source/WebCore/html/HTMLImageElement.h_sec1
- a/Source/WebCore/html/HTMLImageElement.h +7 lines
150	void parseAttribute(const QualifiedName&, const AtomString&) override;	150	void parseAttribute(const QualifiedName&, const AtomString&) override;
151	bool hasPresentationalHintsForAttribute(const QualifiedName&) const override;	151	bool hasPresentationalHintsForAttribute(const QualifiedName&) const override;
152	void collectPresentationalHintsForAttribute(const QualifiedName&, const AtomString&, MutableStyleProperties&) override;	152	void collectPresentationalHintsForAttribute(const QualifiedName&, const AtomString&, MutableStyleProperties&) override;
		153	void collectExtraStyleForPresentationalHints(MutableStyleProperties&) override;
		154	void invalidateAttributeMapping();
153		155
154	void didAttachRenderers() override;	156	void didAttachRenderers() override;
155	RenderPtr<RenderElement> createElementRenderer(RenderStyle&&, const RenderTreePosition&) override;	157	RenderPtr<RenderElement> createElementRenderer(RenderStyle&&, const RenderTreePosition&) override;
Lines 183-188 private: a/Source/WebCore/html/HTMLImageElement.h_sec2
183		185
184	float effectiveImageDevicePixelRatio() const;	186	float effectiveImageDevicePixelRatio() const;
185		187
		188	HTMLSourceElement* sourceElement() const;
		189	void setSourceElement(HTMLSourceElement*);
		190
186	std::unique_ptr<HTMLImageLoader> m_imageLoader;	191	std::unique_ptr<HTMLImageLoader> m_imageLoader;
187	WeakPtr<HTMLFormElement> m_form;	192	WeakPtr<HTMLFormElement> m_form;
188	WeakPtr<HTMLFormElement> m_formSetByParser;	193	WeakPtr<HTMLFormElement> m_formSetByParser;
Lines 196-201 private: a/Source/WebCore/html/HTMLImageElement.h_sec3
196	bool m_isDroppedImagePlaceholder { false };	201	bool m_isDroppedImagePlaceholder { false };
197		202
198	WeakPtr<HTMLPictureElement> m_pictureElement;	203	WeakPtr<HTMLPictureElement> m_pictureElement;
		204	// The source element that selected to provide the source url.
		205	WeakPtr<HTMLSourceElement> m_sourceElement;
199	MediaQueryDynamicResults m_mediaQueryDynamicResults;	206	MediaQueryDynamicResults m_mediaQueryDynamicResults;
200		207
201	#if ENABLE(ATTACHMENT_ELEMENT)	208	#if ENABLE(ATTACHMENT_ELEMENT)



        if (m_inputType->shouldRespectHeightAndWidthAttributes())
            addHTMLLengthToStyle(style, CSSPropertyWidth, value);
        if (isImageButton())
            applyAspectRatioFromWidthAndHeightAttributesToStyle(value, attributeWithoutSynchronization(heightAttr), style);
    } else if (name == heightAttr) {
        if (m_inputType->shouldRespectHeightAndWidthAttributes())
            addHTMLLengthToStyle(style, CSSPropertyHeight, value);
        if (isImageButton())
            applyAspectRatioFromWidthAndHeightAttributesToStyle(attributeWithoutSynchronization(widthAttr), value, style);
    } else if (name == borderAttr && isImageButton())
        applyBorderAttributeToStyle(value, style);
    else

Lines 64-69 void HTMLPictureElement::sourcesChanged() a/Source/WebCore/html/HTMLPictureElement.cpp_sec1
- a/Source/WebCore/html/HTMLPictureElement.cpp +8 lines
64	element.selectImageSource(RelevantMutation::Yes);	64	element.selectImageSource(RelevantMutation::Yes);
65	}	65	}
66		66
		67	void HTMLPictureElement::sourceAttributeChanged(const HTMLSourceElement& sourceElement)
		68	{
		69	for (auto& element : childrenOfType<HTMLImageElement>(*this)) {
		70	if (&sourceElement == element.sourceElement())
		71	element.invalidateAttributeMapping();
		72	}
		73	}
		74
67	#if USE(SYSTEM_PREVIEW)	75	#if USE(SYSTEM_PREVIEW)
68	bool HTMLPictureElement::isSystemPreviewImage()	76	bool HTMLPictureElement::isSystemPreviewImage()
69	{	77	{

Lines 36-41 public: a/Source/WebCore/html/HTMLPictureElement.h_sec1
- a/Source/WebCore/html/HTMLPictureElement.h +1 lines
36	virtual ~HTMLPictureElement();	36	virtual ~HTMLPictureElement();
37		37
38	void sourcesChanged();	38	void sourcesChanged();
		39	void sourceAttributeChanged(const HTMLSourceElement&);
39		40
40	#if USE(SYSTEM_PREVIEW)	41	#if USE(SYSTEM_PREVIEW)
41	WEBCORE_EXPORT bool isSystemPreviewImage();	42	WEBCORE_EXPORT bool isSystemPreviewImage();

Lines 205-208 const MediaQuerySet* HTMLSourceElement::parsedMediaAttribute(Document& document) a/Source/WebCore/html/HTMLSourceElement.cpp_sec1
- a/Source/WebCore/html/HTMLSourceElement.cpp +10 lines
205	return m_cachedParsedMediaAttribute.value().get();	205	return m_cachedParsedMediaAttribute.value().get();
206	}	206	}
207		207
		208	void HTMLSourceElement::attributeChanged(const QualifiedName& name, const AtomString& oldValue, const AtomString& newValue, AttributeModificationReason reason)
		209	{
		210	HTMLElement::attributeChanged(name, oldValue, newValue, reason);
		211	if (name == widthAttr \|\| name == heightAttr) {
		212	RefPtr<Element> parent = parentElement();
		213	if (parent && is<HTMLPictureElement>(*parent))
		214	downcast<HTMLPictureElement>(parent).sourceAttributeChanged(this);
		215	}
		216	}
		217
208	}	218	}

Lines 58-63 private: a/Source/WebCore/html/HTMLSourceElement.h_sec1
- a/Source/WebCore/html/HTMLSourceElement.h +2 lines
58		58
59	void parseAttribute(const QualifiedName&, const AtomString&) final;	59	void parseAttribute(const QualifiedName&, const AtomString&) final;
60		60
		61	void attributeChanged(const QualifiedName&, const AtomString& oldValue, const AtomString& newValue, AttributeModificationReason) final;
		62
61	void errorEventTimerFired();	63	void errorEventTimerFired();
62		64
63	Timer m_errorEventTimer;	65	Timer m_errorEventTimer;

Lines 32-35 a/Source/WebCore/html/HTMLSourceElement.idl_sec1
- a/Source/WebCore/html/HTMLSourceElement.idl +2 lines
32	[CEReactions=NotNeeded, Reflect] attribute USVString srcset;	32	[CEReactions=NotNeeded, Reflect] attribute USVString srcset;
33	[CEReactions=NotNeeded, Reflect] attribute DOMString sizes;	33	[CEReactions=NotNeeded, Reflect] attribute DOMString sizes;
34	[CEReactions=NotNeeded, Reflect] attribute DOMString media;	34	[CEReactions=NotNeeded, Reflect] attribute DOMString media;
		35	[CEReactions=NotNeeded, Reflect] attribute unsigned long width;
		36	[CEReactions=NotNeeded, Reflect] attribute unsigned long height;
35	};	37	};



{
    if (name == widthAttr) {
        addHTMLLengthToStyle(style, CSSPropertyWidth, value);
        applyAspectRatioFromWidthAndHeightAttributesToStyle(value, attributeWithoutSynchronization(heightAttr), style);
    } else if (name == heightAttr) {
        addHTMLLengthToStyle(style, CSSPropertyHeight, value);
        applyAspectRatioFromWidthAndHeightAttributesToStyle(attributeWithoutSynchronization(widthAttr), value, style);
    } else
        HTMLMediaElement::collectPresentationalHintsForAttribute(name, value, style);
}



2021-06-17  Cathie Chen  <cathiechen@igalia.com>

        Implement width and height attributes on source elements of <picture>
        https://bugs.webkit.org/show_bug.cgi?id=222368

        Reviewed by NOBODY (OOPS!).

        * TestExpectations:

2021-06-11  Cathie Chen  <cathiechen@igalia.com>

        Use HTMLDimension to parse different HTML attribute length values



2021-06-17  Cathie Chen  <cathiechen@igalia.com>

        Implement width and height attributes on source elements of <picture>
        https://bugs.webkit.org/show_bug.cgi?id=222368

        Reviewed by NOBODY (OOPS!).

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

2021-06-11  Cathie Chen  <cathiechen@igalia.com>

        Use HTMLDimension to parse different HTML attribute length values



imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/sizes/parse-a-sizes-attribute-standards-mode.html [ Failure Pass ]
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-object-element/object-fallback-failed-cross-origin-navigation.sub.html [ Failure Pass ]

# Newly importing aspect ratio test is flaky.
imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html [ Failure Pass ]

# Newly importing W3C tests needed support for reftest-wait.
webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-added.html [ Skip ]
webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-removed.html [ Skip ]







PASS source width and height attributes are used to infer aspect-ratio in <picture>
PASS Computed style for width/height/aspect-ratio
PASS Source width/height should take precedence over img attributes.
PASS Make sure style gets invalidated correctly when the source gets removed.
PASS If the <source> has only one of width/height, we don't get an aspect ratio, even if the <img> has both.
PASS If we don't have width/height on the source, we fall back to width/height on the <img>.
PASS If we only have one width attribute, we should get width mapped but no aspect ratio, even if <img> has attributes.
PASS If we only have height attribute, we should get height mapped but no aspect ratio, even if <img> has attributes.
PASS Dynamically changing width/height should change computed style
PASS Changing which <source> matches should change computed style
PASS Percentages on source should be ignored for aspect-ratio but used for width/height.
PASS Trailing garbage should be ignored but not make the attribute invalid
PASS Loaded picture test: Both <source> and <img> are without width and height attributes
PASS Loaded picture test: <source> with width and height attributes, <img> without width and height attributes
PASS Loaded picture test: Both <source> and <img> are with width and height attributes


Return to Bug 222368

Lines 625-639 ExceptionOr<void> HTMLElement::setOuterText(const String& text) a/Source/WebCore/html/HTMLElement.cpp_sec1
- a/Source/WebCore/html/HTMLElement.cpp -3 / +3 lines
625	return { };	625	return { };
626	}	626	}
627		627
628	void HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle(MutableStyleProperties& style)	628	void HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle(StringView widthAttribute, StringView heightAttribute, MutableStyleProperties& style)
629	{	629	{
630	if (!document().settings().aspectRatioOfImgFromWidthAndHeightEnabled())	630	if (!document().settings().aspectRatioOfImgFromWidthAndHeightEnabled())
631	return;	631	return;
632		632
633	auto dimensionWidth = parseHTMLDimension(attributeWithoutSynchronization(widthAttr));	633	auto dimensionWidth = parseHTMLDimension(widthAttribute);
634	if (!dimensionWidth \|\| dimensionWidth->type != HTMLDimension::Type::Pixel)	634	if (!dimensionWidth \|\| dimensionWidth->type != HTMLDimension::Type::Pixel)
635	return;	635	return;
636	auto dimensionHeight = parseHTMLDimension(attributeWithoutSynchronization(heightAttr));	636	auto dimensionHeight = parseHTMLDimension(heightAttribute);
637	if (!dimensionHeight \|\| dimensionHeight->type != HTMLDimension::Type::Pixel)	637	if (!dimensionHeight \|\| dimensionHeight->type != HTMLDimension::Type::Pixel)
638	return;	638	return;
639		639

Lines 708-719 void HTMLInputElement::collectPresentationalHintsForAttribute(const QualifiedNam a/Source/WebCore/html/HTMLInputElement.cpp_sec1
- a/Source/WebCore/html/HTMLInputElement.cpp -2 / +2 lines
708	if (m_inputType->shouldRespectHeightAndWidthAttributes())	708	if (m_inputType->shouldRespectHeightAndWidthAttributes())
709	addHTMLLengthToStyle(style, CSSPropertyWidth, value);	709	addHTMLLengthToStyle(style, CSSPropertyWidth, value);
710	if (isImageButton())	710	if (isImageButton())
711	applyAspectRatioFromWidthAndHeightAttributesToStyle(style);	711	applyAspectRatioFromWidthAndHeightAttributesToStyle(value, attributeWithoutSynchronization(heightAttr), style);
712	} else if (name == heightAttr) {	712	} else if (name == heightAttr) {
713	if (m_inputType->shouldRespectHeightAndWidthAttributes())	713	if (m_inputType->shouldRespectHeightAndWidthAttributes())
714	addHTMLLengthToStyle(style, CSSPropertyHeight, value);	714	addHTMLLengthToStyle(style, CSSPropertyHeight, value);
715	if (isImageButton())	715	if (isImageButton())
716	applyAspectRatioFromWidthAndHeightAttributesToStyle(style);	716	applyAspectRatioFromWidthAndHeightAttributesToStyle(attributeWithoutSynchronization(widthAttr), value, style);
717	} else if (name == borderAttr && isImageButton())	717	} else if (name == borderAttr && isImageButton())
718	applyBorderAttributeToStyle(value, style);	718	applyBorderAttributeToStyle(value, style);
719	else	719	else

Lines 115-124 void HTMLVideoElement::collectPresentationalHintsForAttribute(const QualifiedNam a/Source/WebCore/html/HTMLVideoElement.cpp_sec1
- a/Source/WebCore/html/HTMLVideoElement.cpp -2 / +2 lines
115	{	115	{
116	if (name == widthAttr) {	116	if (name == widthAttr) {
117	addHTMLLengthToStyle(style, CSSPropertyWidth, value);	117	addHTMLLengthToStyle(style, CSSPropertyWidth, value);
118	applyAspectRatioFromWidthAndHeightAttributesToStyle(style);	118	applyAspectRatioFromWidthAndHeightAttributesToStyle(value, attributeWithoutSynchronization(heightAttr), style);
119	} else if (name == heightAttr) {	119	} else if (name == heightAttr) {
120	addHTMLLengthToStyle(style, CSSPropertyHeight, value);	120	addHTMLLengthToStyle(style, CSSPropertyHeight, value);
121	applyAspectRatioFromWidthAndHeightAttributesToStyle(style);	121	applyAspectRatioFromWidthAndHeightAttributesToStyle(attributeWithoutSynchronization(widthAttr), value, style);
122	} else	122	} else
123	HTMLMediaElement::collectPresentationalHintsForAttribute(name, value, style);	123	HTMLMediaElement::collectPresentationalHintsForAttribute(name, value, style);
124	}	124	}

Lines 1434-1442 imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/ a/LayoutTests/TestExpectations_sec1
- a/LayoutTests/TestExpectations -3 lines
1434	imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/sizes/parse-a-sizes-attribute-standards-mode.html [ Failure Pass ]	1434	imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/sizes/parse-a-sizes-attribute-standards-mode.html [ Failure Pass ]
1435	imported/w3c/web-platform-tests/html/semantics/embedded-content/the-object-element/object-fallback-failed-cross-origin-navigation.sub.html [ Failure Pass ]	1435	imported/w3c/web-platform-tests/html/semantics/embedded-content/the-object-element/object-fallback-failed-cross-origin-navigation.sub.html [ Failure Pass ]
1436		1436
1437	# Newly importing aspect ratio test is flaky.
1438	imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html [ Failure Pass ]
1439
1440	# Newly importing W3C tests needed support for reftest-wait.	1437	# Newly importing W3C tests needed support for reftest-wait.
1441	webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-added.html [ Skip ]	1438	webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-added.html [ Skip ]
1442	webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-removed.html [ Skip ]	1439	webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-removed.html [ Skip ]

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +46 lines
		1	2021-06-17 Cathie Chen <cathiechen@igalia.com>
		2
		3	Implement width and height attributes on source elements of <picture>
		4	https://bugs.webkit.org/show_bug.cgi?id=222368
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	This patch implement
		9	According to [1], the source element supports dimension attributes. The img element can use the width
		10	and height attributes of the source element to determine its rendered dimensions and aspect-ratio.
		11	In order to implement this, add m_sourceElement to HTMLImageElement to indicate the source element that
		12	is selected. Also add invalidateAttributeMapping() to synchronous the changes of source's attributes
		13	to the img element. Then add collectExtraStyleForPresentationalHints() to collect style from source attributes.
		14
		15	[1] https://html.spec.whatwg.org/#the-source-element
		16
		17	* dom/ElementData.h:
		18	* dom/StyledElement.cpp:
		19	(WebCore::StyledElement::rebuildPresentationalHintStyle): collectExtraStyleForPresentationalHints() when rebuild.
		20	* dom/StyledElement.h:
		21	(WebCore::StyledElement::collectExtraStyleForPresentationalHints): Add an interface to collect extra style from other elements.
		22	* html/HTMLElement.cpp:
		23	(WebCore::HTMLElement::applyAspectRatioFromWidthAndHeightAttributesToStyle): Add width and height attributes as input variables.
		24	* html/HTMLElement.h:
		25	* html/HTMLImageElement.cpp:
		26	(WebCore::HTMLImageElement::collectPresentationalHintsForAttribute):
		27	(WebCore::HTMLImageElement::collectExtraStyleForPresentationalHints): If source element has width or height attributes, apply them
		28	to width, height and aspect-ratio of the style.
		29	(WebCore::HTMLImageElement::bestFitSourceFromPictureElement): Keep the source element.
		30	(WebCore::HTMLImageElement::selectImageSource): Reset the source element to null if no candidate is found.
		31	(WebCore::HTMLImageElement::sourceElement const):
		32	(WebCore::HTMLImageElement::setSourceElement):
		33	(WebCore::HTMLImageElement::invalidateAttributeMapping): Invalidate the presentationalHintStyle.
		34	* html/HTMLImageElement.h:
		35	* html/HTMLInputElement.cpp:
		36	(WebCore::HTMLInputElement::collectPresentationalHintsForAttribute):
		37	* html/HTMLPictureElement.cpp:
		38	(WebCore::HTMLPictureElement::sourceAttributeChanged): Call invalidateAttributeMapping if source element's attributes are changed.
		39	* html/HTMLPictureElement.h:
		40	* html/HTMLSourceElement.cpp:
		41	(WebCore::HTMLSourceElement::attributeChanged): Call sourceAttributeChanged if width or height attributes are changed.
		42	* html/HTMLSourceElement.h:
		43	* html/HTMLSourceElement.idl:
		44	* html/HTMLVideoElement.cpp:
		45	(WebCore::HTMLVideoElement::collectPresentationalHintsForAttribute):
		46
1	2021-06-11 Megan Gardner <megan_gardner@apple.com>	47	2021-06-11 Megan Gardner <megan_gardner@apple.com>
2		48
3	Rename AppHighlight group to QuickNote to correctly reflect feature.	49	Rename AppHighlight group to QuickNote to correctly reflect feature.

Lines 37-45 a/Source/WebCore/html/HTMLImageElement.cpp_sec1
- a/Source/WebCore/html/HTMLImageElement.cpp -4 / +51 lines
37	#include "HTMLDocument.h"	37	#include "HTMLDocument.h"
38	#include "HTMLFormElement.h"	38	#include "HTMLFormElement.h"
39	#include "HTMLImageLoader.h"	39	#include "HTMLImageLoader.h"
		40	#include "HTMLMapElement.h"
40	#include "HTMLParserIdioms.h"	41	#include "HTMLParserIdioms.h"
41	#include "HTMLPictureElement.h"	42	#include "HTMLPictureElement.h"
42	#include "HTMLMapElement.h"
43	#include "HTMLSourceElement.h"	43	#include "HTMLSourceElement.h"
44	#include "HTMLSrcsetParser.h"	44	#include "HTMLSrcsetParser.h"
45	#include "LazyLoadImageObserver.h"	45	#include "LazyLoadImageObserver.h"
Lines 117-126 void HTMLImageElement::collectPresentationalHintsForAttribute(const QualifiedNam a/Source/WebCore/html/HTMLImageElement.cpp_sec2
117	{	117	{
118	if (name == widthAttr) {	118	if (name == widthAttr) {
119	addHTMLMultiLengthToStyle(style, CSSPropertyWidth, value);	119	addHTMLMultiLengthToStyle(style, CSSPropertyWidth, value);
120	applyAspectRatioFromWidthAndHeightAttributesToStyle(style);	120	applyAspectRatioFromWidthAndHeightAttributesToStyle(value, attributeWithoutSynchronization(heightAttr), style);
121	} else if (name == heightAttr) {	121	} else if (name == heightAttr) {
122	addHTMLMultiLengthToStyle(style, CSSPropertyHeight, value);	122	addHTMLMultiLengthToStyle(style, CSSPropertyHeight, value);
123	applyAspectRatioFromWidthAndHeightAttributesToStyle(style);	123	applyAspectRatioFromWidthAndHeightAttributesToStyle(attributeWithoutSynchronization(widthAttr), value, style);
124	} else if (name == borderAttr)	124	} else if (name == borderAttr)
125	applyBorderAttributeToStyle(value, style);	125	applyBorderAttributeToStyle(value, style);
126	else if (name == vspaceAttr) {	126	else if (name == vspaceAttr) {
Lines 137-142 void HTMLImageElement::collectPresentationalHintsForAttribute(const QualifiedNam a/Source/WebCore/html/HTMLImageElement.cpp_sec3
137	HTMLElement::collectPresentationalHintsForAttribute(name, value, style);	137	HTMLElement::collectPresentationalHintsForAttribute(name, value, style);
138	}	138	}
139		139
		140	void HTMLImageElement::collectExtraStyleForPresentationalHints(MutableStyleProperties& style)
		141	{
		142	if (!sourceElement())
		143	return;
		144	auto widthAttrFromSource = sourceElement()->attributeWithoutSynchronization(widthAttr);
		145	auto heightAttrFromSource = sourceElement()->attributeWithoutSynchronization(heightAttr);
		146	if (widthAttrFromSource.isNull() && heightAttrFromSource.isNull())
		147	return;
		148
		149	if (!widthAttrFromSource.isNull())
		150	addHTMLLengthToStyle(style, CSSPropertyWidth, widthAttrFromSource);
		151	else
		152	addPropertyToPresentationalHintStyle(style, CSSPropertyWidth, CSSValueAuto);
		153
		154	if (!heightAttrFromSource.isNull())
		155	addHTMLLengthToStyle(style, CSSPropertyHeight, heightAttrFromSource);
		156	else
		157	addPropertyToPresentationalHintStyle(style, CSSPropertyHeight, CSSValueAuto);
		158
		159	if (!widthAttrFromSource.isNull() && !heightAttrFromSource.isNull())
		160	applyAspectRatioFromWidthAndHeightAttributesToStyle(widthAttrFromSource, heightAttrFromSource, style);
		161	else
		162	addPropertyToPresentationalHintStyle(style, CSSPropertyAspectRatio, CSSValueAuto);
		163	}
		164
140	const AtomString& HTMLImageElement::imageSourceURL() const	165	const AtomString& HTMLImageElement::imageSourceURL() const
141	{	166	{
142	return m_bestFitImageURL.isEmpty() ? attributeWithoutSynchronization(srcAttr) : m_bestFitImageURL;	167	return m_bestFitImageURL.isEmpty() ? attributeWithoutSynchronization(srcAttr) : m_bestFitImageURL;
Lines 191-198 ImageCandidate HTMLImageElement::bestFitSourceFromPictureElement() a/Source/WebCore/html/HTMLImageElement.cpp_sec4
191	auto sourceSize = sizesParser.length();	216	auto sourceSize = sizesParser.length();
192		217
193	candidate = bestFitSourceForImageAttributes(document().deviceScaleFactor(), nullAtom(), srcset, sourceSize);	218	candidate = bestFitSourceForImageAttributes(document().deviceScaleFactor(), nullAtom(), srcset, sourceSize);
194	if (!candidate.isEmpty())	219	if (!candidate.isEmpty()) {
		220	setSourceElement(&source);
195	break;	221	break;
		222	}
196	}	223	}
197		224
198	return candidate;	225	return candidate;
Lines 217-222 void HTMLImageElement::selectImageSource(RelevantMutation relevantMutation) a/Source/WebCore/html/HTMLImageElement.cpp_sec5
217	// First look for the best fit source from our <picture> parent if we have one.	244	// First look for the best fit source from our <picture> parent if we have one.
218	ImageCandidate candidate = bestFitSourceFromPictureElement();	245	ImageCandidate candidate = bestFitSourceFromPictureElement();
219	if (candidate.isEmpty()) {	246	if (candidate.isEmpty()) {
		247	setSourceElement(nullptr);
220	// If we don't have a <picture> or didn't find a source, then we use our own attributes.	248	// If we don't have a <picture> or didn't find a source, then we use our own attributes.
221	SizesAttributeParser sizesParser(attributeWithoutSynchronization(sizesAttr).string(), document(), &m_mediaQueryDynamicResults);	249	SizesAttributeParser sizesParser(attributeWithoutSynchronization(sizesAttr).string(), document(), &m_mediaQueryDynamicResults);
222	auto sourceSize = sizesParser.length();	250	auto sourceSize = sizesParser.length();
Lines 799-802 ReferrerPolicy HTMLImageElement::referrerPolicy() const a/Source/WebCore/html/HTMLImageElement.cpp_sec6
799	return ReferrerPolicy::EmptyString;	827	return ReferrerPolicy::EmptyString;
800	}	828	}
801		829
		830	HTMLSourceElement* HTMLImageElement::sourceElement() const
		831	{
		832	return m_sourceElement.get();
		833	}
		834
		835	void HTMLImageElement::setSourceElement(HTMLSourceElement* sourceElement)
		836	{
		837	if (m_sourceElement.get() == sourceElement)
		838	return;
		839	m_sourceElement = makeWeakPtr(sourceElement);
		840	invalidateAttributeMapping();
		841	}
		842
		843	void HTMLImageElement::invalidateAttributeMapping()
		844	{
		845	ensureUniqueElementData().setPresentationalHintStyleIsDirty(true);
		846	invalidateStyle();
		847	}
		848
802	}	849	}

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +9 lines
		1	2021-06-17 Cathie Chen <cathiechen@igalia.com>
		2
		3	Implement width and height attributes on source elements of <picture>
		4	https://bugs.webkit.org/show_bug.cgi?id=222368
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* TestExpectations:
		9
1	2021-06-11 Cathie Chen <cathiechen@igalia.com>	10	2021-06-11 Cathie Chen <cathiechen@igalia.com>
2		11
3	Use HTMLDimension to parse different HTML attribute length values	12	Use HTMLDimension to parse different HTML attribute length values

Lines 1-3 a/LayoutTests/imported/w3c/ChangeLog_sec1
- a/LayoutTests/imported/w3c/ChangeLog +9 lines
		1	2021-06-17 Cathie Chen <cathiechen@igalia.com>
		2
		3	Implement width and height attributes on source elements of <picture>
		4	https://bugs.webkit.org/show_bug.cgi?id=222368
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio-expected.txt:
		9
1	2021-06-11 Cathie Chen <cathiechen@igalia.com>	10	2021-06-11 Cathie Chen <cathiechen@igalia.com>
2		11
3	Use HTMLDimension to parse different HTML attribute length values	12	Use HTMLDimension to parse different HTML attribute length values

Lines 1-20 a/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio-expected.txt -15 / +13 lines
1		1
2		2
3
4
5	PASS source width and height attributes are used to infer aspect-ratio in <picture>	3	PASS source width and height attributes are used to infer aspect-ratio in <picture>
6	FAIL Computed style for width/height/aspect-ratio assert_approx_equals: expected 1 +/- 0.001 but got Infinity	4	PASS Computed style for width/height/aspect-ratio
7	FAIL Source width/height should take precedence over img attributes. assert_approx_equals: expected 2 +/- 0.001 but got 5	5	PASS Source width/height should take precedence over img attributes.
8	FAIL Make sure style gets invalidated correctly when the source gets removed. assert_equals: expected "auto 250 / 50" but got "auto"	6	PASS Make sure style gets invalidated correctly when the source gets removed.
9	FAIL If the <source> has only one of width/height, we don't get an aspect ratio, even if the <img> has both. assert_equals: expected "100px" but got "200px"	7	PASS If the <source> has only one of width/height, we don't get an aspect ratio, even if the <img> has both.
10	FAIL If we don't have width/height on the source, we fall back to width/height on the <img>. assert_equals: expected "auto 200 / 100" but got "auto"	8	PASS If we don't have width/height on the source, we fall back to width/height on the <img>.
11	FAIL If we only have one width attribute, we should get width mapped but no aspect ratio, even if <img> has attributes. assert_equals: expected "100px" but got "200px"	9	PASS If we only have one width attribute, we should get width mapped but no aspect ratio, even if <img> has attributes.
12	FAIL If we only have height attribute, we should get height mapped but no aspect ratio, even if <img> has attributes. assert_equals: expected "auto" but got "200px"	10	PASS If we only have height attribute, we should get height mapped but no aspect ratio, even if <img> has attributes.
13	FAIL Dynamically changing width/height should change computed style assert_equals: expected "auto 100 / 100" but got "auto"	11	PASS Dynamically changing width/height should change computed style
14	FAIL Changing which <source> matches should change computed style assert_equals: expected "auto 100 / 100" but got "auto"	12	PASS Changing which <source> matches should change computed style
15	FAIL Percentages on source should be ignored for aspect-ratio but used for width/height. assert_equals: expected 100 but got 0	13	PASS Percentages on source should be ignored for aspect-ratio but used for width/height.
16	FAIL Trailing garbage should be ignored but not make the attribute invalid assert_equals: expected 100 but got 0	14	PASS Trailing garbage should be ignored but not make the attribute invalid
17	PASS Loaded picture test: Both <source> and <img> are without width and height attributes	15	PASS Loaded picture test: Both <source> and <img> are without width and height attributes
18	FAIL Loaded picture test: <source> with width and height attributes, <img> without width and height attributes assert_equals: expected "auto 100 / 100" but got "auto"	16	PASS Loaded picture test: <source> with width and height attributes, <img> without width and height attributes
19	FAIL Loaded picture test: Both <source> and <img> are with width and height attributes assert_equals: expected "auto 100 / 100" but got "auto"	17	PASS Loaded picture test: Both <source> and <img> are with width and height attributes
20		18