76701ac...master · typeable/elm-ui

README.md+4

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

6666

6767The 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.

6868

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+

6973## Contributing

7074

7175Want to help out fixing bugs or reporting issues?

elm.json+1−1

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

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

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

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

6− "version": "1.1.5",

6+ "version": "1.1.8",

77 "exposed-modules": [

88 "Element",

99 "Element.Input",

examples/Basic.elm+1−1

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

1−module Main exposing (..)

1+module Basic exposing (..)

22

33{-| -}

44

examples/Form.elm+12−4

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

1−module Main exposing (..)

1+module Form exposing (..)

22

33{-| -}

44

@@ -80,7 +80,14 @@ view model =

8080 [ Font.size 20

8181 ]

8282 <|

83− Element.column [ width (px 800), height shrink, centerY, centerX, spacing 36, padding 10, explain Debug.todo ]

83+ Element.column

84+ [ width (px 800)

85+ , height shrink

86+ , centerY

87+ , centerX

88+ , spacing 36

89+ , padding 10

90+ ]

8491 [ el

8592 [ Region.heading 1

8693 , alignLeft

@@ -117,7 +124,7 @@ view model =

117124 , onChange = \new -> Update { model | username = new }

118125 , label = Input.labelAbove [ Font.size 14 ] (text "Username")

119126 }

120− , Input.currentPassword [ spacing 12, width shrink ]

127+ , Input.currentPassword [ spacing 12 ]

121128 { text = model.password

122129 , placeholder = Nothing

123130 , onChange = \new -> Update { model | password = new }

@@ -193,7 +200,8 @@ view model =

193200 , Border.color darkBlue

194201 , paddingXY 32 16

195202 , Border.rounded 3

196− , width fill

203+

204+ -- , width fill

197205 ]

198206 { onPress = Nothing

199207 , label = Element.text "Place your lunch order!"

examples/Table.elm+1−1

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

1−module Main exposing (..)

1+module Table exposing (..)

22

33{-| -}

44

examples/elm.json+19−22

@@ -1,25 +1,22 @@

11{

2− "type": "application",

3− "source-directories": [

4− ".",

5− "../src/"

6− ],

7− "elm-version": "0.19.0",

8− "dependencies": {

9− "direct": {

10− "elm/browser": "1.0.0",

11− "elm/core": "1.0.0",

12− "elm/html": "1.0.0",

13− "elm/json": "1.0.0",

14− "elm/virtual-dom": "1.0.0"

15− },

16− "indirect": {

17− "elm/time": "1.0.0",

18− "elm/url": "1.0.0"

19− }

2+ "type": "application",

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

4+ "elm-version": "0.19.1",

5+ "dependencies": {

6+ "direct": {

7+ "elm/browser": "1.0.0",

8+ "elm/core": "1.0.0",

9+ "elm/html": "1.0.0",

10+ "elm/json": "1.0.0",

11+ "elm/virtual-dom": "1.0.0"

2012 },

21− "test-dependencies": {

22− "direct": {},

23− "indirect": {}

13+ "indirect": {

14+ "elm/time": "1.0.0",

15+ "elm/url": "1.0.0"

2416 }

25−}

17+ },

18+ "test-dependencies": {

19+ "direct": {},

20+ "indirect": {}

21+ }

22+}

package-lock.json+19−31

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

734734 }

735735 },

736736 "jszip": {

737− "version": "3.2.2",

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

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

737+ "version": "3.4.0",

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

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

740740 "requires": {

741741 "lie": "~3.3.0",

742742 "pako": "~1.0.2",

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

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

10031003 "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="

10041004 },

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− },

10101005 "selenium-webdriver": {

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

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

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

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

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

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

10141009 "requires": {

1015− "jszip": "^3.1.5",

1016− "rimraf": "^2.6.3",

1017− "tmp": "0.0.30",

1018− "xml2js": "^0.4.19"

1010+ "jszip": "^3.2.2",

1011+ "rimraf": "^2.7.1",

1012+ "tmp": "0.0.30"

1013+ },

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

10191023 }

10201024 },

10211025 "semver": {

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

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

12181222 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="

12191223 },

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− },

12361224 "xmlbuilder": {

12371225 "version": "13.0.2",

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

package.json+4−4

@@ -7,11 +7,11 @@

77 "test": "elm-test",

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

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

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",

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

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

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

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

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

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

1515 },

1616 "repository": {

1717 "type": "git",

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

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

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

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

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

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

3333 }

3434}

src/Element.elm+63−23

@@ -645,14 +645,34 @@ wrappedRow attrs children =

645645 newPadding =

646646 case padded of

647647 Just (Internal.Padding name t r b l) ->

648− if r >= (x // 2) && b >= (y // 2) then

648+ if r >= (toFloat x / 2) && b >= (toFloat y / 2) then

649+ let

650+ newTop =

651+ t - (toFloat y / 2)

652+

653+ newRight =

654+ r - (toFloat x / 2)

655+

656+ newBottom =

657+ b - (toFloat y / 2)

658+

659+ newLeft =

660+ l - (toFloat x / 2)

661+ in

649662 Just <|

650− paddingEach

651− { top = t - (y // 2)

652− , right = r - (x // 2)

653− , bottom = b - (y // 2)

654− , left = l - (x // 2)

655− }

663+ Internal.StyleClass Flag.padding

664+ (Internal.PaddingStyle

665+ (Internal.paddingNameFloat

666+ newTop

667+ newRight

668+ newBottom

669+ newLeft

670+ )

671+ newTop

672+ newRight

673+ newBottom

674+ newLeft

675+ )

656676

657677 else

658678 Nothing

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

11831203

11841204

11851205{-| A link to download a file.

1186−

1187−**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.

1188−

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

1190−

11911206-}

11921207download :

11931208 List (Attribute msg)

@@ -1343,7 +1358,11 @@ moveLeft x =

13431358{-| -}

13441359padding : Int -> Attribute msg

13451360padding x =

1346− Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) x x x x)

1361+ let

1362+ f =

1363+ toFloat x

1364+ in

1365+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) f f f f)

13471366

13481367

13491368{-| Set horizontal and vertical padding.

@@ -1351,16 +1370,27 @@ padding x =

13511370paddingXY : Int -> Int -> Attribute msg

13521371paddingXY x y =

13531372 if x == y then

1354− Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) x x x x)

1373+ let

1374+ f =

1375+ toFloat x

1376+ in

1377+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) f f f f)

13551378

13561379 else

1380+ let

1381+ xFloat =

1382+ toFloat x

1383+

1384+ yFloat =

1385+ toFloat y

1386+ in

13571387 Internal.StyleClass Flag.padding

