master..76701ac · typeable/elm-ui

README.md−4

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

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−

7369## Contributing

7470

7571Want 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.8",

6+ "version": "1.1.5",

77 "exposed-modules": [

88 "Element",

99 "Element.Input",

examples/Basic.elm+1−1

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

1−module Basic exposing (..)

1+module Main exposing (..)

22

33{-| -}

44

examples/Form.elm+4−12

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

1−module Form exposing (..)

1+module Main exposing (..)

22

33{-| -}

44

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

8080 [ Font.size 20

8181 ]

8282 <|

83− Element.column

84− [ width (px 800)

85− , height shrink

86− , centerY

87− , centerX

88− , spacing 36

89− , padding 10

90− ]

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

9184 [ el

9285 [ Region.heading 1

9386 , alignLeft

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

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

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

126119 }

127− , Input.currentPassword [ spacing 12 ]

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

128121 { text = model.password

129122 , placeholder = Nothing

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

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

200193 , Border.color darkBlue

201194 , paddingXY 32 16

202195 , Border.rounded 3

203−

204− -- , width fill

196+ , width fill

205197 ]

206198 { onPress = Nothing

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

examples/Table.elm+1−1

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

1−module Table exposing (..)

1+module Main exposing (..)

22

33{-| -}

44

examples/elm.json+22−19

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

11{

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"

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

1220 },

13− "indirect": {

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

15− "elm/url": "1.0.0"

21+ "test-dependencies": {

22+ "direct": {},

23+ "indirect": {}

1624 }

17− },

18− "test-dependencies": {

19− "direct": {},

20− "indirect": {}

21− }

22−}

25+}

package-lock.json+31−19

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

734734 }

735735 },

736736 "jszip": {

737− "version": "3.4.0",

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

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

737+ "version": "3.2.2",

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

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

740740 "requires": {

741741 "lie": "~3.3.0",

742742 "pako": "~1.0.2",

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

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

10051010 "selenium-webdriver": {

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

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

10091014 "requires": {

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

1015+ "jszip": "^3.1.5",

1016+ "rimraf": "^2.6.3",

1017+ "tmp": "0.0.30",

1018+ "xml2js": "^0.4.19"

10231019 }

10241020 },

10251021 "semver": {

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

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

12221218 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="

12231219 },

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

12241236 "xmlbuilder": {

12251237 "version": "13.0.2",

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

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

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

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

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,'%L'%n\" > issues.csv"

14+ "list-issues": "hub issue -f \"%i,%U,%t%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.7"

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

3333 }

3434}

src/Element.elm+23−63

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

645645 newPadding =

646646 case padded of

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

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

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

662649 Just <|

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

650+ paddingEach

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

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

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

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

655+ }

676656

677657 else

678658 Nothing

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

12031183

12041184

12051185{-| 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+

12061191-}

12071192download :

12081193 List (Attribute msg)

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

13581343{-| -}

13591344padding : Int -> Attribute msg

13601345padding 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)

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

13661347

13671348

13681349{-| Set horizontal and vertical padding.

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

13701351paddingXY : Int -> Int -> Attribute msg

13711352paddingXY x y =

13721353 if x == y then

1373− let

1374− f =

1375− toFloat x

1376− in

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

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

13781355

13791356 else

1380− let

1381− xFloat =

1382− toFloat x

1383−

1384− yFloat =

1385− toFloat y

1386− in

13871357 Internal.StyleClass Flag.padding

13881358 (Internal.PaddingStyle

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

1390− yFloat

1391− xFloat

1392− yFloat

1393− xFloat

1360+ y

1361+ x

1362+ y

1363+ x

13941364 )

13951365

13961366

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

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

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

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

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

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

14251385

14261386 else

14271387 Internal.StyleClass Flag.padding

14281388 (Internal.PaddingStyle

14291389 (Internal.paddingName top right bottom left)

1430− (toFloat top)

1431− (toFloat right)

1432− (toFloat bottom)

1433− (toFloat left)

1390+ top

1391+ right

1392+ bottom

1393+ left

14341394 )

14351395

14361396

src/Element/Input.elm+40−75

@@ -132,12 +132,10 @@ 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−

136135# File Inputs

137136

138137Presently, 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.

139138

140−

141139# Disabling Inputs

142140

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

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

330328 , label = text "My Button"

331329 }

332330

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−

335331-}

336332button :

337333 List (Attribute msg)

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

369365

370366 Just msg ->

371367 Events.onClick 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− )

368+ :: onEnter msg

383369 :: attrs

384370 )

385371 )

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

457443 ]

458444 ++ attrs

459445 in

460− applyLabel

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

462− :: Internal.Attr

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

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

464455 if checked then

465456 "true"

466457

467458 else

468459 "false"

469− )

470− :: hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

460+ , hiddenLabelAttribute label

461+ , Element.centerY

478462 , Element.height Element.fill

479463 , Element.width Element.shrink

480464 ]

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

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

714698 thumbShadowStyle

715699 )

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

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

717701 , Internal.Attr

