1 files changed, 75 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-008.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-008.html
new file mode 100644
index 0000000000..b34306b483
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-008.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="min-content width is calculated correctly in a variety of scenarios with two flex items. These cases were used as examples when deriving the intrinsic size algorithm. " />
+
+<style>
+  .min-width-flexbox {
+    display: flex;
+    outline: 5px solid blue;
+    height: 100px;
+    width: min-content;
+    margin-bottom: 20px;
+  }
+
+  .min-width-flexbox>div:nth-child(1) {
+    background: yellow;
+  }
+
+  .min-width-flexbox>div:nth-child(2) {
+    background: orange;
+  }
+
+  .min-width-flexbox>div>div {
+    width: 100px;
+  }
+
+</style>
+
+<body onload="checkLayout('.min-width-flexbox')">
+  <div id=log></div>
+</body>
+
+<script>
+  // These are from the table in https://github.com/w3c/csswg-drafts/issues/7189#issuecomment-1172771501
+  var test_cases = [
+    [0, 0, 200, 100, 300],
+    [0, .1, 200, 101, 310],
+    [.1, .1, 203, 103, 330],
+    [.4, .4, 248, 148, 420],
+    [.5, .5, 275, 175, 450],
+    [.75, .75, 368.75, 268.75, 637.5],
+    [1, 1, 500, 400, 900],
+    [0, 2, 200, 200, 400],
+    [.1, 2, 205, 200, 405],
+    [.2, 2, 212, 220, 432],
+    [2, 2, 500, 400, 900],
+  ];
+  test_cases.forEach(test_case => {
+    var flexbox = document.createElement('div');
+    flexbox.className = "min-width-flexbox";
+    flexbox.setAttribute("data-expected-width", test_case[4]);
+
+    var child1 = document.createElement('div');
+    child1.style.flex = "0 1 200px";
+    child1.style.width = "500px";
+    child1.style.flexGrow = test_case[0];
+    child1.setAttribute("data-expected-width", test_case[2]);
+    child1.appendChild(document.createElement('div'));
+
+    var child2 = document.createElement('div');
+    child2.style.flex = "0 0 100px";
+    child2.style.width = "200px";
+    child2.style.flexGrow = test_case[1];
+    child2.setAttribute("data-expected-width", test_case[3]);
+    child2.appendChild(document.createElement('div'));
+
+    flexbox.appendChild(child1);
+    flexbox.appendChild(child2);
+    document.body.appendChild(flexbox);
+  });
+</script>