245883 2022-09-30 07:41:27 -0700 <img> elements are always treated as a replaced element 2022-10-07 08:02:47 -0700 1 1 1 Unclassified WebKit DOM WebKit Nightly Build Unspecified Unspecified NEW InRadar P2 Normal --- 1 cathiechen webkit-unassigned cathiechen webkit-bug-importer oldest_to_newest 1902340 0 cathiechen 2022-09-30 07:41:27 -0700 Per [1] and [2], when it is fail to download the image data, <img> element is not always treated as a replaced element. It could be treated as a text or empty inline element, which is depended on the values of attributes src and alt, intrinsic dimensions, and so on. In WebKit, HTMLImageElement always creates RenderImage as its renderer, and let RenderImage handle the scenarios in which <img> represents alt text or nothing. This could cause some issues like bugs 245136 and 244386. Or <img> does not display the content proper when alt or src attributes change (See test cases in the attachment). Or the alt text is too long, it is not displayed. Should we consider creating a different renderer for <img> depending on which type of content it represents, and create a shadawRoot to display the alt text if needed? Something similar to the implementation in Chromium [3]. [1] https://www.w3.org/TR/2016/WD-html51-20160412/rendering.html#replaced-elements-images [2] https://www.w3.org/TR/2016/WD-html51-20160412/semantics-embedded-content.html#the-img-element [3] https://codereview.chromium.org/481753002 1902341 1 462727 cathiechen 2022-09-30 07:43:47 -0700 Created attachment 462727 test-changing-value-of-alt-and-src.html 1902344 2 462729 cathiechen 2022-09-30 07:44:46 -0700 Created attachment 462729 test-changing-value-of-alt-and-src.html 1904045 3 webkit-bug-importer 2022-10-07 07:42:17 -0700 <rdar://problem/100897933> 1904051 4 cathiechen 2022-10-07 08:02:47 -0700 (In reply to cathiechen from comment #0) > Per [1] and [2], when it is fail to download the image data, <img> element > is not always treated as a replaced element. It could be treated as a text > or empty inline element, which is depended on the values of attributes src > and alt, intrinsic dimensions, and so on. > In WebKit, HTMLImageElement always creates RenderImage as its renderer, and > let RenderImage handle the scenarios in which <img> represents alt text or > nothing. This could cause some issues like bugs 245136 and 244386. Or <img> > does not display the content proper when alt or src attributes change (See > test cases in the attachment). Or the alt text is too long, it is not > displayed. > Should we consider creating a different renderer for <img> depending on > which type of content it represents, and create a shadawRoot to display the > alt text if needed? > Something similar to the implementation in Chromium [3]. > > [1] > https://www.w3.org/TR/2016/WD-html51-20160412/rendering.html#replaced- > elements-images > [2] > https://www.w3.org/TR/2016/WD-html51-20160412/semantics-embedded-content. > html#the-img-element > [3] https://codereview.chromium.org/481753002 [1] https://html.spec.whatwg.org/multipage/rendering.html#images-3 [2] https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element These two are the latest version:) 462727 2022-09-30 07:43:47 -0700 2022-09-30 07:44:46 -0700 test-changing-value-of-alt-and-src.html error-image-represents-003.html text/html 1786 cathiechen PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KaW1nIHsKICAgIHdpZHRoOiAxMDBweDsKICAgIGhlaWdo dDoxMDBweAp9Cjwvc3R5bGU+CjxzY3JpcHQ+CmxldCB0YXJnZXQ7CmZ1bmN0aW9uIGFkZExvZygp IHsKICAgIGxldCBjb250ZW50ID0gJ3NyYyA9ICcgKyB0YXJnZXQuZ2V0QXR0cmlidXRlKCJzcmMi KSArICdcbic7CiAgICBjb250ZW50ICs9ICdhbHQgPSAnICsgdGFyZ2V0LmdldEF0dHJpYnV0ZSgi YWx0IikgKyAnXG4nOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImxvZ2dlciIpLmlubmVy VGV4dCA9IGNvbnRlbnQ7Cn0KZnVuY3Rpb24gYWRkTmV0d29ya1NyYygpIHsKICAgIHRhcmdldC5z ZXRBdHRyaWJ1dGUoInNyYyIsICJodHRwczovL3d3dy53My5vcmcvMjAwOC9zaXRlL2ltYWdlcy9s b2dvLXczYy1tb2JpbGUtbGciKTsKICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGFkZE5ldHdvcmtF cnJvclNyYygpIHsKICAgIHRhcmdldC5zZXRBdHRyaWJ1dGUoInNyYyIsICJodHRwczovL3d3dy53 My5vcmcvZG9lcy1ub3QtZXhpc3QiKTsKICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGFkZExvY2Fs RXJyb3JTcmMoKSB7CiAgICB0YXJnZXQuc2V0QXR0cmlidXRlKCJzcmMiLCAiZG9lcy1ub3QtZXhp c3QiKTsKICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGNsZWFyU3JjKCkgewogICAgdGFyZ2V0LnNl dEF0dHJpYnV0ZSgic3JjIiwgIiIpOwogICAgYWRkTG9nKCk7Cn0KCmZ1bmN0aW9uIGNoYW5nZUFs dENvbnRlbnQoKSB7CiAgICB0YXJnZXQuc2V0QXR0cmlidXRlKCJhbHQiLCAiYWx0IGFsdCBhbHQi KTsKICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGNsZWFyQWx0Q29udGVudCgpIHsKICAgIHRhcmdl dC5zZXRBdHRyaWJ1dGUoImFsdCIsICIiKTsKICAgIGFkZExvZygpOwp9CgpmdW5jdGlvbiBkaXNw bGF5bm9uZSgpIHsKICAgIHRhcmdldC5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOwogICAgYWRkTG9n KCk7Cn0KZnVuY3Rpb24gZGlzcGxheWlubGluZSgpIHsKICAgIHRhcmdldC5zdHlsZS5kaXNwbGF5 ID0gImlubGluZSI7CiAgICBhZGRMb2coKTsKfQoKPC9zY3JpcHQ+Cjxib2R5IHN0eWxlPSJoZWln aHQ6NTAwcHgiIG9ubG9hZD0idGFyZ2V0PWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0YXJnZXQn KSI+CjxkaXYgaWQ9ImxvZ2dlciI+PC9kaXY+Cgo8aW1nIGlkPSJ0YXJnZXQiPgoKPGJyPgpzcmM6 CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJjbGVhclNyYyIgb25jbGljaz0iY2xlYXJTcmMo KSI+CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJhZGRMb2NhbEVycm9yU3JjIiBvbmNsaWNr PSJhZGRMb2NhbEVycm9yU3JjKCkiPgo8aW5wdXQgdHlwZT0iYnV0dG9uIiB2YWx1ZT0iYWRkTmV0 d29ya0Vycm9yU3JjIiBvbmNsaWNrPSJhZGROZXR3b3JrRXJyb3JTcmMoKSI+CjxpbnB1dCB0eXBl PSJidXR0b24iIHZhbHVlPSJhZGROZXR3b3JrU3JjIiBvbmNsaWNrPSJhZGROZXR3b3JrU3JjKCki PgoKPGJyPgphbHQ6CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJhZGRBbHQiIG9uY2xpY2s9 ImNoYW5nZUFsdENvbnRlbnQoKSI+CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJjbGVhckFs dCIgb25jbGljaz0iY2xlYXJBbHRDb250ZW50KCkiPgoKPGJyPgpkaXNwbGF5Ogo8aW5wdXQgdHlw ZT0iYnV0dG9uIiB2YWx1ZT0iZGlzcGxheW5vbmUiIG9uY2xpY2s9ImRpc3BsYXlub25lKCkiPgo8 aW5wdXQgdHlwZT0iYnV0dG9uIiB2YWx1ZT0iZGlzcGxheWlubGluZSIgb25jbGljaz0iZGlzcGxh eWlubGluZSgpIj4KPC9ib2R5Pg== 462729 2022-09-30 07:44:46 -0700 2022-09-30 07:44:46 -0700 test-changing-value-of-alt-and-src.html error-image-represents-003.html text/html 1726 cathiechen PCFET0NUWVBFIGh0bWw+CjxzY3JpcHQ+CmxldCB0YXJnZXQ7CmZ1bmN0aW9uIGFkZExvZygpIHsK ICAgIGxldCBjb250ZW50ID0gJ3NyYyA9ICcgKyB0YXJnZXQuZ2V0QXR0cmlidXRlKCJzcmMiKSAr ICdcbic7CiAgICBjb250ZW50ICs9ICdhbHQgPSAnICsgdGFyZ2V0LmdldEF0dHJpYnV0ZSgiYWx0 IikgKyAnXG4nOwogICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImxvZ2dlciIpLmlubmVyVGV4 dCA9IGNvbnRlbnQ7Cn0KZnVuY3Rpb24gYWRkTmV0d29ya1NyYygpIHsKICAgIHRhcmdldC5zZXRB dHRyaWJ1dGUoInNyYyIsICJodHRwczovL3d3dy53My5vcmcvMjAwOC9zaXRlL2ltYWdlcy9sb2dv LXczYy1tb2JpbGUtbGciKTsKICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGFkZE5ldHdvcmtFcnJv clNyYygpIHsKICAgIHRhcmdldC5zZXRBdHRyaWJ1dGUoInNyYyIsICJodHRwczovL3d3dy53My5v cmcvZG9lcy1ub3QtZXhpc3QiKTsKICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGFkZExvY2FsRXJy b3JTcmMoKSB7CiAgICB0YXJnZXQuc2V0QXR0cmlidXRlKCJzcmMiLCAiZG9lcy1ub3QtZXhpc3Qi KTsKICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGNsZWFyU3JjKCkgewogICAgdGFyZ2V0LnNldEF0 dHJpYnV0ZSgic3JjIiwgIiIpOwogICAgYWRkTG9nKCk7Cn0KCmZ1bmN0aW9uIGNoYW5nZUFsdENv bnRlbnQoKSB7CiAgICB0YXJnZXQuc2V0QXR0cmlidXRlKCJhbHQiLCAiYWx0IGFsdCBhbHQiKTsK ICAgIGFkZExvZygpOwp9CmZ1bmN0aW9uIGNsZWFyQWx0Q29udGVudCgpIHsKICAgIHRhcmdldC5z ZXRBdHRyaWJ1dGUoImFsdCIsICIiKTsKICAgIGFkZExvZygpOwp9CgpmdW5jdGlvbiBkaXNwbGF5 bm9uZSgpIHsKICAgIHRhcmdldC5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOwogICAgYWRkTG9nKCk7 Cn0KZnVuY3Rpb24gZGlzcGxheWlubGluZSgpIHsKICAgIHRhcmdldC5zdHlsZS5kaXNwbGF5ID0g ImlubGluZSI7CiAgICBhZGRMb2coKTsKfQoKPC9zY3JpcHQ+Cjxib2R5IHN0eWxlPSJoZWlnaHQ6 NTAwcHgiIG9ubG9hZD0idGFyZ2V0PWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0YXJnZXQnKSI+ CjxkaXYgaWQ9ImxvZ2dlciI+PC9kaXY+Cgo8aW1nIGlkPSJ0YXJnZXQiPgoKPGJyPgpzcmM6Cjxp bnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJjbGVhclNyYyIgb25jbGljaz0iY2xlYXJTcmMoKSI+ CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJhZGRMb2NhbEVycm9yU3JjIiBvbmNsaWNrPSJh ZGRMb2NhbEVycm9yU3JjKCkiPgo8aW5wdXQgdHlwZT0iYnV0dG9uIiB2YWx1ZT0iYWRkTmV0d29y a0Vycm9yU3JjIiBvbmNsaWNrPSJhZGROZXR3b3JrRXJyb3JTcmMoKSI+CjxpbnB1dCB0eXBlPSJi dXR0b24iIHZhbHVlPSJhZGROZXR3b3JrU3JjIiBvbmNsaWNrPSJhZGROZXR3b3JrU3JjKCkiPgoK PGJyPgphbHQ6CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJhZGRBbHQiIG9uY2xpY2s9ImNo YW5nZUFsdENvbnRlbnQoKSI+CjxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJjbGVhckFsdCIg b25jbGljaz0iY2xlYXJBbHRDb250ZW50KCkiPgoKPGJyPgpkaXNwbGF5Ogo8aW5wdXQgdHlwZT0i YnV0dG9uIiB2YWx1ZT0iZGlzcGxheW5vbmUiIG9uY2xpY2s9ImRpc3BsYXlub25lKCkiPgo8aW5w dXQgdHlwZT0iYnV0dG9uIiB2YWx1ZT0iZGlzcGxheWlubGluZSIgb25jbGljaz0iZGlzcGxheWlu bGluZSgpIj4KPC9ib2R5Pg==