git.iko.soy/typeable/elm-ui
on dfef577 help sign in
typeable/elm-ui/tests-rendering/src/Tests/ElementAlignment.elm
111 lines 3.6 kB history raw
1module Tests.ElementAlignment exposing (..)
3import Generator
4import Html
5import Testable
6import Testable.Element as Element exposing (..)
7import Testable.Element.Background as Background
8import Testable.Element.Font as Font
9import Testable.Runner
10import Tests.Palette as Palette exposing (..)
13{-| -}
14main : Html.Html msg
15main =
16 Testable.Runner.show view
19box : List (Testable.Attr msg) -> Testable.Element msg
20box attrs =
21 el
22 ([ width (px 50)
23 , height (px 50)
24 , Background.color blue
25 ]
26 ++ attrs
27 )
28 none
31container : Testable.Element msg -> Testable.Element msg
32container =
33 el
34 [ width (px 200)
35 , height (px 200)
36 , Background.color lightGrey
37 ]
40view : Testable.Element msg
41view =
42 column []
43 [ el [] (text "Alignment Within an El")
44 , container <|
45 box []
46 , text "alignLeft, centerX, alignRight"
47 , column [ spacing 20 ] <|
48 Generator.sizes
49 (\resizeable ->
50 row [ spacing 20 ]
51 [ container <|
52 resizeable [ Background.color blue, alignLeft ] none
53 , container <|
54 resizeable [ Background.color blue, centerX ] none
55 , container <|
56 resizeable [ Background.color blue, alignRight ] none
57 ]
58 )
59 , text "top, centerY, bottom"
60 , column [ spacing 20 ] <|
61 Generator.sizes
62 (\resizeable ->
63 row [ spacing 20 ]
64 [ container <|
65 resizeable [ alignTop ] none
66 , container <|
67 resizeable [ centerY ] none
68 , container <|
69 resizeable [ alignBottom ] none
70 ]
71 )
72 , text "align top ++ alignments"
73 , column [ spacing 20 ] <|
74 Generator.sizes
75 (\resizeable ->
76 row [ spacing 20 ]
77 [ container <|
78 resizeable [ alignTop, alignLeft ] none
79 , container <|
80 resizeable [ alignTop, centerX ] none
81 , container <|
82 resizeable [ alignTop, alignRight ] none
83 ]
84 )
85 , text "centerY ++ alignments"
86 , column [ spacing 20 ] <|
87 Generator.sizes
88 (\resizeable ->
89 row [ spacing 20 ]
90 [ container <|
91 resizeable [ centerY, alignLeft ] none
92 , container <|
93 resizeable [ centerY, centerX ] none
94 , container <|
95 resizeable [ centerY, alignRight ] none
96 ]
97 )
98 , text "alignBottom ++ alignments"
99 , column [ spacing 20 ] <|
100 Generator.sizes
101 (\resizeable ->
102 row [ spacing 20 ]
103 [ container <|
104 resizeable [ alignBottom, alignLeft ] none
105 , container <|
106 resizeable [ alignBottom, centerX ] none
107 , container <|
108 resizeable [ alignBottom, alignRight ] none
109 ]
110 )
111 ]