master..5ce90cb · typeable/elm-ui

README.md−4

@@ -66,10 +66,6 @@ The work is based off of a rewrite of the [Style Elements](https://github.com/md

66

67The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.

68

69−## Notes

70−

71−Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.

72−

73## Contributing

69## Contributing

74

70

75Want to help out fixing bugs or reporting issues?

71Want to help out fixing bugs or reporting issues?

elm.json+1−1

@@ -3,7 +3,7 @@

3 "name": "mdgriffith/elm-ui",

4 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",

5 "license": "BSD-3-Clause",

6− "version": "1.1.8",

6+ "version": "1.1.5",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

package-lock.json+31−19

@@ -734,9 +734,9 @@

734 }

735 },

736 "jszip": {

737− "version": "3.4.0",

737+ "version": "3.2.2",

738− "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.4.0.tgz",

738+ "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",

739− "integrity": "sha512-gZAOYuPl4EhPTXT0GjhI3o+ZAz3su6EhLrKUoAivcKqyqC7laS5JEv4XWZND9BgcDcF83vI85yGbDmDR6UhrIg==",

739+ "integrity": "sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==",

740 "requires": {

741 "lie": "~3.3.0",

742 "pako": "~1.0.2",

@@ -1002,24 +1002,20 @@

1002 "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",

1003 "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="

1004 },

1005+ "sax": {

1006+ "version": "1.2.4",

1007+ "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

1008+ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="

1009+ },

1005 "selenium-webdriver": {

1010 "selenium-webdriver": {

1006− "version": "4.0.0-alpha.7",

1011+ "version": "4.0.0-alpha.4",

1007− "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.7.tgz",

1012+ "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.4.tgz",

1008− "integrity": "sha512-D4qnTsyTr91jT8f7MfN+OwY0IlU5+5FmlO5xlgRUV6hDEV8JyYx2NerdTEqDDkNq7RZDYc4VoPALk8l578RBHw==",

1013+ "integrity": "sha512-etJt20d8qInkxMAHIm5SEpPBSS+CdxVcybnxzSIB/GlWErb8pIWrArz/VA6VfUW0/6tIcokepXQ5ufvdzqqk1A==",

1009 "requires": {

1014 "requires": {

1010− "jszip": "^3.2.2",

1015+ "jszip": "^3.1.5",

1011− "rimraf": "^2.7.1",

1016+ "rimraf": "^2.6.3",

1012− "tmp": "0.0.30"

1017+ "tmp": "0.0.30",

1013− },

1018+ "xml2js": "^0.4.19"

1014− "dependencies": {

1015− "rimraf": {

1016− "version": "2.7.1",

1017− "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",

1018− "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",

1019− "requires": {

1020− "glob": "^7.1.3"

1021− }

1022− }

1023 }

1019 }

1024 },

1020 },

1025 "semver": {

1021 "semver": {

@@ -1221,6 +1217,22 @@

1221 "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

1217 "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

1222 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="

1218 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="

1223 },

1219 },

1220+ "xml2js": {

1221+ "version": "0.4.19",

1222+ "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",

1223+ "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",

1224+ "requires": {

1225+ "sax": ">=0.6.0",

1226+ "xmlbuilder": "~9.0.1"

1227+ },

1228+ "dependencies": {

1229+ "xmlbuilder": {

1230+ "version": "9.0.7",

1231+ "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",

1232+ "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="

1233+ }

1234+ }

1235+ },

1224 "xmlbuilder": {

1236 "xmlbuilder": {

1225 "version": "13.0.2",

1237 "version": "13.0.2",

1226 "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",

1238 "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",

package.json+3−3

@@ -7,8 +7,8 @@

7 "test": "elm-test",

8 "view-test": "node tests-rendering/automation/view.js",

9 "test-render": "node tests-rendering/automation/run.js --chrome",

10− "test-render-sauce": "source sauce.env; node tests-rendering/automation/run.js --sauce --headless",

10+ "test-render-sauce": "source sauce.env; node tests-rendering/automation/run.js --sauce",

11− "test-render-sauce-automated": "node tests-rendering/automation/run.js --sauce --headless",

11+ "test-render-sauce-automated": "node tests-rendering/automation/run.js --sauce",

12 "test-doc-preview": "bash tests-rendering/automation/doc-preview.sh",

13 "bench": "node benchmarks/runtime/index.js",

14 "list-issues": "hub issue -f \"%i,%U,%t,'%L'%n\" > issues.csv"

@@ -29,6 +29,6 @@

29 "elm": "^0.19.1-3",

30 "elm-test": "^0.19.1-revision2",

31 "node-elm-compiler": "^5.0.4",

32− "selenium-webdriver": "^4.0.0-alpha.7"

32+ "selenium-webdriver": "^4.0.0-alpha.4"

33 }

34}

src/Element.elm+5

@@ -1203,6 +1203,11 @@ newTabLink attrs { url, label } =

1203

1204

1205{-| A link to download a file.

1206+

1207+**Note** If you're using `Browser.application`, then this won't be enough to actually trigger a file download due to how `Browser.Navigation` works.

1208+

1209+[Here's a description of what needs to happen](https://github.com/elm/html/issues/175).

1210+

1206-}

1211-}

1207download :

1212download :

1208 List (Attribute msg)

1213 List (Attribute msg)

src/Element/Input.elm+24−44

@@ -330,8 +330,6 @@ The `onPress` handler will be fired either `onClick` or when the element is focu

330 , label = text "My Button"

331 }

332

333−**Note** If you have an icon button but want it to be accessible, consider adding a [`Region.description`](Element-Region#description), which will describe the button to screen readers.

334−

335-}

333-}

336button :

334button :

337 List (Attribute msg)

335 List (Attribute msg)

@@ -369,17 +367,7 @@ button attrs { onPress, label } =

369

367

370 Just msg ->

368 Just msg ->

371 Events.onClick msg

369 Events.onClick msg

372− :: onKeyLookup

370+ :: onEnter msg

373− (\code ->

374− if code == enter then

375− Just msg

376−

377− else if code == space then

378− Just msg

379−

380− else

381− Nothing

382− )

383 :: attrs

371 :: attrs

384 )

372 )

385 )

373 )

@@ -457,24 +445,22 @@ checkbox attrs { label, icon, checked, onChange } =

457 ]

445 ]

458 ++ attrs

446 ++ attrs

459 in

447 in

460− applyLabel

448+ applyLabel attributes

449+ label

450+ (Internal.element

451+ Internal.asEl

452+ Internal.div

453+ [ Internal.Attr <|

461− (Internal.Attr (Html.Attributes.attribute "role" "checkbox")

454+ Html.Attributes.attribute "role" "checkbox"

462− :: Internal.Attr

455+ , Internal.Attr <|

463− (Html.Attributes.attribute "aria-checked" <|

456+ Html.Attributes.attribute "aria-checked" <|

464 if checked then

457 if checked then

465 "true"

458 "true"

466

459

467 else

460 else

468 "false"

461 "false"

469− )

470− :: hiddenLabelAttribute label

462+ , hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

463+ , Element.centerY

478 , Element.height Element.fill

464 , Element.height Element.fill

479 , Element.width Element.shrink

465 , Element.width Element.shrink

480 ]

466 ]

@@ -713,7 +699,7 @@ slider attributes input =

713 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")

699 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")

714 thumbShadowStyle

700 thumbShadowStyle

715 )

701 )

716− , Internal.Attr (Html.Attributes.class (className ++ " ui-slide-bar focusable-parent"))

702+ , Internal.Attr (Html.Attributes.class (className ++ " focusable-parent"))

717 , Internal.Attr

703 , Internal.Attr

718 (Html.Events.onInput

704 (Html.Events.onInput

719 (\str ->

705 (\str ->

@@ -779,10 +765,10 @@ slider attributes input =

779 -- This is after `attributes` because the thumb should be in front of everything.

765 -- This is after `attributes` because the thumb should be in front of everything.

780 ++ [ Element.behindContent <|

766 ++ [ Element.behindContent <|

781 if vertical then

767 if vertical then

782− viewVerticalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackWidth

768+ viewVerticalThumb factor thumbAttributes trackWidth

783

769

784 else

770 else

785− viewHorizontalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackHeight

771+ viewHorizontalThumb factor thumbAttributes trackHeight

786 ]

772 ]

787 )

773 )

788 Element.none

774 Element.none

@@ -1565,8 +1551,6 @@ email =

1565

1551

1566By default it will have a minimum height of one line and resize based on it's contents.

1552By default it will have a minimum height of one line and resize based on it's contents.

1567

1553

1568−Use `Element.spacing` to change its line-height.

1569−

1570-}

1554-}

1571multiline :

1555multiline :

1572 List (Attribute msg)

1556 List (Attribute msg)

@@ -2105,11 +2089,7 @@ onKeyLookup lookup =

2105 Json.field "key" Json.string

2089 Json.field "key" Json.string

2106 |> Json.andThen decode

2090 |> Json.andThen decode

2107 in

2091 in

2108− -- We generally want these attached to the keydown event becaues it allows us to prevent default on things like spacebar scrolling the page.

2109− -- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

2110− Internal.Attr <|

2092+ Internal.Attr <| Html.Events.on "keyup" isKey

2111− Html.Events.preventDefaultOn "keydown"

2112− (Json.map (\fired -> ( fired, True )) isKey)

2113

2093

2114

2094

2115{-| -}

2095{-| -}

@@ -2205,8 +2185,7 @@ defaultCheckbox : Bool -> Element msg

2205defaultCheckbox checked =

2185defaultCheckbox checked =