718702 (Html.Events.onInput

719703 (\str ->

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

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

780764 ++ [ Element.behindContent <|

781765 if vertical then

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

766+ viewVerticalThumb factor thumbAttributes trackWidth

783767

784768 else

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

769+ viewHorizontalThumb factor thumbAttributes trackHeight

786770 ]

787771 )

788772 Element.none

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

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

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

884868 Just

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

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

889873 }

890874

891875 _ ->

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

13281312 Element.htmlAttribute

13291313 (Html.Attributes.style

13301314 "height"

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

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

13321316 )

13331317

13341318 newLineHeight =

13351319 Element.htmlAttribute

13361320 (Html.Attributes.style

13371321 "line-height"

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

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

13391323 )

13401324

1341− newTop =

1342− t - min t b

1343−

1344− newBottom =

1345− b - min t b

1346−

13471325 reducedVerticalPadding =

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

1326+ Element.paddingEach

1327+ { top = t - min t b

1328+ , right = r

1329+ , bottom = b - min t b

1330+ , left = l

1331+ }

13611332 in

13621333 { els

13631334 | parent = reducedVerticalPadding :: els.parent

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

15651536

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

15671538

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

1569−

15701539-}

15711540multiline :

15721541 List (Attribute msg)

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

16281597 Internal.element

16291598 Internal.asColumn

16301599 (Internal.NodeName "label")

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

1600+ attrs

16321601 (Internal.Unkeyed [ labelElement, input ])

16331602

16341603 Below ->

16351604 Internal.element

16361605 Internal.asColumn

16371606 (Internal.NodeName "label")

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

1607+ attrs

16391608 (Internal.Unkeyed [ input, labelElement ])

16401609

16411610 OnRight ->

16421611 Internal.element

16431612 Internal.asRow

16441613 (Internal.NodeName "label")

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

1614+ attrs

16461615 (Internal.Unkeyed [ input, labelElement ])

16471616

16481617 OnLeft ->

16491618 Internal.element

16501619 Internal.asRow

16511620 (Internal.NodeName "label")

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

1621+ attrs

16531622 (Internal.Unkeyed [ labelElement, input ])

16541623

16551624

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

21052074 Json.field "key" Json.string

21062075 |> Json.andThen decode

21072076 in

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

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

2110− Internal.Attr <|

2111− Html.Events.preventDefaultOn "keydown"

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

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

21132078

21142079

21152080{-| -}

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

22052170defaultCheckbox checked =

22062171 Element.el

22072172 [ Internal.htmlClass "focusable"

2208− , Element.width

2209− (Element.px 14)

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

22102174 , Element.height (Element.px 14)

22112175 , Font.color white

22122176 , Element.centerY

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

22422206

22432207 else

22442208 1

2245− , Element.inFront

2246− (Element.el

2209+ ]

2210+ (if checked then

2211+ Element.el

22472212 [ Border.color white

22482213 , Element.height (Element.px 6)

22492214 , Element.width (Element.px 9)

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

22512216 , Element.centerX

22522217 , Element.centerY

22532218 , Element.moveUp 1

2254− , Element.transparent (not checked)

22552219 , Border.widthEach

22562220 { top = 0

22572221 , left = 2

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

22602224 }

22612225 ]

22622226 Element.none

2263− )

2264− ]

2265− Element.none

2227+

2228+ else

2229+ Element.none

2230+ )

src/Element/Region.elm+1−5

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

101101 Internal.Describe LivePolite

102102

103103

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

105−

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

107−

108−-}

104+{-| -}

109105description : String -> Attribute msg

110106description =

111107 Internal.Describe << Internal.Label

src/Internal/Model.elm+32−30

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

7979 , onlyStyles

8080 , optionsToRecord

8181 , paddingName

82− , paddingNameFloat

8382 , pageClass

8483 , paragraphClass

8584 , reduceRecursive

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

174173 | Colored String String Color

175174 | SpacingStyle String Int Int

176175 | BorderWidth String Int Int Int Int

177− | PaddingStyle String Float Float Float Float

176+ | PaddingStyle String Int Int Int Int

178177 | GridTemplateStyle

179178 { spacing : ( Length, Length )

180179 , columns : List Length

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

14781477 Single

14791478 cls

14801479 "min-height"

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

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

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

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

14841481

14851482 ( newFlag, newAttrs, newStyle ) =

14861483 renderHeight len

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

19481945

19491946

19501947type Padding

1951− = Padding String Float Float Float Float

1948+ = Padding String Int Int Int Int

19521949

19531950

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

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

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

22452242 ]

22462243 )

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

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