13581388 (Internal.PaddingStyle

13591389 ("p-" ++ String.fromInt x ++ "-" ++ String.fromInt y)

1360− y

1361− x

1362− y

1363− x

1390+ yFloat

1391+ xFloat

1392+ yFloat

1393+ xFloat

13641394 )

13651395

13661396

@@ -1381,16 +1411,26 @@ And then just do

13811411paddingEach : { top : Int, right : Int, bottom : Int, left : Int } -> Attribute msg

13821412paddingEach { top, right, bottom, left } =

13831413 if top == right && top == bottom && top == left then

1384− Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt top) top top top top)

1414+ let

1415+ topFloat =

1416+ toFloat top

1417+ in

1418+ Internal.StyleClass Flag.padding

1419+ (Internal.PaddingStyle ("p-" ++ String.fromInt top)

1420+ topFloat

1421+ topFloat

1422+ topFloat

1423+ topFloat

1424+ )

13851425

13861426 else

13871427 Internal.StyleClass Flag.padding

13881428 (Internal.PaddingStyle

13891429 (Internal.paddingName top right bottom left)

1390− top

1391− right

1392− bottom

1393− left

1430+ (toFloat top)

1431+ (toFloat right)

1432+ (toFloat bottom)

1433+ (toFloat left)

13941434 )

13951435

13961436

src/Element/Input.elm+75−40

@@ -132,10 +132,12 @@ Instead of implicit submission behavior, [try making an `onEnter` event handler

132132

133133And no one has to look up obtuse html documentation to understand the behavior of their code :).

134134

135+

135136# File Inputs

136137

137138Presently, elm-ui does not expose a replacement for `<input type="file">`; in the meantime, an `Input.button` and `elm/file`'s `File.Select` may meet your needs.

138139

140+

139141# Disabling Inputs

140142

141143You also might be wondering how to disable an input.

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

328330 , label = text "My Button"

329331 }

330332

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+

331335-}

332336button :

333337 List (Attribute msg)

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

365369

366370 Just msg ->

367371 Events.onClick msg

368− :: onEnter msg

372+ :: onKeyLookup

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

369383 :: attrs

370384 )

371385 )

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

443457 ]

444458 ++ attrs

445459 in

446− applyLabel attributes

447− label

448− (Internal.element

449− Internal.asEl

450− Internal.div

451− [ Internal.Attr <|

452− Html.Attributes.attribute "role" "checkbox"

453− , Internal.Attr <|

454− Html.Attributes.attribute "aria-checked" <|

460+ applyLabel

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

462+ :: Internal.Attr

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

455464 if checked then

456465 "true"

457466

458467 else

459468 "false"

460− , hiddenLabelAttribute label

461− , Element.centerY

469+ )

470+ :: hiddenLabelAttribute label

471+ :: attributes

472+ )

473+ label

474+ (Internal.element

475+ Internal.asEl

476+ Internal.div

477+ [ Element.centerY

462478 , Element.height Element.fill

463479 , Element.width Element.shrink

464480 ]

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

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

698714 thumbShadowStyle

699715 )

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

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

701717 , Internal.Attr

702718 (Html.Events.onInput

703719 (\str ->

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

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

764780 ++ [ Element.behindContent <|

765781 if vertical then

766− viewVerticalThumb factor thumbAttributes trackWidth

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

767783

768784 else

769− viewHorizontalThumb factor thumbAttributes trackHeight

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

770786 ]

771787 )

772788 Element.none

@@ -866,10 +882,10 @@ textHelper textInput attrs textOptions =

866882 -- when things are off by a pixel or two.

867883 -- (or at least when the browser *thinks* it's off by a pixel or two)

868884 Just

869− { top = max 0 (floor (toFloat t - 3))

870− , right = max 0 (floor (toFloat r - 3))

871− , bottom = max 0 (floor (toFloat b - 3))

872− , left = max 0 (floor (toFloat l - 3))

885+ { top = max 0 (floor (t - 3))

886+ , right = max 0 (floor (r - 3))

887+ , bottom = max 0 (floor (b - 3))

888+ , left = max 0 (floor (l - 3))

873889 }

874890

875891 _ ->

@@ -1312,23 +1328,36 @@ redistributeOver isMultiline stacked attr els =

13121328 Element.htmlAttribute

13131329 (Html.Attributes.style

13141330 "height"

1315− ("calc(1.0em + " ++ String.fromInt (2 * min t b) ++ "px)")

1331+ ("calc(1.0em + " ++ String.fromFloat (2 * min t b) ++ "px)")

13161332 )

13171333

13181334 newLineHeight =

13191335 Element.htmlAttribute

13201336 (Html.Attributes.style

13211337 "line-height"

1322− ("calc(1.0em + " ++ String.fromInt (2 * min t b) ++ "px)")

1338+ ("calc(1.0em + " ++ String.fromFloat (2 * min t b) ++ "px)")

13231339 )

13241340

1341+ newTop =

1342+ t - min t b

1343+

1344+ newBottom =

1345+ b - min t b

1346+

13251347 reducedVerticalPadding =

1326− Element.paddingEach

1327− { top = t - min t b

1328− , right = r

1329− , bottom = b - min t b

1330− , left = l

1331− }

1348+ Internal.StyleClass Flag.padding

1349+ (Internal.PaddingStyle

1350+ (Internal.paddingNameFloat

1351+ newTop

1352+ r

1353+ newBottom

1354+ l

1355+ )

1356+ newTop

1357+ r

1358+ newBottom

1359+ l

1360+ )

13321361 in

13331362 { els

13341363 | parent = reducedVerticalPadding :: els.parent

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

15361565

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

15381567

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

1569+

15391570-}

15401571multiline :

15411572 List (Attribute msg)

@@ -1597,28 +1628,28 @@ applyLabel attrs label input =

15971628 Internal.element

15981629 Internal.asColumn

15991630 (Internal.NodeName "label")

1600− attrs

1631+ (Internal.htmlClass classes.inputLabel :: attrs)

16011632 (Internal.Unkeyed [ labelElement, input ])

16021633

16031634 Below ->

16041635 Internal.element

16051636 Internal.asColumn

16061637 (Internal.NodeName "label")

1607− attrs

1638+ (Internal.htmlClass classes.inputLabel :: attrs)

16081639 (Internal.Unkeyed [ input, labelElement ])

16091640

16101641 OnRight ->

16111642 Internal.element

16121643 Internal.asRow

16131644 (Internal.NodeName "label")

1614− attrs

1645+ (Internal.htmlClass classes.inputLabel :: attrs)

16151646 (Internal.Unkeyed [ input, labelElement ])

16161647

16171648 OnLeft ->

16181649 Internal.element

16191650 Internal.asRow

16201651 (Internal.NodeName "label")

1621− attrs

1652+ (Internal.htmlClass classes.inputLabel :: attrs)

16221653 (Internal.Unkeyed [ labelElement, input ])

16231654

16241655

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

20742105 Json.field "key" Json.string

20752106 |> Json.andThen decode

20762107 in

2077− Internal.Attr <| Html.Events.on "keyup" isKey

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

2111+ Html.Events.preventDefaultOn "keydown"

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

20782113

20792114

20802115{-| -}

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

21702205defaultCheckbox checked =

21712206 Element.el

21722207 [ Internal.htmlClass "focusable"

2173− , Element.width (Element.px 14)

2208+ , Element.width

2209+ (Element.px 14)

21742210 , Element.height (Element.px 14)

21752211 , Font.color white

21762212 , Element.centerY

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

22062242

22072243 else

22082244 1

2209− ]

2210− (if checked then

2211− Element.el

2245+ , Element.inFront

2246+ (Element.el

22122247 [ Border.color white

22132248 , Element.height (Element.px 6)

22142249 , Element.width (Element.px 9)

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

22162251 , Element.centerX

22172252 , Element.centerY

22182253 , Element.moveUp 1

2254+ , Element.transparent (not checked)

22192255 , Border.widthEach

22202256 { top = 0

22212257 , left = 2

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

22242260 }

22252261 ]

22262262 Element.none

2227−

2228− else

2229− Element.none

2230− )

2263+ )

2264+ ]

2265+ Element.none

src/Element/Region.elm+5−1

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

101101 Internal.Describe LivePolite

102102

103103

104−{-| -}

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

105109description : String -> Attribute msg

106110description =

107111 Internal.Describe << Internal.Label

src/Internal/Model.elm+30−32

@@ -79,6 +79,7 @@ module Internal.Model exposing

7979 , onlyStyles

8080 , optionsToRecord

8181 , paddingName

82+ , paddingNameFloat

8283 , pageClass

8384 , paragraphClass

8485 , reduceRecursive

@@ -173,7 +174,7 @@ type Style

173174 | Colored String String Color

174175 | SpacingStyle String Int Int

175176 | BorderWidth String Int Int Int Int

176− | PaddingStyle String Int Int Int Int

177+ | PaddingStyle String Float Float Float Float

177178 | GridTemplateStyle

178179 { spacing : ( Length, Length )

179180 , columns : List Length

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

14771478 Single

14781479 cls

14791480 "min-height"

1480− (String.fromInt minSize ++ "px")

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")

14811484

14821485 ( newFlag, newAttrs, newStyle ) =

14831486 renderHeight len

@@ -1945,7 +1948,7 @@ type Spacing

19451948

19461949

19471950type Padding

1948− = Padding String Int Int Int Int

1951+ = Padding String Float Float Float Float

19491952

19501953

19511954extractSpacingAndPadding : List (Attribute aligned msg) -> ( Maybe Padding, Maybe Spacing )

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

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

22422245 ]

22432246 )

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

2247+ , Style

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

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

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

2251+ )

