Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Report image loading to Resource Timing #7510

Merged
merged 5 commits into from
Jan 21, 2022
Merged

Report image loading to Resource Timing #7510

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2fd0369
Report image loading to Resource Timing
noamr Jan 19, 2022
319e966
some CR nits
noamr Jan 19, 2022
41923d7
Change callback ref
noamr Jan 19, 2022
98e4b03
relevant global object
noamr Jan 20, 2022
0639853
Rewrap
domenic Jan 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 39 additions & 22 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28815,10 +28815,12 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code

<li>
<!--FETCH-->
<p><i>Fetch the image</i>: <span data-x="concept-fetch">Fetch</span> <var>request</var>. Let
this instance of the <span data-x="concept-fetch">fetching</span> algorithm be associated with
<var>image request</var>.
<!-- TODO "Interaction with the Preload Scanner" from the picture spec --></p>
<p><i>Fetch the image</i>: <span data-x="concept-fetch">Fetch</span> <var>request</var>. Return
from this algorithm, and run the remaining steps as part of the fetch's <i data-x="process
response">processResponse</i> for the <span data-x="concept-response">response</span>
domenic marked this conversation as resolved.
Show resolved Hide resolved
<var>response</var>.</p>

<!-- TODO "Interaction with the Preload Scanner" from the picture spec -->

<p>The resource obtained in this fashion, if any, is <var>image request</var>'s <span
data-x="img-req-data">image data</span>. It can be either <span>CORS-same-origin</span> or
Expand All @@ -28841,8 +28843,18 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
compatible with existing web content.</p>
</li>

<li><p>Continue the remaining steps <span>in parallel</span>, but without missing any data from
fetching.</p></li>
<li>
<p>Let <var>finalize image loading</var> given <var>eventName</var> be the following:</p>

<ol>
<li><p><span>Finalize and report timing</span> with <var>response</var>, the <code>img</code>
element's <span>node document</span>'s <span>relevant global object</span>, and "<code
data-x="">img</code>".</p></li>

domenic marked this conversation as resolved.
Show resolved Hide resolved
<li><p><span data-x="concept-event-fire">Fire an event</span> named <var>eventName</var> at
domenic marked this conversation as resolved.
Show resolved Hide resolved
the <code>img</code> element.</p></li>
</ol>
</li>

<li>
<p>As soon as possible, jump to the first applicable entry from the following list:</p>
Expand Down Expand Up @@ -28893,12 +28905,17 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
user agent is able to determine the image's width and height, it must <span data-x="prepare an
image for presentation">prepare the <code>img</code> element's <span>current request</span>
for presentation</span> given the <code>img</code> element and replace the previous image.
Once one body part has been completely decoded, the user agent must set the <code>img</code>
element's <span>current request</span>'s <span data-x="img-req-state">state</span> to <span
data-x="img-all">completely available</span> and <span>queue an element task</span> on the
<span>DOM manipulation task source</span> given the <code>img</code> element to <span
data-x="concept-event-fire">fire an event</span> named <code data-x="event-load">load</code>
at the <code>img</code> element.</p>
Once one body part has been completely decoded, perform the following steps:</p>

<ol>
<li><p>Set the <code>img</code> element's <span>current request</span>'s <span
data-x="img-req-state">state</span> to <span data-x="img-all">completely
available</span>.</p></li>

<li><p><span>Queue an element task</span> on the <span>DOM manipulation task source</span>
given the <code>img</code> element to <var>finalize image loading</var> with <code
data-x="event-load">load</code>.</p></li>
</ol>
<!--TODO what if the image is broken?
domenic marked this conversation as resolved.
Show resolved Hide resolved
TODO change state and fire in the same task? -->
</dd>
Expand Down Expand Up @@ -28930,15 +28947,14 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
request</span> for the <span>current request</span> and the <span>pending request</span>,
<span>upgrade the pending request to the current request</span>, set <span>current
request</span>'s <span data-x="img-req-state">state</span> to <span
data-x="img-error">broken</span>, and <span data-x="concept-event-fire">fire an event</span>
named <code data-x="event-error">error</code> at the <code>img</code> element.</p></li>
data-x="img-error">broken</span>, and call <var>finalize image loading</var> with <code
data-x="event-error">error</code>.</p></li>

<li><p>Otherwise, if the user agent is able to determine that <var>image request</var>'s
image is corrupted in some fatal way such that the image dimensions cannot be obtained, and
<var>image request</var> is <span>current request</span>, <span>abort the image
request</span> for <var>image request</var> and <span data-x="concept-event-fire">fire an
event</span> named <code data-x="event-error">error</code> at the <code>img</code>
element.</p></li>
request</span> for <var>image request</var> and call <var>finalize image loading</var> with
<code data-x="event-error">error</code>.</p></li>
</ol>

<p id="img-load">That <span data-x="concept-task">task</span>, and each subsequent <span
Expand Down Expand Up @@ -28969,10 +28985,11 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
<li><p>Set <var>image request</var> to the <span data-x="img-all">completely
available</span> state.</p></li>

<li><p>Add the image to the <span>list of available images</span> using the key <var>key</var>, with the <span>ignore higher-layer caching</span> flag set.</p></li>
<li><p>Add the image to the <span>list of available images</span> using the key
<var>key</var>, with the <span>ignore higher-layer caching</span> flag set.</p></li>

<li><p><span data-x="concept-event-fire">Fire an event</span> named <code
data-x="event-load">load</code> at the <code>img</code> element.</p></li>
<li><p>Call <var>finalize image loading</var> with <code
data-x="event-load">load</code>.</p></li>
</ol>
</dd>

Expand All @@ -28984,8 +29001,8 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
request</span> and the <span>pending request</span>, <span>upgrade the pending request to the
current request</span> if <var>image request</var> is the <span>pending request</span>, and
then <span>queue an element task</span> on the <span>DOM manipulation task source</span> given
the <code>img</code> element to <span data-x="concept-event-fire">fire an event</span> named
<code data-x="event-error">error</code> at the <code>img</code> element.</p></dd>
the <code>img</code> element to <var>finalize image loading</var> with <code
data-x="event-error">error</code>.</p></dd>
</dl>
</li>
</ol>
Expand Down