Add Right and Bottom properties to View (#55)

* add right and bottom css property

* update readme

README.md

@@ -195,7 +195,9 @@ The following table lists the available CSS properties:
 | CSS Property | Type         | Available Values          |
 | -------------- | ------------ | ------------------------- |
 | `left`         | int          | Any integer value         |
+| `right`        | int          | Any integer value         |
 | `top`          | int          | Any integer value         |
+| `bottom`       | int          | Any integer value         |
 | `width`        | int          | Any integer value or percentage |
 | `height`       | int          | Any integer value or percentage |
 | `margin-left`  | int          | Any integer value         |

flex.go

@@ -213,12 +213,19 @@ func (f *flexEmbed) layout(width, height int, container *containerEmbed) {
 			continue
 		}
 		if c.item.Position == PositionAbsolute {
-			c.bounds = image.Rect(
-				container.frame.Min.X+c.item.Left,
-				container.frame.Min.Y+c.item.Top,
-				container.frame.Min.X+c.item.Left+c.item.Width,
-				container.frame.Min.Y+c.item.Top+c.item.Height,
-			)
+			x := container.frame.Min.X
+			if c.item.Left != 0 {
+				x = container.frame.Min.X + c.item.Left
+			} else if c.item.Right != 0 {
+				x = container.frame.Max.X - c.item.Right - c.item.Width
+			}
+			y := container.frame.Min.Y
+			if c.item.Top != 0 {
+				y = container.frame.Min.Y + c.item.Top
+			} else if c.item.Bottom != 0 {
+				y = container.frame.Max.Y - c.item.Bottom - c.item.Height
+			}
+			c.bounds = image.Rect(x, y, x+c.item.Width, y+c.item.Height)
 			c.item.frame = c.bounds
 			c.absolute = true
 			continue

flex_test.go

@@ -157,6 +157,19 @@ func TestAbsolutePos(t *testing.T) {
 	require.Equal(t, image.Rect(x, y, x+w, y+h), mock.Frame)
 }
 
+func TestAbsolutePosRightBottom(t *testing.T) {
+	mock := mockHandler{}
+
+	f1 := (&View{Width: 100, Height: 100}).addChild(
+		&View{Position: PositionAbsolute, Width: 10, Height: 10, Right: 40, Bottom: 50, Handler: &mock},
+	)
+
+	f1.Update()
+	f1.Draw(nil)
+
+	assert.Equal(t, image.Rect(50, 40, 60, 50), mock.Frame)
+}
+
 func TestAbsolutePosNested(t *testing.T) {
 	f1 := &View{
 		Width:      150,

html.go

@@ -212,10 +212,18 @@ var styleMapper = map[string]mapper[View]{
 		parseFunc: parseNumber,
 		setFunc:   setFunc(func(v *View, val int) { v.Left = val }),
 	},
+	"right": {
+		parseFunc: parseNumber,
+		setFunc:   setFunc(func(v *View, val int) { v.Right = val }),
+	},
 	"top": {
 		parseFunc: parseNumber,
 		setFunc:   setFunc(func(v *View, val int) { v.Top = val }),
 	},
+	"bottom": {
+		parseFunc: parseNumber,
+		setFunc:   setFunc(func(v *View, val int) { v.Bottom = val }),
+	},
 	"width": {
 		parseFunc: parseLength,
 		setFunc: setFunc(func(v *View, val cssLength) {

view.go

@@ -15,7 +15,9 @@ import (
 type View struct {
 	// TODO: Remove these fields in the future.
 	Left         int
+	Right        int
 	Top          int
+	Bottom       int
 	Width        int
 	WidthInPct   float64
 	Height       int