22452252 (List.filterMap identity

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

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

@@ -2642,34 +2649,14 @@ renderStyle options maybePseudo selector props =

26422649 renderedProps =

26432650 List.foldl (renderProps False) "" props

26442651 in

2645− [ selector

2646− ++ "-fs:focus {"

2647− ++ renderedProps

2648− ++ "\n}"

2649− , "."

2650− ++ classes.any

2651− ++ ":focus ~ "

2652− ++ selector

2653− ++ "-fs:not(.focus) {"

2652+ [ selector ++ "-fs:focus {" ++ renderedProps ++ "\n}"

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

26542654 ++ renderedProps

26552655 ++ "\n}"

2656− , "."

2657− ++ classes.any

2658− ++ ":focus "

2659− ++ selector

2660− ++ "-fs {"

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

26612657 ++ renderedProps

26622658 ++ "\n}"

2663− , selector

2664− ++ "-fs:focus-within {"

2665− ++ renderedProps

2666− ++ "\n}"

2667− , ".focusable-parent:focus ~ "

2668− ++ "."

2669− ++ classes.any

2670− ++ " "

2671− ++ selector

2672− ++ "-fs {"

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

26732660 ++ renderedProps

26742661 ++ "\n}"

26752662 ]

@@ -2876,13 +2863,13 @@ renderStyleRule options rule maybePseudo =

28762863 maybePseudo

28772864 class

28782865 [ Property "padding"

2879− (String.fromInt top

2866+ (String.fromFloat top

28802867 ++ "px "

2881− ++ String.fromInt right

2868+ ++ String.fromFloat right

28822869 ++ "px "

2883− ++ String.fromInt bottom

2870+ ++ String.fromFloat bottom

28842871 ++ "px "

2885− ++ String.fromInt left

2872+ ++ String.fromFloat left

28862873 ++ "px"

28872874 )

28882875 ]

@@ -3212,6 +3199,17 @@ paddingName top right bottom left =

32123199 ++ String.fromInt left

32133200

32143201

3202+paddingNameFloat top right bottom left =

3203+ "pad-"

3204+ ++ floatClass top

3205+ ++ "-"

3206+ ++ floatClass right

3207+ ++ "-"

3208+ ++ floatClass bottom

3209+ ++ "-"

3210+ ++ floatClass left

3211+

3212+

32153213getStyleName : Style -> String

32163214getStyleName style =

32173215 case style of

src/Internal/Style.elm+31−5

@@ -257,6 +257,7 @@ classes =

257257 , inputMultilineParent = "imlp"

258258 , inputMultilineFiller = "imlf"

259259 , inputMultilineWrapper = "implw"

260+ , inputLabel = "lbl"

260261

261262 -- link

262263 , link = "lnk"

@@ -960,6 +961,18 @@ baseSheet =

960961 ]

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

962963 [ Prop "display" "block"

964+ , Descriptor (dot classes.heightFill)

965+ [ Child "img"

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

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

968+ ]

969+ ]

970+ , Descriptor (dot classes.widthFill)

971+ [ Child "img"

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

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

974+ ]

975+ ]

963976 ]

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

965978 [ Prop "outline" "none"

@@ -982,6 +995,7 @@ baseSheet =

982995 , Child (dot classes.inFront)

983996 [ Descriptor (dot classes.nearby)

984997 [ Prop "position" "fixed"

998+ , Prop "z-index" "20"

985999 ]

9861000 ]

9871001 ]

@@ -1071,7 +1085,6 @@ baseSheet =

10711085 , Prop "left" "0"

10721086 , Prop "top" "0"

