Как свойство CSS `content` работает для элемента` img` в WebKit?

Давным-давно появился проект спецификации CSS3 Generated Content, который разрешил свойство content для любого HTML-элемента (не только:: перед /:: после псевдоэлементов), без каких-либо формальных ограничений для пустых или замененных элементов. Когда-то он поддерживался Opera Presto (1, 2) и, по крайней мере, в некоторой степени, WebKit (3). К концу 2011 года реализация WebKit элемента content для img, по-видимому, эффективно конвертировала его из пустого замещенного элемента в незаменяемый элемент, например, span (даже изменилось его контекстное меню, удалив такие опции, как "Сохранить изображение как... '). Это также позволило применить псевдоэлементы, такие как img::before.

В текущей реализации Blink (Chrome и т.д.) свойство seeting content для элемента img не имеет видимого эффекта. Но элемент img явно имеет разную структуру в зависимости от того, правильно ли он загружен или сломан: если он загружен, он отображается в DOM Inspector как простой пустой элемент, но если он сломан, он раскрывает внутреннюю структуру Shadow DOM следующим образом:

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; box-sizing: border-box; padding: 1px;">
  <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;">
  <div id="alttext" style="overflow: hidden; display: block;">Alt text</div>
</div>

Вероятно, потому что сломанный img отображается с помощью теневого div s, возможно применить к нему только псевдоэлементы в этом случае (4).

Текущий WebKit не поддерживает псевдо элементы для img. Но, что интересно, по крайней мере, iOS 9.2.1 Safari начинает поддерживать их после установки свойства content для этого img (5).

Почему это свойство вносит такие изменения? Я предполагаю, что если пустой элемент получает какой-либо контент (даже сгенерированный), браузер должен предоставить что-то, чтобы отображать этот контент, эффективно заменяя пустой элемент каким-то контейнером (например, тень Blink div id="alttext-container"), а этот контейнер может иметь псевдо. Я ошибаюсь? И не было ли это поведение удалено из последних версий WebKit?

Ответ 1