layout: Make percentages in top and bottom for relative positions

relative to height, not width.

Improves etsy.com.

Closes #13760.

components/layout/block.rs

@@ -753,6 +753,17 @@ impl BlockFlow {
         }
     }
 
+    /// Writes in the size of the relative containing block for children. (This information
+    /// is also needed to handle RTL.)
+    fn propagate_early_absolute_position_info_to_children(&mut self) {
+        for kid in self.base.child_iter_mut() {
+            flow::mut_base(kid).early_absolute_position_info = EarlyAbsolutePositionInfo {
+                relative_containing_block_size: self.fragment.content_box().size,
+                relative_containing_block_mode: self.fragment.style().writing_mode,
+            }
+        }
+    }
+
     /// Assign block-size for current flow.
     ///
     /// * Collapse margins for flow's children and set in-flow child flows' block offsets now that
@@ -1011,16 +1022,9 @@ impl BlockFlow {
                 self.fragment.border_box.size.block = block_size;
             }
 
-            // Write in the size of the relative containing block for children. (This information
-            // is also needed to handle RTL.)
-            for kid in self.base.child_iter_mut() {
-                flow::mut_base(kid).early_absolute_position_info = EarlyAbsolutePositionInfo {
-                    relative_containing_block_size: self.fragment.content_box().size,
-                    relative_containing_block_mode: self.fragment.style().writing_mode,
-                };
-            }
 
             if self.base.flags.contains(IS_ABSOLUTELY_POSITIONED) {
+                self.propagate_early_absolute_position_info_to_children();
                 return None
             }
 
@@ -1050,10 +1054,9 @@ impl BlockFlow {
             // position.
             self.fragment.border_box.size.block = cur_b;
             self.fragment.border_box.start.b = Au(0);
-
-            if !self.base.flags.contains(IS_ABSOLUTELY_POSITIONED) {
             self.base.position.size.block = cur_b;
-            }
+
+            self.propagate_early_absolute_position_info_to_children();
 
             // Translate the current set of floats back into the parent coordinate system in the
             // inline direction, and store them in the flow so that flows that come later in the

components/layout/fragment.rs

@@ -1379,10 +1379,10 @@ impl Fragment {
             };
             let offset_b = if offsets.block_start != LengthOrPercentageOrAuto::Auto {
                 MaybeAuto::from_style(offsets.block_start,
-                                      container_size.inline).specified_or_zero()
+                                      container_size.block).specified_or_zero()
             } else {
                 -MaybeAuto::from_style(offsets.block_end,
-                                       container_size.inline).specified_or_zero()
+                                       container_size.block).specified_or_zero()
             };
             LogicalSize::new(style.writing_mode, offset_i, offset_b)
         }

tests/wpt/metadata-css/css21_dev/html4/bottom-103.htm.ini

@@ -1,3 +0,0 @@
-[bottom-103.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/bottom-104.htm.ini

@@ -1,3 +0,0 @@
-[bottom-104.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/bottom-113.htm.ini

@@ -1,3 +0,0 @@
-[bottom-113.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/position-relative-nested-001.htm.ini

@@ -1,3 +0,0 @@
-[position-relative-nested-001.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/relpos-calcs-007.htm.ini

@@ -1,3 +0,0 @@
-[relpos-calcs-007.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/top-103.htm.ini

@@ -1,3 +0,0 @@
-[top-103.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/top-104.htm.ini

@@ -1,3 +0,0 @@
-[top-104.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/top-113.htm.ini

@@ -1,3 +0,0 @@
-[top-113.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/top-114.htm.ini

@@ -1,3 +0,0 @@
-[top-114.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -4668,6 +4668,18 @@
             "url": "/_mozilla/css/quotes_simple_a.html"
           }
         ],
+        "css/relative_position_vertical_percentage_a.html": [
+          {
+            "path": "css/relative_position_vertical_percentage_a.html",
+            "references": [
+              [
+                "/_mozilla/css/relative_position_vertical_percentage_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/relative_position_vertical_percentage_a.html"
+          }
+        ],
         "css/removeproperty.html": [
           {
             "path": "css/removeproperty.html",
@@ -18474,6 +18486,18 @@
           "url": "/_mozilla/css/quotes_simple_a.html"
         }
       ],
+      "css/relative_position_vertical_percentage_a.html": [
+        {
+          "path": "css/relative_position_vertical_percentage_a.html",
+          "references": [
+            [
+              "/_mozilla/css/relative_position_vertical_percentage_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/relative_position_vertical_percentage_a.html"
+        }
+      ],
       "css/removeproperty.html": [
         {
           "path": "css/removeproperty.html",

tests/wpt/mozilla/tests/css/relative_position_vertical_percentage_a.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="match" href="relative_position_vertical_percentage_ref.html">
+<style>
+body, html {
+    margin: 0;
+}
+#a {
+    height: 200px;
+    width: 600px;
+    background: gold;
+}
+#b {
+    position: relative;
+    top: 50%;
+}
+</style>
+<div id=a><div id=b>X
+

tests/wpt/mozilla/tests/css/relative_position_vertical_percentage_ref.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+body, html {
+    margin: 0;
+}
+#a {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 200px;
+    width: 600px;
+    background: gold;
+}
+#b {
+    position: absolute;
+    top: 100px;
+    left: 0px;
+}
+</style>
+<div id=a></div><div id=b>X
+