|
20 | 20 | { |
21 | 21 | "name": "report largest contentful paint", |
22 | 22 | "href": "https://www.w3.org/TR/largest-contentful-paint/#report-largest-contentful-paint", |
23 | | - "html": "When asked to <dfn class=\"dfn-paneled has-dfn-panel\" data-dfn-type=\"dfn\" data-export=\"\" id=\"report-largest-contentful-paint\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">report largest contentful paint</dfn> given a <code class=\"idl\"><a data-link-type=\"idl\" href=\"https://dom.spec.whatwg.org/#document\" id=\"ref-for-document②\">Document</a></code> <var>document</var>, a timestamp <var>now</var>, an <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#ordered-set\" id=\"ref-for-ordered-set②\">ordered set</a> of <a data-link-type=\"dfn\" href=\"https://w3c.github.io/paint-timing/#pending-image-record\" id=\"ref-for-pending-image-record\">pending image records</a> <var>paintedImages</var>, and an <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#ordered-set\" id=\"ref-for-ordered-set③\">ordered set</a> of <a data-link-type=\"dfn\" href=\"https://dom.spec.whatwg.org#concept-element\" id=\"ref-for-concept-element①\">elements</a> <var>paintedTextNodes</var>, perform the following steps:", |
| 23 | + "html": "When asked to <dfn class=\"dfn-paneled has-dfn-panel\" data-dfn-type=\"dfn\" data-export=\"\" id=\"report-largest-contentful-paint\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">report largest contentful paint</dfn> given a <code class=\"idl\"><a data-link-type=\"idl\" href=\"https://dom.spec.whatwg.org/#document\" id=\"ref-for-document②\">Document</a></code> <var>document</var>, a <a data-link-type=\"dfn\" href=\"https://w3c.github.io/paint-timing/#paint-timing-info\" id=\"ref-for-paint-timing-info①\">paint timing info</a> <var>paintTimingInfo</var>, an <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#ordered-set\" id=\"ref-for-ordered-set②\">ordered set</a> of <a data-link-type=\"dfn\" href=\"https://w3c.github.io/paint-timing/#pending-image-record\" id=\"ref-for-pending-image-record\">pending image records</a> <var>paintedImages</var>, and an <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#ordered-set\" id=\"ref-for-ordered-set③\">ordered set</a> of <a data-link-type=\"dfn\" href=\"https://dom.spec.whatwg.org#concept-element\" id=\"ref-for-concept-element①\">elements</a> <var>paintedTextNodes</var>, perform the following steps:", |
24 | 24 | "rationale": ".algorithm", |
25 | 25 | "steps": [ |
26 | 26 | { |
|
43 | 43 | "html": "<p>Let <var>intersectionRect</var> be the value returned by the intersection rect algorithm using <var>imageElement</var> as the target and viewport as the root.</p>" |
44 | 44 | }, |
45 | 45 | { |
46 | | - "html": "<p><a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry\" id=\"ref-for-potentially-add-a-largestcontentfulpaint-entry\">Potentially add a LargestContentfulPaint entry</a> with <var>candidate</var>, <var>intersectionRect</var>, <var>now</var>, <var>record</var>’s <a data-link-type=\"dfn\" href=\"https://w3c.github.io/paint-timing/#pending-image-record-loadtime\" id=\"ref-for-pending-image-record-loadtime\">loadTime</a> and <var>document</var>.</p>" |
| 46 | + "html": "<p><a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry\" id=\"ref-for-potentially-add-a-largestcontentfulpaint-entry\">Potentially add a LargestContentfulPaint entry</a> with <var>candidate</var>, <var>intersectionRect</var>, <var>paintTimingInfo</var>, <var>record</var>’s <a data-link-type=\"dfn\" href=\"https://w3c.github.io/paint-timing/#pending-image-record-loadtime\" id=\"ref-for-pending-image-record-loadtime\">loadTime</a> and <var>document</var>.</p>" |
47 | 47 | } |
48 | 48 | ] |
49 | 49 | }, |
|
54 | 54 | { |
55 | 55 | "html": "<p>If <var>textNode</var> is not <a data-link-type=\"dfn\" href=\"https://w3c.github.io/paint-timing/#exposed-for-paint-timing\" id=\"ref-for-exposed-for-paint-timing②\">exposed for paint timing</a>, given <var>document</var>, continue.</p>" |
56 | 56 | }, |
| 57 | + { |
| 58 | + "html": "If <var>textNode</var> has <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/css-color-4/#alpha-channel\" id=\"ref-for-alpha-channel\">alpha channel</a> value <=0 or <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/css-color-3/#opacity\" id=\"ref-for-opacity\">opacity</a> value <=0:", |
| 59 | + "rationale": "if", |
| 60 | + "steps": [ |
| 61 | + { |
| 62 | + "html": "<p>If <var>textNode</var>’s <a class=\"css\" data-link-type=\"property\" href=\"https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow\" id=\"ref-for-propdef-text-shadow\">text-shadow</a> value is none, <var>textNode</var>’s <a class=\"property css\" data-link-type=\"property\" href=\"https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-color\" id=\"ref-for-propdef-stroke-color\">stroke-color</a> value is <a data-link-type=\"dfn\" href=\"https://drafts.csswg.org/css-color-3/#transparent\" id=\"ref-for-transparent\">transparent</a> and <var>textNode</var>’s <a class=\"property css\" data-link-type=\"property\" href=\"https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-image\" id=\"ref-for-propdef-stroke-image\">stroke-image</a> value is none, continue.</p>" |
| 63 | + } |
| 64 | + ] |
| 65 | + }, |
57 | 66 | { |
58 | 67 | "html": "<p>Let <var>candidate</var> be (<var>textNode</var>, null)</p>" |
59 | 68 | }, |
|
70 | 79 | "html": "<p>Intersect <var>intersectionRect</var> with the visual viewport.</p>" |
71 | 80 | }, |
72 | 81 | { |
73 | | - "html": "<p><a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry\" id=\"ref-for-potentially-add-a-largestcontentfulpaint-entry①\">Potentially add a LargestContentfulPaint entry</a> with <var>candidate</var>, <var>intersectionRect</var>, <var>now</var>, 0, and <var>document</var>.</p>" |
| 82 | + "html": "<p><a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#potentially-add-a-largestcontentfulpaint-entry\" id=\"ref-for-potentially-add-a-largestcontentfulpaint-entry①\">Potentially add a LargestContentfulPaint entry</a> with <var>candidate</var>, <var>intersectionRect</var>, <var>paintTimingInfo</var>, 0, and <var>document</var>.</p>" |
74 | 83 | } |
75 | 84 | ] |
76 | 85 | } |
|
193 | 202 | "html": "<p>Let <var>id</var> be <var>candidate</var>’s <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#largest-contentful-paint-candidate-element\" id=\"ref-for-largest-contentful-paint-candidate-element③\">element</a>'s <a class=\"idl-code\" data-link-type=\"attribute\" href=\"https://dom.spec.whatwg.org#dom-element-id\" id=\"ref-for-dom-element-id\">element id</a>.</p>" |
194 | 203 | }, |
195 | 204 | { |
196 | | - "html": "<p>Let <var>contentInfo</var> be a <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#ordered-map\" id=\"ref-for-ordered-map\">map</a> with <var>contentInfo</var>[\"size\"] = <var>size</var>, <var>contentInfo</var>[\"url\"] = <var>url</var>, <var>contentInfo</var>[\"id\"] = <var>id</var>, <var>contentInfo</var>[\"renderTime\"] = <var>renderTime</var>, <var>contentInfo</var>[\"loadTime\"] = <var>loadTime</var>, and contentInfo[\"element\"] = <var>candidate</var>’s <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#largest-contentful-paint-candidate-element\" id=\"ref-for-largest-contentful-paint-candidate-element④\">element</a>.</p>" |
| 205 | + "html": "<p>Let <var>contentInfo</var> be a <a data-link-type=\"dfn\" href=\"https://infra.spec.whatwg.org/#ordered-map\" id=\"ref-for-ordered-map\">map</a> with <var>contentInfo</var>[\"size\"] = <var>size</var>, <var>contentInfo</var>[\"url\"] = <var>url</var>, <var>contentInfo</var>[\"id\"] = <var>id</var>, <var>contentInfo</var>[\"loadTime\"] = <var>loadTime</var>, and contentInfo[\"element\"] = <var>candidate</var>’s <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#largest-contentful-paint-candidate-element\" id=\"ref-for-largest-contentful-paint-candidate-element④\">element</a>.</p>" |
197 | 206 | }, |
198 | 207 | { |
199 | | - "html": "<p><a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#create-a-largestcontentfulpaint-entry\" id=\"ref-for-create-a-largestcontentfulpaint-entry\">Create a LargestContentfulPaint entry</a> with <var>contentInfo</var>, and <var>document</var> as inputs.</p>" |
| 208 | + "html": "<p><a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#create-a-largestcontentfulpaint-entry\" id=\"ref-for-create-a-largestcontentfulpaint-entry\">Create a LargestContentfulPaint entry</a> with <var>contentInfo</var>, <var>paintTimingInfo</var>, and <var>document</var> as inputs.</p>" |
200 | 209 | } |
201 | 210 | ] |
202 | 211 | }, |
|
209 | 218 | "html": "<p>Set <var>document</var>’s <a data-link-type=\"dfn\" href=\"https://www.w3.org/TR/largest-contentful-paint/#largest-contentful-paint-size\" id=\"ref-for-largest-contentful-paint-size①\">largest contentful paint size</a> to <var>contentInfo</var>[\"size\"].</p>" |
210 | 219 | }, |
211 | 220 | { |
212 | | - "html": "<p>Let <var>entry</var> be a new <code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#largestcontentfulpaint\" id=\"ref-for-largestcontentfulpaint④\">LargestContentfulPaint</a></code> entry with <var>document</var>’s <a data-link-type=\"dfn\" href=\"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm\" id=\"ref-for-concept-relevant-realm\">relevant realm</a>, with its</p>\n <ul>\n <li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-size\" id=\"ref-for-dom-largestcontentfulpaint-size①\">size</a></code> set to <var>contentInfo</var>[\"size\"],</p>\n </li><li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-url\" id=\"ref-for-dom-largestcontentfulpaint-url①\">url</a></code> set to <var>contentInfo</var>[\"url\"],</p>\n </li><li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-id\" id=\"ref-for-dom-largestcontentfulpaint-id①\">id</a></code> set to <var>contentInfo</var>[\"id\"],</p>\n </li><li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-rendertime\" id=\"ref-for-dom-largestcontentfulpaint-rendertime①\">renderTime</a></code> set to <var>contentInfo</var>[\"renderTime\"],</p>\n </li><li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-loadtime\" id=\"ref-for-dom-largestcontentfulpaint-loadtime①\">loadTime</a></code> set to <var>contentInfo</var>[\"loadTime\"],</p>\n </li><li data-md=\"\">\n <p>and <code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-element\" id=\"ref-for-dom-largestcontentfulpaint-element②\">element</a></code> set to <var>contentInfo</var>[\"element\"].</p>\n </li></ul>" |
| 221 | + "html": "<p>Let <var>entry</var> be a new <code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#largestcontentfulpaint\" id=\"ref-for-largestcontentfulpaint⑤\">LargestContentfulPaint</a></code> entry with <var>document</var>’s <a data-link-type=\"dfn\" href=\"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm\" id=\"ref-for-concept-relevant-realm\">relevant realm</a>, whose <a data-link-type=\"dfn\" href=\"https://w3c.github.io/paint-timing/#paint-timing-info\" id=\"ref-for-paint-timing-info④\">paint timing info</a> is <var>paintTimingInfo</var>, with its</p>\n <ul>\n <li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-size\" id=\"ref-for-dom-largestcontentfulpaint-size①\">size</a></code> set to <var>contentInfo</var>[\"size\"],</p>\n </li><li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-url\" id=\"ref-for-dom-largestcontentfulpaint-url①\">url</a></code> set to <var>contentInfo</var>[\"url\"],</p>\n </li><li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-id\" id=\"ref-for-dom-largestcontentfulpaint-id①\">id</a></code> set to <var>contentInfo</var>[\"id\"],</p>\n </li><li data-md=\"\">\n <p><code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-loadtime\" id=\"ref-for-dom-largestcontentfulpaint-loadtime①\">loadTime</a></code> set to <var>contentInfo</var>[\"loadTime\"],</p>\n </li><li data-md=\"\">\n <p>and <code class=\"idl\"><a data-link-type=\"idl\" href=\"https://www.w3.org/TR/largest-contentful-paint/#dom-largestcontentfulpaint-element\" id=\"ref-for-dom-largestcontentfulpaint-element②\">element</a></code> set to <var>contentInfo</var>[\"element\"].</p>\n </li></ul>" |
213 | 222 | }, |
214 | 223 | { |
215 | 224 | "html": "<p><a data-link-type=\"dfn\" href=\"https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry\" id=\"ref-for-dfn-queue-a-performanceentry\">Queue the PerformanceEntry</a> <var>entry</var>.</p>" |
|
0 commit comments