Implement clear for floats

servo · Aug 15, 2013 · 425e837 · 425e837 · bors-servo · Aug 15, 2013
1 parent 034536e
commit 425e837
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 11 deletions.
diff --git a/src/components/main/layout/block.rs b/src/components/main/layout/block.rs
@@ -12,8 +12,6 @@ use layout::inline::InlineLayout;
 use layout::model::{MaybeAuto, Specified, Auto};
 use layout::float_context::{FloatContext, Invalid};
 
-use newcss::values::{CSSClearNone, CSSClearLeft, CSSClearRight, CSSClearBoth};
-use layout::float_context::{ClearLeft, ClearRight, ClearBoth};
 use std::cell::Cell;
 use geom::point::Point2D;
 use geom::rect::Rect;
@@ -281,14 +279,7 @@ impl BlockFlowData {
         let mut float_ctx = Invalid;
 
         for self.box.iter().advance |&box| {
-            let style = box.style();
-            let clear = match style.clear() {
-                CSSClearNone => None,
-                CSSClearLeft => Some(ClearLeft),
-                CSSClearRight => Some(ClearRight),
-                CSSClearBoth => Some(ClearBoth)
-            };
-            clearance = match clear {
+            clearance = match box.clear() {
                 None => Au(0),
                 Some(clear) => {
                     self.common.floats_in.clearance(clear)

diff --git a/src/components/main/layout/box.rs b/src/components/main/layout/box.rs
@@ -7,6 +7,7 @@
 use css::node_style::StyledNode;
 use layout::context::LayoutContext;
 use layout::display_list_builder::{DisplayListBuilder, ExtraDisplayListData, ToGfxColor};
+use layout::float_context::{ClearType, ClearLeft, ClearRight, ClearBoth};
 use layout::flow::FlowContext;
 use layout::model::{BoxModel, MaybeAuto};
 use layout::text;
@@ -27,6 +28,7 @@ use gfx::text::text_run::TextRun;
 use newcss::color::rgb;
 use newcss::complete::CompleteStyle;
 use newcss::units::{Cursive, Em, Fantasy, Monospace, Pt, Px, SansSerif, Serif};
+use newcss::values::{CSSClearNone, CSSClearLeft, CSSClearRight, CSSClearBoth};
 use newcss::values::{CSSFontFamilyFamilyName, CSSFontFamilyGenericFamily};
 use newcss::values::{CSSFontSizeLength, CSSFontStyleItalic, CSSFontStyleNormal};
 use newcss::values::{CSSFontStyleOblique, CSSTextAlign, CSSTextDecoration, CSSLineHeight};
@@ -761,6 +763,16 @@ impl RenderBox {
         }
     }
 
+    pub fn clear(&self) -> Option<ClearType> {
+        let style = self.style();
+        match style.clear() {
+            CSSClearNone => None,
+            CSSClearLeft => Some(ClearLeft),
+            CSSClearRight => Some(ClearRight),
+            CSSClearBoth => Some(ClearBoth)
+        }
+    }
+
     /// Converts this node's computed style to a font style used for rendering.
     pub fn font_style(&self) -> FontStyle {
         let my_style = self.nearest_ancestor_element().style();

diff --git a/src/components/main/layout/float.rs b/src/components/main/layout/float.rs
@@ -183,13 +183,20 @@ impl FloatFlowData {
         // so this is well-defined
 
         let mut height = Au(0);
+        let mut clearance = Au(0);
         let mut full_noncontent_width = Au(0);
         let mut full_noncontent_height = Au(0);
 
         self.box.map(|&box| {
             height = do box.with_base |base| {
                 base.position.size.height
             };
+            clearance = match box.clear() {
+                None => Au(0),
+                Some(clear) => {
+                    self.common.floats_in.clearance(clear)
+                }
+            };
 
             do box.with_base |base| {
 
@@ -208,7 +215,7 @@ impl FloatFlowData {
         let info = PlacementInfo {
             width: self.common.position.size.width + full_noncontent_width,
             height: height + full_noncontent_height,
-            ceiling: Au(0),
+            ceiling: clearance,
             max_width: self.containing_width,
             f_type: self.float_type,
         };

diff --git a/src/test/html/test_clear_float.html b/src/test/html/test_clear_float.html
@@ -0,0 +1,43 @@
+<html>
+<head>
+<style>
+#container {
+    width: 300px;
+}
+#left {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background: red;
+}
+#right {
+    float: right;
+    width: 100px;
+    height: 150px;
+    background: blue;
+}
+#clear1 {
+    float: left;
+    clear: left;
+    width: 50px;
+    height: 50px;
+    background: green;
+}
+#clear2 {
+    float: right;
+    clear: right;
+    width: 50px;
+    height: 50px;
+    background: green;
+}
+</style>
+</head>
+<body>
+<div id="container">
+<div id="left"></div>
+<div id="right"></div>
+<div id="clear1"></div>
+<div id="clear2"></div>
+</div>
+</body>
+</html>