diff --git a/dom/flex/test/chrome.ini b/dom/flex/test/chrome.ini
index 1dd6d4d651fe..d1c56cf504ca 100644
--- a/dom/flex/test/chrome.ini
+++ b/dom/flex/test/chrome.ini
@@ -1,3 +1,4 @@
 [chrome/test_flex_axis_directions.html]
 [chrome/test_flex_items.html]
+[chrome/test_flex_item_clamp.html]
 [chrome/test_flex_lines.html]
diff --git a/dom/flex/test/chrome/test_flex_item_clamp.html b/dom/flex/test/chrome/test_flex_item_clamp.html
new file mode 100644
index 000000000000..a286c53a902c
--- /dev/null
+++ b/dom/flex/test/chrome/test_flex_item_clamp.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+f {
+  display: flex;
+  background-color: grey;
+  width: 400px;
+  height: 20px;
+  margin-bottom: 5px;
+}
+
+b {
+  flex-basis: 100px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: gold;
+}
+
+c {
+  flex-basis: 100px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: yellow;
+}
+
+d {
+  flex: none;
+  background-color: orange;
+}
+
+b::after, c::after, d::after {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
+  border: 1px solid teal;
+}
+
+
+.min50 {
+  min-width: 50px;
+}
+.min370 {
+  min-width: 370px;
+}
+.min400 {
+  min-width: 400px;
+}
+
+.max5 {
+  max-width: 5px;
+}
+.max50 {
+  max-width: 50px;
+}
+
+</style>
+
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+const TEXT_NODE = Node.TEXT_NODE;
+
+function testItemMatchesExpectedValues(item, values, index) {
+  is(item.clampState, values.cs, "Item index " + index + " should have expected clampState.");
+}
+
+function runTests() {
+  /**
+   * The expectedValues array contains one element for each flex container child of
+   * of the body. The values in this object are compared against the returned flex
+   * API values of the first flex item in the first line of the corresponding flex
+   * container. The "cs" value is compared against the flex item's clampState.
+   **/
+  const expectedValues = [
+    { cs: "unclamped" },
+    { cs: "unclamped" },
+    { cs: "unclamped" },
+    { cs: "unclamped" },
+
+    { cs: "clamped_to_min" },
+    { cs: "clamped_to_min" },
+    { cs: "clamped_to_min" },
+    { cs: "clamped_to_min" },
+    { cs: "clamped_to_min" },
+
+    { cs: "clamped_to_max" },
+    { cs: "clamped_to_max" },
+    { cs: "clamped_to_max" },
+    { cs: "clamped_to_max" },
+    { cs: "clamped_to_max" },
+  ];
+
+  let children = document.body.children;
+  is(children.length, expectedValues.length, "Document should have expected number of flex containers.");
+
+  for (let i = 0; i < children.length; ++i) {
+    const flex = children.item(i).getAsFlexContainer();
+    ok(flex, "Document child index " + i + " should be a flex container.");
+    if (flex) {
+      const values = expectedValues[i];
+      const item = flex.getLines()[0].getItems()[0];
+      testItemMatchesExpectedValues(item, values, i);
+    }
+  }
+
+  SimpleTest.finish();
+}
+</script>
+</head>
+
+<body onLoad="runTests();">
+  <!-- unclamped cases -->
+  <!-- a flex:none item -->
+  <f><d></d></f>
+
+  <!-- a flex-grow item with room to grow -->
+  <f><b class="min370"></b></f>
+
+  <!-- a flex-shrink item with room to shrink -->
+  <f><b class="max50"></b><c class="min370"></c></f>
+
+  <!-- a flex-grow basis 100px item paired with a basis 200px item, where the second item is clamped,
+       and the first item then can grow past its minimum -->
+  <f><b style="min-width: 170px"></b><c class="max50" style="flex-basis:200px"></c></f>
+
+
+  <!-- clamped_to_min cases -->
+  <!-- a flex-grow item with a min smaller than the container -->
+  <f><b class="min370"></b><c></c></f>
+
+  <!-- a flex-shrink item with a min, paired with another that in total exceeds the container -->
+  <f><b class="min50"></b><c class="min370"></c></f>
+
+  <!-- a flex-shrink item shrunk to its (content-based) automatic minimum size -->
+  <f><b></b><c class="min400"></c></f>
+
+  <!-- a flex:none item with a min that is larger than its flex base size -->
+  <f><d class="min50"></d><c></c></f>
+
+  <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of
+       the first item's min with the second item's max -->
+  <f><b style="min-width: 200px"></b><c style="flex-basis:150px; max-width:200px"></c></f>
+
+
+  <!-- clamped_to_max cases -->
+  <!-- a flexible item with a max -->
+  <f><b class="max50"></b></f>
+
+  <!-- a flexible item with a max, paired with another flex-grow item -->
+  <f><b class="max50"></b><c></c></f>
+
+  <!-- a flexible item with a max smaller than its content size -->
+  <f><b class="max5"></b><c></c></f>
+
+  <!-- a flex:none item with a max smaller than its content size -->
+  <f><d class="max5"></d><c></c></f>
+
+  <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of
+       the first item's max with the second item's min -->
+  <f><b style="flex-basis:150px; max-width:200px"></b><c style="min-width: 200px"></c></f>
+</body>
+</html>