22522245 (List.filterMap identity

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

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

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

26492642 renderedProps =

26502643 List.foldl (renderProps False) "" props

26512644 in

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

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

2645+ [ selector

2646+ ++ "-fs:focus {"

2647+ ++ renderedProps

2648+ ++ "\n}"

2649+ , "."

2650+ ++ classes.any

2651+ ++ ":focus ~ "

2652+ ++ selector

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

26542654 ++ renderedProps

26552655 ++ "\n}"

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

2656+ , "."

2657+ ++ classes.any

2658+ ++ ":focus "

2659+ ++ selector

2660+ ++ "-fs {"

26572661 ++ renderedProps

26582662 ++ "\n}"

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

2663+ , selector

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

2665+ ++ renderedProps

2666+ ++ "\n}"

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

2668+ ++ "."

2669+ ++ classes.any

2670+ ++ " "

2671+ ++ selector

2672+ ++ "-fs {"

26602673 ++ renderedProps

26612674 ++ "\n}"

26622675 ]

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

28632876 maybePseudo

28642877 class

28652878 [ Property "padding"

2866− (String.fromFloat top

2879+ (String.fromInt top

28672880 ++ "px "

2868− ++ String.fromFloat right

2881+ ++ String.fromInt right

28692882 ++ "px "

2870− ++ String.fromFloat bottom

2883+ ++ String.fromInt bottom

28712884 ++ "px "

2872− ++ String.fromFloat left

2885+ ++ String.fromInt left

28732886 ++ "px"

28742887 )

28752888 ]

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

31993212 ++ String.fromInt left

32003213

32013214

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−

32133215getStyleName : Style -> String

32143216getStyleName style =

32153217 case style of

src/Internal/Style.elm+5−31

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

257257 , inputMultilineParent = "imlp"

258258 , inputMultilineFiller = "imlf"

259259 , inputMultilineWrapper = "implw"

260− , inputLabel = "lbl"

261260

262261 -- link

263262 , link = "lnk"

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

961960 ]

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

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

976963 ]

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

978965 [ Prop "outline" "none"

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

995982 , Child (dot classes.inFront)

996983 [ Descriptor (dot classes.nearby)

997984 [ Prop "position" "fixed"

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

999985 ]

1000986 ]

1001987 ]

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

10851071 , Prop "left" "0"

10861072 , Prop "top" "0"

10871073 , Prop "margin" "0 !important"

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

10881075 , Prop "pointer-events" "none"

10891076 , Child "*"

10901077 [ Prop "pointer-events" "auto"

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

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

12451232 [ Prop "line-height" "1.05"

12461233 , Prop "background" "transparent"

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

12481234 ]

12491235 , Descriptor (dot classes.single)

12501236 elDescription

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

13711357 , Descriptor (dot classes.spaceEvenly)

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

13731359 ]

1374− , Descriptor (dot classes.inputLabel)

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

1376− ]

13771360 ]

13781361 , Descriptor (dot classes.column)

13791362 [ Prop "display" "flex"

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

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

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

13861369 -- instead of the expected content size.

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

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

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

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

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

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

1393− , Descriptor (dot classes.heightExact)

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

1395− ]

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

13961371 ]

13971372 , Child (dot classes.heightFill)

13981373 [ Prop "flex-grow" "100000"

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

15961571 )

15971572 ]

15981573 , Descriptor (dot classes.inputMultiline)

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

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

16001575 , Prop "height" "100%"

16011576 , Prop "width" "100%"

16021577 , Prop "background-color" "transparent"

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

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

16171592 ]

16181593 , Descriptor (dot classes.inputMultilineParent)

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

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

16201595 , Prop "cursor" "text"

16211596 , Child (dot classes.inputMultilineFiller)

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

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

16231598 , Prop "color" "transparent"

16241599 ]

16251600 ]

16261601 , Descriptor (dot classes.paragraph)

16271602 [ Prop "display" "block"

16281603 , Prop "white-space" "normal"

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

16301604 , Descriptor (dot classes.hasBehind)

16311605 [ Prop "z-index" "0"

16321606 , Child (dot classes.behind)

tests-rendering/automation/build.js+1

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

6868}

6969

7070async function create_runner(config) {

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

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

7273

7374 let module_name = elm_entry_module

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

@@ -17,7 +17,6 @@ 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")

2120 .parse(process.argv);

2221

2322// 'Windows 10'

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

127126}

128127

129128async function prepare_local_driver(env) {

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

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

132−

133− if (program.headless) {

134− firefoxOptions.headless();

135− chromeOptions.headless();

136− }

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

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

137131

138132 let driver = await new Builder()

139133 .forBrowser(env.browser)

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

169163 await compile_and_embed({

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

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

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

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

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

174168 });

175169 console.log("Done compiling");

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

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

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

155152 });

156153

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

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

The content is the same.

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

The content is the same.

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

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

1−module FocusStylePrecedingElements exposing (main)

1+module FocusStylePrecedingElements exposing (view)

22

33{-|

44

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

2222

2323-}

2424

25−import Element exposing (..)

26−import Element.Font as Font

27−import Element.Input as Input

25+import Testable.Element exposing (..)

26+import Testable.Element.Font as Font

27+import Testable.Element.Input as Input

2828

2929

30−main =

30+view =

3131 layout [] <|

3232 column []

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

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

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

1−module LabelledInputAlignRight exposing (view)

2−

3−import Testable.Element exposing (..)

4−import Testable.Element.Input as Input

5−

6−

7−view =

8− layout [] <|

9− column [ width fill ]

