1 files changed, 46 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html b/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html
new file mode 100644
index 0000000000..8a1484f693
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/reference/content-height-with-scrollbars-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.outer {
+    height: 100px;
+    overflow:scroll;
+}
+.outer > div, td:nth-child(1) {
+    background-color: lightgreen;
+}
+td:nth-child(2) {
+    background-color: lightblue;
+}
+table, td {
+    padding: 0;
+    border-spacing: 0;
+}
+</style>
+</head>
+<body>
+<p>This tests that when setting the height of a flex item to a percentage
+height, we use the content height with scrollbars. The content should not be
+scrollable in any of the test cases below.</p>
+
+<div class="outer">
+  <div style="height: 100%"></div>
+</div>
+
+<div class="outer">
+  <div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div>
+</div>
+
+<div class="outer">
+  <div style="display:inline-block; height: 50px; width: 50%;"></div><div
+      style="display:inline-block; height: 50px; width: 50%; background-color: lightblue"></div>
+</div>
+<div class="outer" style="padding: 10px; height: auto">
+  <table style="margin: 0; padding: 0; width: 600px">
+  <tr>
+    <td style="width: 50%; height: 50px"></td>
+    <td style="width: 50%; height: 50px"></td>
+  </tr>
+  </table>
+</body>
+</html>