10731087 , Prop "margin" "0 !important"

1074− , Prop "z-index" "20"

10751088 , Prop "pointer-events" "none"

10761089 , Child "*"

10771090 [ Prop "pointer-events" "auto"

@@ -1231,6 +1244,7 @@ baseSheet =

12311244 -- If it's 1, it bumps up to something like 1.2

12321245 [ Prop "line-height" "1.05"

12331246 , Prop "background" "transparent"

1247+ , Prop "text-align" "inherit"

12341248 ]

12351249 , Descriptor (dot classes.single)

12361250 elDescription

@@ -1357,6 +1371,9 @@ baseSheet =

13571371 , Descriptor (dot classes.spaceEvenly)

13581372 [ Prop "justify-content" "space-between"

13591373 ]

1374+ , Descriptor (dot classes.inputLabel)

1375+ [ Prop "align-items" "baseline"

1376+ ]

13601377 ]

13611378 , Descriptor (dot classes.column)

13621379 [ Prop "display" "flex"

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

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

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

13691386 -- instead of the expected content size.

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

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"

1395+ ]

13711396 ]

13721397 , Child (dot classes.heightFill)

13731398 [ Prop "flex-grow" "100000"

@@ -1571,7 +1596,7 @@ baseSheet =

15711596 )

15721597 ]

15731598 , Descriptor (dot classes.inputMultiline)

1574− [ Prop "white-space" "pre-wrap"

1599+ [ Prop "white-space" "pre-wrap !important"

15751600 , Prop "height" "100%"

15761601 , Prop "width" "100%"

15771602 , Prop "background-color" "transparent"

@@ -1591,16 +1616,17 @@ baseSheet =

15911616 [ Prop "flex-basis" "auto" ]

15921617 ]

15931618 , Descriptor (dot classes.inputMultilineParent)

1594− [ Prop "white-space" "pre-wrap"

1619+ [ Prop "white-space" "pre-wrap !important"

15951620 , Prop "cursor" "text"

15961621 , Child (dot classes.inputMultilineFiller)

1597− [ Prop "white-space" "pre-wrap"

1622+ [ Prop "white-space" "pre-wrap !important"

15981623 , Prop "color" "transparent"

15991624 ]

16001625 ]

16011626 , Descriptor (dot classes.paragraph)

16021627 [ Prop "display" "block"

16031628 , Prop "white-space" "normal"

1629+ , Prop "overflow-wrap" "break-word"

16041630 , Descriptor (dot classes.hasBehind)

16051631 [ Prop "z-index" "0"

16061632 , Child (dot classes.behind)

tests-rendering/automation/build.js−1

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

6868}

6969

7070async function create_runner(config) {

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

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

7372

7473 let module_name = elm_entry_module

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

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

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

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

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

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

2021 .parse(process.argv);

2122

2223// 'Windows 10'

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

126127}

127128

128129async function prepare_local_driver(env) {

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

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

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

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

132+

133+ if (program.headless) {

134+ firefoxOptions.headless();

135+ chromeOptions.headless();

136+ }

131137

132138 let driver = await new Builder()

133139 .forBrowser(env.browser)

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

163169 await compile_and_embed({

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

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

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

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

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

168174 });

169175 console.log("Done compiling");

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

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

149149

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

151151 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";

152155 });

153156

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

tests-rendering/cases/open/LabelledInputAlignRight.elmnew file+28

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

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.elmnew file+46

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

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/open/ClippedElInFixedWidthColumn.elm → tests-rendering/cases/resolved/ClippedElInFixedWidthColumn.elmrenamed

The content is the same.

tests-rendering/cases/open/ElInFixedHeightColumn.elm → tests-rendering/cases/resolved/ElInFixedHeightColumn.elmrenamed

The content is the same.

tests-rendering/cases/resolved/Images/ImageRegression.elmnew file+63

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

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.elmnew file+19

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

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/Images/ImageSizing.elmnew file+24

@@ -0,0 +1,24 @@

1+module 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)

7+import Element.Border as Border

8+import Element.Font as Font

9+import Html exposing (Html)

10+

11+

12+main : Html ()

13+main =

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

15+ E.image

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

17+ -- ,

18+ -- E.width E.fill

19+ E.height E.fill

20+ ]

21+ -- <| px 500 ]

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

23+ , description = "music-reader screenshot"

24+ }

tests-rendering/cases/resolved/Input/FocusLinks.elmnew file+37

@@ -0,0 +1,37 @@

1+module FocusLinks exposing (main)

2+

3+import Element exposing (Color, Element, el, focused, layout, link, row, spacing, text)

4+import Element.Border as Border

5+import Element.Region as Region

6+import Html exposing (Html)

7+

8+

9+main : Html msg

10+main =

11+ layout [] links

12+

13+

14+links : Element msg

15+links =

16+ row [ spacing 10 ]

17+ [ siteLink "Elm website" "https://elm-lang.org/"

18+ , siteLink "Elm-ui" "https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element"

19+ ]

20+

21+

22+siteLink : String -> String -> Element msg

23+siteLink label url =

24+ link [ focused [ Border.glow blue 2 ] ]

25+ { url = url

26+ , label = text label

27+ }

28+

29+

30+blue : Color

31+blue =

32+ Element.fromRgb255

33+ { red = 100

34+ , green = 180

35+ , blue = 250

36+ , alpha = 1

37+ }

tests-rendering/cases/open/FocusStylePrecedingElements.elm → tests-rendering/cases/resolved/Input/FocusStylePrecedingElements.elmrenamed+5−5

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

1−module FocusStylePrecedingElements exposing (view)

1+module FocusStylePrecedingElements exposing (main)

22

33{-|

44

@@ -22,12 +22,12 @@ Disabling it produces the correct focus behaviour.

2222

2323-}

2424

25−import Testable.Element exposing (..)

26−import Testable.Element.Font as Font

27−import Testable.Element.Input as Input

25+import Element exposing (..)

26+import Element.Font as Font

27+import Element.Input as Input

2828

2929

30−view =

30+main =

3131 layout [] <|

3232 column []