10− [ Input.text

11− [ width (px 200)

12− , alignRight

13− ]

14− { onChange = always False

15− , text = ""

16− , placeholder = Nothing

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

18− }

19− , Input.text

20− [ width (px 200)

21− , alignRight

22− ]

23− { onChange = always False

24− , text = ""

25− , placeholder = Nothing

26− , label = Input.labelHidden "label"

27− }

28− ]

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

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

1−module NearbyElementBordersOverlap exposing (view)

2−

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

4−

5−

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

7−

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

9−

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

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

12−from the main element.

13−

14−-}

15−

16−import Testable.Element exposing (..)

17−import Testable.Element.Border as Border

18−

19−

20−blue =

21− rgb 0 0 1

22−

23−

24−green =

25− rgb 0 1 0

26−

27−

28−grey =

29− rgb 0.5 0.5 0.5

30−

31−

32−view =

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

34− el

35− [ centerX

36− , centerY

37− , Border.width 10

38− , Border.color green

39− , padding 50

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

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

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

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

44− ]

45− <|

46− text "Centre"

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

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

1−module Layout.NestedParagraphs exposing (view)

1+module 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 [ spacing 25 ]

105+ , row []

106106 [ Testable.Generator.box

107107 , text Testable.Generator.short

108108 , Testable.Generator.box

@@ -111,28 +111,6 @@ 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−

136114 -- , text Testable.Generator.lorem

137115 , Testable.Generator.box

138116 , paragraph []

tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elm → tests-rendering/cases/open/SafariBugIssue147.elmrenamed+3−15

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

1−module DoNotCollapseBelow0 exposing (main)

1+module SafariBugIssue147 exposing (view)

22

33{-|

44

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

2424

2525-}

2626

27−import Browser

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

29−import Html exposing (Html)

27+import Testable.Element exposing (..)

3028

3129

32−view : () -> Html ()

33−view () =

30+view =

3431 layout [ height fill ] <|

3532 column

3633 [ height fill ]

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

3835 , text "Text below the el above"

3936 ]

40−

41−

42−main : Program () () ()

43−main =

44− Browser.sandbox

45− { init = ()

46− , view = view

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

48− }

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

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

1−module ImageRegression exposing (main)

2−

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

4−-}

5−

6−import Browser

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

8−import Element.Background as Background

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

10−import Html.Events exposing (onClick)

11−

12−

13−type alias Model =

14− Int

15−

16−

17−type Msg

18− = NoOp

19−

20−

21−update : Msg -> Model -> Model

22−update msg model =

23− model

24−

25−

26−view : Model -> Html Msg

27−view model =

28− Element.layout [] <|

29− row

30− [ centerX

31− , width shrink

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

33− ]

34− [ viewCard "qs" True

35− , viewCard "ah" False

36− ]

37−

38−

39−main : Program () Model Msg

40−main =

41− Browser.sandbox

42− { init = 0

43− , view = view

44− , update = update

45− }

46−

47−

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

49−viewCard card bool =

50− let

51− source =

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

53−

54− overlapStyles =

55− if bool then

56− [ width (px 50)

57− , clipX

58− ]

59−

60− else

61− []

62− in

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

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

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

1−module ImageRegression2 exposing (main)

2−

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

4−-}

5−

6−import Element exposing (..)

7−

8−

9−main =

10− Element.layout []

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

12− [ text "BEFORE"

13− , image []

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

15− , description = "kitten"

16− }

17− , text "AFTER"

18− ]

19− )

tests-rendering/cases/resolved/Images/ImageSizing.elmdeleted−24

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

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

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

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/resolved/Input/InputAlignment.elmdeleted−44

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

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

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

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

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

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

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

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

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

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

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

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

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

1−module DistributeHeight exposing (main)

2−

3−import Browser

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

5−import Element.Background as Bg

6−import Html as Html exposing (Html)

7−

8−

9−type alias Model =

10− ()

11−

12−

13−update : msg -> Model -> Model

14−update _ model =

15− model

16−

17−

18−view : model -> Html msg

19−view _ =

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

21− column [ height fill, width fill ]

22− [ row

23− [ height

24− fill

25− , width fill

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

27− ]

28− [ el

29− [ height <| px 200

30− , width fill

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

32− ]

33− (text "Helloooo!")

34− ]

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

36− [ none ]

37− ]

38−

39−

40−main : Program () Model msg

41−main =

42− Browser.sandbox

43− { init = ()

44− , view = view

45− , update = update

46− }

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

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

1−module Other exposing (main)

2−

3−import Browser

4−import Element exposing (..)

5−import Element.Border as Border

6−import Element.Events as Events

7−import Html exposing (Html)

8−import Html.Attributes

9−

10−

11−type alias Model =

12− { count : Int }

13−

14−

15−initialModel : Model

16−initialModel =

17− { count = 0 }

18−

19−

20−type Msg

21− = Increment

22− | Decrement

23−

24−

25−update : Msg -> Model -> Model

26−update msg model =

27− case msg of

28− Increment ->

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

30−

31− Decrement ->

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

33−

34−

35−view : Model -> Html Msg

36−view model =

37− viewElements model

38− |> layout []

39−

40−

41−viewElements : Model -> Element Msg

42−viewElements model =

