Fix getComputedStyle for width and height (#32437)

It was providing a length whenever the element generates a box.
However, these properties don't apply to non-replaced inlines,
so the computed value should be provided instead.

components/layout_2020/query.rs

@@ -218,9 +218,20 @@ pub fn process_resolved_style_request<'dom>(
                 _ => return None,
             };
 
+            // https://drafts.csswg.org/cssom/#resolved-value-special-case-property-like-height
+            // > If the property applies to the element or pseudo-element and the resolved value of the
+            // > display property is not none or contents, then the resolved value is the used value.
+            // > Otherwise the resolved value is the computed value.
+            //
+            // However, all browsers ignore that for margin and padding properties, and resolve to a length
+            // even if the property doesn't apply: https://github.com/w3c/csswg-drafts/issues/10391
             match longhand_id {
-                LonghandId::Width => Some(content_rect.size.width),
-                LonghandId::Height => Some(content_rect.size.height),
+                LonghandId::Width if resolved_size_should_be_used_value(fragment) => {
+                    Some(content_rect.size.width)
+                },
+                LonghandId::Height if resolved_size_should_be_used_value(fragment) => {
+                    Some(content_rect.size.height)
+                },
                 LonghandId::MarginBottom => Some(margins.bottom.into()),
                 LonghandId::MarginTop => Some(margins.top.into()),
                 LonghandId::MarginLeft => Some(margins.left.into()),
@@ -236,6 +247,25 @@ pub fn process_resolved_style_request<'dom>(
         .unwrap_or_else(computed_style)
 }
 
+fn resolved_size_should_be_used_value(fragment: &Fragment) -> bool {
+    // https://drafts.csswg.org/css-sizing-3/#preferred-size-properties
+    // > Applies to: all elements except non-replaced inlines
+    match fragment {
+        Fragment::Box(box_fragment) => {
+            !box_fragment.style.get_box().display.is_inline_flow() ||
+                fragment.base().map_or(false, |base| {
+                    base.flags.contains(FragmentFlags::IS_REPLACED)
+                })
+        },
+        Fragment::Float(_) |
+        Fragment::Positioning(_) |
+        Fragment::AbsoluteOrFixedPositioned(_) |
+        Fragment::Image(_) |
+        Fragment::IFrame(_) => true,
+        Fragment::Text(_) => false,
+    }
+}
+
 pub fn process_resolved_style_request_for_unstyled_node<'dom>(
     context: &SharedStyleContext,
     node: impl LayoutNode<'dom>,

tests/wpt/meta/css/css-cascade/all-prop-revert-layer.html.ini

@@ -1,12 +0,0 @@
-[all-prop-revert-layer.html]
-  [block-size]
-    expected: FAIL
-
-  [inline-size]
-    expected: FAIL
-
-  [width]
-    expected: FAIL
-
-  [height]
-    expected: FAIL

tests/wpt/meta/css/css-transitions/pseudo-elements-002.html.ini

@@ -1,4 +0,0 @@
-[pseudo-elements-002.html]
-  [Check that transitions run on a pseudo element whose ancestor changes display type.]
-    expected: FAIL
-

tests/wpt/meta/css/cssom/getComputedStyle-resolved-min-max-clamping.html.ini

@@ -1,4 +0,0 @@
-[getComputedStyle-resolved-min-max-clamping.html]
-  [Resolved value of width / height when there's no used value isn't clamped by min/max properties]
-    expected: FAIL
-

tests/wpt/meta/html/rendering/non-replaced-elements/hidden-elements.html.ini

@@ -7,6 +7,3 @@
 
   [embed[hidden='until-found'\] element should be inline 0x0]
     expected: FAIL
-
-  [embed[hidden=''\] element should be inline 0x0]
-    expected: FAIL

tests/wpt/meta/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-display.html.ini

@@ -46,3 +46,6 @@
 
   [fieldset with display: table-caption]
     expected: FAIL
+
+  [fieldset with display: inline]
+    expected: FAIL