From b64149a03722e180c48434882a5dd41aac765745 Mon Sep 17 00:00:00 2001 From: Margaret Meyerhofer Date: Mon, 11 Jun 2012 10:32:16 -0700 Subject: [PATCH] Fixed layout to consistently use relative coordinates in reflow and absolute coordiantes in display lists. --- src/servo/layout/block.rs | 2 + src/servo/layout/box_builder.rs | 11 ++-- src/servo/layout/inline.rs | 6 ++- src/servo/layout/layout.rs | 96 ++++++++++++++++++++++----------- src/test/small-layout-test.css | 16 ++++++ src/test/small-layout-test.html | 4 ++ src/test/test.css | 3 +- src/test/test_bg_color.html | 24 +++++---- src/test/test_inline_boxes.css | 16 ++++++ src/test/test_inline_boxes.html | 6 +++ 10 files changed, 137 insertions(+), 47 deletions(-) create mode 100644 src/test/small-layout-test.css create mode 100644 src/test/small-layout-test.html create mode 100644 src/test/test_inline_boxes.css create mode 100644 src/test/test_inline_boxes.html diff --git a/src/servo/layout/block.rs b/src/servo/layout/block.rs index 8aa43b19079..c890f5b00b0 100644 --- a/src/servo/layout/block.rs +++ b/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. // diff --git a/src/servo/layout/box_builder.rs b/src/servo/layout/box_builder.rs index 51e27f599b2..a6d9c595cb7 100644 --- a/src/servo/layout/box_builder.rs +++ b/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 } }; diff --git a/src/servo/layout/inline.rs b/src/servo/layout/inline.rs index 9a25484a0ff..6272bdc8dd2 100644 --- a/src/servo/layout/inline.rs +++ 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; diff --git a/src/servo/layout/layout.rs b/src/servo/layout/layout.rs index fb1c8291dc4..fd82928b5cb 100644 --- a/src/servo/layout/layout.rs +++ b/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) -> chan { 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) -> chan { } } -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) + -> 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) + -> 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 + }); } } diff --git a/src/test/small-layout-test.css b/src/test/small-layout-test.css new file mode 100644 index 00000000000..a987a0264b2 --- /dev/null +++ b/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)} diff --git a/src/test/small-layout-test.html b/src/test/small-layout-test.html new file mode 100644 index 00000000000..ae1dc439fd8 --- /dev/null +++ b/src/test/small-layout-test.html @@ -0,0 +1,4 @@ +
+ +
+
diff --git a/src/test/test.css b/src/test/test.css index 5b3146bf0b0..d51ab975148 100644 --- a/src/test/test.css +++ b/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)} diff --git a/src/test/test_bg_color.html b/src/test/test_bg_color.html index 8a13f04ae27..1e92be72497 100644 --- a/src/test/test_bg_color.html +++ b/src/test/test_bg_color.html @@ -1,12 +1,18 @@ -
-
-
+
+
+ +
+ +
+
-
-
- - -
-
+
+ + +
+
+ + +
diff --git a/src/test/test_inline_boxes.css b/src/test/test_inline_boxes.css new file mode 100644 index 00000000000..a987a0264b2 --- /dev/null +++ b/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)} diff --git a/src/test/test_inline_boxes.html b/src/test/test_inline_boxes.html new file mode 100644 index 00000000000..2a7d2cf9909 --- /dev/null +++ b/src/test/test_inline_boxes.html @@ -0,0 +1,6 @@ +
+
+ +
+ +