2206 Element.el

2186 Element.el

2207 [ Internal.htmlClass "focusable"

2187 [ Internal.htmlClass "focusable"

2208− , Element.width

2188+ , Element.width (Element.px 14)

2209− (Element.px 14)

2210 , Element.height (Element.px 14)

2189 , Element.height (Element.px 14)

2211 , Font.color white

2190 , Font.color white

2212 , Element.centerY

2191 , Element.centerY

@@ -2242,8 +2221,9 @@ defaultCheckbox checked =

2242

2221

2243 else

2222 else

2244 1

2223 1

2245− , Element.inFront

2224+ ]

2225+ (if checked then

2246− (Element.el

2226+ Element.el

2247 [ Border.color white

2227 [ Border.color white

2248 , Element.height (Element.px 6)

2228 , Element.height (Element.px 6)

2249 , Element.width (Element.px 9)

2229 , Element.width (Element.px 9)

@@ -2251,7 +2231,6 @@ defaultCheckbox checked =

2251 , Element.centerX

2231 , Element.centerX

2252 , Element.centerY

2232 , Element.centerY

2253 , Element.moveUp 1

2233 , Element.moveUp 1

2254− , Element.transparent (not checked)

2255 , Border.widthEach

2234 , Border.widthEach

2256 { top = 0

2235 { top = 0

2257 , left = 2

2236 , left = 2

@@ -2260,6 +2239,7 @@ defaultCheckbox checked =

2260 }

2239 }

2261 ]

2240 ]

2262 Element.none

2241 Element.none

2263− )

2242+

2264− ]

2243+ else

2265− Element.none

2244+ Element.none

2245+ )

src/Element/Region.elm+1−5

@@ -101,11 +101,7 @@ announce =

101 Internal.Describe LivePolite

102

103

104−{-| Adds an `aria-label`, which is used by accessibility software to identity otherwise unlabeled elements.

105−

106−A common use for this would be to label buttons that only have an icon.

107−

108−-}

104+{-| -}

109description : String -> Attribute msg

105description : String -> Attribute msg

110description =

106description =

111 Internal.Describe << Internal.Label

107 Internal.Describe << Internal.Label

src/Internal/Model.elm+3−9

@@ -1478,9 +1478,7 @@ renderHeight h =

1478 Single

1479 cls

1480 "min-height"

1481− -- This needs to be !important because we're using `min-height: min-content`

1482− -- to correct for safari's incorrect implementation of flexbox.

1483− (String.fromInt minSize ++ "px !important")

1481+ (String.fromInt minSize ++ "px")

1484

1482

1485 ( newFlag, newAttrs, newStyle ) =

1483 ( newFlag, newAttrs, newStyle ) =

1486 renderHeight len

1484 renderHeight len

@@ -2244,11 +2242,7 @@ renderFocusStyle focus =

2244 , Just <| Property "outline" "none"

2242 , Just <| Property "outline" "none"

2245 ]

2243 ]

2246 )

2244 )

2247− , Style

2248− ((Internal.Style.dot classes.any ++ ":focus .focusable, ")

2245+ , Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")

2249− ++ (Internal.Style.dot classes.any ++ ".focusable:focus, ")

2250− ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")

2251− )

2252 (List.filterMap identity

2246 (List.filterMap identity

2253 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor

2247 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor

2254 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor

2248 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor

@@ -2656,7 +2650,7 @@ renderStyle options maybePseudo selector props =

2656 , (selector ++ "-fs:focus-within {")

2650 , (selector ++ "-fs:focus-within {")

2657 ++ renderedProps

2651 ++ renderedProps

2658 ++ "\n}"

2652 ++ "\n}"

2659− , (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb" ++ selector ++ "-fs {")

2653+ , (".focusable-parent:focus ~ " ++ "." ++ classes.any ++ " " ++ selector ++ "-fs {")

2660 ++ renderedProps

2654 ++ renderedProps

2661 ++ "\n}"

2655 ++ "\n}"

2662 ]

2656 ]

src/Internal/Style.elm+5−20

@@ -961,17 +961,10 @@ baseSheet =

961 ]

962 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)

963 [ Prop "display" "block"

964− , Descriptor (dot classes.heightFill)

965− [ Child "img"

964+ , Child "img"

966− [ Prop "max-height" "100%"

965+ [ Prop "max-height" "100%"

967− , Prop "object-fit" "cover"

968− ]

969− ]

970− , Descriptor (dot classes.widthFill)

971− [ Child "img"

972− [ Prop "max-width" "100%"

966+ , Prop "max-width" "100%"

973− , Prop "object-fit" "cover"

967+ , Prop "object-fit" "cover"

974− ]

975 ]

968 ]

976 ]

969 ]

977 , Class (dot classes.any ++ ":focus")

970 , Class (dot classes.any ++ ":focus")

@@ -1384,15 +1377,7 @@ baseSheet =

1384 -- This apparently is a different story for columns.

1377 -- This apparently is a different story for columns.

1385 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,

1378 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,

1386 -- instead of the expected content size.

1379 -- instead of the expected content size.

1387− -- So we add `min-height: min-content`, which isn't supported by IE, but works for all other browsers!

1388− -- Separately, 0% is different than 0px, but only for columns

1389− -- In columns, 0% will actually be calculated as `auto` for columns

1390− -- So, 0px is the one we want.

1391− [ Prop "flex-basis" "0px"

1392− , Prop "min-height" "min-content"

1393− , Descriptor (dot classes.heightExact)

1394− [ Prop "flex-basis" "auto"

1380+ [ Prop "flex-basis" "auto"

1395− ]

1396 ]

1381 ]

1397 , Child (dot classes.heightFill)

1382 , Child (dot classes.heightFill)