43− el [ height fill ] <|

44− column [ height fill ]

45− [ el

46− [ height (fillPortion 1)

47− ]

48− <|

49− viewCounter model

50− , el

51− [ height (fillPortion 2)

52− ]

53− <|

54− viewCounters model

55− ]

56−

57−

58−flexBasisZero : Element.Attribute msg

59−flexBasisZero =

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

61−

62−

63−viewCounters : Model -> Element Msg

64−viewCounters model =

65− column [ height fill ]

66− (List.repeat model.count model

67− |> List.map viewCounter

68− )

69−

70−

71−viewCounter : Model -> Element Msg

72−viewCounter model =

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

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

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

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

77− ]

78−

79−

80−main : Program () Model Msg

81−main =

82− Browser.sandbox

83− { init = initialModel

84− , view = view

85− , update = update

86− }

tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elmdeleted−40

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

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/resolved/Layout/Rounded.elmdeleted−54

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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", "cases/resolved"],

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

44 "elm-version": "0.19.1",

55 "dependencies": {

66 "direct": {

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

@@ -20,26 +20,6 @@ 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 =

4323 mapEveryCombo3

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

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

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

5131 contents

5232

5333

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−

9734layouts =

9835 [ ( "el"

9936 , \attrs child ->

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

11855 ]

11956

12057

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−

18558nearbys =

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

59+ [ inFront

60+ , above

61+ , onLeft

62+ , onRight

63+ , below

64+ , behindContent

21065 ]

21166

21267

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−

24068contents =

24169 [ ( "none", none )

24270 , ( "short text", text short )

243−

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

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

24572 , ( "box"

24673 , box

24774 )

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

294121 listOne

295122

296123

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−

317124sizes render =

318125 List.concatMap

319126 (\( widthLen, heightLen ) ->

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

356163 |> maximum 100

357164 |> minimum 50

358165 ]

359−

360−

361−type Generated thing

362− = Generated (List (Labeled thing))

363−

364−

365−type alias Labeled thing =

366− ( String, thing )

367−

368−

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

370−with first funcs =

371− List.concatMap

372− (\( lbl, fst ) ->

373− List.map

374− (\( fnLbl, fn ) ->

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

376− )

377− funcs

378− )

379− first

380−

381−

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

383−generate lbl fn =

384− [ Tuple.pair lbl fn

385− ]

386−

387−

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

389−test =

390− generate "Alignments"

391− (\align ->

392− el align none

393− )

394− |> with allAlignments

395−

396−

397−

398−-- |>

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

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

1−module Tests.Alignment exposing (view)

2−

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

4−-}

5−

6−import Testable

7−import Testable.Element exposing (..)

8−import Testable.Element.Background as Background

9−import Testable.Element.Font as Font

10−import Testable.Generator

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

12−

13−

14−box attrs =

15− el

16− ([ width (px 50)

17− , height (px 50)

18− , Background.color blue

19− ]

20− ++ attrs

21− )

22− none

23−

24−

25−{-| -}

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

27−view =

28− List.concat

29− [ Testable.Generator.generate "Alignments"

30− (\layout element alignment ->

31− layout

32− [ width (px 800)

33− , height (px 800)

34− , Background.color lightGrey

35− ]

36− (element

37− ([ width (px 200)

38− , height (px 200)

39− , Background.color red

40− ]

41− ++ alignment

42− )

43− none

44− )

45− )

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

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

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

49− ]

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

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

22

33{-| -}

44

5−import Layout.NestedParagraphs

6−import Layout.SafariBugIssue147

5+import ClippedElInFixedWidthColumn

6+import ElInFixedHeightColumn

7+import InFrontSize

8+import NestedParagraphs

9+import SafariBugIssue147

10+import StackedScrollingColumnsHeight

711import Testable.Generator

812import Testable.Runner

9−import Tests.Alignment

13+import Tests.Basic

14+import Tests.ColumnAlignment

15+import Tests.ColumnSpacing

16+import Tests.ElementAlignment

1017import Tests.Nearby

11−import Tests.Spacing

18+import Tests.RowAlignment

19+import Tests.RowSpacing

1220import Tests.TextWrapping

1321import Tests.Transparency

22+import WeirdCentering

1423

1524

1625main : Testable.Runner.TestableProgram

1726main =

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

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

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

3044 ]

3145

3246

3347issues =

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

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

4455 ]

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

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

1+module Tests.Basic exposing (view)

2+

3+{-| -}

4+

5+import Element as Actual

6+import Html

7+import Testable

8+import Testable.Element exposing (..)

9+import Testable.Element.Background as Background

10+import Testable.Element.Font as Font

11+import Testable.Runner

12+import Tests.Palette as Palette

13+

14+

15+{-| -}

16+main : Html.Html msg

17+main =

18+ Testable.Runner.show view

19+

20+

21+{-| -}

22+view : Testable.Element msg

23+view =

24+ row [ spacing 50, alignTop ]

25+ [ el

26+ [ width (px 200)

27+ , height (px 200)

28+ , Background.color Palette.blue

29+ , Font.color Palette.white

30+ ]

31+ (text "Hello!")

32+ , el

33+ [ width (px 200)

34+ , height (px 200)

35+ , Background.color Palette.blue

36+ , Font.color Palette.white

37+ ]

38+ (text "Hello!")

39+ , el

40+ [ width (px 200)

41+ , height (px 200)

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

43+ , Font.color Palette.white

44+ , below

45+ (el

46+ [ Background.color Palette.grey

47+ , width (px 50)

48+ , height (px 50)

49+ ]

50+ none

51+ )

52+ ]

53+ (text "Hello!")

54+ ]

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

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

1+module Tests.ColumnAlignment exposing (..)

2+

3+import Html

4+import Testable

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

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

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

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+container =

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

31+

32+

33+view =

34+ let

35+ colContainer attrs children =

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

37+

38+ tallContainer attrs children =

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

40+ in

41+ column

42+ [ width fill, spacing 20 ]

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

44+ , row [ spacing 20 ]

45+ [ colContainer []

46+ [ box [] ]

47+ , colContainer []

48+ [ box [ centerY ]

49+ ]

50+ , colContainer []

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

52+ ]

53+ ]