3333 [ Input.button [] { onPress = Nothing, label = text "Button" }

tests-rendering/cases/resolved/Input/InputAlignment.elmnew file+44

@@ -0,0 +1,44 @@

1+module InputAlignment exposing (main)

2+

3+import Browser

4+import Element exposing (fill, padding, width)

5+import Element.Border as Border

6+import Element.Font as Font

7+import Element.Input as Input

8+import Html exposing (Html)

9+

10+

11+view : () -> Html ()

12+view () =

13+ Element.layout [ Font.alignRight ] <|

14+ Element.column [ padding 10 ]

15+ [ Element.el [ Border.width 1, padding 5, width fill ] <| Element.text "Element.el"

16+ , Input.text

17+ [ Border.width 1

18+ , padding 5

19+ , width fill

20+ , Border.rounded 0

21+ , Font.color (Element.rgb 0 0.5 0.5)

22+ ]

23+ { onChange = always ()

24+ , text = "Input.text"

25+ , placeholder = Nothing

26+ , label = Input.labelHidden "Input.text"

27+ }

28+ , Element.paragraph []

29+ [ Element.text "Helooooo!" ]

30+ , Element.row []

31+ [ Element.text "one!"

32+ , Element.text "two!"

33+ , Element.text "three!"

34+ ]

35+ ]

36+

37+

38+main : Program () () ()

39+main =

40+ Browser.sandbox

41+ { init = ()

42+ , view = view

43+ , update = \_ _ -> ()

44+ }

tests-rendering/cases/resolved/Input/LabelAlignBaseline.elmnew file+34

@@ -0,0 +1,34 @@

1+module LabelAlignBaseline exposing (..)

2+

3+import Element exposing (Element, alignRight, centerY, el, fill, padding, rgb255, row, spacing, text, width)

4+import Element.Background as Background

5+import Element.Border as Border

6+import Element.Font as Font

7+import Element.Input as Input

8+

9+

10+type Msg

11+ = Msg

12+

13+

14+main =

15+ Element.layout [] <|

16+ Element.column []

17+ [ Element.row []

18+ [ Element.text "dissociated label"

19+ , Input.text []

20+ { text = "input"

21+ , label = Input.labelHidden "hidden"

22+ , onChange = \_ -> Msg

23+ , placeholder = Nothing

24+ }

25+ ]

26+ , Element.row []

27+ [ Input.text []

28+ { text = "input"

29+ , label = Input.labelLeft [] <| Element.text "associated label"

30+ , onChange = \_ -> Msg

31+ , placeholder = Nothing

32+ }

33+ ]

34+ ]

tests-rendering/cases/resolved/Input/Placeholder.elmnew file+59

@@ -0,0 +1,59 @@

1+module Placeholder exposing (main)

2+

3+import Element exposing (..)

4+import Element.Background as Background

5+import Element.Input as Input

6+import Element.Keyed as Keyed

7+import Html.Attributes exposing (style)

8+

9+

10+grey =

11+ rgb 0.8 0.8 0.8

12+

13+

14+darkGrey =

15+ rgb 0.7 0.7 0.7

16+

17+

18+type Msg

19+ = NoMsg String

20+

21+

22+main =

23+ Element.layout [ width fill, height fill ] <|

24+ column

25+ [ width fill

26+ , inFront

27+ (el

28+ [ width fill

29+ , Background.color grey

30+ , padding 20

31+ , below <|

32+ el

33+ [ height (px 300)

34+ , width (px 300)

35+ , Background.color darkGrey

36+ , htmlAttribute <| style "z-index" "1"

37+ , moveRight 50

38+ , padding 50

39+ , alpha 0.5

40+ ]

41+ (el [ alignBottom ] (text "I'm a dropdown menu."))

42+ ]

43+ (text "I'm a toolbar.")

44+ )

45+ ]

46+ [ Input.text []

47+ { onChange = NoMsg

48+ , text = ""

49+ , placeholder = Just (Input.placeholder [] (text "I'm a text input."))

50+ , label = Input.labelAbove [] none

51+ }

52+ , Input.multiline []

53+ { onChange = NoMsg

54+ , text = ""

55+ , placeholder = Just (Input.placeholder [] (text "I'm a multiline input."))

56+ , label = Input.labelAbove [] none

57+ , spellcheck = False

58+ }

59+ ]

tests-rendering/cases/resolved/Input/Slider.elmnew file+74

@@ -0,0 +1,74 @@

1+module Slider exposing (main)

2+

3+import Browser

4+import Element as Element exposing (Element)

5+import Element.Background as Background

6+import Element.Input as Input

7+import Html exposing (Html, button, div, text)

8+import Html.Events exposing (onClick)

9+

10+

11+type alias Model =

12+ { rangeValue : Float }

13+

14+

15+initialModel : Model

16+initialModel =

17+ { rangeValue = 160.0 }

18+

19+

20+type Msg

21+ = UpdateRange Float

22+

23+

24+update : Msg -> Model -> Model

25+update msg model =

26+ case msg of

27+ UpdateRange value ->

28+ { model | rangeValue = value }

29+

30+

31+viewModal =

32+ Element.el

33+ [ Element.width Element.fill

34+ , Element.height Element.fill

35+ , Element.paddingEach { top = 100, left = 0, bottom = 0, right = 0 }

36+ , Background.color <| Element.rgba 0 0 0 0.8

37+ ]

38+ (Element.el [] (Element.text "Hello Modal"))

39+

40+

41+view : Model -> Html Msg

42+view model =

43+ Element.layout

44+ [--Element.inFront viewModal

45+ ]

46+ <|

47+ Input.slider

48+ [ Element.width Element.fill

49+ , Element.behindContent <|

50+ Element.el

51+ [ Element.width Element.fill

52+ , Element.height (Element.px 2)

53+ , Element.centerY

54+ , Background.color (Element.rgb 0.5 0.5 0.5)

55+ ]

56+ Element.none

57+ ]

58+ { onChange = UpdateRange

59+ , label = Input.labelHidden ""

60+ , min = 60.0

61+ , max = 280.0

62+ , value = model.rangeValue

63+ , thumb = Input.defaultThumb

64+ , step = Just 1.0

65+ }

66+

67+

68+main : Program () Model Msg

69+main =

70+ Browser.sandbox

71+ { init = initialModel

72+ , view = view

73+ , update = update

74+ }

tests-rendering/cases/resolved/Layout/BreaksWithinParagraph.elmnew file+17

@@ -0,0 +1,17 @@

1+module BreaksWithinParagraph exposing (main)

2+

3+import Browser

4+import Element exposing (..)

5+import Element.Background as Background

6+import Element.Border as Border

7+import Element.Font as Font

8+

9+

10+main =

11+ layout [ width fill, height fill ] <|

12+ paragraph [ Border.width 1, width (px 50) ]

13+ [ row []

14+ [ text "Thequick"

15+ ]

16+ , text "redfox"

17+ ]

tests-rendering/cases/resolved/Layout/ColumnLayouts.elmnew file+103

@@ -0,0 +1,103 @@

1+module ColumnLayouts exposing (main)

2+

3+{-| -}

4+

5+import Element exposing (..)

6+import Element.Background as Background

7+import Element.Border as Border

8+import Element.Font as Font

9+

10+

11+main =

12+ layout [] <|

13+ column [ spacing 48 ]

14+ [ column

15+ [ width fill

16+ , height <| px 200

17+ , spacing 24

18+ , Border.width 1

19+ , Border.color pink

20+ ]

21+ [ elem

22+ , elem

23+ , elem

24+ ]

25+ , column

26+ [ width fill

27+ , spacing 24

28+ , Border.width 1

29+ , Border.color pink

30+ ]

31+ [ elem

32+ , elem

33+ , elem

34+ ]

35+ , el [ height <| px 400 ] <|

36+ column [ height fill ]

37+ [ column

38+ [ width fill

39+ , height <| px 200

40+ , spacing 24

41+ , Border.width 1

42+ , Border.color pink

43+ ]

44+ [ elem

45+ , elem

46+ , el [ alignBottom ] elem

47+ ]

48+ , el [ alignBottom ] elem

49+ ]

50+ , column

51+ [ width fill

52+ , height <| px 200

53+ , spacing 24

54+ , Border.width 1

55+ , Border.color pink

56+ ]

57+ [ elem

58+ , el [] box

59+ , el [ alignBottom ] elem

60+ ]

61+ , column

62+ [ width fill

63+ , height <| px 200

64+ , spacing 24

65+ , Border.width 1

66+ , Border.color pink

67+ ]

68+ [ elem

69+ , el [] box

70+ , filled

71+ , el [ alignBottom ] elem

72+ ]

73+ ]

74+

75+

76+filled =

77+ el

78+ [ width fill

79+ , height fill

80+ , Background.color pink

81+ ]

82+ (text "an element")

83+

84+

85+elem =

86+ el

87+ [ Background.color pink

88+ ]

89+ (text "an element")

90+

91+

92+box =

93+ el

94+ [ width (px 50)

95+ , height (px 50)

96+ , Background.color (rgb (240 / 255) 0 (245 / 255))

97+ , Font.color (rgb 1 1 1)

98+ ]

99+ none

100+

101+

102+pink =

103+ rgb (240 / 255) 0 (245 / 255)

tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elmnew file+46

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

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.elmnew file+86

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

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/open/SafariBugIssue147.elm → tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elmrenamed+15−3

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

1−module SafariBugIssue147 exposing (view)

1+module DoNotCollapseBelow0 exposing (main)

22

33{-|

44

@@ -24,13 +24,25 @@ I was able to pinpoint the issue using git bisect to this fd08f1a commit, which

2424

2525-}

2626

27−import Testable.Element exposing (..)

27+import Browser

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

29+import Html exposing (Html)

2830

2931

30−view =

32+view : () -> Html ()

33+view () =

3134 layout [ height fill ] <|

3235 column

3336 [ height fill ]

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

3538 , text "Text below the el above"

3639 ]