1398 [ Prop "flex-grow" "100000"

1383 [ Prop "flex-grow" "100000"

tests-rendering/automation/build.js+1

@@ -68,6 +68,7 @@ async function get_module_name(config) {

68}

69

70async function create_runner(config) {

71+ console.log("create runner", config);

71 const elm_entry_module = fs.readFileSync(config.elm, "utf8");

72 const elm_entry_module = fs.readFileSync(config.elm, "utf8");

72

73

73 let module_name = elm_entry_module

74 let module_name = elm_entry_module

tests-rendering/automation/run.js+3−9

@@ -17,7 +17,6 @@ program

17 .option("--build [value]", "Set build number for sauce labs")

18 .option("--name [value]", "Set run name for sauce labs")

19 .option("--verbose", "Print out all test results")

20− .option("--headless", "run tests without showing the browser")

21 .parse(process.argv);

20 .parse(process.argv);

22

21

23// 'Windows 10'

22// 'Windows 10'

@@ -127,13 +126,8 @@ function prepare_sauce_driver(env) {

127}

126}

128

127

129async function prepare_local_driver(env) {

128async function prepare_local_driver(env) {

130− const firefoxOptions = new firefox.Options();

129+ const firefoxOptions = new firefox.Options().headless();

131− const chromeOptions = new chrome.Options();

130+ const chromeOptions = new chrome.Options().headless();

132−

133− if (program.headless) {

134− firefoxOptions.headless();

135− chromeOptions.headless();

136− }

137

131

138 let driver = await new Builder()

132 let driver = await new Builder()

139 .forBrowser(env.browser)

133 .forBrowser(env.browser)

@@ -169,7 +163,7 @@ async function run_test(driver, url) {

169 await compile_and_embed({

163 await compile_and_embed({

170 template: "./tests-rendering/automation/templates/gather-styles.html",

164 template: "./tests-rendering/automation/templates/gather-styles.html",

171 target: "./tmp/test.html",

165 target: "./tmp/test.html",

172− elm: "src/Tests/All.elm",

166+ elm: "src/Tests/Run.elm",

173 elmOptions: { cwd: "./tests-rendering" },

167 elmOptions: { cwd: "./tests-rendering" },

174 });

168 });

175 console.log("Done compiling");

169 console.log("Done compiling");

tests-rendering/automation/templates/gather-styles.html−3

@@ -149,9 +149,6 @@

149

150 app.ports.report.subscribe(function (results) {

151 test_results = results;

152− // NOTE - this is the signal to the automation that it is cool to retrieve results now

153− // So don't remove this like you did before :D

154− document.title = "tests finished";

155 });

152 });

156

153

157 app.ports.analyze.subscribe(function (ids) {

154 app.ports.analyze.subscribe(function (ids) {

tests-rendering/cases/open/LabelledInputAlignRight.elmdeleted−28

@@ -1,28 +0,0 @@

1−module LabelledInputAlignRight exposing (view)

2−

3−import Testable.Element exposing (..)

4−import Testable.Element.Input as Input

5−

6−

7−view =

8− layout [] <|

9− column [ width fill ]

10− [ Input.text

11− [ width (px 200)

12− , alignRight

13− ]

14− { onChange = always False

15− , text = ""

16− , placeholder = Nothing

17− , label = Input.labelLeft [] (text "label")

18− }

19− , Input.text

20− [ width (px 200)

21− , alignRight

22− ]

23− { onChange = always False

24− , text = ""

25− , placeholder = Nothing

26− , label = Input.labelHidden "label"

27− }

28− ]

tests-rendering/cases/open/NearbyElementBordersOverlap.elmdeleted−46

@@ -1,46 +0,0 @@

1−module NearbyElementBordersOverlap exposing (view)

2−

3−{-| Elements placed with onLeft, onRight, above & below overlap main element's border

4−

5−

6−# inFront elements with width fill are contained within the parent's border

7−

8−<https://github.com/mdgriffith/elm-ui/issues/223>

9−

10−In addition to the overlap, it affects layout in unexpected ways: eg if the elements

11−are the same height, onLeft and onRight elements will be vertically offset

12−from the main element.

13−

14−-}

15−

16−import Testable.Element exposing (..)

17−import Testable.Element.Border as Border

18−

19−

20−blue =

21− rgb 0 0 1

22−

23−

24−green =

25− rgb 0 1 0

26−

27−

28−grey =

29− rgb 0.5 0.5 0.5

30−

31−

32−view =

33− layout [ width fill, height fill ] <|

34− el

35− [ centerX

36− , centerY

37− , Border.width 10

38− , Border.color green

39− , padding 50

40− , above <| el [ Border.color grey, Border.width 10 ] <| text "above"

41− , below <| el [ Border.color grey, Border.width 10 ] <| text "below"

42− , onRight <| el [ Border.color blue, Border.width 10 ] <| text "onRight"

43− , onLeft <| el [ Border.color blue, Border.width 10 ] <| text "onLeft"

44− ]

45− <|

46− text "Centre"

tests-rendering/cases/resolved/Images/ImageRegression.elmdeleted−63

@@ -1,63 +0,0 @@

1−module ImageRegression exposing (main)

2−

3−{-| <https://github.com/mdgriffith/elm-ui/issues/232>

4−-}

5−

6−import Browser

7−import Element exposing (Element, centerX, clipX, el, image, px, rgb255, row, shrink, width)

8−import Element.Background as Background

9−import Html exposing (Html, button, div, text)

10−import Html.Events exposing (onClick)

11−

12−

13−type alias Model =

14− Int

15−

16−

17−type Msg

18− = NoOp

19−

20−

21−update : Msg -> Model -> Model

22−update msg model =

23− model

24−

25−

26−view : Model -> Html Msg

27−view model =

28− Element.layout [] <|

29− row

30− [ centerX

31− , width shrink

32− , Background.color <| rgb255 255 255 255

33− ]

34− [ viewCard "qs" True

35− , viewCard "ah" False

36− ]

37−

38−

39−main : Program () Model Msg

40−main =

41− Browser.sandbox

42− { init = 0

43− , view = view

44− , update = update

45− }

46−

47−

48−viewCard : String -> Bool -> Element Msg

49−viewCard card bool =

50− let

51− source =

52− "https://hearts-bawolk.herokuapp.com/static/cards/" ++ card ++ ".png"

53−

54− overlapStyles =

55− if bool then

56− [ width (px 50)

57− , clipX

58− ]

59−

60− else

61− []

62− in

63− el overlapStyles (image [] { src = source, description = "" })

tests-rendering/cases/resolved/Images/ImageRegression2.elmdeleted−19

@@ -1,19 +0,0 @@

1−module ImageRegression2 exposing (main)

2−

3−{-| <https://github.com/mdgriffith/elm-ui/issues/228>

4−-}

5−

6−import Element exposing (..)

7−

8−

9−main =

10− Element.layout []

11− (Element.row [ width fill, height fill, explain Debug.todo ]

12− [ text "BEFORE"

13− , image []

14− { src = "https://placekitten.com/300/200"

15− , description = "kitten"

16− }

17− , text "AFTER"

18− ]

19− )

tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elmdeleted−46

@@ -1,46 +0,0 @@

1−module DistributeHeight exposing (main)

2−

3−import Browser

4−import Element exposing (column, el, fill, fillPortion, height, minimum, none, px, rgb, row, text, width)

5−import Element.Background as Bg

6−import Html as Html exposing (Html)

7−

8−

9−type alias Model =

10− ()

11−

12−

13−update : msg -> Model -> Model

14−update _ model =

15− model

16−

17−

18−view : model -> Html msg

19−view _ =

20− Element.layout [ height fill, width fill ] <|

21− column [ height fill, width fill ]

22− [ row

23− [ height

24− fill

25− , width fill

26− , Bg.color <| rgb 1 0 0

27− ]

28− [ el

29− [ height <| px 200

30− , width fill

31− , Bg.color <| rgb 1 0 1

32− ]

33− (text "Helloooo!")

34− ]

35− , row [ height fill, width fill, Bg.color <| rgb 0 1 0 ]

36− [ none ]

37− ]

38−

39−

40−main : Program () Model msg

41−main =

42− Browser.sandbox

43− { init = ()

44− , view = view

45− , update = update

46− }

tests-rendering/cases/resolved/Layout/Columns/DistributeHeightCorrectly2.elmdeleted−86

@@ -1,86 +0,0 @@

1−module Other exposing (main)

2−

3−import Browser

4−import Element exposing (..)

5−import Element.Border as Border

6−import Element.Events as Events

7−import Html exposing (Html)

8−import Html.Attributes

9−

10−

11−type alias Model =

12− { count : Int }

13−

14−

15−initialModel : Model

16−initialModel =

17− { count = 0 }

18−

19−

20−type Msg

21− = Increment

22− | Decrement

23−

24−

25−update : Msg -> Model -> Model

26−update msg model =

27− case msg of

28− Increment ->

29− { model | count = model.count + 1 }

30−

31− Decrement ->

32− { model | count = model.count - 1 }

33−

34−

35−view : Model -> Html Msg

36−view model =

37− viewElements model

38− |> layout []

39−

40−

41−viewElements : Model -> Element Msg

42−viewElements model =

43− el [ height fill ] <|

44− column [ height fill ]

45− [ el

46− [ height (fillPortion 1)

47− ]

48− <|

49− viewCounter model

50− , el

51− [ height (fillPortion 2)

52− ]

53− <|

54− viewCounters model

55− ]

56−

57−

58−flexBasisZero : Element.Attribute msg

59−flexBasisZero =

60− htmlAttribute (Html.Attributes.style "flex-basis" "0")

61−

62−

63−viewCounters : Model -> Element Msg

64−viewCounters model =

65− column [ height fill ]

66− (List.repeat model.count model

67− |> List.map viewCounter

68− )

69−

70−

71−viewCounter : Model -> Element Msg

72−viewCounter model =

73− column [ width fill, height fill, Border.width 1, Border.dotted ]

74− [ el [ Events.onClick Increment, Border.width 1, Border.rounded 3 ] <| text "+1"

75− , el [] <| text <| String.fromInt model.count

76− , el [ Events.onClick Decrement, Border.width 1, Border.rounded 3 ] <| text "-1"

77− ]

78−

79−

80−main : Program () Model Msg

81−main =

82− Browser.sandbox

83− { init = initialModel

84− , view = view

85− , update = update

86− }

tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elmdeleted−48

@@ -1,48 +0,0 @@

1−module DoNotCollapseBelow0 exposing (main)

2−

3−{-|

4−

5−

6−# Safari bug for `el` heigh calculation in combination with `height fill`

7−

8−The problem appears to be that the height of the first el is 0, and therefore the second

9−text is rendered on the first.

10−

11−Versions

12−

13−OS: macOS Mojave 10.14.5

14−Browser: Safari

15−Browser Version: 12.1.1 (14607.2.6.1.1)

16−Elm Version: 0.19

17−Elm UI Version: 1.1.5

18−

19−<https://github.com/mdgriffith/elm-ui/issues/147>

20−

21−I was able to pinpoint the issue using git bisect to this fd08f1a commit, which lines up.

22−

23−<https://github.com/mdgriffith/elm-ui/commit/fd08f1a953484ba96f2d05037d4f208eab351514>

24−

25−-}

26−

27−import Browser

28−import Element exposing (column, el, fill, height, layout, scrollbarY, text)

29−import Html exposing (Html)

30−

31−

32−view : () -> Html ()

33−view () =

34− layout [ height fill ] <|

35− column

36− [ height fill ]

37− [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."

38− , text "Text below the el above"

39− ]

40−

41−

42−main : Program () () ()

43−main =

44− Browser.sandbox

45− { init = ()

46− , view = view

47− , update = \() () -> ()

48− }

tests-rendering/cases/resolved/Layout/SafariColumnBug.elmnew file+14

@@ -0,0 +1,14 @@

1+module SafariColumnBug exposing (main)

2+

3+import Browser

4+import Element exposing (column, el, fill, height, layout, scrollbarY, text)

5+import Html exposing (Html)

6+

7+

8+main =

9+ layout [ height fill ] <|

10+ column

11+ [ height fill ]

12+ [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."

13+ , text "Text below the el above"

14+ ]

tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elm → tests-rendering/cases/resolved/Layout/SafariTwo.elmrenamed

The content is the same.

tests-rendering/cases/resolved/Images/ImageSizing.elm → tests-rendering/cases/resolved/Misc/ImageSizing.elmrenamed+3−7

@@ -1,9 +1,6 @@

1module ImageSizing exposing (main)

2

3−{-| <https://github.com/mdgriffith/elm-ui/issues/62>

4−-}

5−

6−import Element as E exposing (column, el, px, row, text)

3+import Element as E exposing (column, el, row, text)

7import Element.Border as Border

4import Element.Border as Border

8import Element.Font as Font

5import Element.Font as Font

9import Html exposing (Html)

6import Html exposing (Html)

@@ -14,9 +11,8 @@ main =

14 E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|

11 E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|

15 E.image

12 E.image

16 [ -- E.height (E.px 500)

13 [ -- E.height (E.px 500)

17− -- ,

18− -- E.width E.fill

14+ E.width E.fill

19− E.height E.fill

15+ , E.height E.fill

20 ]

16 ]

21 -- <| px 500 ]

17 -- <| px 500 ]

22 { src = "http://bburdette.github.io/music-reader.png"

18 { src = "http://bburdette.github.io/music-reader.png"

tests-rendering/cases/resolved/Layout/NestedParagraphs.elm → tests-rendering/cases/resolved/NestedParagraphs.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Layout.NestedParagraphs exposing (view)

1+module NestedParagraphs exposing (view)

2

3{-| Paragraph with children more than one level deep breaks flow

4

tests-rendering/cases/resolved/Layout/SafariBugIssue147.elm → tests-rendering/cases/resolved/SafariBugIssue147.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Layout.SafariBugIssue147 exposing (view)

1+module SafariBugIssue147 exposing (view)

2

3{-|

4

tests-rendering/cases/resolved/Nearby/InFrontIssue.elm → tests-rendering/cases/resolved/ZIndex/InFrontIssue.elmrenamed+30−3

@@ -1,4 +1,4 @@

1−module Nearby.InFrontIssue exposing (view)

1+module InFrontIssue exposing (main)

2

3import Browser

4import Element as Ui exposing (..)

@@ -7,8 +7,26 @@ import Element.Font as Font

7import Html exposing (Html)

8

9

10+type alias Model =

11+ {}

12+

13+

14+initialModel : Model

15+initialModel =

16+ {}

17+

18+

19+type Msg

20+ = NoOp

21+

22+

23+update : Msg -> Model -> Model

24+update msg model =

25+ model

26+

27+

10−view : Html Msg

28+view : Model -> Html Msg

11−view =

29+view model =

12 let

30 let

13 a =

31 a =

14 el

32 el

@@ -62,3 +80,12 @@ view =

62 , paddingXY 0 30

80 , paddingXY 0 30

63 ]

81 ]

64 b

82 b

83+

84+

85+main : Program () Model Msg

86+main =

87+ Browser.sandbox

88+ { init = initialModel

89+ , view = view

90+ , update = update

91+ }

tests-rendering/cases/resolved/Nearby/Issue22ZIndex.elm → tests-rendering/cases/resolved/ZIndex/Issue22ZIndex.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Nearby.Issue22ZIndex exposing (main)

1+module Issue22ZIndex exposing (main)

2

3import Browser

4import Element as Ui exposing (..)

tests-rendering/cases/resolved/Nearby/OtherInFrontIssue.elm → tests-rendering/cases/resolved/ZIndex/OtherInFrontIssue.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Nearby.OtherInFrontIssue exposing (main)

1+module OtherInFrontIssue exposing (main)

2

3import Browser

4import Element exposing (Element)

tests-rendering/cases/resolved/Nearby/ZIndexRegression.elm → tests-rendering/cases/resolved/ZIndex/ZIndexRegression.elmrenamed+1−1

@@ -1,4 +1,4 @@

1−module Nearby.ZIndexRegression exposing (main)

1+module ZIndexRegression exposing (main)

2

3import Element exposing (..)

4import Element.Background as Background

tests-rendering/elm.json+1−1

@@ -1,6 +1,6 @@

1{

2 "type": "application",

3− "source-directories": ["src", "../src", "cases/open", "cases/resolved"],

3+ "source-directories": ["src", "../src", "cases/open"],

4 "elm-version": "0.19.1",

5 "dependencies": {

6 "direct": {

tests-rendering/src/Testable/Generator.elm+7−240

@@ -20,26 +20,6 @@ element : String -> List (Testable.Attr msg) -> List ( String, Testable.Element

20element label attrs =

21 -- [ ( label, paragraph attrs [ short ] )

22 -- ]

23− mapEveryCombo

24− (\( selfLabel, makeSelf ) ( childLabel, child ) ->

25− ( label ++ " - " ++ selfLabel ++ " > " ++ childLabel

26− , makeSelf attrs child

27− )

28− )

29− layouts

30− contents

31−

32−

33−{-| Given a list of attributes, generate every context this list of attributes could be in.

34−

35−So, this means,

36−

37− - every element type

38− - in every element type

39−

40−-}

41−elementInLayout : String -> List (Testable.Attr msg) -> List ( String, Testable.Element msg )

42−elementInLayout label attrs =

43 mapEveryCombo3

23 mapEveryCombo3

44 (\( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

24 (\( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

45 ( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " > " ++ childLabel

25 ( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " > " ++ childLabel

@@ -51,49 +31,6 @@ elementInLayout label attrs =

51 contents

31 contents

52

32

53

33

54−{-| Sometimes we want to try a whole bunch of combinations of attributes

55−

56−This makes it a bit easier to construct

57−

58−-}

59−elementWith : String -> List ( String, List (Testable.Attr msg) ) -> List ( String, Testable.Element msg )

60−elementWith label labelAttrs =

61− mapEveryCombo3

62− (\( attrLabel, attrs ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

63− ( label ++ " - " ++ selfLabel ++ " with " ++ attrLabel ++ " > " ++ childLabel

64− , makeSelf attrs child

65− )

66− )

67− labelAttrs

68− layouts

69− contents

70−

71−

72−{-| This varies the layout element that an element is in.

73−-}

74−elementInLayoutWith :

75− String

76− ->

77− List

78− ( String

79− , { self : List (Testable.Attr msg)

80− , parent : List (Testable.Attr msg)

81− }

82− )

83− -> List ( String, Testable.Element msg )

84−elementInLayoutWith label labelAttrs =

85− mapEveryCombo4

86− (\( attrLabel, attrs ) ( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->

87− ( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " with " ++ attrLabel ++ " > " ++ childLabel

88− , makeLayout attrs.parent (makeSelf attrs.self child)

89− )

90− )

91− labelAttrs

92− allLayouts

93− layouts

94− contents

95−

96−

97layouts =

34layouts =

98 [ ( "el"

35 [ ( "el"

99 , \attrs child ->

36 , \attrs child ->

@@ -118,130 +55,20 @@ layouts =

118 ]

55 ]

119

56

120

57

121−allElements =

122− [ ( "el"

123− , \attrs child ->

124− el attrs child

125− )

126− , ( "row"

127− , \attrs child ->

128− row attrs [ child ]

129− )

130− , ( "col"

131− , \attrs child ->

132− column attrs [ child ]

133− )

134− , ( "para"

135− , \attrs child ->

136− paragraph attrs [ child ]

137− )

138− , ( "txtCol"

139− , \attrs child ->

140− textColumn attrs [ child ]

141− )

142− ]

143−

144−

145−allLayouts =

146− [ ( "el"

147− , \attrs child ->

148− el attrs child

149− )

150− , ( "row 3, self 1"

151− , \attrs child ->

152− row attrs [ child, box, box ]

153− )

154− , ( "row 3, self 2"

155− , \attrs child ->

156− row attrs [ box, child, box ]

157− )

158− , ( "row 3, self 3"

159− , \attrs child ->

160− row attrs [ box, box, child ]

161− )

162− , ( "col 3, self 1"

163− , \attrs child ->

164− column attrs [ child, box, box ]

165− )

166− , ( "col 3, self 2"

167− , \attrs child ->

168− column attrs [ box, child, box ]

169− )

170− , ( "col 3, self 3"

171− , \attrs child ->

172− column attrs [ box, box, child ]

173− )

174− , ( "para"

175− , \attrs child ->

176− paragraph attrs [ child ]

177− )

178− , ( "txtCol"

179− , \attrs child ->

180− textColumn attrs [ child ]

181− )

182− ]

183−

184−

185nearbys =

58nearbys =

186− [ ( "inFront", inFront )

59+ [ inFront

187− , ( "above", above )

60+ , above

188− , ( "onLeft", onLeft )

61+ , onLeft

189− , ( "onRight", onRight )

62+ , onRight

190− , ( "below", below )

63+ , below

191− , ( "behindContent", behindContent )

64+ , behindContent

192− ]

193−

194−

195−alignments =

196− horizontal ++ vertical

197−

198−

199−horizontal =

200− [ Tuple.pair "alignLeft" alignLeft

201− , Tuple.pair "alignRight" alignRight

202− , Tuple.pair "centerX" centerX

203− ]

204−

205−

206−vertical =

207− [ Tuple.pair "alignTop" alignTop

208− , Tuple.pair "alignBottom" alignBottom

209− , Tuple.pair "centerY" centerY

210 ]

65 ]

211

66

212

67

213−extractLabel maybe =

214− maybe

215−

216−

217−allAlignments =

218− mapEveryCombo

219− (\maybeOne maybeTwo ->

220− let

221− labels =

222− List.filterMap (Maybe.map Tuple.first)

223− [ maybeOne

224− , maybeTwo

225− ]

226−

227− attrs =

228− List.filterMap (Maybe.map Tuple.second)

229− [ maybeOne

230− , maybeTwo

231− ]

232− in

233− Tuple.pair (String.join "++" labels)

234− attrs

235− )

236− (Nothing :: List.map Just horizontal)

237− (Nothing :: List.map Just vertical)

238−

239−

240contents =

68contents =

241 [ ( "none", none )

69 [ ( "none", none )

242 , ( "short text", text short )

70 , ( "short text", text short )

243−

244− -- , ( "long text", text lorem )

71+ , ( "long text", text lorem )

245 , ( "box"

72 , ( "box"

246 , box

73 , box

247 )

74 )

@@ -294,26 +121,6 @@ mapEveryCombo3 fn listOne listTwo listThree =

294 listOne

121 listOne

295

122

296

123

297−mapEveryCombo4 fn listOne listTwo listThree listFour =

298− List.concatMap

299− (\one ->

300− List.concatMap

301− (\two ->

302− List.concatMap

303− (\three ->

304− List.map

305− (\four ->

306− fn one two three four

307− )

308− listFour

309− )

310− listThree

311− )

312− listTwo

313− )

314− listOne

315−

316−

317sizes render =

124sizes render =

318 List.concatMap

125 List.concatMap

319 (\( widthLen, heightLen ) ->

126 (\( widthLen, heightLen ) ->

@@ -356,43 +163,3 @@ lengths =

356 |> maximum 100

163 |> maximum 100

357 |> minimum 50

164 |> minimum 50

358 ]

165 ]

359−

360−

361−type Generated thing

362− = Generated (List (Labeled thing))

363−

364−

365−type alias Labeled thing =

366− ( String, thing )

367−

368−

369−with : List (Labeled a) -> List (Labeled (a -> b)) -> List (Labeled b)

370−with first funcs =

371− List.concatMap

372− (\( lbl, fst ) ->

373− List.map

374− (\( fnLbl, fn ) ->

375− Tuple.pair (fnLbl ++ "+" ++ lbl) (fn fst)

376− )

377− funcs

378− )

379− first

380−

381−

382−generate : String -> generated -> List (Labeled generated)

383−generate lbl fn =

384− [ Tuple.pair lbl fn

385− ]

386−

387−

388−test : List (Labeled (Testable.Element msg))

389−test =

390− generate "Alignments"

391− (\align ->

392− el align none

393− )

394− |> with allAlignments

395−

396−

397−

398−-- |>

tests-rendering/src/Tests/Alignment.elmdeleted−49

@@ -1,49 +0,0 @@

1−module Tests.Alignment exposing (view)

2−

3−{-| Testing nearby elements such as those defined with `above`, `below`, etc.

4−-}

5−

6−import Testable

7−import Testable.Element exposing (..)

8−import Testable.Element.Background as Background

9−import Testable.Element.Font as Font

10−import Testable.Generator

11−import Tests.Palette as Palette exposing (..)

12−

13−

14−box attrs =

15− el

16− ([ width (px 50)

17− , height (px 50)

18− , Background.color blue

19− ]

20− ++ attrs

21− )

22− none

23−

24−

25−{-| -}

26−view : List ( String, Testable.Element msg )

27−view =

28− List.concat

29− [ Testable.Generator.generate "Alignments"

30− (\layout element alignment ->

31− layout

32− [ width (px 800)

33− , height (px 800)

34− , Background.color lightGrey

35− ]

36− (element

37− ([ width (px 200)

38− , height (px 200)

39− , Background.color red

40− ]

41− ++ alignment

42− )

43− none

44− )

45− )

46− |> Testable.Generator.with Testable.Generator.allLayouts

47− |> Testable.Generator.with Testable.Generator.allElements

48− |> Testable.Generator.with Testable.Generator.allAlignments

49− ]

tests-rendering/src/Tests/All.elm+36−25

@@ -2,43 +2,54 @@ module Tests.All exposing (main)

2

3{-| -}

4

5+import ClippedElInFixedWidthColumn

6+import ElInFixedHeightColumn

7+import InFrontSize

5−import Layout.NestedParagraphs

8+import NestedParagraphs

6−import Layout.SafariBugIssue147

9+import SafariBugIssue147

10+import StackedScrollingColumnsHeight

7import Testable.Generator

11import Testable.Generator

8import Testable.Runner

12import Testable.Runner

9−import Tests.Alignment

13+import Tests.Basic

14+import Tests.ColumnAlignment

15+import Tests.ColumnSpacing

16+import Tests.ElementAlignment

10import Tests.Nearby

17import Tests.Nearby

11−import Tests.Spacing

18+import Tests.RowAlignment

19+import Tests.RowSpacing

12import Tests.TextWrapping

20import Tests.TextWrapping

13import Tests.Transparency

21import Tests.Transparency

22+import WeirdCentering

14

23

15

24

16main : Testable.Runner.TestableProgram

25main : Testable.Runner.TestableProgram

17main =

26main =

18 (Testable.Runner.program << List.concat)

27 (Testable.Runner.program << List.concat)

19− [ Testable.Generator.elementInLayout "Basics" []

28+ [ --Testable.Generator.element "Basics"

29+ --[]

30+ -- , Testable.Generator.element "Align " []

31+ -- Tuple.pair "Basic Element" Tests.Basic.view

20− , Tests.Nearby.view

32+ -- , Tuple.pair "Nearby" Tests.Nearby.view

21− , Tests.Alignment.view

33+ -- , Tuple.pair "Element Alignment" Tests.ElementAlignment.view

22− , Tests.Spacing.view

34+ -- , Tuple.pair "Transparency" Tests.Transparency.view

23−

35+ -- , Tuple.pair "Column Alignment" Tests.ColumnAlignment.view

24− -- [

36+ -- -- This has 12k cases, so it runs slow and sometimes crashes IE

25− -- , Tuple.pair "Transparency" Tests.Transparency.view

37+ -- , Tuple.pair "Row Alignment" Tests.RowAlignment.view

26− -- ]

38+ -- , Tuple.pair "Column Spacing" Tests.ColumnSpacing.view

39+ -- , Tuple.pair "Row Spacing" Tests.RowSpacing.view

27− -- , [ Tuple.pair "Paragraph wrapping" Tests.TextWrapping.view

40+ -- [ Tuple.pair "Paragraph wrapping" Tests.TextWrapping.view

28− -- ]

41+ -- ]

42+ -- ,

29− , issues

43+ issues

30 ]

44 ]

31

45

32

46

33issues =

47issues =

34− [ -- Testable.Runner.rename "Weird Centering" WeirdCentering.view

48+ [ Testable.Runner.rename "Weird Centering" WeirdCentering.view

35− -- , Testable.Runner.rename "Stacked scrolling columns height" StackedScrollingColumnsHeight.view

49+ , Testable.Runner.rename "Stacked scrolling columns height" StackedScrollingColumnsHeight.view

36− -- ,

37− Testable.Runner.rename "Safari bug issue147" Layout.SafariBugIssue147.view

50+ , Testable.Runner.rename "Safari bug issue147" SafariBugIssue147.view

38− , Testable.Runner.rename "Nested paragraphs" Layout.NestedParagraphs.view

51+ , Testable.Runner.rename "Nested paragraphs" NestedParagraphs.view

39−

52+ , Testable.Runner.rename "In front size" InFrontSize.view

40− -- , Testable.Runner.rename "Issue 22, zIndex" Nearby.Issue22ZIndex.view

41− -- , Testable.Runner.rename "inFrontIssue" Nearby.InFrontIssue.view

42− -- , Testable.Runner.rename "El in fixed height column" ElInFixedHeightColumn.view

53+ , Testable.Runner.rename "El in fixed height column" ElInFixedHeightColumn.view

43− -- , Testable.Runner.rename "Clipped el in fixed width column" ClippedElInFixedWidthColumn.view

54+ , Testable.Runner.rename "Clipped el in fixed width column" ClippedElInFixedWidthColumn.view

44 ]

55 ]

tests-rendering/src/Tests/Basic.elmnew file+54

@@ -0,0 +1,54 @@

1+module Tests.Basic exposing (view)

2+

3+{-| -}

4+

5+import Element as Actual

6+import Html

7+import Testable

8+import Testable.Element exposing (..)

9+import Testable.Element.Background as Background

10+import Testable.Element.Font as Font

11+import Testable.Runner

12+import Tests.Palette as Palette

13+

14+

15+{-| -}

16+main : Html.Html msg

17+main =

18+ Testable.Runner.show view

19+

20+

21+{-| -}

22+view : Testable.Element msg

23+view =

24+ row [ spacing 50, alignTop ]

25+ [ el

26+ [ width (px 200)

27+ , height (px 200)

28+ , Background.color Palette.blue

29+ , Font.color Palette.white

30+ ]

31+ (text "Hello!")

32+ , el

33+ [ width (px 200)

34+ , height (px 200)

35+ , Background.color Palette.blue

36+ , Font.color Palette.white

37+ ]

38+ (text "Hello!")

39+ , el

40+ [ width (px 200)

41+ , height (px 200)

42+ , Background.color (Actual.rgba 0 0 1 1)

43+ , Font.color Palette.white

44+ , below

45+ (el

46+ [ Background.color Palette.grey

47+ , width (px 50)

48+ , height (px 50)

49+ ]

50+ none

51+ )

52+ ]

53+ (text "Hello!")

54+ ]

tests-rendering/src/Tests/ColumnAlignment.elmnew file+176

@@ -0,0 +1,176 @@

1+module Tests.ColumnAlignment exposing (..)

2+

3+import Html

4+import Testable

5+import Testable.Element as Element exposing (..)

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

9+import Tests.Palette as Palette exposing (..)

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+container =

30+ el [ width (px 100), height (px 100) ]

31+

32+

33+view =

34+ let

35+ colContainer attrs children =

36+ column ([ Background.color lightGrey, spacing 20, width (px 100), height (px 500) ] ++ attrs) children

37+

38+ tallContainer attrs children =

39+ column ([ Background.color lightGrey, spacing 20, width (px 100), height fill ] ++ attrs) children

40+ in

41+ column

42+ [ width fill, spacing 20 ]

43+ [ el [] (text "Alignment Within a Column")

44+ , row [ spacing 20 ]

45+ [ colContainer []

46+ [ box [] ]

47+ , colContainer []

48+ [ box [ centerY ]

49+ ]

50+ , colContainer []

51+ [ box [ alignBottom, label "first" ]

52+ ]

53+ ]

54+ , row [ spacing 20 ]

55+ [ colContainer []

56+ [ box [] ]

57+ , colContainer []

58+ [ box []

59+ , box []

60+ , box []

61+ ]

62+ , colContainer []

63+ [ box [ alignLeft, label "first" ]

64+ , box [ centerX, label "second" ]

65+ , box [ alignRight, label "third" ]

66+ ]

67+ ]

68+ , row [ spacing 20 ]

69+ [ colContainer []

70+ [ box []

71+ , box []

72+ , box []

73+ ]

74+ , colContainer []

75+ [ box []

76+ , box []

77+ , box [ alignBottom, label "third" ]

78+ ]

79+ , colContainer []

80+ [ box []

81+ , box [ alignBottom, label "second" ]

82+ , box []

83+ ]

84+ , colContainer []

85+ [ box [ alignBottom, label "first" ]

86+ , box []

87+ , box []

88+ ]

89+ ]

90+ , text "centerY"

91+ , row [ spacing 20 ]

92+ [ colContainer [ height fill ]

93+ [ box [ centerY, label "solo" ]

94+ ]

95+ , colContainer []

96+ [ box []

97+ , box [ centerY, label "middle" ]

98+ , box []

99+ ]

100+ , colContainer []

101+ [ box []

102+ , box []

103+ , box [ centerY, label "last" ]

104+ ]

105+ ]

106+ , text "multiple centerY"

107+ , row [ height (px 800), spacing 20 ]

108+ [ tallContainer []

109+ [ box []

110+ , box [ centerY ]

111+ , box [ centerY ]

112+ , box [ centerY ]

113+ , box [ centerY ]

114+ , box [ alignBottom ]

115+ ]

116+ , tallContainer []

117+ [ box []

118+ , box [ centerY ]

119+ , box []

120+ ]

121+ , tallContainer []

122+ [ box []

123+ , box []

124+ , box [ centerY ]

125+ ]

126+ ]

127+ , text "top, center, bottom"

128+ , row [ spacing 20 ]

129+ [ colContainer []

130+ [ box [ alignTop, label "first" ]

131+ , box []

132+ , box [ alignBottom, label "last" ]

133+ ]

134+ , colContainer []

135+ [ box [ alignTop ]

136+ , box [ centerY ]

137+ , box [ alignBottom ]

138+ ]

139+ , colContainer []

140+ [ box [ alignLeft, alignTop ]

141+ , box [ centerX, centerY ]

142+ , box [ alignRight, alignBottom ]

143+ ]

144+ ]

145+ , el [ width fill ] (text "Column in a Row")

146+ , row [ width fill, spacing 20, label "row" ]

147+ [ box [ alignLeft, alignTop, label "box" ]

148+ , column

149+ [ alignLeft

150+ , alignTop

151+ , spacing 20

152+ , label "column"

153+ , Background.color lightGrey

154+ ]

155+ [ box []

156+ , box []

157+ , box []

158+ ]

159+ , column

160+ [ spacing 20

161+ , width (px 100)

162+ , alignLeft

163+ , alignTop

164+ , Background.color lightGrey

165+ ]

166+ [ box []

167+ , box []

168+ , box []

169+ ]

170+ , colContainer []

171+ [ box [ alignRight ]

172+ , box [ centerX ]

173+ , box [ alignLeft ]

174+ ]

175+ ]

176+ ]

tests-rendering/src/Tests/ColumnSpacing.elmnew file+68

@@ -0,0 +1,68 @@

1+module Tests.ColumnSpacing exposing (..)

2+

3+import Html

4+import Testable

5+import Testable.Element as Element exposing (..)

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

9+import Tests.Palette as Palette exposing (..)

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+tinyBox attrs =

30+ el

31+ ([ width (px 20)

32+ , height (px 20)

33+

34+ -- , centerY

35+ , Background.color darkCharcoal

36+ ]

37+ ++ attrs

38+ )

39+ none

40+

41+

42+container =

43+ el [ width (px 100), height (px 100) ]

44+

45+

46+view =

47+ let

48+ colContainer attrs children =

49+ column ([ spacing 20, width (px 100), height (px 500) ] ++ attrs) children

50+ in

51+ column

52+ []

53+ [ el [] (text "Spacing within a column")

54+ , row []

55+ [ colContainer []

56+ [ box [] ]

57+ , colContainer []

58+ [ box []

59+ , box []

60+ , box []

61+ ]

62+ , colContainer [ onRight (tinyBox []) ]

63+ [ box []

64+ , box []

65+ , box []

66+ ]

67+ ]

68+ ]

tests-rendering/src/Tests/ElementAlignment.elmnew file+111

@@ -0,0 +1,111 @@

1+module Tests.ElementAlignment exposing (..)

2+

3+import Generator

4+import Html

5+import Testable

6+import Testable.Element as Element exposing (..)

7+import Testable.Element.Background as Background

8+import Testable.Element.Font as Font

9+import Testable.Runner

10+import Tests.Palette as Palette exposing (..)

11+

12+

13+{-| -}

14+main : Html.Html msg

15+main =

16+ Testable.Runner.show view

17+

18+

19+box : List (Testable.Attr msg) -> Testable.Element msg

20+box attrs =

21+ el

22+ ([ width (px 50)

23+ , height (px 50)

24+ , Background.color blue

25+ ]

26+ ++ attrs

27+ )

28+ none

29+

30+

31+container : Testable.Element msg -> Testable.Element msg

32+container =

33+ el

34+ [ width (px 200)

35+ , height (px 200)

36+ , Background.color lightGrey

37+ ]

38+

39+

40+view : Testable.Element msg

41+view =

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+ ]

tests-rendering/src/Tests/Nearby.elm+356−97

@@ -8,7 +8,6 @@ import Testable

8import Testable.Element exposing (..)

9import Testable.Element.Background as Background

10import Testable.Element.Font as Font

11−import Testable.Generator

12import Testable.Runner

11import Testable.Runner

13import Tests.Palette as Palette exposing (..)

12import Tests.Palette as Palette exposing (..)

14

13

@@ -58,39 +57,365 @@ p attrs =

58

57

59

58

60{-| -}

59{-| -}

60+main : Html.Html msg

61+main =

62+ Testable.Runner.show view

63+

64+

65+{-| -}

61−view : List ( String, Testable.Element msg )

66+view : Testable.Element msg

62view =

67view =

63− List.concat

68+ let

64− [ [ Tuple.pair "Parent inFront above child inFront" layeredVisibility

69+ transparentBox attrs =

65− , Tuple.pair "Sibling onLeft above sibling inFront" overlappingChildren

70+ el

66− , Tuple.pair "el with all nearbys and alignments" master

71+ ([ Font.color white

67− , Tuple.pair "paragraph with all nearbys and alignments" masterParagraph

72+ , width (px 50)

68− ]

73+ , height (px 50)

69− , Testable.Generator.generate "Nearbys"

74+ , Background.color white

70− (\element nearby ->

75+ ]

71− element

76+ ++ attrs

72− [ nearby (box [])

77+ )

78+ (text "hi")

79+

80+ -- single location name box =

81+ -- row [ height (px 100), width fill, spacing 50 ]

82+ -- [ box

83+ -- [ location

84+ -- (el

85+ -- [ width (px 20)

86+ -- , height (px 20)

87+ -- , Background.color darkCharcoal

88+ -- ]

89+ -- none

90+ -- )

91+ -- ]

92+ -- , box

93+ -- [ location

94+ -- (el

73− , width (px 200)

95+ -- [ width (px 20)

74− , height (px 200)

96+ -- , height (px 20)

75− , Background.color red

97+ -- , alignLeft

98+ -- , Background.color darkCharcoal

99+ -- ]

100+ -- none

101+ -- )

102+ -- ]

103+ -- ]

104+ little name attrs =

105+ el

106+ ([ label name

107+ , width (px 5)

108+ , height (px 5)

109+ , Background.color darkCharcoal

110+ ]

111+ ++ attrs

112+ )

113+ none

114+

115+ nearby location name render =

116+ column [ spacing 32, label "column" ]

117+ [ el [ padding 20, Background.color green, Font.color white ] (text name)

118+ , row [ height (px 100), width fill, spacing 50 ]

119+ [ render

120+ [ location

121+ (el

122+ [ label name

123+ , width (px 20)

124+ , height (px 20)

125+ , Background.color darkCharcoal

126+ ]

127+ none

128+ )

129+ ]

130+ , render

131+ [ location

132+ (el

133+ [ label name

134+ , width (px 20)

135+ , height (px 20)

136+ , alignLeft

137+ , Background.color darkCharcoal

138+ ]

139+ none

140+ )

141+ ]

142+ , render

143+ [ location

144+ (el

145+ [ label name

146+ , width (px 20)

147+ , height (px 20)

148+ , centerX

149+ , Background.color darkCharcoal

150+ ]

151+ none

152+ )

153+ ]

154+ , render

155+ [ location

156+ (el

157+ [ label name

158+ , width (px 20)

159+ , height (px 20)

160+ , alignRight

161+ , Background.color darkCharcoal

162+ ]

163+ none

164+ )

165+ ]

166+ , render

167+ [ location

168+ (el

169+ [ label name

170+ , width (px 20)

171+ , height (px 20)

172+ , alignTop

173+ , Background.color darkCharcoal

174+ ]

175+ none

176+ )

177+ ]

178+ , render

179+ [ location

180+ (el

181+ [ label name

182+ , width (px 20)

183+ , height (px 20)

184+ , centerY

185+ , Background.color darkCharcoal

186+ ]

187+ none

188+ )

189+ ]

190+ , render

191+ [ location

192+ (el

193+ [ label name

194+ , width (px 20)

195+ , height (px 20)

196+ , alignBottom

197+ , Background.color darkCharcoal

198+ ]

199+ none

200+ )

201+ ]

202+ ]

203+ , text "widths/heights"

204+ , row [ height (px 100), width fill, spacing 50, label "Row" ]

205+ [ render

206+ [ location

207+ (el

208+ [ label name

209+ , width fill

210+ , height fill

211+ , Background.color darkCharcoal

212+ ]

213+ none

214+ )

215+ ]

216+ , render

217+ [ location

218+ (el

219+ [ label name

220+ , width (px 20)

221+ , height fill

222+ , Background.color darkCharcoal

223+ ]

224+ none

225+ )

226+ ]

227+ , render

228+ [ label "render"

229+ , location

230+ (el

231+ [ label name

232+ , width fill

233+ , height (px 20)

234+ , Background.color darkCharcoal

235+ ]

236+ none

237+ )

238+ ]

239+ , render

240+ [ location

241+ (el

242+ [ label name

243+ , width (px 20)

244+ , height shrink

245+ , Background.color darkCharcoal

246+ , Font.color white

247+ ]

248+ (text "h-shrink")

249+ )

250+ ]

251+ , render

252+ [ location

253+ (el

254+ [ label name

255+ , width shrink

256+ , height (px 20)

257+ , Background.color darkCharcoal

258+ , Font.color white

259+ ]

260+ (text "w-shrink")

261+ )

262+ ]

76 ]

263 ]

77− none

264+ , text "on paragraph"

78− )

265+ , row [ width fill, spacing 50, label "Row" ]

79− |> Testable.Generator.with Testable.Generator.allElements

266+ [ p

80− |> Testable.Generator.with Testable.Generator.nearbys

267+ [ location

81− , Testable.Generator.generate "Nearbys with alignment"

268+ (el

82− (\element nearby align ->

269+ [ label name

83− element

270+ , width (px 20)

84− [ nearby (box [ align ])

271+ , height (px 20)

272+ , Background.color darkCharcoal

273+ ]

274+ none

275+ )

276+ ]

277+ , p

278+ [ location

279+ (el

280+ [ label name

281+ , width (px 20)

282+ , height (px 20)

283+ , alignLeft

284+ , Background.color darkCharcoal

285+ ]

286+ none

287+ )

288+ ]

289+ , p

290+ [ location

291+ (el

292+ [ label name

293+ , width (px 20)

294+ , height (px 20)

295+ , centerX

296+ , Background.color darkCharcoal

297+ ]

298+ none

299+ )

300+ ]

301+ , p

302+ [ location

303+ (el

304+ [ label name

305+ , width (px 20)

306+ , height (px 20)

307+ , alignRight

308+ , Background.color darkCharcoal

309+ ]

310+ none

311+ )

312+ ]

313+ , p

314+ [ location

315+ (el

316+ [ label name

85− , width (px 200)

317+ , width (px 20)

318+ , height (px 20)

319+ , alignTop

320+ , Background.color darkCharcoal

321+ ]

322+ none

323+ )

324+ ]

325+ , p

326+ [ location

327+ (el

328+ [ label name

329+ , width (px 20)

86− , height (px 200)

330+ , height (px 20)

331+ , centerY

332+ , Background.color darkCharcoal

333+ ]

334+ none

335+ )

336+ ]

337+ , p

338+ [ location

339+ (el

340+ [ label name

341+ , width (px 20)

342+ , height (px 20)

343+ , alignBottom

87− , Background.color red

344+ , Background.color darkCharcoal

345+ ]

346+ none

347+ )

348+ ]

88 ]

349 ]

89− none

350+ ]

90− )

351+

91− |> Testable.Generator.with Testable.Generator.allElements

352+ master =

92− |> Testable.Generator.with Testable.Generator.nearbys

353+ el [ padding 20 ] <|

93− |> Testable.Generator.with Testable.Generator.alignments

354+ box

355+ [ above (little "above-left" [ alignLeft ])

356+ , above (little "above-center" [ centerX ])

357+ , above (little "above-right" [ alignRight ])

358+ , below (little "below-left" [ alignLeft ])

359+ , below (little "below-center" [ centerX ])

360+ , below (little "below-right" [ alignRight ])

361+ , onRight (little "onRight-left" [ alignTop ])

362+ , onRight (little "onRight-center" [ centerY ])

363+ , onRight (little "onRight-right" [ alignBottom ])

364+ , onLeft (little "onLeft-left" [ alignTop ])

365+ , onLeft (little "onLeft-center" [ centerY ])

366+ , onLeft (little "onLeft-right" [ alignBottom ])

367+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])

368+ , inFront (little "infront-center-top" [ alignTop, centerX ])

369+ , inFront (little "infront-right-top" [ alignTop, alignRight ])

370+ , inFront (little "infront-left-center" [ centerY, alignLeft ])

371+ , inFront (little "infront-center-center" [ centerY, centerX ])

372+ , inFront (little "infront-right-center" [ centerY, alignRight ])

373+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

374+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

375+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

376+ ]

377+

378+ masterParagraph =

379+ el [ padding 20 ] <|

380+ p

381+ [ above (little "above-left" [ alignLeft ])

382+ , above (little "above-center" [ centerX ])

383+ , above (little "above-right" [ alignRight ])

384+ , below (little "below-left" [ alignLeft ])

385+ , below (little "below-center" [ centerX ])

386+ , below (little "below-right" [ alignRight ])

387+ , onRight (little "onRight-left" [ alignTop ])

388+ , onRight (little "onRight-center" [ centerY ])

389+ , onRight (little "onRight-right" [ alignBottom ])

390+ , onLeft (little "onLeft-left" [ alignTop ])

391+ , onLeft (little "onLeft-center" [ centerY ])

392+ , onLeft (little "onLeft-right" [ alignBottom ])

393+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])

394+ , inFront (little "infront-center-top" [ alignTop, centerX ])

395+ , inFront (little "infront-right-top" [ alignTop, alignRight ])

396+ , inFront (little "infront-left-center" [ centerY, alignLeft ])

397+ , inFront (little "infront-center-center" [ centerY, centerX ])

398+ , inFront (little "infront-right-center" [ centerY, alignRight ])

399+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

400+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

401+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

402+ ]

403+ in

404+ column

405+ [ centerX, label "Nearby Elements", spacing 100 ]

406+ [ layeredVisibility

407+ , overlappingChildren

408+

409+ -- Note: visibility checks like the above

410+ -- need to be at the top so they're in the viewport

411+ , master

412+ , masterParagraph

413+ , nearby above "above" box

414+ , nearby below "below" box

415+ , nearby inFront "inFront" box

416+ , nearby onRight "onRight" box

417+ , nearby onLeft "onLeft" box

418+ , nearby behindContent "behindContent" transparentBox

94 ]

419 ]

95

420

96

421

@@ -111,69 +436,3 @@ overlappingChildren =

111 , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]

436 , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]

112 (justBox 40 darkGrey [])

437 (justBox 40 darkGrey [])

113 ]

438 ]

114−

115−

116−little name attrs =

117− el

118− ([ label name

119− , width (px 5)

120− , height (px 5)

121− , Background.color darkCharcoal

122− ]

123− ++ attrs

124− )

125− none

126−

127−

128−master =

129− el [ padding 20 ] <|

130− box

131− [ above (little "above-left" [ alignLeft ])

132− , above (little "above-center" [ centerX ])

133− , above (little "above-right" [ alignRight ])

134− , below (little "below-left" [ alignLeft ])

135− , below (little "below-center" [ centerX ])

136− , below (little "below-right" [ alignRight ])

137− , onRight (little "onRight-left" [ alignTop ])

138− , onRight (little "onRight-center" [ centerY ])

139− , onRight (little "onRight-right" [ alignBottom ])

140− , onLeft (little "onLeft-left" [ alignTop ])

141− , onLeft (little "onLeft-center" [ centerY ])

142− , onLeft (little "onLeft-right" [ alignBottom ])

143− , inFront (little "infront-left-top" [ alignTop, alignLeft ])

144− , inFront (little "infront-center-top" [ alignTop, centerX ])

145− , inFront (little "infront-right-top" [ alignTop, alignRight ])

146− , inFront (little "infront-left-center" [ centerY, alignLeft ])

147− , inFront (little "infront-center-center" [ centerY, centerX ])

148− , inFront (little "infront-right-center" [ centerY, alignRight ])

149− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

150− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

151− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

152− ]

153−

154−

155−masterParagraph =

156− el [ padding 20 ] <|

157− p

158− [ above (little "above-left" [ alignLeft ])

159− , above (little "above-center" [ centerX ])

160− , above (little "above-right" [ alignRight ])

161− , below (little "below-left" [ alignLeft ])

162− , below (little "below-center" [ centerX ])

163− , below (little "below-right" [ alignRight ])

164− , onRight (little "onRight-left" [ alignTop ])

165− , onRight (little "onRight-center" [ centerY ])

166− , onRight (little "onRight-right" [ alignBottom ])

167− , onLeft (little "onLeft-left" [ alignTop ])

168− , onLeft (little "onLeft-center" [ centerY ])

169− , onLeft (little "onLeft-right" [ alignBottom ])

170− , inFront (little "infront-left-top" [ alignTop, alignLeft ])

171− , inFront (little "infront-center-top" [ alignTop, centerX ])

172− , inFront (little "infront-right-top" [ alignTop, alignRight ])

173− , inFront (little "infront-left-center" [ centerY, alignLeft ])

174− , inFront (little "infront-center-center" [ centerY, centerX ])

175− , inFront (little "infront-right-center" [ centerY, alignRight ])

176− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

177− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

178− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

179− ]

tests-rendering/src/Tests/RowAlignment.elmnew file+212

@@ -0,0 +1,212 @@

1+module Tests.RowAlignment exposing (..)

2+

3+import Generator

4+import Html

5+import Testable

6+import Testable.Element as Element exposing (..)

7+import Testable.Element.Background as Background

8+import Testable.Element.Font as Font

9+import Testable.Runner

10+import Tests.Palette as Palette exposing (..)

11+

12+

13+{-| -}

14+main : Html.Html msg

15+main =

16+ Testable.Runner.show view

17+

18+

19+box attrs =

20+ el

21+ ([ width (px 50)

22+ , height (px 50)

23+ , Background.color blue

24+ ]

25+ ++ attrs

26+ )

27+ none

28+

29+

30+view =

31+ let

32+ rowContainer attrs children =

33+ row

34+ ([ spacing 20

35+ , height (px 100)

36+ , Background.color lightGrey

37+ ]

38+ ++ attrs

39+ )

40+ children

41+ in

42+ column [ width (px 500), spacing 20 ]

43+ [ el [] (text "Alignment Within a Row")

44+ , column [ spacing 20 ] <|

45+ Generator.sizes <|

46+ \resizeable ->

47+ rowContainer

48+ [ label "single child" ]

49+ [ resizeable [] none ]

50+ , column [ spacing 20 ] <|

51+ Generator.sizes <|

52+ \resizeable ->

53+ rowContainer

54+ [ label "single child" ]

55+ [ resizeable [ centerX ] none ]

56+ , column [ spacing 20 ] <|

57+ Generator.sizes <|

58+ \resizeable ->

59+ rowContainer [ label "single child" ]

60+ [ resizeable [ alignRight ] none ]

61+ , column [ spacing 20 ] <|

62+ Generator.sizes <|

63+ \resizeable ->

64+ rowContainer []

65+ [ resizeable [] none

66+ , resizeable [] none

67+ , resizeable [] none

68+ ]

69+ , column [ spacing 20 ] <|

70+ Generator.sizes <|

71+ \resizeable ->

72+ rowContainer []

73+ [ resizeable [] none

74+ , resizeable [] none

75+ , resizeable [ alignRight, label "Right Child in Row" ] none

76+ ]

77+ , column [ spacing 20 ] <|

78+ Generator.sizes <|

79+ \resizeable ->

80+ rowContainer

81+ []

82+ [ resizeable [] none

83+ , resizeable [ alignRight, label "Middle Child in Row" ] none

84+ , resizeable [] none

85+ ]

86+ , column [ spacing 20 ] <|

87+ Generator.sizes <|

88+ \resizeable ->

89+ rowContainer []

90+ [ resizeable [ alignRight, label "Left Child in Row" ] none

91+ , resizeable [] none

92+ , resizeable [] none

93+ ]

94+ , text "center X"

95+ , column [ spacing 20 ] <|

96+ Generator.sizes <|

97+ \resizeable ->

98+ rowContainer []

99+ [ resizeable [ centerX, label "Left Child in Row" ] none

100+ , resizeable [] none

101+ , resizeable [] none

102+ ]

103+ , column [ spacing 20 ] <|

104+ Generator.sizes <|

105+ \resizeable ->

106+ rowContainer []

107+ [ resizeable [] none

108+ , resizeable [ centerX, label "Middle Child in Row" ] none

109+ , resizeable [] none

110+ ]

111+ , column [ spacing 20 ] <|

112+ Generator.sizes <|

113+ \resizeable ->

114+ rowContainer []

115+ [ resizeable [] none

116+ , resizeable [] none

117+ , resizeable [ centerX, label "Right Child in Row" ] none

118+ ]

119+ , column [ spacing 20 ] <|

120+ Generator.sizes <|

121+ \resizeable ->

122+ rowContainer []

123+ [ resizeable [] none

124+ , resizeable [] none

125+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none

126+ , resizeable [] none

127+ ]

128+ , column [ spacing 20 ] <|

129+ Generator.sizes <|

130+ \resizeable ->

131+ rowContainer []

132+ [ resizeable [] none

133+ , resizeable [] none

134+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none

135+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none

136+ , resizeable [] none

137+ ]

138+ , column [ spacing 20 ] <|

139+ Generator.sizes <|

140+ \resizeable ->

141+ rowContainer []

142+ [ resizeable [] none

143+ , resizeable [] none

144+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none

145+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none

146+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none

147+ , resizeable [] none

148+ ]

149+ , text "left x right"

150+ , column [ spacing 20 ] <|

151+ Generator.sizes <|

152+ \resizeable ->

153+ rowContainer []

154+ [ resizeable [ alignLeft, label "Left Child in Row" ] none

155+ , resizeable [] none

156+ , resizeable [ alignRight, label "Right Child in Row" ] none

157+ ]

158+ , text "left center right"

159+ , column [ spacing 20 ] <|

160+ Generator.sizes <|

161+ \resizeable ->

162+ rowContainer []

163+ [ resizeable [ alignLeft, label "Left Child in Row" ] none

164+ , resizeable [ centerX, label "Middle Child in Row" ] none

165+ , resizeable [ alignRight, label "Right Child in Row" ] none

166+ ]

167+ , text "vertical alignment"

168+ , column [ spacing 20 ] <|

169+ Generator.sizes <|

170+ \resizeable ->

171+ rowContainer []

172+ [ resizeable [ alignTop, label "Left Child in Row" ] none

173+ , resizeable [ centerY, label "Middle Child in Row" ] none

174+ , resizeable [ alignBottom, label "Right Child in Row" ] none

175+ ]

176+ , text "x and y alignments"

177+ , column [ spacing 20 ] <|

178+ Generator.sizes <|

179+ \resizeable ->

180+ rowContainer []

181+ [ resizeable [ alignLeft, alignTop, label "Left Child" ] none

182+ , resizeable [ centerX, centerY, label "Middle Child" ] none

183+ , resizeable [ alignRight, alignBottom, label "Right Child" ] none

184+ ]

185+ , text "align Top and X alignments "

186+ , column [ spacing 20 ] <|

187+ Generator.sizes <|

188+ \resizeable ->

189+ rowContainer []

190+ [ resizeable [ alignLeft, alignTop, label "Left Child" ] none

191+ , resizeable [ centerX, alignTop, label "Middle Child" ] none

192+ , resizeable [ alignRight, alignTop, label "Right Child" ] none

193+ ]

194+ , text "align Bottom and X alignments "

195+ , column [ spacing 20 ] <|

196+ Generator.sizes <|

197+ \resizeable ->

198+ rowContainer []

199+ [ resizeable [ alignLeft, alignBottom, label "Left Child" ] none

200+ , resizeable [ centerX, alignBottom, label "Middle Child" ] none

201+ , resizeable [ alignRight, alignBottom, label "Right Child" ] none

202+ ]

203+ , text "centerY and X alignments "

204+ , column [ spacing 20 ] <|

205+ Generator.sizes <|

206+ \resizeable ->

207+ rowContainer []

208+ [ resizeable [ alignLeft, centerY, label "Left Child" ] none

209+ , resizeable [ centerX, centerY, label "Middle Child" ] none

210+ , resizeable [ alignRight, centerY, label "Right Child" ] none

211+ ]

212+ ]

tests-rendering/src/Tests/RowSpacing.elmnew file+69

@@ -0,0 +1,69 @@

1+module Tests.RowSpacing exposing (..)

2+

3+import Html

4+import Testable

5+import Testable.Element as Element exposing (..)

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

9+import Tests.Palette as Palette exposing (..)

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+tinyBox attrs =

30+ el

31+ ([ width (px 20)

32+ , height (px 20)

33+

34+ -- , centerY

35+ , Background.color darkCharcoal

36+ ]

37+ ++ attrs

38+ )

39+ none

40+

41+

42+container =

43+ el [ width (px 100), height (px 100) ]

44+

45+

46+view =

47+ let

48+ colContainer attrs children =

49+ row ([ spacing 20, width (px 500), height (px 120) ] ++ attrs) children

50+ in

51+ column

52+ []

53+ [ el [] (text "Spacing within a row")

54+ , column []

55+ [ box []

56+ , colContainer []

57+ [ box [] ]

58+ , colContainer []

59+ [ box []

60+ , box []

61+ , box []

62+ ]

63+ , colContainer [ below (tinyBox []) ]

64+ [ box []

65+ , box []

66+ , box []

67+ ]

68+ ]

69+ ]

tests-rendering/src/Tests/Spacing.elmdeleted−36

@@ -1,36 +0,0 @@

1−module Tests.Spacing exposing (view)

2−

3−{-| Test that spacing works

4−-}

5−

6−import Testable

7−import Testable.Element exposing (..)

8−import Testable.Element.Background as Background

9−import Testable.Element.Font as Font

10−import Testable.Generator

11−import Tests.Palette as Palette exposing (..)

12−

13−

14−{-| -}

15−view : List ( String, Testable.Element msg )

16−view =

17− List.concat

18− [ Testable.Generator.generate "Spacing"

19− (\layout element ->

20− layout

21− [ width (px 800)

22− , height (px 800)

23− , Background.color lightGrey

24− , spacing 20

25− ]

26− (element

27− [ width (px 200)

28− , height (px 200)

29− , Background.color red

30− ]

31− none

32− )

33− )

34− |> Testable.Generator.with Testable.Generator.allLayouts

35− |> Testable.Generator.with Testable.Generator.allElements

36− ]