54+ , row [ spacing 20 ]

55+ [ colContainer []

56+ [ box [] ]

57+ , colContainer []

58+ [ box []

59+ , box []

60+ , box []

61+ ]

62+ , colContainer []

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

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

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

66+ ]

67+ ]

68+ , row [ spacing 20 ]

69+ [ colContainer []

70+ [ box []

71+ , box []

72+ , box []

73+ ]

74+ , colContainer []

75+ [ box []

76+ , box []

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

78+ ]

79+ , colContainer []

80+ [ box []

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

82+ , box []

83+ ]

84+ , colContainer []

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

86+ , box []

87+ , box []

88+ ]

89+ ]

90+ , text "centerY"

91+ , row [ spacing 20 ]

92+ [ colContainer [ height fill ]

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

94+ ]

95+ , colContainer []

96+ [ box []

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

98+ , box []

99+ ]

100+ , colContainer []

101+ [ box []

102+ , box []

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

104+ ]

105+ ]

106+ , text "multiple centerY"

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

108+ [ tallContainer []

109+ [ box []

110+ , box [ centerY ]

111+ , box [ centerY ]

112+ , box [ centerY ]

113+ , box [ centerY ]

114+ , box [ alignBottom ]

115+ ]

116+ , tallContainer []

117+ [ box []

118+ , box [ centerY ]

119+ , box []

120+ ]

121+ , tallContainer []

122+ [ box []

123+ , box []

124+ , box [ centerY ]

125+ ]

126+ ]

127+ , text "top, center, bottom"

128+ , row [ spacing 20 ]

129+ [ colContainer []

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

131+ , box []

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

133+ ]

134+ , colContainer []

135+ [ box [ alignTop ]

136+ , box [ centerY ]

137+ , box [ alignBottom ]

138+ ]

139+ , colContainer []

140+ [ box [ alignLeft, alignTop ]

141+ , box [ centerX, centerY ]

142+ , box [ alignRight, alignBottom ]

143+ ]

144+ ]

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

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

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

148+ , column

149+ [ alignLeft

150+ , alignTop

151+ , spacing 20

152+ , label "column"

153+ , Background.color lightGrey

154+ ]

155+ [ box []

156+ , box []

157+ , box []

158+ ]

159+ , column

160+ [ spacing 20

161+ , width (px 100)

162+ , alignLeft

163+ , alignTop

164+ , Background.color lightGrey

165+ ]

166+ [ box []

167+ , box []

168+ , box []

169+ ]

170+ , colContainer []

171+ [ box [ alignRight ]

172+ , box [ centerX ]

173+ , box [ alignLeft ]

174+ ]

175+ ]

176+ ]

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

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

1+module Tests.ColumnSpacing exposing (..)

2+

3+import Html

4+import Testable

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

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

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

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+tinyBox attrs =

30+ el

31+ ([ width (px 20)

32+ , height (px 20)

33+

34+ -- , centerY

35+ , Background.color darkCharcoal

36+ ]

37+ ++ attrs

38+ )

39+ none

40+

41+

42+container =

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

44+

45+

46+view =

47+ let

48+ colContainer attrs children =

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

50+ in

51+ column

52+ []

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

54+ , row []

55+ [ colContainer []

56+ [ box [] ]

57+ , colContainer []

58+ [ box []

59+ , box []

60+ , box []

61+ ]

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

63+ [ box []

64+ , box []

65+ , box []

66+ ]

67+ ]

68+ ]

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

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

1+module Tests.ElementAlignment exposing (..)

2+

3+import Generator

4+import Html

5+import Testable

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

7+import Testable.Element.Background as Background

8+import Testable.Element.Font as Font

9+import Testable.Runner

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

11+

12+

13+{-| -}

14+main : Html.Html msg

15+main =

16+ Testable.Runner.show view

17+

18+

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

20+box attrs =

21+ el

22+ ([ width (px 50)

23+ , height (px 50)

24+ , Background.color blue

25+ ]

26+ ++ attrs

27+ )