40+

41+

42+main : Program () () ()

43+main =

44+ Browser.sandbox

45+ { init = ()

46+ , view = view

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

48+ }

tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elmnew file+40

@@ -0,0 +1,40 @@

1+module SafariTwo exposing (main)

2+

3+{-| el inside a fixed height column is rendered with zero height in Safari

4+

5+<https://github.com/mdgriffith/elm-ui/issues/190>

6+

7+If I put an el into a column of fixed height, the el is rendered with zero height

8+in Safari:

9+

10+ layout [] <|

11+ column

12+ [ width fill

13+ , height <| px 200

14+ ]

15+ [ el [ Border.width 3, Border.color <| rgb255 0 0 0 ] <| text "an element" ]

16+

17+Adding htmlAttribute <| Attr.style "flex-basis" "auto" to the el is a workaround

18+that fixes the problem in this instance.

19+

20+Expected behavior

21+

22+Element should be rendered the same as in Firefox & Chrome, with the border going

23+around the text.

24+

25+-}

26+

27+import Element exposing (..)

28+

29+

30+main =

31+ layout [] <|

32+ column

33+ [ width fill

34+ , height <| px 200

35+ ]

36+ [ el

37+ []

38+ <|

39+ text "an element"

40+ ]

tests-rendering/cases/open/NestedParagraphs.elm → tests-rendering/cases/resolved/Layout/NestedParagraphs.elmrenamed+24−2

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

1−module NestedParagraphs exposing (view)

1+module Layout.NestedParagraphs exposing (view)

22

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

44

@@ -102,7 +102,7 @@ view =

102102 , el [ Font.size 32 ] (text "Row with boxes")

103103 , paragraph []

104104 [ text Testable.Generator.short

105− , row []

105+ , row [ spacing 25 ]

106106 [ Testable.Generator.box

107107 , text Testable.Generator.short

108108 , Testable.Generator.box

@@ -111,6 +111,28 @@ view =

111111 ]

112112 , text Testable.Generator.short

113113

114+ -- , text Testable.Generator.lorem

115+ , Testable.Generator.box

116+ , paragraph []

117+ [ text "This is a paragraph with a "

118+ , el [ Font.bold ] <| text "child"

119+ , text " of depth one."

120+ ]

121+ ]

122+ , el [ Font.size 32 ] (text "Row with boxes and lots of content")

123+ , paragraph []

124+ [ column [ alignLeft ]

125+ [ Testable.Generator.box, Testable.Generator.box, Testable.Generator.box ]

126+ , text Testable.Generator.short

127+ , row [ spacing 25 ]

128+ [ Testable.Generator.box

129+ , text Testable.Generator.lorem

130+ , Testable.Generator.box

131+

132+ -- , text Testable.Generator.lorem

133+ ]

134+ , text Testable.Generator.short

135+

114136 -- , text Testable.Generator.lorem

115137 , Testable.Generator.box

116138 , paragraph []

tests-rendering/cases/resolved/Layout/Rounded.elmnew file+54

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

1+module Rounded exposing (main)

2+

3+import Element exposing (..)

4+import Element.Background as Background

5+import Html exposing (Html)

6+

7+

8+sizePadding =

9+ 10

10+

11+

12+sizeSpacing =

13+ 11

14+

15+

16+nbElement =

17+ 10

18+

19+

20+sizeElement =

21+ 50

22+

23+

24+totalSizeElement =

25+ nbElement * sizeElement

26+

27+

28+totalSpacing =

29+ (nbElement - 1) * sizeSpacing

30+

31+

32+totalPadding =

33+ 2 * sizePadding

34+

35+

36+sizeRow =

37+ totalSizeElement + totalSpacing + totalPadding

38+

39+

40+main : Html msg

41+main =

42+ layout [ width fill, height fill ] <|

43+ -- The row should have 4.5px of padding to get

44+ -- from the 5.5px of margin of the elements on the edge

45+ -- up to 10px of padding specified on the wrappedRow.

46+ -- Instead the row has 5px of padding.

47+ wrappedRow [ width (px sizeRow), padding sizePadding, spacing sizeSpacing, Background.color (rgb 0 0 1) ]

48+ <|

49+ List.repeat nbElement <|

50+ -- Each element has a margin of 5.5px (11px of spacing / 2)

51+ el [ width (px sizeElement), height (px sizeElement), Background.color (rgb 1 0 0) ]

52+ <|

53+ el [ centerX, centerY ] <|

54+ text "card"

tests-rendering/cases/resolved/Layout/SafariBugIssue147.elmnew file+37

@@ -0,0 +1,37 @@

1+module Layout.SafariBugIssue147 exposing (view)

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 Testable.Element exposing (..)

28+

29+

30+view =

31+ layout [ height fill ] <|

32+ el [ height fill ] <|

33+ column

34+ [ height fill ]

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

36+ , text "Text below the el above"

37+ ]

