Implement position: absolute for replaced elements.

Add reftests for replaced and nested absolute flows.
servo · Mar 4, 2014 · 070be51 · 070be51 · bors-servo · Mar 5, 2014
1 parent 4a6077c
commit 070be51
Show file tree

Hide file tree

Showing 9 changed files with 402 additions and 43 deletions.
diff --git a/src/components/main/layout/block.rs b/src/components/main/layout/block.rs
diff --git a/src/components/main/layout/box_.rs b/src/components/main/layout/box_.rs
@@ -166,6 +166,10 @@ impl ImageBoxInfo {
         Au::from_px(image_ref.get().get_size().unwrap_or(Size2D(0,0)).width)
     }
 
+    // Return used value for width or height.
+    //
+    // `dom_length`: width or height as specified in the `img` tag.
+    // `style_length`: width as given in the CSS
     pub fn style_length(style_length: LengthOrPercentageOrAuto,
                         dom_length: Option<Au>,
                         container_width: Au) -> MaybeAuto {
@@ -1455,6 +1459,7 @@ impl Box {
 
     /// Assigns replaced width for this box only if it is replaced content.
     ///
+    /// This assigns only the width, not margin or anything else.
     /// CSS 2.1 § 10.3.2.
     pub fn assign_replaced_width_if_necessary(&self,container_width: Au) {
         match self.specific {
@@ -1502,8 +1507,10 @@ impl Box {
         }
     }
 
-    /// Assign height for image and scanned text boxes.
-    pub fn assign_height(&self) {
+    /// Assign height for this box if it is replaced content.
+    ///
+    /// Ideally, this should follow CSS 2.1 § 10.6.2
+    pub fn assign_replaced_height_if_necessary(&self) {
         match self.specific {
             GenericBox | IframeBox(_) => {
             }

diff --git a/src/components/main/layout/construct.rs b/src/components/main/layout/construct.rs
@@ -687,6 +687,13 @@ impl<'a> FlowConstructor<'a> {
 }
 
 impl<'a> PostorderNodeMutTraversal for FlowConstructor<'a> {
+    // Construct Flow based on 'display', 'position', and 'float' values.
+    //
+    // CSS 2.1 Section 9.7
+    //
+    // TODO: This should actually consult the table in that section to get the
+    // final computed value for 'display'.
+    //
     // `#[inline(always)]` because this is always called from the traversal function and for some
     // reason LLVM's inlining heuristics go awry here.
     #[inline(always)]
@@ -718,6 +725,10 @@ impl<'a> PostorderNodeMutTraversal for FlowConstructor<'a> {
                 }
             }
 
+            // Absolutely positioned elements will have computed value of
+            // `float` as 'none' and `display` as per the table.
+            // Currently, for original `display` value of 'inline', the new
+            // `display` value is 'block'.
             (_, _, position::absolute) | (_, _, position::fixed) => {
                 node.set_flow_construction_result(self.build_flow_for_block(node))
             }

diff --git a/src/components/main/layout/inline.rs b/src/components/main/layout/inline.rs
@@ -698,7 +698,7 @@ impl Flow for InlineFlow {
         debug!("assign_height_inline: floats in: {:?}", self.base.floats);
         // assign height for inline boxes
         for box_ in self.boxes.iter() {
-            box_.assign_height();
+            box_.assign_replaced_height_if_necessary();
         }
         let scanner_floats = self.base.floats.clone();
         let mut scanner = LineboxScanner::new(scanner_floats);

diff --git a/src/test/ref/basic.list b/src/test/ref/basic.list
@@ -38,6 +38,8 @@
 == position_abs_cb_with_non_cb_kid_a.html position_abs_cb_with_non_cb_kid_b.html
 == position_abs_height_width_a.html position_abs_height_width_b.html
 == position_abs_left_a.html position_abs_left_b.html
+== position_abs_nested_a.html position_abs_nested_b.html
+== position_abs_replaced_simple_a.html position_abs_replaced_simple_b.html
 == position_abs_static_y_a.html position_abs_static_y_b.html
 == position_abs_width_percentage_a.html position_abs_width_percentage_b.html
 == position_fixed_a.html position_fixed_b.html

diff --git a/src/test/ref/position_abs_nested_a.html b/src/test/ref/position_abs_nested_a.html
@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <style>
+      #first {
+      position: relative;
+      width: 90px;
+      height: 90px;
+      border: solid 1px;
+      }
+      #abs {
+      position: absolute;
+      left: 30px;
+      top: 30px;
+      height: 30px;
+      width: 30px;
+      background: blue;
+      }
+      #abs2 {
+      position: absolute;
+      background: green;
+      height: 15px;
+      width: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="first">
+      <div id="abs">
+	<div id="abs2">
+	</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/test/ref/position_abs_nested_b.html b/src/test/ref/position_abs_nested_b.html
@@ -0,0 +1,36 @@
+<html>
+  <head>
+    <style>
+      #first {
+      width: 90px;
+      height: 90px;
+      border: solid 1px;
+      }
+      .row {
+      width: 90px;
+      height: 30px;
+      }
+      .center {
+      margin-left: 30px;
+      height: 30px;
+      width: 30px;
+      background: blue;
+      }
+      .little-box {
+      height: 15px;
+      width: 15px;
+      background: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="first">
+      <div class="row"></div>
+      <div class="center">
+	<div class="little-box">
+	</div>
+      </div>
+      <div class="row"></div>
+    </div>
+  </body>
+</html>
diff --git a/src/test/ref/position_abs_replaced_simple_a.html b/src/test/ref/position_abs_replaced_simple_a.html
@@ -0,0 +1,25 @@
+<html>
+  <head>
+    <style>
+      #first {
+      position: relative;
+      width: 90px;
+      height: 90px;
+      border: solid 1px;
+      }
+      #abs {
+      position: absolute;
+      margin: 0px;
+      top: 30px;
+      right: 30px;
+      bottom: 30px;
+      width: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="first">
+      <img src="rust_logo.png" width="100" id="abs" alt="Rust Logo" />
+    </div>
+  </body>
+</html>
diff --git a/src/test/ref/position_abs_replaced_simple_b.html b/src/test/ref/position_abs_replaced_simple_b.html
@@ -0,0 +1,32 @@
+<html>
+  <head>
+    <style>
+      #first {
+      width: 90px;
+      height: 90px;
+      border: solid 1px;
+      }
+      .row {
+      width: 90px;
+      height: 30px;
+      }
+      .center {
+      margin-left: 30px;
+      height: 30px;
+      width: 30px;
+      background: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="first">
+      <div class="row">
+      </div>
+      <div class="center">
+	<img src="rust_logo.png" width="30" id="abs" alt="Rust Logo" />
+      </div>
+      <div class="row">
+      </div>
+    </div>
+  </body>
+</html>