28+ none

29+

30+

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

32+container =

33+ el

34+ [ width (px 200)

35+ , height (px 200)

36+ , Background.color lightGrey

37+ ]

38+

39+

40+view : Testable.Element msg

41+view =

42+ column []

43+ [ el [] (text "Alignment Within an El")

44+ , container <|

45+ box []

46+ , text "alignLeft, centerX, alignRight"

47+ , column [ spacing 20 ] <|

48+ Generator.sizes

49+ (\resizeable ->

50+ row [ spacing 20 ]

51+ [ container <|

52+ resizeable [ Background.color blue, alignLeft ] none

53+ , container <|

54+ resizeable [ Background.color blue, centerX ] none

55+ , container <|

56+ resizeable [ Background.color blue, alignRight ] none

57+ ]

58+ )

59+ , text "top, centerY, bottom"

60+ , column [ spacing 20 ] <|

61+ Generator.sizes

62+ (\resizeable ->

63+ row [ spacing 20 ]

64+ [ container <|

65+ resizeable [ alignTop ] none

66+ , container <|

67+ resizeable [ centerY ] none

68+ , container <|

69+ resizeable [ alignBottom ] none

70+ ]

71+ )

72+ , text "align top ++ alignments"

73+ , column [ spacing 20 ] <|

74+ Generator.sizes

75+ (\resizeable ->

76+ row [ spacing 20 ]

77+ [ container <|

78+ resizeable [ alignTop, alignLeft ] none

79+ , container <|

80+ resizeable [ alignTop, centerX ] none

81+ , container <|

82+ resizeable [ alignTop, alignRight ] none

83+ ]

84+ )

85+ , text "centerY ++ alignments"

86+ , column [ spacing 20 ] <|

87+ Generator.sizes

88+ (\resizeable ->

89+ row [ spacing 20 ]

90+ [ container <|

91+ resizeable [ centerY, alignLeft ] none

92+ , container <|

93+ resizeable [ centerY, centerX ] none

94+ , container <|

95+ resizeable [ centerY, alignRight ] none

96+ ]

97+ )

98+ , text "alignBottom ++ alignments"

99+ , column [ spacing 20 ] <|

100+ Generator.sizes

101+ (\resizeable ->

102+ row [ spacing 20 ]

103+ [ container <|

104+ resizeable [ alignBottom, alignLeft ] none

105+ , container <|

106+ resizeable [ alignBottom, centerX ] none

107+ , container <|

108+ resizeable [ alignBottom, alignRight ] none

109+ ]

110+ )

111+ ]

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

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

88import Testable.Element exposing (..)

99import Testable.Element.Background as Background

1010import Testable.Element.Font as Font

11−import Testable.Generator

1211import Testable.Runner

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

1413

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

5857

5958

6059{-| -}

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

60+main : Html.Html msg

61+main =

62+ Testable.Runner.show view

63+

64+

65+{-| -}

66+view : Testable.Element msg

6267view =

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

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

76263 ]

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

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

88349 ]

89− none

90− )

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

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

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

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

94419 ]

95420

96421

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

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

112437 (justBox 40 darkGrey [])

113438 ]

114−

115−

116−little name attrs =

117− el

118− ([ label name

119− , width (px 5)

120− , height (px 5)

121− , Background.color darkCharcoal

122− ]

123− ++ attrs

124− )

125− none

126−

127−

128−master =

129− el [ padding 20 ] <|

130− box

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

152− ]

153−

154−

155−masterParagraph =

156− el [ padding 20 ] <|

157− p

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

179− ]

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

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

1+module Tests.RowAlignment exposing (..)

2+

3+import Generator

4+import Html

5+import Testable

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

7+import Testable.Element.Background as Background

8+import Testable.Element.Font as Font

9+import Testable.Runner

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

11+

12+

13+{-| -}

14+main : Html.Html msg

15+main =

16+ Testable.Runner.show view

17+

18+

19+box attrs =

20+ el

21+ ([ width (px 50)

22+ , height (px 50)

23+ , Background.color blue

24+ ]

25+ ++ attrs

26+ )

27+ none

28+

29+

30+view =

31+ let

32+ rowContainer attrs children =

33+ row

34+ ([ spacing 20

35+ , height (px 100)

36+ , Background.color lightGrey

37+ ]

38+ ++ attrs

39+ )

40+ children

41+ in

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

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

44+ , column [ spacing 20 ] <|

45+ Generator.sizes <|

46+ \resizeable ->

47+ rowContainer

48+ [ label "single child" ]

49+ [ resizeable [] none ]

50+ , column [ spacing 20 ] <|

51+ Generator.sizes <|

52+ \resizeable ->

53+ rowContainer

54+ [ label "single child" ]

55+ [ resizeable [ centerX ] none ]

56+ , column [ spacing 20 ] <|

57+ Generator.sizes <|

58+ \resizeable ->

59+ rowContainer [ label "single child" ]

60+ [ resizeable [ alignRight ] none ]

61+ , column [ spacing 20 ] <|

62+ Generator.sizes <|

63+ \resizeable ->

64+ rowContainer []