tests-rendering/cases/resolved/Layout/WrapRow.elmnew file+13

@@ -0,0 +1,13 @@

1+module WrapRow exposing (main)

2+

3+import Browser

4+import Element exposing (..)

5+

6+

7+main =

8+ layout [] <|

9+ wrappedRow

10+ [ padding 10

11+ , spacingXY 6 5

12+ ]

13+ [ text "Higher by 1 px" ]

tests-rendering/cases/resolved/Misc/Scroll.elmnew file+48

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

1+module Scroll exposing (main)

2+

3+import Browser

4+import Element exposing (Element, alignTop, centerX, centerY, column, el, fill, fillPortion, height, inFront, layoutWith, none, padding, px, row, scrollbarY, spacing, text, width, wrappedRow)

5+import Element.Background as Background

6+import Element.Font as Font

7+import Element.Input as Input exposing (button)

8+import Html exposing (Html)

9+import Html.Attributes

10+

11+

12+type alias Model =

13+ ()

14+

15+

16+type alias Msg =

17+ ()

18+

19+

20+field i =

21+ text <| "Scrolling text " ++ String.fromInt i

22+

23+

24+view : Model -> Html Msg

25+view model =

26+ layoutWith { options = [] } [ height fill ] <|

27+ row

28+ [ height fill ]

29+ [ column

30+ [ height fill

31+ , scrollbarY

32+

33+ -- The width fill is required, when using scrollbarY above

34+ -- else the width is set to 0.

35+ --, width fill

36+ ]

37+ (List.map field (List.range 1 100))

38+ , text "Non scrolling text"

39+ ]

40+

41+

42+main : Program () Model Msg

43+main =

44+ Browser.sandbox

45+ { init = ()

46+ , view = view

47+ , update = \msg model -> model

48+ }

tests-rendering/cases/resolved/Nearby/InFrontIssue.elmnew file+64

@@ -0,0 +1,64 @@

1+module Nearby.InFrontIssue exposing (view)

2+

3+import Browser

4+import Element as Ui exposing (..)

5+import Element.Background as Background

6+import Element.Font as Font

7+import Html exposing (Html)

8+

9+

10+view : Html Msg

11+view =

12+ let

13+ a =

14+ el

15+ [ width fill

16+ , height <| px 30

17+ , Background.color <| rgb 0 1 0

18+ ]

19+ <|

20+ text "A"

21+

22+ b =

23+ column

24+ [ width fill

25+ , height <| px 5000

26+ , Background.color <| rgb 1 0 1

27+ , spacing 60

28+ ]

29+ [ text "B"

30+ , c

31+ ]

32+

33+ c =

34+ el

35+ [ width <| px 100

36+ , height <| px 100

37+ , Background.color <| rgb 0 0 0

38+ , Font.color <| rgb 1 1 1

39+ , paddingXY 0 30

40+ , centerX

41+ , above d

42+ , below d

43+ , onLeft d

44+ , onRight d

45+ ]

46+ <|

47+ text "C"

48+

49+ d =

50+ el

51+ [ width <| px 100

52+ , height <| px 100

53+ , centerX

54+ , Background.color <| rgb 1 1 1

55+ , Font.color <| rgb 0 0 0

56+ ]

57+ <|

58+ text "D"

59+ in

60+ layout

61+ [ inFront a

62+ , paddingXY 0 30

63+ ]

64+ b

tests-rendering/cases/resolved/Nearby/Issue22ZIndex.elmnew file+87

@@ -0,0 +1,87 @@

1+module Nearby.Issue22ZIndex exposing (main)

2+

3+import Browser

4+import Element as Ui exposing (..)

5+import Element.Background as Background

6+import Element.Font as Font

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

28+view : Model -> Html Msg

29+view model =

30+ let

31+ a =

32+ el

33+ [ width fill

34+ , height <| px 30

35+ , Background.color <| rgb 0 1 0

36+ ]

37+ <|

38+ text "A"

39+

40+ b =

41+ column

42+ [ width fill

43+ , height <| px 5000

44+ , Background.color <| rgb 1 0 1

45+ , spacing 60

46+ ]

47+ [ text "B"

48+ , c

49+ ]

50+

51+ c =

52+ el

53+ [ width fill

54+ , height <| px 100

55+ , Background.color <| rgb 0 0 0

56+ , Font.color <| rgb 1 1 1

57+ , paddingXY 0 30

58+ , inFront d

59+ ]

60+ <|

61+ text "C"

62+

63+ d =

64+ el

65+ [ width <| px 100

66+ , height <| px 100

67+ , centerX

68+ , Background.color <| rgb 1 1 1

69+ , Font.color <| rgb 0 0 0

70+ ]

71+ <|

72+ text "D"

73+ in

74+ layout

75+ [ inFront a

76+ , paddingXY 0 30

77+ ]

78+ b

79+

80+

81+main : Program () Model Msg

82+main =

83+ Browser.sandbox

84+ { init = initialModel

85+ , view = view

86+ , update = update

87+ }

tests-rendering/cases/resolved/Nearby/OtherInFrontIssue.elmnew file+55

@@ -0,0 +1,55 @@

1+module Nearby.OtherInFrontIssue exposing (main)

2+

3+import Browser

4+import Element exposing (Element)

5+import Element.Background as Background

6+import Html exposing (Html, button, div, text)

7+import Html.Attributes

8+import Html.Events exposing (onClick)

9+

10+

11+

12+-- helping hack

13+

14+

15+translateLeft : Element.Attribute msg

16+translateLeft =

17+ Html.Attributes.style "transform" "translate(-100%)"

18+ |> Element.htmlAttribute

19+

20+

21+main =

22+ Element.layout

