Fixed layout to consistently use relative coordinates in reflow and absolute coordiantes in display lists.

src/servo/layout/block.rs

@@ -10,6 +10,8 @@ impl block_layout_methods for @box {
     fn reflow_block(available_width: au) {
         assert self.kind == bk_block;
 
+        #debug["starting reflow block"];
+
         // Root here is the root of the reflow, not necessarily the doc as
         // a whole.
         //

src/servo/layout/box_builder.rs

@@ -70,9 +70,14 @@ impl methods for ctxt {
                 di_inline {
                     let anon_box = alt self.anon_box {
                         none {
-                            let b = new_box(kid, bk_inline);
-                            self.anon_box = some(b);
-                            b
+                          // the anonymous box inherits the attributes
+                          // of its parents for now, so that
+                          // properties of intrinsic boxes are not
+                          // spread to their parenting anonymous box.
+                          // TODO: check what css actually specifies
+                          let b = new_box(self.parent_node, bk_inline);
+                          self.anon_box = some(b);
+                          b
                         }
                         some(b) { b }
                     };

src/servo/layout/inline.rs

@@ -12,14 +12,16 @@ impl inline_layout_methods for @box {
     fn reflow_inline(available_width: au) {
         assert self.kind == bk_inline;
 
+        #debug["starting reflow inline"];
+
         // FIXME: This is clownshoes inline layout and is not even close to
         // correct.
-        let y = self.bounds.origin.y;
+        let y = 0;
         let mut x = 0, inline_available_width = *available_width;
         let mut current_height = 0;
         for tree::each_child(btree, self) {
             |kid|
-            kid.bounds.origin = { x: au(x), y: y };
+            kid.bounds.origin = { x: au(x), y: au(y) };
             kid.reflow(au(inline_available_width));
             inline_available_width -= *kid.bounds.size.width;
             x += *kid.bounds.size.width;

src/servo/layout/layout.rs

@@ -7,7 +7,7 @@ them to be rendered
 
 import task::*;
 import comm::*;
-import gfx::geom;
+import gfx::geom::{au, au_to_px, px_to_au, point, box};
 import gfx::renderer;
 import dom::base::node;
 import dom::rcu::scope;
@@ -40,7 +40,7 @@ fn layout(to_renderer: chan<renderer::msg>) -> chan<msg> {
                 this_box.dump();
 
 		this_box.apply_style_for_subtree();
-                this_box.reflow(geom::px_to_au(800));
+                this_box.reflow(px_to_au(800));
 
                 let dlist = build_display_list(this_box);
                 to_renderer.send(renderer::render(dlist));
@@ -50,50 +50,82 @@ fn layout(to_renderer: chan<renderer::msg>) -> chan<msg> {
     }
 }
 
-fn build_display_list(box: @base::box) -> display_list::display_list {
-    let mut list = [box_to_display_item(box)];
+#[doc="
+
+Builds a display list for a box and all its children. 
+Args: 
+-box: the box to build the display list for
+-origin: the coordinates of upper-left corner of the box containing
+ the passed in box.
+
+"]
+fn build_display_list_from_origin(box: @base::box, origin : point<au>)
+    -> dl::display_list {
+    let box_origin = point(
+        px_to_au(au_to_px(origin.x) + au_to_px(box.bounds.origin.x)),
+        px_to_au(au_to_px(origin.y) + au_to_px(box.bounds.origin.y)));
+    #debug("Handed origin %?, box has bounds %?, starting with origin %?", origin, copy box.bounds, box_origin);
+
+    let mut list = [box_to_display_item(box, box_origin)];
 
     for btree.each_child(box) {|c|
-        list += build_display_list(c);
+        #debug("Recursively building display list with origin %?", box_origin);
+        list += build_display_list_from_origin(c, box_origin);
     }
 
     #debug("display_list: %?", list);
     ret list;
 }
 
-fn box_to_display_item(box: @base::box) -> dl::display_item {
+fn build_display_list(box : @base::box) -> dl::display_list {
+    ret build_display_list_from_origin(box, point(au(0), au(0)));
+}
+
+#[doc="
+
+Creates a display list item for a single block. 
+Args: 
+-box: the box to build the display list for
+-origin: the coordinates of upper-left corner of the passed in box.
+
+"]
+fn box_to_display_item(box: @base::box, origin : point<au>)
+    -> dl::display_item {
     let mut item;
-    alt box.appearance.background_image {
-      some(image) {
+
+    #debug("request to display a box from origin %?", origin);
+
+    let bounds = {origin : origin, size : box.bounds.size};
+
+    alt (box.appearance.background_image, box.appearance.background_color) {
+      (some(image), some(*)) | (some(image), none) {
 	item = dl::display_item({
 	    item_type: dl::display_item_image(~copy *image),
-	    bounds: copy box.bounds
+	    bounds: bounds
 	});
       }
-      none {
-        alt box.appearance.background_color {
-          some(col) {
-            let red_col = (col >> 16u) & 255u;
-            let green_col = (col >> 8u) & 255u;
-            let blue_col = col & 255u;
+      (none, some(col)) {
+        let red_col = (col >> 16u) & 255u;
+        let green_col = (col >> 8u) & 255u;
+        let blue_col = col & 255u;
 
-	    item = dl::display_item({
-	        item_type: dl::display_item_solid_color(red_col as u8,
-                                                        green_col as u8,
-                                                        blue_col as u8),
-	        bounds: copy box.bounds
-	    });
-          }
-	  none {
-            let r = rand::rng();
-	    item = dl::display_item({
-	        item_type: dl::display_item_solid_color(r.next() as u8,
-						        r.next() as u8,
-						        r.next() as u8),
-	        bounds: copy box.bounds
-	    });
-          }
-        }
+        #debug("Assigning colors (%d, %d, %d) to box with bounds %?", red_col as int, green_col as int, blue_col as int, bounds);
+
+	item = dl::display_item({
+	    item_type: dl::display_item_solid_color(red_col as u8,
+                                                    green_col as u8,
+                                                    blue_col as u8),
+	    bounds: bounds
+	});
+      }
+      (none, none) {
+        let r = rand::rng();
+	item = dl::display_item({
+	    item_type: dl::display_item_solid_color(r.next() as u8,
+						    r.next() as u8,
+						    r.next() as u8),
+	    bounds: bounds
+	});
       }
     }
 

src/test/small-layout-test.css

@@ -0,0 +1,16 @@
+.green {background-color : green}
+.blue {background-color : blue}
+.red {background-color : red}
+.white {background-color : white}
+.black {background-color : black}
+.brown {background-color : rgb(200,100,0)}
+.gray {background-color : rgb(100,100,100)}
+.lightgray {background-color : rgb(200,200,200)}
+.darkgray {background-color : rgb(50,50,50)}
+.cyan {background-color : rgb(0,255,255)}
+.maroon {background-color : rgb(100,0,20)}
+.pink {background-color : rgb(255,0,255)}
+.orange {background-color : rgb(255,175,0)}
+.violet {background-color : rgb(100,0,150)}
+.darkgreen {background-color : rgb(0,100,0)}
+.darkblue {background-color : rgb(0,0,100)}

src/test/small-layout-test.html

@@ -0,0 +1,4 @@
+<div class="gray">
+    <img class="green"></img>
+    <div class="blue"><img class="red"></img></div>
+</div>

src/test/test.css

@@ -4,7 +4,8 @@ p.blue > p.green + p.red { background-color : blue ;color : green }
 img[class] .pastoral *[lang|=en] { display:inline}
 .book > #novel + *[type=novella] p { color : blue; color : white }
 * {background-color : red}
-* * * * {background-color : black}
+* * * * {background-color : white}
+* * * * * {background-color : rgb(200,0,200)}
 div div {background-color : green}
 * * div {background-color : blue}
 div div div {background-color : rgb(100,100,100)}

src/test/test_bg_color.html

@@ -1,12 +1,18 @@
-<div class="darkgrey">
-  <div class="green">
-    <div class="darkblue"><img class="maroon"></img><div class="darkgreen"><img class="gray"></img></div></div>
+<div class="darkgray">
+    <div class="darkblue">
+      <img class="maroon"></img>
+      <div class="darkgreen">
+	<img class="gray"></img>
+      </div>
+    </div>
     <img class="black"></img>
     <img class="brown"></img>
-    <div class="pink"><img class="orange"></img><img class="violet"></img></div>
-  <div class="lightgray">
-    <img class="blue"></img>
-    <img class="red"></img>
-  </div>
-  </div>
+    <div class="pink">
+      <img class="orange"></img>
+      <img class="violet"></img>
+    </div>
+    <div class="lightgray">
+      <img class="blue"></img>
+      <img class="red"></img>
+    </div>
 </div>

src/test/test_inline_boxes.css

@@ -0,0 +1,16 @@
+.green {background-color : green}
+.blue {background-color : blue}
+.red {background-color : red}
+.white {background-color : white}
+.black {background-color : black}
+.brown {background-color : rgb(200,100,0)}
+.gray {background-color : rgb(100,100,100)}
+.lightgray {background-color : rgb(200,200,200)}
+.darkgray {background-color : rgb(50,50,50)}
+.cyan {background-color : rgb(0,255,255)}
+.maroon {background-color : rgb(100,0,20)}
+.pink {background-color : rgb(255,0,255)}
+.orange {background-color : rgb(255,175,0)}
+.violet {background-color : rgb(100,0,150)}
+.darkgreen {background-color : rgb(0,100,0)}
+.darkblue {background-color : rgb(0,0,100)}

src/test/test_inline_boxes.html

@@ -0,0 +1,6 @@
+<div class="darkgray">
+  <div class="blue">
+    <img class="red"></img>
+  </div>
+  <img class="green"></img>
+</div>