Add reftests for basic flexbox functionality.

These tests (flex_row_direction.html and flex_column_direction.html) are correct, but only test the small amount of current flexbox functionality.
servo · Aug 21, 2015 · e3bbcb5 · e3bbcb5
1 parent 0e18f64
commit e3bbcb5
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 0 deletions.
diff --git a/tests/ref/basic.list b/tests/ref/basic.list
@@ -98,6 +98,8 @@ flaky_cpu == append_style_a.html append_style_b.html
 == first_child_pseudo_a.html first_child_pseudo_b.html
 == first_of_type_pseudo_a.html first_of_type_pseudo_b.html
 == fixed_width_overrides_child_intrinsic_width_a.html fixed_width_overrides_child_intrinsic_width_ref.html
+== flex_column_direction.html flex_column_direction_ref.html
+== flex_row_direction.html flex_row_direction_ref.html
 == float_clearance_a.html float_clearance_ref.html
 == float_clearance_intrinsic_width_a.html float_clearance_intrinsic_width_ref.html
 == float_intrinsic_height.html float_intrinsic_height_ref.html

diff --git a/tests/ref/flex_column_direction.html b/tests/ref/flex_column_direction.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: flex container should layout flex items horizontally</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/">
+  <style>
+    body {
+      margin: 0;
+    }
+    .flexbox {
+      display: flex;
+      flex-direction: column;
+      height: 300px;
+    }
+    .first-item {
+      background: orange;
+      height: 150px;
+      width: 100px;
+      flex: 1 0 auto;
+    }
+    .second-item {
+      background: blue;
+      height: 150px;
+      width: 100px;
+      flex: 1 0 auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="first-item"></div>
+    <div class="second-item"></div>
+  </div>
+</body>
+</html>
diff --git a/tests/ref/flex_column_direction_ref.html b/tests/ref/flex_column_direction_ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+    body {
+      margin: 0;
+    }
+    .flexbox {
+      height: 300px;
+    }
+    .first-item {
+      background: orange;
+      width: 100px;
+      height: 150px;
+    }
+    .second-item {
+      background: blue;
+      width: 100px;
+      height: 150px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="first-item"></div>
+    <div class="second-item"></div>
+  </div>
+</body>
+</html>
diff --git a/tests/ref/flex_row_direction.html b/tests/ref/flex_row_direction.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: flex container should layout flex items horizontally</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/">
+  <style>
+    body {
+      margin: 0;
+    }
+    .flexbox {
+      display: flex;
+      width: 300px;
+    }
+    .first-item {
+      background: orange;
+      height: 100px;
+      flex: 1 0 auto;
+    }
+    .second-item {
+      background: blue;
+      height: 100px;
+      flex: 1 0 auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="first-item"></div>
+    <div class="second-item"></div>
+  </div>
+</body>
+</html>
diff --git a/tests/ref/flex_row_direction_ref.html b/tests/ref/flex_row_direction_ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+    body {
+      margin: 0;
+    }
+    .flexbox {
+      width: 300px;
+    }
+    .first-item {
+      background: orange;
+      height: 100px;
+      width: 150px;
+      float: left;
+    }
+    .second-item {
+      background: blue;
+      height: 100px;
+      width: 150px;
+      float: left;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="first-item"></div>
+    <div class="second-item"></div>
+  </div>
+</body>
+</html>