Add tests and clean up *_mode_assign_inline_sizes

Clean up block_mode_assign_inline_sizes and inline_mode_assign_inline_sizes and add extra css tests.
servo · Apr 9, 2016 · e0454e0 · e0454e0
1 parent 90ab488
commit e0454e0
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 10 deletions.
diff --git a/components/layout/flex.rs b/components/layout/flex.rs
@@ -186,14 +186,20 @@ impl FlexFlow {
         // FIXME (mbrubeck): Get correct mode for absolute containing block
         let containing_block_mode = self.block_flow.base.writing_mode;
 
+        let container_block_size = match self.available_main_size {
+            AxisSize::Definite(length) => Some(length),
+            _ => None
+        };
+        let container_inline_size = match self.available_cross_size {
+            AxisSize::Definite(length) => length,
+            AxisSize::MinMax(ref constraint) => constraint.clamp(content_inline_size),
+            AxisSize::Infinite => content_inline_size
+        };
         let mut iterator = self.block_flow.base.child_iter_mut().enumerate().peekable();
         while let Some((_, kid)) = iterator.next() {
             {
                 let kid_base = flow::mut_base(kid);
-                kid_base.block_container_explicit_block_size = match self.available_main_size {
-                    AxisSize::Definite(length) => Some(length),
-                    _ => None
-                }
+                kid_base.block_container_explicit_block_size = container_block_size;
             }
 
             // The inline-start margin edge of the child flow is at our inline-start content edge,
@@ -210,11 +216,7 @@ impl FlexFlow {
                             inline_end_content_edge
                         };
                 }
-                kid_base.block_container_inline_size = match self.available_main_size {
-                    AxisSize::Definite(length) => length,
-                    AxisSize::MinMax(ref constraint) => constraint.clamp(content_inline_size),
-                    AxisSize::Infinite => content_inline_size,
-                };
+                kid_base.block_container_inline_size = container_inline_size;
                 kid_base.block_container_writing_mode = containing_block_mode;
             }
         }
@@ -247,7 +249,6 @@ impl FlexFlow {
 
         let even_content_inline_size = inline_size / child_count;
 
-        let inline_size = self.block_flow.base.block_container_inline_size;
         let container_mode = self.block_flow.base.block_container_writing_mode;
         self.block_flow.base.position.size.inline = inline_size;
 

diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -5709,6 +5709,12 @@
         ]
       },
       "testharness": {
+        "css/flex-item-assign-inline-size.html": [
+          {
+            "path": "css/flex-item-assign-inline-size.html",
+            "url": "/_mozilla/css/flex-item-assign-inline-size.html"
+          }
+        ],
         "css/float_relative_to_position.html": [
           {
             "path": "css/float_relative_to_position.html",

diff --git a/tests/wpt/mozilla/tests/css/flex-item-assign-inline-size.html b/tests/wpt/mozilla/tests/css/flex-item-assign-inline-size.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test inline size against percentage</title>
+<style>
+#container {
+    width: 500px;
+    height: 500px;
+    background: white;
+}
+#container > div {
+    display: flex;
+    background: red;
+}
+#container > div > div {
+    background: green;
+}
+#flex-container0 {
+    flex-direction: column;
+    height: 20%;
+    width: 10%;
+}
+#flex-item0 {
+    width: 10%;
+}
+#flex-container1 {
+    flex-direction: row;
+    height: 20%;
+    width: 10%;
+}
+#flex-item1 {
+    width: 10%;
+    background: green;
+}
+</style>
+    </head>
+    <body>
+        <div id="container">
+            <div id="flex-container0">
+                <div id="flex-item0">
+                </div>
+            </div>
+            <div id="flex-container1">
+                <div id="flex-item1">
+                </div>
+            </div>
+        </div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(function() {
+    var flex_container0 = document.getElementById("flex-container0");
+    var flex_item0 = document.getElementById("flex-item0");
+
+    var flex_container1 = document.getElementById("flex-container1");
+    var flex_item1 = document.getElementById("flex-item1");
+
+    assert_equals(flex_container0.clientWidth, 50);
+    assert_equals(flex_item0.clientWidth, 5);
+
+    assert_equals(flex_container1.clientWidth, 50);
+    assert_equals(flex_item1.clientWidth, 5);
+});
+</script>
+</body>
+</html>