65+ [ resizeable [] none

66+ , resizeable [] none

67+ , resizeable [] none

68+ ]

69+ , column [ spacing 20 ] <|

70+ Generator.sizes <|

71+ \resizeable ->

72+ rowContainer []

73+ [ resizeable [] none

74+ , resizeable [] none

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

76+ ]

77+ , column [ spacing 20 ] <|

78+ Generator.sizes <|

79+ \resizeable ->

80+ rowContainer

81+ []

82+ [ resizeable [] none

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

84+ , resizeable [] none

85+ ]

86+ , column [ spacing 20 ] <|

87+ Generator.sizes <|

88+ \resizeable ->

89+ rowContainer []

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

91+ , resizeable [] none

92+ , resizeable [] none

93+ ]

94+ , text "center X"

95+ , column [ spacing 20 ] <|

96+ Generator.sizes <|

97+ \resizeable ->

98+ rowContainer []

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

100+ , resizeable [] none

101+ , resizeable [] none

102+ ]

103+ , column [ spacing 20 ] <|

104+ Generator.sizes <|

105+ \resizeable ->

106+ rowContainer []

107+ [ resizeable [] none

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

109+ , resizeable [] none

110+ ]

111+ , column [ spacing 20 ] <|

112+ Generator.sizes <|

113+ \resizeable ->

114+ rowContainer []

115+ [ resizeable [] none

116+ , resizeable [] none

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

118+ ]

119+ , column [ spacing 20 ] <|

120+ Generator.sizes <|

121+ \resizeable ->

122+ rowContainer []

123+ [ resizeable [] none

124+ , resizeable [] none

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

126+ , resizeable [] none

127+ ]

128+ , column [ spacing 20 ] <|

129+ Generator.sizes <|

130+ \resizeable ->

131+ rowContainer []

132+ [ resizeable [] none

133+ , resizeable [] none

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

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

136+ , resizeable [] none

137+ ]

138+ , column [ spacing 20 ] <|

139+ Generator.sizes <|

140+ \resizeable ->

141+ rowContainer []

142+ [ resizeable [] none

143+ , resizeable [] none

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

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

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

147+ , resizeable [] none

148+ ]

149+ , text "left x right"

150+ , column [ spacing 20 ] <|

151+ Generator.sizes <|

152+ \resizeable ->

153+ rowContainer []

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

155+ , resizeable [] none

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

157+ ]

158+ , text "left center right"

159+ , column [ spacing 20 ] <|

160+ Generator.sizes <|

161+ \resizeable ->

162+ rowContainer []

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

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

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

166+ ]

167+ , text "vertical alignment"

168+ , column [ spacing 20 ] <|

169+ Generator.sizes <|

170+ \resizeable ->

171+ rowContainer []

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

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

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

175+ ]

176+ , text "x and y alignments"

177+ , column [ spacing 20 ] <|

178+ Generator.sizes <|

179+ \resizeable ->

180+ rowContainer []

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

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

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

184+ ]

185+ , text "align Top and X alignments "

186+ , column [ spacing 20 ] <|

187+ Generator.sizes <|

188+ \resizeable ->

189+ rowContainer []

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

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

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

193+ ]

194+ , text "align Bottom and X alignments "

195+ , column [ spacing 20 ] <|

196+ Generator.sizes <|

197+ \resizeable ->

198+ rowContainer []

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

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

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

202+ ]

203+ , text "centerY and X alignments "

204+ , column [ spacing 20 ] <|

205+ Generator.sizes <|

206+ \resizeable ->

207+ rowContainer []

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

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

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

211+ ]

212+ ]

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

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

1+module Tests.RowSpacing exposing (..)

2+

3+import Html

4+import Testable

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

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

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

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+tinyBox attrs =

30+ el

31+ ([ width (px 20)

32+ , height (px 20)

33+

34+ -- , centerY

35+ , Background.color darkCharcoal

36+ ]

37+ ++ attrs

38+ )

39+ none

40+

41+

42+container =

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

44+

45+

46+view =

47+ let

48+ colContainer attrs children =

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

50+ in

51+ column

52+ []

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

54+ , column []

55+ [ box []

56+ , colContainer []

57+ [ box [] ]

58+ , colContainer []

59+ [ box []

60+ , box []

61+ , box []

62+ ]

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

64+ [ box []

65+ , box []

66+ , box []

67+ ]

68+ ]

69+ ]

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

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

1−module Tests.Spacing exposing (view)

2−

3−{-| Test that spacing works

4−-}

5−

6−import Testable

7−import Testable.Element exposing (..)

8−import Testable.Element.Background as Background

9−import Testable.Element.Font as Font

10−import Testable.Generator

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

12−

13−

14−{-| -}

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

16−view =

17− List.concat

18− [ Testable.Generator.generate "Spacing"

19− (\layout element ->

20− layout

21− [ width (px 800)

22− , height (px 800)

23− , Background.color lightGrey

24− , spacing 20

25− ]

26− (element

27− [ width (px 200)

28− , height (px 200)

29− , Background.color red

30− ]

31− none

32− )

33− )

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

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

36− ]