Add something like absolute positioning

src/servo/css/parser.rs

@@ -167,6 +167,11 @@ impl TokenReader : ParserMethods {
                   ~"width" => parse_box_sizing(val).extract(|res| Width(res)),
                     ~"border-width" => parse_length(val).map(|res| BorderWidth(Specified(*res))),
                     ~"border-color" => parse_color(val).map(|res| BorderColor(Specified(BdrColor(*res)))),
+                    ~"position" => parse_position(val).extract(|res| Position(res)),
+                    ~"top" => parse_length(val).map(|res| Top(Specified(*res))),
+                    ~"right" => parse_length(val).map(|res| Right(Specified(*res))),
+                    ~"bottom" => parse_length(val).map(|res| Bottom(Specified(*res))),
+                    ~"left" => parse_length(val).map(|res| Left(Specified(*res))),
                   _ => { #debug["Recieved unknown style property '%s'", val]; None }
                 };
                 match desc {

src/servo/css/parser_util.rs

@@ -44,6 +44,17 @@ fn parse_absolute_size(str : &str) -> ParseResult<AbsoluteSize> {
     }
 }
 
+fn parse_position(str: &str) -> ParseResult<CSSPosition> {
+    // FIXME: Bad copy
+    match str.to_str() {
+        ~"static" => Value(PosStatic),
+        ~"relative" => Value(PosRelative),
+        ~"absolute" => Value(PosAbsolute),
+        ~"fixed" => Value(PosFixed),
+        _ => Fail
+    }
+}
+
 fn parse_relative_size(str: &str) -> ParseResult<RelativeSize> {
     // FIXME: Bad copy. Can't match &str
     match str.to_str() {

src/servo/css/resolve/matching.rs

@@ -184,6 +184,11 @@ impl Node : PrivStyleMethods {
               Width(size) => layout.style.width = size,
               BorderColor(col) => layout.style.border_color = col,
               BorderWidth(size) => layout.style.border_width = size,
+              Position(pos) => layout.style.position = pos,
+              Top(pos) => layout.style.top = pos,
+              Right(pos) => layout.style.right = pos,
+              Bottom(pos) => layout.style.bottom = pos,
+              Left(pos) => layout.style.left = pos,
             };
         })
     }

src/servo/css/styles.rs

@@ -23,7 +23,12 @@ type SpecifiedStyle = {mut background_color : CSSValue<CSSBackgroundColor>,
                         mut width : CSSValue<BoxSizing>,
                        mut border_color : CSSValue<CSSBorderColor>,
                        mut border_style : CSSValue<CSSBorderStyle>,
-                       mut border_width : CSSValue<Length>
+                       mut border_width : CSSValue<Length>,
+                       mut position : CSSValue<CSSPosition>,
+                       mut top : CSSValue<Length>,
+                       mut right : CSSValue<Length>,
+                       mut bottom : CSSValue<Length>,
+                       mut left : CSSValue<Length>
                        };
 
 trait DefaultStyleMethods {
@@ -89,7 +94,12 @@ fn empty_style_for_node_kind(kind: &NodeKind) -> SpecifiedStyle {
      mut width : Initial,
      mut border_color : Initial,
      mut border_style : Initial,
-     mut border_width : Initial}
+     mut border_width : Initial,
+     mut position : Initial,
+     mut top : Initial,
+     mut right : Initial,
+     mut bottom : Initial,
+     mut left : Initial}
 }
 
 trait StyleMethods {

src/servo/css/values.rs

@@ -175,6 +175,13 @@ enum CSSFontSize {
     PercentSize(float)
 }
 
+enum CSSPosition {
+    PosStatic,
+    PosRelative,
+    PosAbsolute,
+    PosFixed
+}
+
 // Stylesheet parts
 
 enum StyleDeclaration {
@@ -185,7 +192,12 @@ enum StyleDeclaration {
     Color(CSSValue<CSSColor>),
     Width(CSSValue<BoxSizing>),
     BorderColor(CSSValue<CSSBorderColor>),
-    BorderWidth(CSSValue<Length>)
+    BorderWidth(CSSValue<Length>),
+    Position(CSSValue<CSSPosition>),
+    Top(CSSValue<Length>),
+    Right(CSSValue<Length>),
+    Bottom(CSSValue<Length>),
+    Left(CSSValue<Length>),
 }
 
 pub enum Attr {

src/servo/layout/box.rs

@@ -9,7 +9,7 @@ use core::dvec::DVec;
 use core::to_str::ToStr;
 use core::rand;
 use css::styles::SpecifiedStyle;
-use css::values::{BoxSizing, Length, Px, CSSDisplay, Specified, BgColor, BgColorTransparent, BdrColor};
+use css::values::{BoxSizing, Length, Px, CSSDisplay, Specified, BgColor, BgColorTransparent, BdrColor, PosAbsolute};
 use dl = gfx::display_list;
 use dom::element::{ElementKind, HTMLDivElement, HTMLImageElement};
 use dom::node::{Element, Node, NodeData, NodeKind, NodeTree};
@@ -390,8 +390,25 @@ impl RenderBox : RenderBoxMethods {
             return;
         }
 
-        let bounds : Rect<au> = Rect(self.d().position.origin.add(offset),
+        let style = self.d().node.style();
-                                     copy self.d().position.size);
+
+        let bounds : Rect<au> = match style.position {
+            Specified(PosAbsolute) => {
+                let x_offset = match style.left {
+                    Specified(Px(px)) => au::from_frac_px(px),
+                    _ => self.d().position.origin.x
+                };
+                let y_offset = match style.top {
+                    Specified(Px(px)) => au::from_frac_px(px),
+                    _ => self.d().position.origin.y
+                };
+                Rect(Point2D(x_offset, y_offset), copy self.d().position.size)
+            }
+            _ => {
+                Rect(self.d().position.origin.add(offset),
+                     copy self.d().position.size)
+            }
+        };
 
         self.add_bgcolor_to_list(list, bounds);
 

src/test/test-absolute.css

@@ -0,0 +1,7 @@
+img {
+    position: absolute;
+    top: 200px;
+    left: 100px;
+    border-width: 10px;
+    border-color: blue
+}

src/test/test-absolute.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="test-absolute.css" />
+</head>
+<body>
+    <img src="test.jpeg"></img>
+</body>
+</html>
+
+