diff --git a/components/layout_2020/formatting_contexts.rs b/components/layout_2020/formatting_contexts.rs
index b78ad8d836b..507092cddcf 100644
--- a/components/layout_2020/formatting_contexts.rs
+++ b/components/layout_2020/formatting_contexts.rs
@@ -201,14 +201,11 @@ impl IndependentFormattingContext {
         auto_block_size_stretches_to_containing_block: bool,
     ) -> ContentSizes {
         match self {
-            Self::NonReplaced(non_replaced) => sizing::outer_inline(
-                &non_replaced.style.clone(),
+            Self::NonReplaced(non_replaced) => non_replaced.outer_inline_content_sizes(
+                layout_context,
                 containing_block,
                 auto_minimum,
                 auto_block_size_stretches_to_containing_block,
-                |containing_block_for_children| {
-                    non_replaced.inline_content_sizes(layout_context, containing_block_for_children)
-                },
             ),
             Self::Replaced(replaced) => sizing::outer_inline(
                 &replaced.style,
@@ -291,6 +288,24 @@ impl NonReplacedFormattingContext {
             ))
             .1
     }
+
+    pub(crate) fn outer_inline_content_sizes(
+        &mut self,
+        layout_context: &LayoutContext,
+        containing_block: &IndefiniteContainingBlock,
+        auto_minimum: &LogicalVec2<Au>,
+        auto_block_size_stretches_to_containing_block: bool,
+    ) -> ContentSizes {
+        sizing::outer_inline(
+            &self.style.clone(),
+            containing_block,
+            auto_minimum,
+            auto_block_size_stretches_to_containing_block,
+            |containing_block_for_children| {
+                self.inline_content_sizes(layout_context, containing_block_for_children)
+            },
+        )
+    }
 }
 
 impl NonReplacedFormattingContextContents {
diff --git a/components/layout_2020/table/layout.rs b/components/layout_2020/table/layout.rs
index 9f6e4c57e79..6e3746c7e94 100644
--- a/components/layout_2020/table/layout.rs
+++ b/components/layout_2020/table/layout.rs
@@ -769,49 +769,20 @@ impl<'a> TableLayout<'a> {
     }
 
     /// Compute CAPMIN: <https://drafts.csswg.org/css-tables/#capmin>
-    fn compute_caption_minimum_inline_size(
-        &mut self,
-        layout_context: &LayoutContext,
-        writing_mode: WritingMode,
-    ) -> Au {
+    fn compute_caption_minimum_inline_size(&mut self, layout_context: &LayoutContext) -> Au {
         self.table
             .captions
             .iter()
             .map(|caption| {
                 let mut context = caption.context.borrow_mut();
-                let padding = context
-                    .style
-                    .padding(writing_mode)
-                    .percentages_relative_to(Au::zero());
-                let border = context.style.border_width(writing_mode);
-                let margin = context
-                    .style
-                    .margin(writing_mode)
-                    .percentages_relative_to(Au::zero())
-                    .auto_is(Au::zero);
-
-                let padding_border_sums = LogicalVec2 {
-                    inline: padding.inline_sum() + border.inline_sum() + margin.inline_sum(),
-                    block: padding.block_sum() + border.block_sum() + margin.block_sum(),
-                };
-
-                let (size, min_size, max_size, size_is_auto) =
-                    get_outer_sizes_from_style(&context.style, writing_mode, &padding_border_sums);
-
-                // If an inline size is defined it should serve as the upper limit and lower limit
-                // of the caption inline size.
-                if !size_is_auto {
-                    size.inline
-                } else {
-                    let style = context.style.clone();
-                    let inline_content_sizes = context.inline_content_sizes(
+                context
+                    .outer_inline_content_sizes(
                         layout_context,
-                        &IndefiniteContainingBlock::new_for_style(&style),
-                    );
-                    inline_content_sizes.min_content + padding_border_sums.inline
-                }
-                .min(max_size.inline)
-                .max(min_size.inline)
+                        &IndefiniteContainingBlock::new_for_style(&self.table.style),
+                        &LogicalVec2::zero(),
+                        false, /* auto_block_size_stretches_to_containing_block */
+                    )
+                    .min_content
             })
             .max()
             .unwrap_or_default()
@@ -1666,8 +1637,7 @@ impl<'a> TableLayout<'a> {
     ) -> IndependentLayout {
         let table_writing_mode = containing_block_for_children.style.writing_mode;
         let grid_min_max = self.compute_grid_min_max(layout_context, table_writing_mode);
-        let caption_minimum_inline_size =
-            self.compute_caption_minimum_inline_size(layout_context, table_writing_mode);
+        let caption_minimum_inline_size = self.compute_caption_minimum_inline_size(layout_context);
         self.compute_table_width(
             containing_block_for_children,
             containing_block_for_table,
@@ -2638,7 +2608,7 @@ impl Table {
         let mut table_content_sizes = layout.compute_grid_min_max(layout_context, writing_mode);
 
         let mut caption_minimum_inline_size =
-            layout.compute_caption_minimum_inline_size(layout_context, writing_mode);
+            layout.compute_caption_minimum_inline_size(layout_context);
         if caption_minimum_inline_size > table_content_sizes.min_content ||
             caption_minimum_inline_size > table_content_sizes.max_content
         {
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 6f46349cb4e..6600694237e 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -565066,6 +565066,13 @@
        {}
       ]
      ],
+     "caption-cyclic-percentage.html": [
+      "3ba59491fa47496ac4f6562ad94bfde385a47e57",
+      [
+       null,
+       {}
+      ]
+     ],
      "caption-side-1.html": [
       "302e51ae239307a49c239bf0ad5ade17a5c9d940",
       [
diff --git a/tests/wpt/tests/css/css-tables/caption-cyclic-percentage.html b/tests/wpt/tests/css/css-tables/caption-cyclic-percentage.html
new file mode 100644
index 00000000000..3ba59491fa4
--- /dev/null
+++ b/tests/wpt/tests/css/css-tables/caption-cyclic-percentage.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<title>Cyclic percentage sizes on table captions</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-tables/#table-caption">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution">
+<meta assert="
+  Cyclic percentages on a table caption behave like in a normal block box.
+  Note that browsers don't agree with the spec on the exact behavior
+  (https://github.com/w3c/csswg-drafts/issues/10969),
+  but they should still pass this test.">
+
+<style>
+.test {
+  display: inline-block;
+  border: 10px solid;
+}
+.min-width > .test > div {
+  min-width: calc(100px + 0%);
+}
+.width > .test > div {
+  width: calc(100px + 0%);
+}
+.max-width > .test > div {
+  max-width: calc(100px + 0%);
+}
+</style>
+
+<article class="min-width">
+  <p>These 2 rectangles should be equally wide:</p>
+  <div class="test">
+    <div></div>
+  </div>
+  <br>
+  <div class="test">
+    <div style="display: table-caption"></div>
+  </div>
+</article>
+
+<article class="width">
+  <p>These 2 rectangles should be equally wide:</p>
+  <div class="test">
+    <div></div>
+  </div>
+  <br>
+  <div class="test">
+    <div style="display: table-caption"></div>
+  </div>
+</article>
+
+<article class="max-width">
+  <p>These 2 rectangles should be equally wide:</p>
+  <div class="test">
+    <div></div>
+  </div>
+  <br>
+  <div class="test">
+    <div style="display: table-caption"></div>
+  </div>
+</article>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+for (let article of document.querySelectorAll("article")) {
+  test(function() {
+    let elements = article.querySelectorAll(".test");
+    assert_greater_than(elements.length, 1, "Need more than 1 element to compare");
+    let expected = elements[0].offsetWidth;
+    for (let i = 1; i < elements.length; ++i) {
+        assert_equals(
+          elements[i].offsetWidth,
+          expected,
+          `Element #${i + 1} is as wide as the 1st one`,
+        );
+    }
+  }, article.className);
+}
+</script>
+