1 files changed, 56 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html b/testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html
new file mode 100644
index 0000000000..8e58953a33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<style>
+.row-wrapper, .column-wrapper {
+  margin: 4px 0;
+  overflow: auto;
+  direction: rtl;
+  border: 2px solid black;
+}
+
+.column-wrapper {
+  width: 300px;
+}
+
+.row-wrapper {
+  height: 300px;
+  writing-mode: vertical-rl;
+}
+
+.column-wrapper > div {
+  /* This border represents the expected rendering of the testcase's
+     "margin:4px". This border should occupy the same space as that margin
+     would, and it should create the same amount of scrollable overflow.  (We
+     can't just use "margin:4px" here, because this reference case uses block
+     layout, and margins have different behavior with respect to collapsing and
+     scrollable-overflow impact in block vs. flexbox layout.) */
+  border: 4px solid white;
+  height: 30px;
+  background: #CCC;
+}
+
+.h-overflow {
+  width: 500px;
+}
+
+.row-wrapper > div {
+  /* As noted above, this is a mockup for the "margin:4px" in the testcase. */
+  border: 4px solid white;
+  width: 30px;
+  background: #CCC;
+}
+
+.v-overflow {
+  height: 500px;
+}
+
+</style>
+
+<div class=column-wrapper>
+  <div>one</div>
+  <div class=h-overflow>two</div>
+</div>
+
+<div class=row-wrapper>
+  <div>one</div>
+  <div class=v-overflow>two</div>
+</div>