23+ [ Element.inFront <|

24+ Element.el

25+ [ Element.alignLeft

26+ , Background.color <| Element.rgb 1 0.5 0.5

27+ , Element.height Element.fill

28+ ]

29+ <|

30+ Element.text "Side Menu .........."

31+ ]

32+ contentPane

33+

34+

35+contentPane =

36+ Element.column

37+ [ Element.width Element.fill

38+ , Element.height Element.fill

39+ , Background.color <| Element.rgb 1 0 0

40+ ]

41+ [ Element.el

42+ [ Element.centerX

43+ , Element.centerY

44+ , Element.onLeft <| Element.text " [ onLeft. onLeft onLeft onLeft onLeft onLeft onLeft ] "

45+ ]

46+ (Element.text " [ Content: This will remain behind the Side Menu. ]")

47+ , Element.el

48+ [ Element.centerX

49+ , Element.centerY

50+ , Element.behindContent <|

51+ Element.el [ translateLeft ] <|

52+ Element.text " [ behindContent + translateLeft. behindContent + translateLeft ] "

53+ ]

54+ (Element.text " [ Content: This will remain behind the Side Menu. ]")

55+ ]

tests-rendering/cases/resolved/Nearby/ZIndexRegression.elmnew file+43

@@ -0,0 +1,43 @@

1+module Nearby.ZIndexRegression exposing (main)

2+

3+import Element exposing (..)

4+import Element.Background as Background

5+import Html exposing (Html)

6+

7+

8+main : Html msg

9+main =

10+ layout [] <|

11+ column [ width fill, height fill ]

12+ [ el

13+ [ width fill

14+ , height (px 100)

15+ , Background.color (rgb 0 0 1)

16+ , inFront menu

17+ ]

18+ none

19+ , el

20+ [ width fill

21+ , height fill

22+ , inFront menu

23+ ]

24+ none

25+ ]

26+

27+

28+menu : Element msg

29+menu =

30+ el

31+ [ transparent True

32+ , mouseOver [ transparent False ]

33+ , width fill

34+ , height fill

35+ , below <|

36+ el

37+ [ width fill

38+ , height (px 500)

39+ , Background.color (rgb 1 0 0)

40+ ]

41+ none

42+ ]

43+ none

tests-rendering/elm.json+1−1

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

11{

22 "type": "application",

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

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

44 "elm-version": "0.19.1",

55 "dependencies": {

66 "direct": {

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

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

2020element label attrs =

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

2222 -- ]

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 =

2343 mapEveryCombo3

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

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

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

3151 contents

3252

3353

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+

3497layouts =

3598 [ ( "el"

3699 , \attrs child ->

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

55118 ]

56119

57120

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+

58185nearbys =

59− [ inFront

60− , above

61− , onLeft

62− , onRight

63− , below

64− , behindContent

186+ [ ( "inFront", inFront )

187+ , ( "above", above )

188+ , ( "onLeft", onLeft )

189+ , ( "onRight", onRight )

190+ , ( "below", below )

191+ , ( "behindContent", 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

65210 ]

66211

67212

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+

68240contents =

69241 [ ( "none", none )

70242 , ( "short text", text short )

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

243+

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

72245 , ( "box"

73246 , box

74247 )

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

121294 listOne

122295

123296

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+

124317sizes render =

125318 List.concatMap

126319 (\( widthLen, heightLen ) ->

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

163356 |> maximum 100

164357 |> minimum 50

165358 ]

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.elmnew file+49

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

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+25−36

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

22

33{-| -}

44

5−import ClippedElInFixedWidthColumn

6−import ElInFixedHeightColumn

7−import InFrontSize

8−import NestedParagraphs

9−import SafariBugIssue147

10−import StackedScrollingColumnsHeight

5+import Layout.NestedParagraphs

6+import Layout.SafariBugIssue147

117import Testable.Generator

128import Testable.Runner

13−import Tests.Basic

14−import Tests.ColumnAlignment

15−import Tests.ColumnSpacing

16−import Tests.ElementAlignment

9+import Tests.Alignment

1710import Tests.Nearby

18−import Tests.RowAlignment

19−import Tests.RowSpacing

11+import Tests.Spacing

2012import Tests.TextWrapping

2113import Tests.Transparency

22−import WeirdCentering

2314

2415

2516main : Testable.Runner.TestableProgram

2617main =

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

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

29− --[]

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

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

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

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

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

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

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

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

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

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

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

41− -- ]

42− -- ,

43− issues

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

20+ , Tests.Nearby.view

21+ , Tests.Alignment.view

22+ , Tests.Spacing.view

23+

24+ -- [

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

26+ -- ]

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

28+ -- ]

29+ , issues

4430 ]

4531

4632

4733issues =

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

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

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

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

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

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

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

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

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

36+ -- ,

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

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

39+

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

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

5544 ]

tests-rendering/src/Tests/Basic.elmdeleted−54

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

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.elmdeleted−176

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

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.elmdeleted−68

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

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.elmdeleted−111

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

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+97−356

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

88import Testable.Element exposing (..)

99import Testable.Element.Background as Background

1010import Testable.Element.Font as Font

11+import Testable.Generator

1112import Testable.Runner

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

1314

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

5758

5859

5960{-| -}

60−main : Html.Html msg

61−main =

62− Testable.Runner.show view

63−

64−

65−{-| -}

66−view : Testable.Element msg

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

6762view =

68− let

69− transparentBox attrs =

70− el

71− ([ Font.color white

72− , width (px 50)

73− , height (px 50)

74− , Background.color white

75− ]

76− ++ attrs

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

95− -- [ width (px 20)

96− -- , height (px 20)

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

63+ List.concat

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

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

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

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

68+ ]

69+ , Testable.Generator.generate "Nearbys"

70+ (\element nearby ->

71+ element

72+ [ nearby (box [])

73+ , width (px 200)

74+ , height (px 200)

75+ , Background.color red

26376 ]

264− , text "on paragraph"

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

266− [ p

267− [ location

268− (el

269− [ label name

270− , width (px 20)

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

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)

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

344− , Background.color darkCharcoal

345− ]

346− none

347− )

348− ]

77+ none

78+ )

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

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

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

82+ (\element nearby align ->

83+ element

84+ [ nearby (box [ align ])

85+ , width (px 200)

86+ , height (px 200)

87+ , Background.color red

34988 ]

350− ]

351−

352− master =

353− el [ padding 20 ] <|

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

89+ none

90+ )

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

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

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

41994 ]

42095

42196

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

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

437112 (justBox 40 darkGrey [])

438113 ]

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.elmdeleted−212

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

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.elmdeleted−69

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

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.elmnew file+36

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

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