Integrate Resize Observer and expand "update the rendering"

This includes upstreaming the monkeypatch from the Resize Observer specification, which adds more detail to the "update the rendering" steps to include an explicit "Recalculate styles and update layout" step. This enables us to be clear that intersection observer integration and marking paint timing happens after that step.

Fixes #8277.

Author: emilio

source

@@ -3983,6 +3983,20 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    </dd>
 
 
+   <dt>Resize Observer</dt>
+
+   <dd>
+    <p>The following terms are defined in <cite>Resize Observer</cite>: <ref spec=RESIZEOBSERVER></p>
+
+    <ul class="brief">
+     <li><dfn data-x-href="https://w3c.github.io/csswg-drafts/resize-observer-1/#gather-active-observations-h">gather active resize observations at depth</dfn></li>
+     <li><dfn data-x-href="https://w3c.github.io/csswg-drafts/resize-observer-1/#has-active-observations-h">has active resize observations</dfn></li>
+     <li><dfn data-x-href="https://w3c.github.io/csswg-drafts/resize-observer-1/#has-skipped-observations-h">has skipped resize observations</dfn></li>
+     <li><dfn data-x-href="https://w3c.github.io/csswg-drafts/resize-observer-1/#broadcast-resize-notifications-h">broadcast active resize observations</dfn></li>
+     <li><dfn data-x-href="https://w3c.github.io/csswg-drafts/resize-observer-1/#deliver-resize-error">deliver resize loop error</dfn></li>
+    </ul>
+   </dd>
+
 
    <dt>WebGL</dt>
 
@@ -95922,12 +95936,45 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
      the animation frame callbacks</span> for that <code>Document</code>, passing in <var>now</var>
      as the timestamp.</p></li>
 
+     <li>
+      <p>For each <span>fully active</span> <code>Document</code> <var>doc</var> in
+      <var>docs</var>:</p>
+
+      <ol>
+       <li><p>Recalculate styles and update layout for <var>doc</var>.</p></li>
+
+       <li><p>Let <var>depth</var> be 0.</p></li>
+
+       <li><p><span>Gather active resize observations at depth</span> <var>depth</var> for
+       <var>doc</var>.</p></li>
+
+       <li>
+        <p>While <var>doc</var> <span>has active resize observations</span>:</p>
+
+        <ol>
+         <li><p>Set <var>depth</var> to the result of
+         <span data-x="broadcast active resize observations">broadcasting active resize
+         observations</span> given <var>doc</var>.</p></li>
+
+         <li><p>Recalculate styles and update layout for <var>doc</var>.</p></li>
+
+         <li><p><span>Gather active resize observations at depth</span> <var>depth</var> for
+         <var>doc</var>.</p></li>
+        </ol>
+       </li>
+
+       <li><p>If <var>doc</var> <span>has skipped resize observations</span>, then <span>deliver
+       resize loop error</span> given <var>doc</var>.</p></li>
+      </ol>
+     </li>
+
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, <span>run
      the update intersection observations steps</span> for that <code>Document</code>, passing in
      <var>now</var> as the timestamp. <ref spec=INTERSECTIONOBSERVER></p></li>
 
      <li><p>Invoke the <span>mark paint timing</span> algorithm for each <code>Document</code>
      object in <var>docs</var>.</p></li>
+     <!-- TODO: should this only happen for fully active documents? Seems weird otherwise -->
 
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, update the
      rendering or user interface of that <code>Document</code> and its <span
@@ -127546,6 +127593,9 @@ INSERT INTERFACES HERE
    <dt id="refsINTERSECTIONOBSERVER">[INTERSECTIONOBSERVER]</dt>
    <dd><cite><a href="https://w3c.github.io/IntersectionObserver/">Intersection Observer</a></cite>, S. Zager. W3C.</dd>
 
+   <dt id="refsRESIZEOBSERVER">[RESIZEOBSERVER]</dt>
+   <dd><cite><a href="http://w3c.github.io/csswg-drafts/resize-observer-1/">Resize Observer</a></cite>, O. Brufau, E. Álvarez. W3C.</dd>
+
    <dt id="refsISO3166">[ISO3166]</dt>
    <dd><cite><a href="https://www.iso.org/iso-3166-country-codes.html">ISO 3166: Codes for the representation of names of countries and their subdivisions</a></cite>. ISO.</dd>