git.iko.soy/typeable/elm-ui
on 639efbb help sign in
README.md−4
since splitsnapshots
unifiedsplit
@@ -66,10 +66,6 @@ The work is based off of a rewrite of the [Style Elements](https://github.com/md
66
66
67The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.
67The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.
68
68
69−## Notes
70−
71−Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.
72−
73## Contributing
69## Contributing
74
70
75Want to help out fixing bugs or reporting issues?
71Want to help out fixing bugs or reporting issues?
elm.json+1−1
@@ -3,7 +3,7 @@
3 "name": "mdgriffith/elm-ui",
3 "name": "mdgriffith/elm-ui",
4 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",
4 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",
5 "license": "BSD-3-Clause",
5 "license": "BSD-3-Clause",
6− "version": "1.1.8",
6+ "version": "1.1.5",
7 "exposed-modules": [
7 "exposed-modules": [
8 "Element",
8 "Element",
9 "Element.Input",
9 "Element.Input",
examples/Basic.elm+1−1
@@ -1,4 +1,4 @@
1−module Basic exposing (..)
1+module Main exposing (..)
2
2
3{-| -}
3{-| -}
4
4
examples/Form.elm+4−12
@@ -1,4 +1,4 @@
1−module Form exposing (..)
1+module Main exposing (..)
2
2
3{-| -}
3{-| -}
4
4
@@ -80,14 +80,7 @@ view model =
80 [ Font.size 20
80 [ Font.size 20
81 ]
81 ]
82 <|
82 <|
83− Element.column
83+ Element.column [ width (px 800), height shrink, centerY, centerX, spacing 36, padding 10, explain Debug.todo ]
84− [ width (px 800)
85− , height shrink
86− , centerY
87− , centerX
88− , spacing 36
89− , padding 10
90− ]
91 [ el
84 [ el
92 [ Region.heading 1
85 [ Region.heading 1
93 , alignLeft
86 , alignLeft
@@ -124,7 +117,7 @@ view model =
124 , onChange = \new -> Update { model | username = new }
117 , onChange = \new -> Update { model | username = new }
125 , label = Input.labelAbove [ Font.size 14 ] (text "Username")
118 , label = Input.labelAbove [ Font.size 14 ] (text "Username")
126 }
119 }
127− , Input.currentPassword [ spacing 12 ]
120+ , Input.currentPassword [ spacing 12, width shrink ]
128 { text = model.password
121 { text = model.password
129 , placeholder = Nothing
122 , placeholder = Nothing
130 , onChange = \new -> Update { model | password = new }
123 , onChange = \new -> Update { model | password = new }
@@ -200,8 +193,7 @@ view model =
200 , Border.color darkBlue
193 , Border.color darkBlue
201 , paddingXY 32 16
194 , paddingXY 32 16
202 , Border.rounded 3
195 , Border.rounded 3
203−
204− -- , width fill
196+ , width fill
205 ]
197 ]
206 { onPress = Nothing
198 { onPress = Nothing
207 , label = Element.text "Place your lunch order!"
199 , label = Element.text "Place your lunch order!"
examples/Table.elm+1−1
@@ -1,4 +1,4 @@
1−module Table exposing (..)
1+module Main exposing (..)
2
2
3{-| -}
3{-| -}
4
4
examples/elm.json+22−19
@@ -1,22 +1,25 @@
1{
1{
2− "type": "application",
2+ "type": "application",
3− "source-directories": [".", "../src/"],
3+ "source-directories": [
4+ ".",
5+ "../src/"
6+ ],
4− "elm-version": "0.19.1",
7+ "elm-version": "0.19.0",
5− "dependencies": {
8+ "dependencies": {
6− "direct": {
9+ "direct": {
7− "elm/browser": "1.0.0",
10+ "elm/browser": "1.0.0",
8− "elm/core": "1.0.0",
11+ "elm/core": "1.0.0",
9− "elm/html": "1.0.0",
12+ "elm/html": "1.0.0",
10− "elm/json": "1.0.0",
13+ "elm/json": "1.0.0",
11− "elm/virtual-dom": "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+ }
12 },
20 },
13− "indirect": {
21+ "test-dependencies": {
14− "elm/time": "1.0.0",
22+ "direct": {},
15− "elm/url": "1.0.0"
23+ "indirect": {}
16 }
24 }
17− },
18− "test-dependencies": {
19− "direct": {},
20− "indirect": {}
21− }
22−}
25+}
notes/discussion/ColorWithoutAlpha.API.md+2−2
@@ -6,8 +6,8 @@ If we separate out alpha from the core color type, we can
6
6
71. Have a unified `Color` type that works in all contexts, including in webGL situations where transparency may be handled differently, or not at all.
71. Have a unified `Color` type that works in all contexts, including in webGL situations where transparency may be handled differently, or not at all.
8
8
9−2. Encourage people to use actual color mixing functions where possible and to enumerate their colors concretely.
9+2. Encourage people to use actual color mixing functions where possible or to enumerate their colors concretely.
10− - The point here is that color mixing is situation dependent. Why not just mix a color explicitly in a way where you know it looks good?
10+ - The point here is that alpha mixing can sometimes lead to colors that don't look great or are unexpected.
11
11
123. With a totally opaque color type, we can calculate contrast for accessibility evaluation easily. An alpha channel means we'd have to emulate browser mixing to do that, which I'm not sure is consistent.
123. With a totally opaque color type, we can calculate contrast for accessibility evaluation easily. An alpha channel means we'd have to emulate browser mixing to do that, which I'm not sure is consistent.
13
13
package-lock.json+31−19
@@ -734,9 +734,9 @@
734 }
734 }
735 },
735 },
736 "jszip": {
736 "jszip": {
737− "version": "3.4.0",
737+ "version": "3.2.2",
738− "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.4.0.tgz",
738+ "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",
739− "integrity": "sha512-gZAOYuPl4EhPTXT0GjhI3o+ZAz3su6EhLrKUoAivcKqyqC7laS5JEv4XWZND9BgcDcF83vI85yGbDmDR6UhrIg==",
739+ "integrity": "sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==",
740 "requires": {
740 "requires": {
741 "lie": "~3.3.0",
741 "lie": "~3.3.0",
742 "pako": "~1.0.2",
742 "pako": "~1.0.2",
@@ -1002,24 +1002,20 @@
1002 "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
1002 "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
1003 "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
1003 "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
1004 },
1004 },
1005+ "sax": {
1006+ "version": "1.2.4",
1007+ "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
1008+ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
1009+ },
1005 "selenium-webdriver": {
1010 "selenium-webdriver": {
1006− "version": "4.0.0-alpha.7",
1011+ "version": "4.0.0-alpha.4",
1007− "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.7.tgz",
1012+ "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.4.tgz",
1008− "integrity": "sha512-D4qnTsyTr91jT8f7MfN+OwY0IlU5+5FmlO5xlgRUV6hDEV8JyYx2NerdTEqDDkNq7RZDYc4VoPALk8l578RBHw==",
1013+ "integrity": "sha512-etJt20d8qInkxMAHIm5SEpPBSS+CdxVcybnxzSIB/GlWErb8pIWrArz/VA6VfUW0/6tIcokepXQ5ufvdzqqk1A==",
1009 "requires": {
1014 "requires": {
1010− "jszip": "^3.2.2",
1015+ "jszip": "^3.1.5",
1011− "rimraf": "^2.7.1",
1016+ "rimraf": "^2.6.3",
1012− "tmp": "0.0.30"
1017+ "tmp": "0.0.30",
1013− },
1018+ "xml2js": "^0.4.19"
1014− "dependencies": {
1015− "rimraf": {
1016− "version": "2.7.1",
1017− "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
1018− "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
1019− "requires": {
1020− "glob": "^7.1.3"
1021− }
1022− }
1023 }
1019 }
1024 },
1020 },
1025 "semver": {
1021 "semver": {
@@ -1221,6 +1217,22 @@
1221 "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
1217 "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
1222 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
1218 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
1223 },
1219 },
1220+ "xml2js": {
1221+ "version": "0.4.19",
1222+ "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
1223+ "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
1224+ "requires": {
1225+ "sax": ">=0.6.0",
1226+ "xmlbuilder": "~9.0.1"
1227+ },
1228+ "dependencies": {
1229+ "xmlbuilder": {
1230+ "version": "9.0.7",
1231+ "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
1232+ "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
1233+ }
1234+ }
1235+ },
1224 "xmlbuilder": {
1236 "xmlbuilder": {
1225 "version": "13.0.2",
1237 "version": "13.0.2",
1226 "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
1238 "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
package.json+4−5
@@ -5,13 +5,12 @@
5 "main": "index.js",
5 "main": "index.js",
6 "scripts": {
6 "scripts": {
7 "test": "elm-test",
7 "test": "elm-test",
8− "view-test": "node tests-rendering/automation/view.js",
9 "test-render": "node tests-rendering/automation/run.js --chrome",
8 "test-render": "node tests-rendering/automation/run.js --chrome",
10− "test-render-sauce": "source sauce.env; node tests-rendering/automation/run.js --sauce --headless",
9+ "test-render-sauce": "source sauce.env; node tests-rendering/automation/run.js --sauce",
11− "test-render-sauce-automated": "node tests-rendering/automation/run.js --sauce --headless",
10+ "test-render-sauce-automated": "node tests-rendering/automation/run.js --sauce",
12 "test-doc-preview": "bash tests-rendering/automation/doc-preview.sh",
11 "test-doc-preview": "bash tests-rendering/automation/doc-preview.sh",
13 "bench": "node benchmarks/runtime/index.js",
12 "bench": "node benchmarks/runtime/index.js",
14− "list-issues": "hub issue -f \"%i,%U,%t,'%L'%n\" > issues.csv"
13+ "list-issues": "hub issue -f \"%i,%U,%t%n\" > issues.csv"
15 },
14 },
16 "repository": {
15 "repository": {
17 "type": "git",
16 "type": "git",
@@ -29,6 +28,6 @@
29 "elm": "^0.19.1-3",
28 "elm": "^0.19.1-3",
30 "elm-test": "^0.19.1-revision2",
29 "elm-test": "^0.19.1-revision2",
31 "node-elm-compiler": "^5.0.4",
30 "node-elm-compiler": "^5.0.4",
32− "selenium-webdriver": "^4.0.0-alpha.7"
31+ "selenium-webdriver": "^4.0.0-alpha.4"
33 }
32 }
34}
33}
src/Element.elm+37−79
@@ -645,34 +645,14 @@ wrappedRow attrs children =
645 newPadding =
645 newPadding =
646 case padded of
646 case padded of
647 Just (Internal.Padding name t r b l) ->
647 Just (Internal.Padding name t r b l) ->
648− if r >= (toFloat x / 2) && b >= (toFloat y / 2) then
648+ if r >= (x // 2) && b >= (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
662 Just <|
649 Just <|
663− Internal.StyleClass Flag.padding
650+ paddingEach
664− (Internal.PaddingStyle
651+ { top = t - (y // 2)
665− (Internal.paddingNameFloat
652+ , right = r - (x // 2)
666− newTop
653+ , bottom = b - (y // 2)
667− newRight
654+ , left = l - (x // 2)
668− newBottom
655+ }
669− newLeft
670− )
671− newTop
672− newRight
673− newBottom
674− newLeft
675− )
676
656
677 else
657 else
678 Nothing
658 Nothing
@@ -1008,15 +988,14 @@ tableHelper attrs config =
1008
988
1009{-| A paragraph will layout all children as wrapped, inline elements.
989{-| A paragraph will layout all children as wrapped, inline elements.
1010
990
1011− import Element exposing (el, paragraph, text)
991+ import Element
1012 import Element.Font as Font
992 import Element.Font as Font
1013
993
1014− view =
1015− paragraph []
994+ Element.paragraph []
1016− [ text "lots of text ...."
995+ [ text "lots of text ...."
1017− , el [ Font.bold ] (text "this is bold")
996+ , el [ Font.bold ] (text "this is bold")
1018− , text "lots of text ...."
997+ , text "lots of text ...."
1019− ]
998+ ]
1020
999
1021This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.
1000This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.
1022
1001
@@ -1024,18 +1003,17 @@ Also, if a child element has `alignLeft` or `alignRight`, then it will be moved
1024
1003
1025This makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).
1004This makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).
1026
1005
1027− import Element exposing (alignLeft, el, padding, paragraph, text)
1006+ import Element
1028 import Element.Font as Font
1007 import Element.Font as Font
1029
1008
1030− view =
1031− paragraph []
1009+ Element.paragraph []
1032− [ el
1010+ [ el
1033− [ alignLeft
1011+ [ alignLeft
1034− , padding 5
1012+ , padding 5
1035− ]
1036− (text "S")
1037− , text "o much text ...."
1038 ]
1013 ]
1014+ (text "S")
1015+ , text "o much text ...."
1016+ ]
1039
1017
1040Which will look something like
1018Which will look something like
1041
1019
@@ -1203,6 +1181,11 @@ newTabLink attrs { url, label } =
1203
1181
1204
1182
1205{-| A link to download a file.
1183{-| A link to download a file.
1184+
1185+**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.
1186+
1187+[Here's a description of what needs to happen](https://github.com/elm/html/issues/175).
1188+
1206-}
1189-}
1207download :
1190download :
1208 List (Attribute msg)
1191 List (Attribute msg)
@@ -1358,11 +1341,7 @@ moveLeft x =
1358{-| -}
1341{-| -}
1359padding : Int -> Attribute msg
1342padding : Int -> Attribute msg
1360padding x =
1343padding 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)
1344+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) x x x x)
1366
1345
1367
1346
1368{-| Set horizontal and vertical padding.
1347{-| Set horizontal and vertical padding.
@@ -1370,27 +1349,16 @@ padding x =
1370paddingXY : Int -> Int -> Attribute msg
1349paddingXY : Int -> Int -> Attribute msg
1371paddingXY x y =
1350paddingXY x y =
1372 if x == y then
1351 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)
1352+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) x x x x)
1378
1353
1379 else
1354 else
1380− let
1381− xFloat =
1382− toFloat x
1383−
1384− yFloat =
1385− toFloat y
1386− in
1387 Internal.StyleClass Flag.padding
1355 Internal.StyleClass Flag.padding
1388 (Internal.PaddingStyle
1356 (Internal.PaddingStyle
1389 ("p-" ++ String.fromInt x ++ "-" ++ String.fromInt y)
1357 ("p-" ++ String.fromInt x ++ "-" ++ String.fromInt y)
1390− yFloat
1358+ y
1391− xFloat
1359+ x
1392− yFloat
1360+ y
1393− xFloat
1361+ x
1394 )
1362 )
1395
1363
1396
1364
@@ -1411,26 +1379,16 @@ And then just do
1411paddingEach : { top : Int, right : Int, bottom : Int, left : Int } -> Attribute msg
1379paddingEach : { top : Int, right : Int, bottom : Int, left : Int } -> Attribute msg
1412paddingEach { top, right, bottom, left } =
1380paddingEach { top, right, bottom, left } =
1413 if top == right && top == bottom && top == left then
1381 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)
1382+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt top) top top top top)
1420− topFloat
1421− topFloat
1422− topFloat
1423− topFloat
1424− )
1425
1383
1426 else
1384 else
1427 Internal.StyleClass Flag.padding
1385 Internal.StyleClass Flag.padding
1428 (Internal.PaddingStyle
1386 (Internal.PaddingStyle
1429 (Internal.paddingName top right bottom left)
1387 (Internal.paddingName top right bottom left)
1430− (toFloat top)
1388+ top
1431− (toFloat right)
1389+ right
1432− (toFloat bottom)
1390+ bottom
1433− (toFloat left)
1391+ left
1434 )
1392 )
1435
1393
1436
1394
src/Element/Input.elm+40−75
@@ -132,12 +132,10 @@ Instead of implicit submission behavior, [try making an `onEnter` event handler
132
132
133And no one has to look up obtuse html documentation to understand the behavior of their code :).
133And no one has to look up obtuse html documentation to understand the behavior of their code :).
134
134
135−
136# File Inputs
135# File Inputs
137
136
138Presently, 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.
137Presently, 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.
139
138
140−
141# Disabling Inputs
139# Disabling Inputs
142
140
143You also might be wondering how to disable an input.
141You 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
330 , label = text "My Button"
328 , label = text "My Button"
331 }
329 }
332
330
333−**Note** If you have an icon button but want it to be accessible, consider adding a [`Region.description`](Element-Region#description), which will describe the button to screen readers.
334−
335-}
331-}
336button :
332button :
337 List (Attribute msg)
333 List (Attribute msg)
@@ -369,17 +365,7 @@ button attrs { onPress, label } =
369
365
370 Just msg ->
366 Just msg ->
371 Events.onClick msg
367 Events.onClick msg
372− :: onKeyLookup
368+ :: onEnter msg
373− (\code ->
374− if code == enter then
375− Just msg
376−
377− else if code == space then
378− Just msg
379−
380− else
381− Nothing
382− )
383 :: attrs
369 :: attrs
384 )
370 )
385 )
371 )
@@ -457,24 +443,22 @@ checkbox attrs { label, icon, checked, onChange } =
457 ]
443 ]
458 ++ attrs
444 ++ attrs
459 in
445 in
460− applyLabel
446+ applyLabel attributes
447+ label
448+ (Internal.element
449+ Internal.asEl
450+ Internal.div
451+ [ Internal.Attr <|
461− (Internal.Attr (Html.Attributes.attribute "role" "checkbox")
452+ Html.Attributes.attribute "role" "checkbox"
462− :: Internal.Attr
453+ , Internal.Attr <|
463− (Html.Attributes.attribute "aria-checked" <|
454+ Html.Attributes.attribute "aria-checked" <|
464 if checked then
455 if checked then
465 "true"
456 "true"
466
457
467 else
458 else
468 "false"
459 "false"
469− )
470− :: hiddenLabelAttribute label
460+ , hiddenLabelAttribute label
471− :: attributes
472− )
473− label
474− (Internal.element
475− Internal.asEl
476− Internal.div
477− [ Element.centerY
461+ , Element.centerY
478 , Element.height Element.fill
462 , Element.height Element.fill
479 , Element.width Element.shrink
463 , Element.width Element.shrink
480 ]
464 ]
@@ -713,7 +697,7 @@ slider attributes input =
713 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")
697 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")
714 thumbShadowStyle
698 thumbShadowStyle
715 )
699 )
716− , Internal.Attr (Html.Attributes.class (className ++ " ui-slide-bar focusable-parent"))
700+ , Internal.Attr (Html.Attributes.class (className ++ " focusable-parent"))
717 , Internal.Attr
701 , Internal.Attr
718 (Html.Events.onInput
702 (Html.Events.onInput
719 (\str ->
703 (\str ->
@@ -779,10 +763,10 @@ slider attributes input =
779 -- This is after `attributes` because the thumb should be in front of everything.
763 -- This is after `attributes` because the thumb should be in front of everything.
780 ++ [ Element.behindContent <|
764 ++ [ Element.behindContent <|
781 if vertical then
765 if vertical then
782− viewVerticalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackWidth
766+ viewVerticalThumb factor thumbAttributes trackWidth
783
767
784 else
768 else
785− viewHorizontalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackHeight
769+ viewHorizontalThumb factor thumbAttributes trackHeight
786 ]
770 ]
787 )
771 )
788 Element.none
772 Element.none
@@ -882,10 +866,10 @@ textHelper textInput attrs textOptions =
882 -- when things are off by a pixel or two.
866 -- when things are off by a pixel or two.
883 -- (or at least when the browser *thinks* it's off by a pixel or two)
867 -- (or at least when the browser *thinks* it's off by a pixel or two)
884 Just
868 Just
885− { top = max 0 (floor (t - 3))
869+ { top = max 0 (floor (toFloat t - 3))
886− , right = max 0 (floor (r - 3))
870+ , right = max 0 (floor (toFloat r - 3))
887− , bottom = max 0 (floor (b - 3))
871+ , bottom = max 0 (floor (toFloat b - 3))
888− , left = max 0 (floor (l - 3))
872+ , left = max 0 (floor (toFloat l - 3))
889 }
873 }
890
874
891 _ ->
875 _ ->
@@ -1328,36 +1312,23 @@ redistributeOver isMultiline stacked attr els =
1328 Element.htmlAttribute
1312 Element.htmlAttribute
1329 (Html.Attributes.style
1313 (Html.Attributes.style
1330 "height"
1314 "height"
1331− ("calc(1.0em + " ++ String.fromFloat (2 * min t b) ++ "px)")
1315+ ("calc(1.0em + " ++ String.fromInt (2 * min t b) ++ "px)")
1332 )
1316 )
1333
1317
1334 newLineHeight =
1318 newLineHeight =
1335 Element.htmlAttribute
1319 Element.htmlAttribute
1336 (Html.Attributes.style
1320 (Html.Attributes.style
1337 "line-height"
1321 "line-height"
1338− ("calc(1.0em + " ++ String.fromFloat (2 * min t b) ++ "px)")
1322+ ("calc(1.0em + " ++ String.fromInt (2 * min t b) ++ "px)")
1339 )
1323 )
1340
1324
1341− newTop =
1342− t - min t b
1343−
1344− newBottom =
1345− b - min t b
1346−
1347 reducedVerticalPadding =
1325 reducedVerticalPadding =
1348− Internal.StyleClass Flag.padding
1326+ Element.paddingEach
1349− (Internal.PaddingStyle
1327+ { top = t - min t b
1350− (Internal.paddingNameFloat
1328+ , right = r
1351− newTop
1329+ , bottom = b - min t b
1352− r
1330+ , left = l
1353− newBottom
1331+ }
1354− l
1355− )
1356− newTop
1357− r
1358− newBottom
1359− l
1360− )
1361 in
1332 in
1362 { els
1333 { els
1363 | parent = reducedVerticalPadding :: els.parent
1334 | parent = reducedVerticalPadding :: els.parent
@@ -1565,8 +1536,6 @@ email =
1565
1536
1566By default it will have a minimum height of one line and resize based on it's contents.
1537By default it will have a minimum height of one line and resize based on it's contents.
1567
1538
1568−Use `Element.spacing` to change its line-height.
1569−
1570-}
1539-}
1571multiline :
1540multiline :
1572 List (Attribute msg)
1541 List (Attribute msg)
@@ -1628,28 +1597,28 @@ applyLabel attrs label input =
1628 Internal.element
1597 Internal.element
1629 Internal.asColumn
1598 Internal.asColumn
1630 (Internal.NodeName "label")
1599 (Internal.NodeName "label")
1631− (Internal.htmlClass classes.inputLabel :: attrs)
1600+ attrs
1632 (Internal.Unkeyed [ labelElement, input ])
1601 (Internal.Unkeyed [ labelElement, input ])
1633
1602
1634 Below ->
1603 Below ->
1635 Internal.element
1604 Internal.element
1636 Internal.asColumn
1605 Internal.asColumn
1637 (Internal.NodeName "label")
1606 (Internal.NodeName "label")
1638− (Internal.htmlClass classes.inputLabel :: attrs)
1607+ attrs
1639 (Internal.Unkeyed [ input, labelElement ])
1608 (Internal.Unkeyed [ input, labelElement ])
1640
1609
1641 OnRight ->
1610 OnRight ->
1642 Internal.element
1611 Internal.element
1643 Internal.asRow
1612 Internal.asRow
1644 (Internal.NodeName "label")
1613 (Internal.NodeName "label")
1645− (Internal.htmlClass classes.inputLabel :: attrs)
1614+ attrs
1646 (Internal.Unkeyed [ input, labelElement ])
1615 (Internal.Unkeyed [ input, labelElement ])
1647
1616
1648 OnLeft ->
1617 OnLeft ->
1649 Internal.element
1618 Internal.element
1650 Internal.asRow
1619 Internal.asRow
1651 (Internal.NodeName "label")
1620 (Internal.NodeName "label")
1652− (Internal.htmlClass classes.inputLabel :: attrs)
1621+ attrs
1653 (Internal.Unkeyed [ labelElement, input ])
1622 (Internal.Unkeyed [ labelElement, input ])
1654
1623
1655
1624
@@ -2105,11 +2074,7 @@ onKeyLookup lookup =
2105 Json.field "key" Json.string
2074 Json.field "key" Json.string
2106 |> Json.andThen decode
2075 |> Json.andThen decode
2107 in
2076 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 <|
2077+ Internal.Attr <| Html.Events.on "keyup" isKey
2111− Html.Events.preventDefaultOn "keydown"
2112− (Json.map (\fired -> ( fired, True )) isKey)
2113
2078
2114
2079
2115{-| -}
2080{-| -}
@@ -2205,8 +2170,7 @@ defaultCheckbox : Bool -> Element msg
2205defaultCheckbox checked =
2170defaultCheckbox checked =
2206 Element.el
2171 Element.el
2207 [ Internal.htmlClass "focusable"
2172 [ Internal.htmlClass "focusable"
2208− , Element.width
2173+ , Element.width (Element.px 14)
2209− (Element.px 14)
2210 , Element.height (Element.px 14)
2174 , Element.height (Element.px 14)
2211 , Font.color white
2175 , Font.color white
2212 , Element.centerY
2176 , Element.centerY
@@ -2242,8 +2206,9 @@ defaultCheckbox checked =
2242
2206
2243 else
2207 else
2244 1
2208 1
2245− , Element.inFront
2209+ ]
2210+ (if checked then
2246− (Element.el
2211+ Element.el
2247 [ Border.color white
2212 [ Border.color white
2248 , Element.height (Element.px 6)
2213 , Element.height (Element.px 6)
2249 , Element.width (Element.px 9)
2214 , Element.width (Element.px 9)
@@ -2251,7 +2216,6 @@ defaultCheckbox checked =
2251 , Element.centerX
2216 , Element.centerX
2252 , Element.centerY
2217 , Element.centerY
2253 , Element.moveUp 1
2218 , Element.moveUp 1
2254− , Element.transparent (not checked)
2255 , Border.widthEach
2219 , Border.widthEach
2256 { top = 0
2220 { top = 0
2257 , left = 2
2221 , left = 2
@@ -2260,6 +2224,7 @@ defaultCheckbox checked =
2260 }
2224 }
2261 ]
2225 ]
2262 Element.none
2226 Element.none
2263− )
2227+
2264− ]
2228+ else
2265− Element.none
2229+ Element.none
2230+ )
src/Element/Region.elm+1−5
@@ -101,11 +101,7 @@ announce =
101 Internal.Describe LivePolite
101 Internal.Describe LivePolite
102
102
103
103
104−{-| Adds an `aria-label`, which is used by accessibility software to identity otherwise unlabeled elements.
105−
106−A common use for this would be to label buttons that only have an icon.
107−
108−-}
104+{-| -}
109description : String -> Attribute msg
105description : String -> Attribute msg
110description =
106description =
111 Internal.Describe << Internal.Label
107 Internal.Describe << Internal.Label
src/Internal/Model.elm+32−30
@@ -79,7 +79,6 @@ module Internal.Model exposing
79 , onlyStyles
79 , onlyStyles
80 , optionsToRecord
80 , optionsToRecord
81 , paddingName
81 , paddingName
82− , paddingNameFloat
83 , pageClass
82 , pageClass
84 , paragraphClass
83 , paragraphClass
85 , reduceRecursive
84 , reduceRecursive
@@ -174,7 +173,7 @@ type Style
174 | Colored String String Color
173 | Colored String String Color
175 | SpacingStyle String Int Int
174 | SpacingStyle String Int Int
176 | BorderWidth String Int Int Int Int
175 | BorderWidth String Int Int Int Int
177− | PaddingStyle String Float Float Float Float
176+ | PaddingStyle String Int Int Int Int
178 | GridTemplateStyle
177 | GridTemplateStyle
179 { spacing : ( Length, Length )
178 { spacing : ( Length, Length )
180 , columns : List Length
179 , columns : List Length
@@ -1478,9 +1477,7 @@ renderHeight h =
1478 Single
1477 Single
1479 cls
1478 cls
1480 "min-height"
1479 "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")
1484
1481
1485 ( newFlag, newAttrs, newStyle ) =
1482 ( newFlag, newAttrs, newStyle ) =
1486 renderHeight len
1483 renderHeight len
@@ -1948,7 +1945,7 @@ type Spacing
1948
1945
1949
1946
1950type Padding
1947type Padding
1951− = Padding String Float Float Float Float
1948+ = Padding String Int Int Int Int
1952
1949
1953
1950
1954extractSpacingAndPadding : List (Attribute aligned msg) -> ( Maybe Padding, Maybe Spacing )
1951extractSpacingAndPadding : List (Attribute aligned msg) -> ( Maybe Padding, Maybe Spacing )
@@ -2244,11 +2241,7 @@ renderFocusStyle focus =
2244 , Just <| Property "outline" "none"
2241 , Just <| Property "outline" "none"
2245 ]
2242 ]
2246 )
2243 )
2247− , Style
2248− ((Internal.Style.dot classes.any ++ ":focus .focusable, ")
2244+ , Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")
2249− ++ (Internal.Style.dot classes.any ++ ".focusable:focus, ")
2250− ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")
2251− )
2252 (List.filterMap identity
2245 (List.filterMap identity
2253 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
2246 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
2254 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
2247 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
@@ -2649,14 +2642,34 @@ renderStyle options maybePseudo selector props =
2649 renderedProps =
2642 renderedProps =
2650 List.foldl (renderProps False) "" props
2643 List.foldl (renderProps False) "" props
2651 in
2644 in
2645+ [ selector
2646+ ++ "-fs:focus {"
2652− [ selector ++ "-fs:focus {" ++ renderedProps ++ "\n}"
2647+ ++ renderedProps
2648+ ++ "\n}"
2649+ , "."
2653− , ("." ++ classes.any ++ ":focus " ++ selector ++ "-fs {")
2650+ ++ classes.any
2651+ ++ ":focus ~ "
2652+ ++ selector
2653+ ++ "-fs:not(.focus) {"
2654 ++ renderedProps
2654 ++ renderedProps
2655 ++ "\n}"
2655 ++ "\n}"
2656+ , "."
2657+ ++ classes.any
2658+ ++ ":focus "
2656− , (selector ++ "-fs:focus-within {")
2659+ ++ selector
2660+ ++ "-fs {"
2657 ++ renderedProps
2661 ++ renderedProps
2658 ++ "\n}"
2662 ++ "\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 {"
2660 ++ renderedProps
2673 ++ renderedProps
2661 ++ "\n}"
2674 ++ "\n}"
2662 ]
2675 ]
@@ -2863,13 +2876,13 @@ renderStyleRule options rule maybePseudo =
2863 maybePseudo
2876 maybePseudo
2864 class
2877 class
2865 [ Property "padding"
2878 [ Property "padding"
2866− (String.fromFloat top
2879+ (String.fromInt top
2867 ++ "px "
2880 ++ "px "
2868− ++ String.fromFloat right
2881+ ++ String.fromInt right
2869 ++ "px "
2882 ++ "px "
2870− ++ String.fromFloat bottom
2883+ ++ String.fromInt bottom
2871 ++ "px "
2884 ++ "px "
2872− ++ String.fromFloat left
2885+ ++ String.fromInt left
2873 ++ "px"
2886 ++ "px"
2874 )
2887 )
2875 ]
2888 ]
@@ -3199,17 +3212,6 @@ paddingName top right bottom left =
3199 ++ String.fromInt left
3212 ++ String.fromInt left
3200
3213
3201
3214
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−
3213getStyleName : Style -> String
3215getStyleName : Style -> String
3214getStyleName style =
3216getStyleName style =
3215 case style of
3217 case style of
src/Internal/Style.elm+16−63
@@ -10,7 +10,6 @@ type Class
10type Rule
10type Rule
11 = Prop String String
11 = Prop String String
12 | Child String (List Rule)
12 | Child String (List Rule)
13− | AllChildren String (List Rule)
14 | Supports ( String, String ) (List ( String, String ))
13 | Supports ( String, String ) (List ( String, String ))
15 | Descriptor String (List Rule)
14 | Descriptor String (List Rule)
16 | Adjacent String (List Rule)
15 | Adjacent String (List Rule)
@@ -257,7 +256,6 @@ classes =
257 , inputMultilineParent = "imlp"
256 , inputMultilineParent = "imlp"
258 , inputMultilineFiller = "imlf"
257 , inputMultilineFiller = "imlf"
259 , inputMultilineWrapper = "implw"
258 , inputMultilineWrapper = "implw"
260− , inputLabel = "lbl"
261
259
262 -- link
260 -- link
263 , link = "lnk"
261 , link = "lnk"
@@ -562,15 +560,6 @@ renderRules (Intermediate parent) rulesToRender =
562 :: rendered.others
560 :: rendered.others
563 }
561 }
564
562
565− AllChildren child childRules ->
566− { rendered
567− | others =
568− renderRules
569− (emptyIntermediate (parent.selector ++ " " ++ child) "")
570− childRules
571− :: rendered.others
572− }
573−
574 Descriptor descriptor descriptorRules ->
563 Descriptor descriptor descriptorRules ->
575 { rendered
564 { rendered
576 | others =
565 | others =
@@ -961,18 +950,6 @@ baseSheet =
961 ]
950 ]
962 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)
951 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)
963 [ Prop "display" "block"
952 [ 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− ]
976 ]
953 ]
977 , Class (dot classes.any ++ ":focus")
954 , Class (dot classes.any ++ ":focus")
978 [ Prop "outline" "none"
955 [ Prop "outline" "none"
@@ -995,7 +972,6 @@ baseSheet =
995 , Child (dot classes.inFront)
972 , Child (dot classes.inFront)
996 [ Descriptor (dot classes.nearby)
973 [ Descriptor (dot classes.nearby)
997 [ Prop "position" "fixed"
974 [ Prop "position" "fixed"
998− , Prop "z-index" "20"
999 ]
975 ]
1000 ]
976 ]
1001 ]
977 ]
@@ -1244,7 +1220,6 @@ baseSheet =
1244 -- If it's 1, it bumps up to something like 1.2
1220 -- If it's 1, it bumps up to something like 1.2
1245 [ Prop "line-height" "1.05"
1221 [ Prop "line-height" "1.05"
1246 , Prop "background" "transparent"
1222 , Prop "background" "transparent"
1247− , Prop "text-align" "inherit"
1248 ]
1223 ]
1249 , Descriptor (dot classes.single)
1224 , Descriptor (dot classes.single)
1250 elDescription
1225 elDescription
@@ -1371,28 +1346,18 @@ baseSheet =
1371 , Descriptor (dot classes.spaceEvenly)
1346 , Descriptor (dot classes.spaceEvenly)
1372 [ Prop "justify-content" "space-between"
1347 [ Prop "justify-content" "space-between"
1373 ]
1348 ]
1374− , Descriptor (dot classes.inputLabel)
1375− [ Prop "align-items" "baseline"
1376− ]
1377 ]
1349 ]
1378 , Descriptor (dot classes.column)
1350 , Descriptor (dot classes.column)
1379 [ Prop "display" "flex"
1351 [ Prop "display" "flex"
1380 , Prop "flex-direction" "column"
1352 , Prop "flex-direction" "column"
1381 , Child (dot classes.any)
1353 , Child (dot classes.any)
1382− -- *Note* - While rows have flex-basis 0%,
1383− -- which allows for the children of a row to default to their content size
1384− -- This apparently is a different story for columns.
1385− -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,
1386− -- 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"
1354+ [ Prop "flex-basis" "0%"
1392− , Prop "min-height" "min-content"
1393 , Descriptor (dot classes.heightExact)
1355 , Descriptor (dot classes.heightExact)
1394 [ Prop "flex-basis" "auto"
1356 [ Prop "flex-basis" "auto"
1395 ]
1357 ]
1358+ , Descriptor (dot classes.column)
1359+ [ Prop "flex-basis" "auto"
1360+ ]
1396 ]
1361 ]
1397 , Child (dot classes.heightFill)
1362 , Child (dot classes.heightFill)
1398 [ Prop "flex-grow" "100000"
1363 [ Prop "flex-grow" "100000"
@@ -1596,7 +1561,7 @@ baseSheet =
1596 )
1561 )
1597 ]
1562 ]
1598 , Descriptor (dot classes.inputMultiline)
1563 , Descriptor (dot classes.inputMultiline)
1599− [ Prop "white-space" "pre-wrap !important"
1564+ [ Prop "white-space" "pre-wrap"
1600 , Prop "height" "100%"
1565 , Prop "height" "100%"
1601 , Prop "width" "100%"
1566 , Prop "width" "100%"
1602 , Prop "background-color" "transparent"
1567 , Prop "background-color" "transparent"
@@ -1616,47 +1581,29 @@ baseSheet =
1616 [ Prop "flex-basis" "auto" ]
1581 [ Prop "flex-basis" "auto" ]
1617 ]
1582 ]
1618 , Descriptor (dot classes.inputMultilineParent)
1583 , Descriptor (dot classes.inputMultilineParent)
1619− [ Prop "white-space" "pre-wrap !important"
1584+ [ Prop "white-space" "pre-wrap"
1620 , Prop "cursor" "text"
1585 , Prop "cursor" "text"
1621 , Child (dot classes.inputMultilineFiller)
1586 , Child (dot classes.inputMultilineFiller)
1622− [ Prop "white-space" "pre-wrap !important"
1587+ [ Prop "white-space" "pre-wrap"
1623 , Prop "color" "transparent"
1588 , Prop "color" "transparent"
1624 ]
1589 ]
1625 ]
1590 ]
1626 , Descriptor (dot classes.paragraph)
1591 , Descriptor (dot classes.paragraph)
1627 [ Prop "display" "block"
1592 [ Prop "display" "block"
1628 , Prop "white-space" "normal"
1593 , Prop "white-space" "normal"
1629− , Prop "overflow-wrap" "break-word"
1630 , Descriptor (dot classes.hasBehind)
1594 , Descriptor (dot classes.hasBehind)
1631 [ Prop "z-index" "0"
1595 [ Prop "z-index" "0"
1632 , Child (dot classes.behind)
1596 , Child (dot classes.behind)
1633 [ Prop "z-index" "-1"
1597 [ Prop "z-index" "-1"
1634 ]
1598 ]
1635 ]
1599 ]
1636− , AllChildren (dot classes.text)
1600+ , Child (dot classes.text)
1637 [ Prop "display" "inline"
1601 [ Prop "display" "inline"
1638 , Prop "white-space" "normal"
1602 , Prop "white-space" "normal"
1639 ]
1603 ]
1640− , AllChildren (dot classes.paragraph)
1641− [ Prop "display" "inline"
1642− , Descriptor "::after"
1643− [ Prop "content" "none"
1644− ]
1645− , Descriptor "::before"
1646− [ Prop "content" "none"
1647− ]
1648− ]
1649− , AllChildren (dot classes.single)
1604+ , Child (dot classes.single)
1650 [ Prop "display" "inline"
1605 [ Prop "display" "inline"
1651 , Prop "white-space" "normal"
1606 , Prop "white-space" "normal"
1652−
1653− -- Inline block allows the width of the item to be set
1654− -- but DOES NOT like wrapping text in a standard, normal, sane way.
1655− -- We're sorta counting that if an exact width has been set,
1656− -- people aren't expecting proper text wrapping for this element
1657− , Descriptor (dot classes.widthExact)
1658− [ Prop "display" "inline-block"
1659− ]
1660 , Descriptor (dot classes.inFront)
1607 , Descriptor (dot classes.inFront)
1661 [ Prop "display" "flex"
1608 [ Prop "display" "flex"
1662 ]
1609 ]
@@ -1679,9 +1626,15 @@ baseSheet =
1679 [ Prop "display" "inline"
1626 [ Prop "display" "inline"
1680 , Prop "white-space" "normal"
1627 , Prop "white-space" "normal"
1681 ]
1628 ]
1629+ , Child (dot classes.single)
1630+ [ Child (dot classes.text)
1631+ [ Prop "display" "inline"
1632+ , Prop "white-space" "normal"
1633+ ]
1634+ ]
1682 ]
1635 ]
1683 , Child (dot classes.row)
1636 , Child (dot classes.row)
1684− [ Prop "display" "inline"
1637+ [ Prop "display" "inline-flex"
1685 ]
1638 ]
1686 , Child (dot classes.column)
1639 , Child (dot classes.column)
1687 [ Prop "display" "inline-flex"
1640 [ Prop "display" "inline-flex"
tests-rendering/automation/build.jsdeleted−90
@@ -1,90 +0,0 @@
1−const fs = require("fs");
2−const path = require("path");
3−const compileToString = require("node-elm-compiler").compileToString;
4−
5−// {
6−// template: "./tests-rendering/automation/templates/gather-styles.html",
7−// target: "./tmp/test.html",
8−// elm: "src/Tests/Run.elm",
9−// replace:
10−// elmOptions: { cwd: "./tests-rendering" },
11−// }
12−
13−async function compile_and_embed(config) {
14− const elm_entry_module = fs.readFileSync(
15− path.join(config.elmOptions.cwd, config.elm),
16− "utf8"
17− );
18−
19− const module_name = elm_entry_module
20− .split(/[\r\n]+/)[0]
21− .match(/module ([A-Za-z0-9\.]+)/i)[1];
22−
23− // we embed the compiled js to avoid having to start a server to read the app.
24− await compileToString([config.elm], config.elmOptions).then(function (
25− compiled_elm_code
26− ) {
27− // console.log(compiled_elm_code);
28− const compiled = fs
29− .readFileSync(config.template, "utf8")
30− .replace(/~~_compiled_elm_code_~~/, () => compiled_elm_code)
31− .replace(/~~_module_name_~~/, () => module_name);
32−
33− fs.writeFileSync(config.target, compiled);
34− });
35−}
36−
37−async function compile_to_string(config) {
38− const elm_entry_module = fs.readFileSync(
39− path.join(config.elmOptions.cwd, config.elm),
40− "utf8"
41− );
42−
43− const module_name = elm_entry_module
44− .split(/[\r\n]+/)[0]
45− .match(/module ([A-Za-z0-9\.]+)/i)[1];
46−
47− const compiled = await compileToString([config.elm], config.elmOptions).then(
48− function (compiled_elm_code) {
49− return fs
50− .readFileSync(config.template, "utf8")
51− .replace(/~~_module_name_~~/g, () => module_name)
52− .replace(/~~_compiled_elm_code_~~/g, () => compiled_elm_code);
53− }
54− );
55− return compiled;
56−}
57−
58−async function get_module_name(config) {
59− const elm_entry_module = fs.readFileSync(
60− path.join(config.cwd, config.elm),
61− "utf8"
62− );
63−
64− const module_name = elm_entry_module
65− .split(/[\r\n]+/)[0]
66− .match(/module ([A-Za-z0-9\.]+)/i)[1];
67− return module_name;
68−}
69−
70−async function create_runner(config) {
71− const elm_entry_module = fs.readFileSync(config.elm, "utf8");
72−
73− let module_name = elm_entry_module
74− .split(/[\r\n]+/)[0]
75− .match(/module ([A-Za-z0-9\.]+)/i)[1];
76−
77− const module_name_sentence = module_name.replace(/([A-Z])/g, " $1");
78−
79− const runner = fs
80− .readFileSync(config.template, "utf8")
81− .replace(/~~_module_name_~~/g, () => module_name)
82− .replace(/~~_module_name_sentence_~~/g, () => module_name_sentence);
83− fs.writeFileSync(config.target, runner);
84−}
85−
86−exports.compile_and_embed = compile_and_embed;
87−
88−exports.create_runner = create_runner;
89−
90−exports.compile_to_string = compile_to_string;
tests-rendering/automation/run.js+16−11
@@ -1,3 +1,4 @@
1+const compileToString = require("node-elm-compiler").compileToString;
1const { Builder, By, Key, until } = require("selenium-webdriver");
2const { Builder, By, Key, until } = require("selenium-webdriver");
2const chrome = require("selenium-webdriver/chrome");
3const chrome = require("selenium-webdriver/chrome");
3const firefox = require("selenium-webdriver/firefox");
4const firefox = require("selenium-webdriver/firefox");
@@ -6,7 +7,6 @@ const program = require("commander");
6const path = require("path");
7const path = require("path");
7const chalk = require("chalk");
8const chalk = require("chalk");
8const childProcess = require("child_process");
9const childProcess = require("child_process");
9−const compile_and_embed = require("./build.js").compile_and_embed;
10
10
11program
11program
12 .option("-s, --sauce", "run tests on sauce labs")
12 .option("-s, --sauce", "run tests on sauce labs")
@@ -17,7 +17,6 @@ program
17 .option("--build [value]", "Set build number for sauce labs")
17 .option("--build [value]", "Set build number for sauce labs")
18 .option("--name [value]", "Set run name for sauce labs")
18 .option("--name [value]", "Set run name for sauce labs")
19 .option("--verbose", "Print out all test results")
19 .option("--verbose", "Print out all test results")
20− .option("--headless", "run tests without showing the browser")
21 .parse(process.argv);
20 .parse(process.argv);
22
21
23// 'Windows 10'
22// 'Windows 10'
@@ -103,6 +102,17 @@ function prepare_all_envs(config) {
103 return envs;
102 return envs;
104}
103}
105
104
105+async function compile_and_embed(config) {
106+ var template = fs.readFileSync(config.template);
107+ // we embed the compiled js to avoid having to start a server to read the app.
108+ await compileToString(config.elm, config.elmOptions).then(function (
109+ compiled_elm_code
110+ ) {
111+ const compiled = eval(`\`${template}\``);
112+ fs.writeFileSync(config.target, compiled);
113+ });
114+}
115+
106function prepare_sauce_driver(env) {
116function prepare_sauce_driver(env) {
107 const username = process.env.SAUCE_USERNAME;
117 const username = process.env.SAUCE_USERNAME;
108 const accessKey = process.env.SAUCE_ACCESS_KEY;
118 const accessKey = process.env.SAUCE_ACCESS_KEY;
@@ -127,13 +137,8 @@ function prepare_sauce_driver(env) {
127}
137}
128
138
129async function prepare_local_driver(env) {
139async function prepare_local_driver(env) {
130− const firefoxOptions = new firefox.Options();
140+ const firefoxOptions = new firefox.Options().headless();
131− const chromeOptions = new chrome.Options();
141+ const chromeOptions = new chrome.Options().headless();
132−
133− if (program.headless) {
134− firefoxOptions.headless();
135− chromeOptions.headless();
136− }
137
142
138 let driver = await new Builder()
143 let driver = await new Builder()
139 .forBrowser(env.browser)
144 .forBrowser(env.browser)
@@ -169,7 +174,7 @@ async function run_test(driver, url) {
169 await compile_and_embed({
174 await compile_and_embed({
170 template: "./tests-rendering/automation/templates/gather-styles.html",
175 template: "./tests-rendering/automation/templates/gather-styles.html",
171 target: "./tmp/test.html",
176 target: "./tmp/test.html",
172− elm: "src/Tests/All.elm",
177+ elm: ["src/Tests/Run.elm"],
173 elmOptions: { cwd: "./tests-rendering" },
178 elmOptions: { cwd: "./tests-rendering" },
174 });
179 });
175 console.log("Done compiling");
180 console.log("Done compiling");
@@ -282,7 +287,7 @@ function print_results(label, tests) {
282 }
287 }
283 failed = failed + 1;
288 failed = failed + 1;
284 console.log(" " + chalk.red("fail") + " ->");
289 console.log(" " + chalk.red("fail") + " ->");
285− console.log(" " + tests[i].results[j].description);
290+ console.log(" " + tests[i].results[j][1].description);
286 }
291 }
287 }
292 }
288 total_passed = total_passed + passed;
293 total_passed = total_passed + passed;
tests-rendering/automation/templates/Run.elmdeleted−14
@@ -1,14 +0,0 @@
1−module Tests.Run exposing (main)
2−
3−{-| _NOTE_ this is auto-generated! Notouchy!
4−-}
5−
6−import ~~_module_name_~~
7−import Testable.Runner
8−
9−
10−main : Testable.Runner.TestableProgram
11−main =
12− Testable.Runner.program
13− [ Testable.Runner.rename "~~_module_name_sentence_~~" ~~_module_name_~~.view
14− ]
tests-rendering/automation/templates/gather-styles.html+69−147
@@ -2,156 +2,22 @@
2<html>
2<html>
3 <head>
3 <head>
4 <meta charset="UTF-8" />
4 <meta charset="UTF-8" />
5− <title>Elm UI Rendering Test</title>
5+ <title>Rendering Benchmark Viewer</title>
6 <script>
6 <script>
7− ~~_compiled_elm_code_~~
7+ ${compiled_elm_code}
8− </script>
9− <script>
10− // Helpers
11− // Calculations for canvas
12− var PIXEL_RATIO = (function () {
13− var ctx = document.createElement("canvas").getContext("2d"),
14− dpr = window.devicePixelRatio || 1,
15− bsr =
16− ctx.webkitBackingStorePixelRatio ||
17− ctx.mozBackingStorePixelRatio ||
18− ctx.msBackingStorePixelRatio ||
19− ctx.oBackingStorePixelRatio ||
20− ctx.backingStorePixelRatio ||
21− 1;
22−
23− return dpr / bsr;
24− })();
25−
26− function createHiDPICanvas(w, h, id, ratio) {
27− if (!ratio) {
28− ratio = PIXEL_RATIO;
29− }
30− let can = document.getElementById(id);
31− can.width = w * ratio;
32− can.height = h * ratio;
33− can.style.width = w + "px";
34− can.style.height = h + "px";
35− can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
36− return can;
37− }
38−
39− function isVisible(id, bbox) {
40− var current = document.getElementById(id);
41− var result = 0;
42− if (current == document.elementFromPoint(bbox["left"], bbox["top"])) {
43− result++;
44− }
45− if (
46− current == document.elementFromPoint(bbox["left"], bbox["bottom"] - 1)
47− ) {
48− result++;
49− }
50− if (
51− current == document.elementFromPoint(bbox["right"] - 1, bbox["top"])
52− ) {
53− result++;
54− }
55− if (
56− current ==
57− document.elementFromPoint(bbox["right"] - 1, bbox["bottom"] - 1)
58− ) {
59− result++;
60− }
61−
62− if (result == 4) {
63− return true;
64− } else {
65− return false;
66− }
67− }
68−
69− function getStyle(element) {
70− var props = [];
71− var style = window.getComputedStyle(element);
72− for (var i = style.length; i--; ) {
73− var name = style.item(i);
74− var value = style.getPropertyValue(name);
75− props.push([name, value]);
76− }
77− return props;
78− }
79−
80− function getBoundingBox(element) {
81− var bbox = element.getBoundingClientRect();
82− var style = window.getComputedStyle(element, null);
83−
84− var padding = {
85− top: parseFloat(style.getPropertyValue("padding-top")),
86− bottom: parseFloat(style.getPropertyValue("padding-bottom")),
87− left: parseFloat(style.getPropertyValue("padding-left")),
88− right: parseFloat(style.getPropertyValue("padding-right")),
89− };
90−
91− return {
92− top: bbox.top,
93− bottom: bbox.bottom,
94− left: bbox.left,
95− right: bbox.right,
96− width: bbox.width,
97− height: bbox.height,
98− padding: padding,
99− };
100− }
101− function getTextMetrics(element) {
102− // Given our element, we want to return the text metrics on the text within.
103− // If it is an element we want to measure:
104− // we want to get the font family
105− // and the font size.
106− // We're going to presume that the font is loaded.
107− let childrenTextMetrics = [];
108− for (i = 0; i < element.children.length; i++) {
109− if (element.children[i].classList.contains("t")) {
110− let style = window.getComputedStyle(element, null);
111− let fontSize = style.getPropertyValue("font-size");
112− let fontFamily = style.getPropertyValue("font-family");
113− let ctx = canvas.getContext("2d");
114−
115− ctx.font = fontSize + " " + fontFamily; //"16px Roboto";
116− let text = ctx.measureText(element.children[i].innerText);
117−
118− childrenTextMetrics.push({
119− actualBoundingBoxAscent: text.actualBoundingBoxAscent,
120− actualBoundingBoxDescent: text.actualBoundingBoxDescent,
121− actualBoundingBoxLeft: text.actualBoundingBoxLeft,
122− actualBoundingBoxRight: text.actualBoundingBoxRight,
123− width: text.width,
124− });
125− }
126− }
127− return childrenTextMetrics;
128− }
129 </script>
8 </script>
130 </head>
9 </head>
131 <style></style>
10 <style></style>
132− <body id="root">
11+ <body id="root"></body>
133− <body id="root">
134− <div id="elm-home"></div>
135− <canvas id="canvas"></canvas>
136− </body>
137− </body>
138
12
139 <script type="text/javascript">
13 <script type="text/javascript">
140− // Starting Elm App,
141− var app = Elm.~~_module_name_~~.init({
14+ var app = Elm.Tests.Run.init();
142− node: document.getElementById("elm-home"),
143− });
144−
145− // create a canvas for text measurements
146− let canvas = createHiDPICanvas(200, 100, "canvas");
147
15
148 var test_results = "waiting..";
16 var test_results = "waiting..";
149
17
150 app.ports.report.subscribe(function (results) {
18 app.ports.report.subscribe(function (results) {
19+ // these are extracted by the script that runs the browser automation.
151 test_results = results;
20 test_results = results;
152− // NOTE - this is the signal to the automation that it is cool to retrieve results now
153− // So don't remove this like you did before :D
154− document.title = "tests finished";
155 });
21 });
156
22
157 app.ports.analyze.subscribe(function (ids) {
23 app.ports.analyze.subscribe(function (ids) {
@@ -166,20 +32,76 @@
166 }
32 }
167 var style = getStyle(element);
33 var style = getStyle(element);
168 var bbox = getBoundingBox(element);
34 var bbox = getBoundingBox(element);
169− var metrics = getTextMetrics(element);
170
35
171 var visible = isVisible(id, bbox);
36 var visible = isVisible(id, bbox);
172
37
173− var result = {
174− textMetrics: metrics,
175− bbox: bbox,
176− style: style,
177− id: id,
178− isVisible: visible,
38+ var result = { bbox: bbox, style: style, id: id, isVisible: visible };
179− };
180 results.push(result);
39 results.push(result);
181 }
40 }
182 app.ports.styles.send(results);
41 app.ports.styles.send(results);
183 });
42 });
43+
44+ function isVisible(id, bbox) {
45+ var current = document.getElementById(id);
46+ var result = 0;
47+ if (current == document.elementFromPoint(bbox["left"], bbox["top"])) {
48+ result++;
49+ }
50+ if (
51+ current == document.elementFromPoint(bbox["left"], bbox["bottom"] - 1)
52+ ) {
53+ result++;
54+ }
55+ if (
56+ current == document.elementFromPoint(bbox["right"] - 1, bbox["top"])
57+ ) {
58+ result++;
59+ }
60+ if (
61+ current ==
62+ document.elementFromPoint(bbox["right"] - 1, bbox["bottom"] - 1)
63+ ) {
64+ result++;
65+ }
66+
67+ if (result == 4) {
68+ return true;
69+ } else {
70+ return false;
71+ }
72+ }
73+
74+ function getStyle(element) {
75+ var props = [];
76+ var style = window.getComputedStyle(element);
77+ for (var i = style.length; i--; ) {
78+ var name = style.item(i);
79+ var value = style.getPropertyValue(name);
80+ props.push([name, value]);
81+ }
82+ return props;
83+ }
84+
85+ function getBoundingBox(element) {
86+ var bbox = element.getBoundingClientRect();
87+ var style = window.getComputedStyle(element, null);
88+
89+ var padding = {
90+ top: parseFloat(style.getPropertyValue("padding-top")),
91+ bottom: parseFloat(style.getPropertyValue("padding-bottom")),
92+ left: parseFloat(style.getPropertyValue("padding-left")),
93+ right: parseFloat(style.getPropertyValue("padding-right")),
94+ };
95+
96+ return {
97+ top: bbox.top,
98+ bottom: bbox.bottom,
99+ left: bbox.left,
100+ right: bbox.right,
101+ width: bbox.width,
102+ height: bbox.height,
103+ padding: padding,
104+ };
105+ }
184 </script>
106 </script>
185</html>
107</html>
tests-rendering/automation/view.jsdeleted−73
@@ -1,73 +0,0 @@
1−const fs = require("fs");
2−const program = require("commander");
3−const path = require("path");
4−const chalk = require("chalk");
5−const childProcess = require("child_process");
6−const build = require("./build.js");
7−const chokidar = require("chokidar");
8−const http = require("http");
9−
10−var filepath = null;
11−var test_filepath = null;
12−program
13− .option("--all", "run all the tests")
14− .option("--debug", "run with debug on")
15− .arguments("<filepath>")
16− .action(function (p) {
17− test_filepath = path.join("./tests-rendering/cases/open", p);
18− })
19− .parse(process.argv);
20−
21−(async () => {
22− if (test_filepath && test_filepath == null && !program.run) {
23− console.log("Open Cases");
24− console.log("");
25− fs.readdirSync("./tests-rendering/cases/open").forEach((file) => {
26− if (file.endsWith("elm")) {
27− console.log(" " + file);
28− }
29− });
30− console.log("");
31− return;
32− }
33−
34− if (program.all) {
35− filepath = "./src/Tests/All.elm";
36− } else {
37− filepath = "src/Tests/Run.elm";
38− build.create_runner({
39− elm: test_filepath,
40− template: "./tests-rendering/automation/templates/Run.elm",
41− target: "./tests-rendering/src/Tests/Run.elm",
42− });
43− }
44−
45− //
46− // Compile and serve
47−
48− let content = await build.compile_to_string({
49− template: "./tests-rendering/automation/templates/gather-styles.html",
50− elm: filepath,
51− elmOptions: { cwd: "./tests-rendering", debug: program.debug },
52− });
53−
54− console.log("Finished compiling");
55− // console.log(content);
56−
57− chokidar.watch("./tests-rendering/*.elm").on("all", (event, path) => {
58− console.log("Changes detected, refresh!");
59− content = build.compile_to_string({
60− template: "./tests-rendering/automation/templates/gather-styles.html",
61− elm: filepath,
62− elmOptions: { cwd: "./tests-rendering", debug: program.debug },
63− });
64− });
65− console.log("Serving on http://localhost:8080");
66− http
67− .createServer(function (req, res) {
68− res.writeHead(200, { "Content-Type": "text/html" });
69− res.write(content);
70− res.end();
71− })
72− .listen(8080);
73−})();
tests-rendering/cases/resolved/Input/FocusStylePrecedingElements.elm → tests-rendering/cases/open/FocusStylePrecedingElements.elmrenamed+3−3
@@ -22,9 +22,9 @@ Disabling it produces the correct focus behaviour.
22
22
23-}
23-}
24
24
25−import Element exposing (..)
25+import Testable.Element exposing (..)
26−import Element.Font as Font
26+import Testable.Element.Font as Font
27−import Element.Input as Input
27+import Testable.Element.Input as Input
28
28
29
29
30main =
30main =
tests-rendering/cases/open/InFrontSize.elm+2−2
@@ -1,4 +1,4 @@
1−module InFrontSize exposing (view)
1+module InFrontSize exposing (main)
2
2
3{-|
3{-|
4
4
@@ -16,7 +16,7 @@ import Testable.Element.Background as Background
16import Testable.Element.Border as Border
16import Testable.Element.Border as Border
17
17
18
18
19−view =
19+main =
20 layout []
20 layout []
21 (el
21 (el
22 [ width (px 100)
22 [ width (px 100)
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/Columns/DoNotCollapseBelow0.elm → tests-rendering/cases/open/SafariBugIssue147.elmrenamed+3−13
@@ -1,4 +1,4 @@
1−module DoNotCollapseBelow0 exposing (main)
1+module SafariBugIssue147 exposing (main)
2
2
3{-|
3{-|
4
4
@@ -25,24 +25,14 @@ I was able to pinpoint the issue using git bisect to this fd08f1a commit, which
25-}
25-}
26
26
27import Browser
27import Browser
28−import Element exposing (column, el, fill, height, layout, scrollbarY, text)
29import Html exposing (Html)
28import Html exposing (Html)
29+import Testable.Element exposing (..)
30
30
31
31
32−view : () -> Html ()
32+main =
33−view () =
34 layout [ height fill ] <|
33 layout [ height fill ] <|
35 column
34 column
36 [ height fill ]
35 [ height fill ]
37 [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
36 [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
38 , text "Text below the el above"
37 , text "Text below the el above"
39 ]
38 ]
40−
41−
42−main : Program () () ()
43−main =
44− Browser.sandbox
45− { init = ()
46− , view = view
47− , update = \() () -> ()
48− }
tests-rendering/cases/open/Scrollbar2.elm+1−1
@@ -1,4 +1,4 @@
1−module Scrollbar2 exposing (main, myElement, sidebar)
1+module Main exposing (main, myElement, sidebar)
2
2
3import Element exposing (Element, alignRight, centerY, column, el, fill, height, padding, px, rgb255, row, spacing, text, width)
3import Element exposing (Element, alignRight, centerY, column, el, fill, height, padding, px, rgb255, row, spacing, text, width)
4import Element.Background as Background
4import Element.Background as Background
tests-rendering/cases/open/Scrollbars.elm+1−1
@@ -1,4 +1,4 @@
1−module Scrollbars exposing (main)
1+module Main exposing (main)
2
2
3import Element exposing (..)
3import Element exposing (..)
4import Element.Background as Background
4import Element.Background as Background
tests-rendering/cases/open/StackedScrollingColumnsHeight.elmdeleted−42
@@ -1,42 +0,0 @@
1−module StackedScrollingColumnsHeight exposing (..)
2−
3−{-|
4−
5−
6−# Column height can be set incorrectly for two stacked columns with scrollbarY
7−
8−<https://github.com/mdgriffith/elm-ui/issues/197>
9−
10−Both red and green columns should always have equal height.
11−
12−Currently, the height is set incorrectly if only one column has enough content to scroll.
13−
14−Both columns are correctly set to the same height only if neither has enough content
15−to scroll or if both have enough content to scroll.
16−
17−-}
18−
19−import Testable.Element exposing (..)
20−import Testable.Element.Background as Background
21−
22−
23−view =
24− layout [ height fill ] <|
25− column [ height fill ]
26− [ column
27− [ height fill
28− , scrollbarY
29− , Background.color (rgb 0 255 0)
30− ]
31− <|
32− List.map (\_ -> text "Hello") <|
33− List.range 1 20
34− , column
35− [ height fill
36− , scrollbarY
37− , Background.color (rgb 255 0 0)
38− ]
39− <|
40− List.map (\_ -> text "Hello") <|
41− List.range 1 3
42− ]
tests-rendering/cases/open/WeirdCentering.elm+6−14
@@ -1,27 +1,19 @@
1−module WeirdCentering exposing (view)
1+module WeirdCentering exposing (main)
2
2
3+import Html exposing (Html)
3import Testable.Element exposing (..)
4import Testable.Element exposing (..)
4import Testable.Element.Background as Background
5import Testable.Element.Background as Background
5
6
6
7
7−view =
8+main =
8 layout [] <|
9 layout [] <|
9 column []
10 column []
10 [ text "Example with centerX:"
11 [ text "Example with centerX:"
11 , row
12 , row
12 [ width fill ]
13 [ width fill ]
13− [ row
14− [ centerX
15− , Background.color <| rgb 0 1 0
14+ [ row [ centerX, Background.color <| rgb 0 1 0 ]
16− ]
17− [ paragraph
18− [ width shrink
19− ]
20− [ text "Hello world" ]
15+ [ paragraph [ width shrink ] [ text "Hello world" ]
21− , paragraph
22− [ width shrink
23− ]
24− [ text "Hello world" ]
16+ , paragraph [ width shrink ] [ text "Hello world" ]
25 ]
17 ]
26 ]
18 ]
27 , text "Example without centerX:"
19 , text "Example without centerX:"
tests-rendering/cases/resolved/ClippedElInFixedWidthColumn.elmdeleted−31
@@ -1,31 +0,0 @@
1−module ClippedElInFixedWidthColumn exposing (..)
2−
3−{-| el [ clip ] inside a fixed-width column rendered with 0px height in Chrome & Firefox
4−
5−<https://github.com/mdgriffith/elm-ui/issues/191>
6−
7−If an el [ clip ] is placed inside a fixed-width column which is inside a layout
8−with [ width fill, height fill ], then the element is rendered with 0px height in Chrome:
9−
10−layout [ width fill, height fill ] <|
11−column [ width <| px 300 ][ el [ clip ] <| text "The quick brown fox" ]
12−
13−In Firefox, the element is initially rendered correctly, but is resized to 0px height
14−on viewport resize. In Safari, the element is displayed correctly.
15−
16−The above seems to be the minimal reproduction:
17−
18−Removing attributes from layout or from column or from el makes the issue disappear.
19−Replacing column [ width <| px 300 ] with column [ width fill ] makes the issue disappear.
20−Replacing column with el also makes the issue disappear.
21−Adding htmlAttribute <| Attr.style "flex-basis" "auto" to clipped el is a workaround.
22−
23−-}
24−
25−import Testable.Element exposing (..)
26−
27−
28−view =
29− layout [ width fill, height fill ] <|
30− column [ width <| px 300 ]
31− [ el [ clip ] <| text "The quick brown fox" ]
tests-rendering/cases/resolved/ElInFixedHeightColumn.elmdeleted−41
@@ -1,41 +0,0 @@
1−module ElInFixedHeightColumn exposing (view)
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 Testable.Element exposing (..)
28−import Testable.Element.Border as Border
29−
30−
31−view =
32− layout [] <|
33− column
34− [ width fill
35− , height <| px 200
36− ]
37− [ el
38− []
39− <|
40− text "an element"
41− ]
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/NestedParagraphs.elmdeleted−165
@@ -1,165 +0,0 @@
1−module Layout.NestedParagraphs exposing (view)
2−
3−{-| Paragraph with children more than one level deep breaks flow
4−
5−<https://github.com/mdgriffith/elm-ui/issues/173>
6−
7−First of all, thanks for such a pleasant library to use! It's been awesome not having to use CSS.
8−
9−The problem I ran into is that paragraph only seems correctly flow text in children a single level deep. As an example, I made an Ellie demonstrating this with an el within a link within a paragraph:
10−
11−<https://ellie-app.com/7JcgLRNprF7a1>
12−
13−This might be a regression, as the resolved #50 and #103 seem to refer to the same problem.
14−
15−Expected behavior
16−Text should flow with no breaks in the paragraph.
17−
18−Versions
19−
20− OS: macOS
21− Browser: Firefox
22− Browser Version: 71.0
23− Elm Version: 0.19.1
24− Elm UI Version: 1.1.5
25−
26−-}
27−
28−import Testable.Element as Element exposing (..)
29−import Testable.Element.Font as Font
30−import Testable.Generator
31−
32−
33−view =
34− layout [] <|
35− column [ spacing 48 ]
36− [ paragraph []
37− [ text "This is a paragraph with a "
38− , el [ Font.bold ] <| text "child"
39− , text " of depth one."
40− ]
41− , paragraph []
42− [ text "This is a paragraph with a "
43− , link []
44− { label =
45− el [ Font.bold ]
46− (text Testable.Generator.lorem)
47− , url = "http://example.com"
48− }
49− , text " of depth two."
50− ]
51− , el [ Font.size 32 ] (text "Many nested els")
52− , paragraph []
53− [ text "This is a paragraph with a "
54− , link []
55− { label =
56− el [ Font.bold ]
57− (text Testable.Generator.lorem)
58− , url = "http://example.com"
59− }
60− , text " of depth two."
61− , el [] (el [] (el [] (text Testable.Generator.lorem)))
62− , el [] (el [] (el [] (el [] (text Testable.Generator.lorem))))
63− ]
64− , el [ Font.size 32 ] (text "NestedParas in els")
65− , paragraph []
66− [ text "This is a paragraph with a "
67− , link []
68− { label =
69− el [ Font.bold ]
70− (text Testable.Generator.lorem)
71− , url = "http://example.com"
72− }
73− , text " of depth two."
74− , el [] (el [] (el [] (text Testable.Generator.lorem)))
75− , el []
76− (paragraph []
77− [ el []
78− (el [] (text Testable.Generator.lorem))
79− ]
80− )
81− ]
82− , el [ Font.size 32 ] (text "Nested with link")
83− , paragraph []
84− [ text "This is a paragraph with a "
85− , link []
86− { label =
87− el [ Font.bold ] <|
88− text "child"
89− , url = "http://example.com"
90− }
91− , text " of depth two."
92− ]
93− , el [ Font.size 32 ] (text "Para with boxes")
94− , paragraph []
95− [ text Testable.Generator.short
96− , Testable.Generator.box
97− , text Testable.Generator.short
98−
99− -- , text Testable.Generator.lorem
100− , Testable.Generator.box
101− ]
102− , el [ Font.size 32 ] (text "Row with boxes")
103− , paragraph []
104− [ text Testable.Generator.short
105− , row [ spacing 25 ]
106− [ Testable.Generator.box
107− , text Testable.Generator.short
108− , Testable.Generator.box
109−
110− -- , text Testable.Generator.lorem
111− ]
112− , text Testable.Generator.short
113−
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−
136− -- , text Testable.Generator.lorem
137− , Testable.Generator.box
138− , paragraph []
139− [ text "This is a paragraph with a "
140− , el [ Font.bold ] <| text "child"
141− , text " of depth one."
142− ]
143− ]
144− , el [ Font.size 32 ] (text "Row with boxes")
145− , paragraph []
146− [ text Testable.Generator.short
147− , row []
148− [ Testable.Generator.box
149−
150− -- , text Testable.Generator.lorem
151− , Testable.Generator.box
152−
153− -- , text Testable.Generator.lorem
154− ]
155− , text Testable.Generator.short
156−
157− -- , text Testable.Generator.lorem
158− , Testable.Generator.box
159− , paragraph []
160− [ text "This is a paragraph with a "
161− , el [ Font.bold ] <| text "child"
162− , text " of depth one."
163− ]
164− ]
165− ]
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+24−21
@@ -1,25 +1,28 @@
1{
1{
2− "type": "application",
2+ "type": "application",
3− "source-directories": ["src", "../src", "cases/open", "cases/resolved"],
3+ "source-directories": [
4+ "src",
5+ "../src"
6+ ],
4− "elm-version": "0.19.1",
7+ "elm-version": "0.19.1",
5− "dependencies": {
8+ "dependencies": {
6− "direct": {
9+ "direct": {
7− "elm/browser": "1.0.2",
10+ "elm/browser": "1.0.2",
8− "elm/core": "1.0.0",
11+ "elm/core": "1.0.0",
9− "elm/html": "1.0.0",
12+ "elm/html": "1.0.0",
10− "elm/json": "1.0.0",
13+ "elm/json": "1.0.0",
11− "elm/parser": "1.1.0",
14+ "elm/parser": "1.1.0",
12− "elm/random": "1.0.0",
15+ "elm/random": "1.0.0",
13− "elm/time": "1.0.0",
16+ "elm/time": "1.0.0",
14− "elm/virtual-dom": "1.0.2",
17+ "elm/virtual-dom": "1.0.2",
15− "elm-explorations/test": "1.1.0"
18+ "elm-explorations/test": "1.1.0"
19+ },
20+ "indirect": {
21+ "elm/url": "1.0.0"
22+ }
16 },
23 },
24+ "test-dependencies": {
25+ "direct": {},
17− "indirect": {
26+ "indirect": {}
18− "elm/url": "1.0.0"
19 }
27 }
20− },
21− "test-dependencies": {
22− "direct": {},
23− "indirect": {}
24− }
25}
28}
tests-rendering/make.shnew file+2
@@ -0,0 +1,2 @@
1+
2+elm-live cases/open/WeirdCentering.elm --dir=view -- --output=view/elm.js --debug
tests-rendering/src/Testable.elm+51−202
@@ -1,9 +1,7 @@
1module Testable exposing
1module Testable exposing
2 ( Attr(..)
2 ( Attr(..)
3− , AttributeId(..)
4 , BoundingBox
3 , BoundingBox
5 , Element(..)
4 , Element(..)
6− , ElementType(..)
7 , Found
5 , Found
8 , LayoutContext(..)
6 , LayoutContext(..)
9 , LayoutExpectation(..)
7 , LayoutExpectation(..)
@@ -11,19 +9,13 @@ module Testable exposing
11 , Location(..)
9 , Location(..)
12 , Style
10 , Style
13 , Surroundings
11 , Surroundings
14− , TextMetrics
15 , compareFormattedColor
12 , compareFormattedColor
16− , elementTypeToString
17 , equal
13 , equal
18 , formatColor
14 , formatColor
19 , formatColorWithAlpha
15 , formatColorWithAlpha
20 , getIds
16 , getIds
21 , getSpacing
17 , getSpacing
22− , getSpacingFromAttributes
23− , lessThanOrEqual
24− , rounded
25 , runTests
18 , runTests
26− , textHeight
27 , toElement
19 , toElement
28 , toHtml
20 , toHtml
29 , todo
21 , todo
@@ -42,7 +34,6 @@ import Test exposing (Test)
42
34
43type Element msg
35type Element msg
44 = El (List (Attr msg)) (Element msg)
36 = El (List (Attr msg)) (Element msg)
45− | Link String (List (Attr msg)) (Element msg)
46 | Row (List (Attr msg)) (List (Element msg))
37 | Row (List (Attr msg)) (List (Element msg))
47 | Column (List (Attr msg)) (List (Element msg))
38 | Column (List (Attr msg)) (List (Element msg))
48 | TextColumn (List (Attr msg)) (List (Element msg))
39 | TextColumn (List (Attr msg)) (List (Element msg))
@@ -51,104 +42,24 @@ type Element msg
51 | Empty
42 | Empty
52
43
53
44
54−type ElementType
55− = ElType
56− | RowType
57− | ColumnType
58− | TextColumnType
59− | ParagraphType
60− | TextType
61− | EmptyType
62−
63−
64−elementTypeToString : ElementType -> String
65−elementTypeToString elem =
66− case elem of
67− ElType ->
68− "El"
69−
70− RowType ->
71− "Row"
72−
73− ColumnType ->
74− "Column"
75−
76− TextColumnType ->
77− "TextColumn"
78−
79− ParagraphType ->
80− "Paragraph"
81−
82− TextType ->
83− "Text"
84−
85− EmptyType ->
86− "Empty"
87−
88−
89−toElementType : Element msg -> ElementType
90−toElementType elem =
91− case elem of
92− El _ _ ->
93− ElType
94−
95− Link _ _ _ ->
96− ElType
97−
98− Row _ _ ->
99− RowType
100−
101− Column _ _ ->
102− ColumnType
103−
104− TextColumn _ _ ->
105− TextColumnType
106−
107− Paragraph _ _ ->
108− ParagraphType
109−
110− Text _ ->
111− TextType
112−
113− Empty ->
114− EmptyType
115−
116−
117−{-| We have an attribute id in order to remove tests when an overriding attribtue is assigned.
118−
119−Basically, we want to implictly test for height/width shrink.
120−
121−But we want to skip this test if width/height is already set.
122−
123−This allows us to do that by comparing identities.
124−
125−-}
126−type AttributeId
127− = NoId
128− | IsWidth
129− | IsHeight
130−
131−
132type Attr msg
45type Attr msg
133 = Attr (Element.Attribute msg)
46 = Attr (Element.Attribute msg)
134 | AttrTest
47 | AttrTest
135− { test : Surroundings msg -> List LayoutExpectation
48+ { test : Surroundings -> List LayoutExpectation
136 , label : String
49 , label : String
137− , id : AttributeId
138 }
50 }
139 | Batch (List (Attr msg))
51 | Batch (List (Attr msg))
140 | Spacing Int
52 | Spacing Int
141 | Nearby
53 | Nearby
142 { location : Location
54 { location : Location
143 , element : Element msg
55 , element : Element msg
144− , test : Surroundings msg -> List LayoutExpectation
56+ , test : Surroundings -> List LayoutExpectation
145 , label : String
57 , label : String
146 }
58 }
147 | LabeledTest
59 | LabeledTest
148− { test : Surroundings msg -> List LayoutExpectation
60+ { test : Surroundings -> List LayoutExpectation
149 , label : String
61 , label : String
150 , attr : Element.Attribute msg
62 , attr : Element.Attribute msg
151− , id : AttributeId
152 }
63 }
153
64
154
65
@@ -166,20 +77,16 @@ type LayoutContext
166 | InRow
77 | InRow
167 | InEl
78 | InEl
168 | InColumn
79 | InColumn
169− | InParagraph
170− | InTextCol
171− | AtRoot
172
80
173
81
174−type alias Surroundings msg =
82+type alias Surroundings =
175 { siblings : List Found
83 { siblings : List Found
176 , parent : Found
84 , parent : Found
177 , children : List Found
85 , children : List Found
178 , self : Found
86 , self : Found
179− , selfElement : Element msg
180
87
181 -- These values are needed to perform some types of tests.
88 -- These values are needed to perform some types of tests.
182− , parentLayout : LayoutContext
89+ , location : LayoutContext
183 , parentSpacing : Int
90 , parentSpacing : Int
184 }
91 }
185
92
@@ -188,36 +95,9 @@ type alias Found =
188 { bbox : BoundingBox
95 { bbox : BoundingBox
189 , style : Style
96 , style : Style
190 , isVisible : Bool
97 , isVisible : Bool
191− , textMetrics : List TextMetrics
192− }
193−
194−
195−type alias TextMetrics =
196− { actualBoundingBoxAscent : Float
197− , actualBoundingBoxDescent : Float
198− , actualBoundingBoxLeft : Float
199− , actualBoundingBoxRight : Float
200− , width : Float
201 }
98 }
202
99
203
100
204−{-| The font metrics we currently have are `actual`, meaning for the text actually rendered, not the font as a whole.
205−
206−We also know the font size is 20, so we're just going to return 20.
207−
208−TODO: improve font metric collection using something like opentype.js
209−
210−-}
211−textHeight metrics =
212− let
213− actualHeight =
214− metrics.actualBoundingBoxAscent
215− + metrics.actualBoundingBoxDescent
216− in
217− -- actualHeight / 20
218− 20
219−
220−
221{-| -}
101{-| -}
222type alias Style =
102type alias Style =
223 Dict String String
103 Dict String String
@@ -249,7 +129,6 @@ type LayoutExpectation
249
129
250type alias LayoutTest =
130type alias LayoutTest =
251 { elementDomId : String
131 { elementDomId : String
252− , elementType : ElementType
253 , label : String
132 , label : String
254 , expectations : List LayoutExpectation
133 , expectations : List LayoutExpectation
255 }
134 }
@@ -259,26 +138,6 @@ type alias LayoutTest =
259{- Expectations -}
138{- Expectations -}
260
139
261
140
262−floatToString : Float -> String
263−floatToString x =
264− String.fromFloat (toFloat (round (x * 100)) / 100)
265−
266−
267−lessThanOrEqual : String -> Float -> Float -> LayoutExpectation
268−lessThanOrEqual label one two =
269− Expect
270− { description = label ++ " " ++ floatToString one ++ " <= " ++ floatToString two
271− , result = one <= two
272− }
273−
274−
275−rounded : String -> { expected : Float, found : Float } -> LayoutExpectation
276−rounded label { expected, found } =
277− true
278− (label ++ "| expected " ++ floatToString expected ++ ", found " ++ floatToString found)
279− (abs (expected - found) < 1)
280−
281−
282equal : a -> a -> LayoutExpectation
141equal : a -> a -> LayoutExpectation
283equal one two =
142equal one two =
284 Expect
143 Expect
@@ -335,9 +194,6 @@ getElementId level el =
335 El attrs child ->
194 El attrs child ->
336 id :: getElementId (0 :: level) child ++ attributeIDs attrs
195 id :: getElementId (0 :: level) child ++ attributeIDs attrs
337
196
338− Link _ attrs child ->
339− id :: getElementId (0 :: level) child ++ attributeIDs attrs
340−
341 Row attrs children ->
197 Row attrs children ->
342 id :: childrenIDs children ++ attributeIDs attrs
198 id :: childrenIDs children ++ attributeIDs attrs
343
199
@@ -368,12 +224,7 @@ toElement el =
368
224
369toHtml : Element msg -> Html msg
225toHtml : Element msg -> Html msg
370toHtml el =
226toHtml el =
371− Element.layout
227+ Element.layout [ idAttr "0" ] <|
372− [ idAttr "0"
373− , Element.width (Element.px 1000)
374− , Element.height (Element.px 1000)
375− ]
376− <|
377 renderElement [ 0, 0 ] el
228 renderElement [ 0, 0 ] el
378
229
379
230
@@ -402,13 +253,6 @@ renderElement level el =
402 (id :: makeAttributes attrs)
253 (id :: makeAttributes attrs)
403 (renderElement (0 :: level) child)
254 (renderElement (0 :: level) child)
404
255
405− Link url attrs child ->
406− Element.link
407− (id :: makeAttributes attrs)
408− { url = url
409− , label = renderElement (0 :: level) child
410− }
411−
412 Row attrs children ->
256 Row attrs children ->
413 Element.row
257 Element.row
414 (id :: makeAttributes attrs)
258 (id :: makeAttributes attrs)
@@ -489,7 +333,6 @@ runTests harvested el =
489 case maybeFound of
333 case maybeFound of
490 Nothing ->
334 Nothing ->
491 [ { elementDomId = "se-0"
335 [ { elementDomId = "se-0"
492− , elementType = EmptyType
493 , label = "Finding root element"
336 , label = "Finding root element"
494 , expectations =
337 , expectations =
495 [ Expect
338 [ Expect
@@ -508,7 +351,7 @@ runTests harvested el =
508 , parentSpacing = 0
351 , parentSpacing = 0
509 , level = [ 0, 0 ]
352 , level = [ 0, 0 ]
510 , element = el
353 , element = el
511− , location = AtRoot
354+ , location = InEl
512 }
355 }
513
356
514
357
@@ -600,9 +443,6 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
600 El _ _ ->
443 El _ _ ->
601 InEl
444 InEl
602
445
603− Link _ _ _ ->
604− InEl
605−
606 Row _ _ ->
446 Row _ _ ->
607 InRow
447 InRow
608
448
@@ -610,10 +450,10 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
610 InColumn
450 InColumn
611
451
612 TextColumn _ _ ->
452 TextColumn _ _ ->
613− InTextCol
453+ InColumn
614
454
615 Paragraph _ _ ->
455 Paragraph _ _ ->
616− InParagraph
456+ InRow
617
457
618 Text _ ->
458 Text _ ->
619 InEl
459 InEl
@@ -690,9 +530,8 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
690 { siblings = siblings
530 { siblings = siblings
691 , parent = parent
531 , parent = parent
692 , self = self
532 , self = self
693− , selfElement = element
694 , children = childrenFoundData
533 , children = childrenFoundData
695− , parentLayout = location
534+ , location = location
696 , parentSpacing = parentSpacing
535 , parentSpacing = parentSpacing
697 }
536 }
698 attr
537 attr
@@ -713,7 +552,6 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
713
552
714 _ ->
553 _ ->
715 [ { elementDomId = id
554 [ { elementDomId = id
716− , elementType = EmptyType
717 , label = "Finding element in DOM"
555 , label = "Finding element in DOM"
718 , expectations =
556 , expectations =
719 [ Expect
557 [ Expect
@@ -729,9 +567,6 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
729 El attrs child ->
567 El attrs child ->
730 tests self attrs [ child ]
568 tests self attrs [ child ]
731
569
732− Link _ attrs child ->
733− tests self attrs [ child ]
734−
735 Row attrs children ->
570 Row attrs children ->
736 tests self attrs children
571 tests self attrs children
737
572
@@ -756,7 +591,7 @@ createAttributeTest :
756 -> Dict String Found
591 -> Dict String Found
757 -> List Int
592 -> List Int
758 -> Int
593 -> Int
759− -> Surroundings msg
594+ -> Surroundings
760 -> Attr msg
595 -> Attr msg
761 -> List LayoutTest
596 -> List LayoutTest
762createAttributeTest parent cache level attrIndex surroundings attr =
597createAttributeTest parent cache level attrIndex surroundings attr =
@@ -773,8 +608,6 @@ createAttributeTest parent cache level attrIndex surroundings attr =
773
608
774 AttrTest details ->
609 AttrTest details ->
775 [ { elementDomId = domId
610 [ { elementDomId = domId
776− , elementType =
777− toElementType surroundings.selfElement
778 , label = details.label
611 , label = details.label
779 , expectations = details.test surroundings
612 , expectations = details.test surroundings
780 }
613 }
@@ -794,7 +627,6 @@ createAttributeTest parent cache level attrIndex surroundings attr =
794 { label = nearby.label
627 { label = nearby.label
795 , test =
628 , test =
796 nearby.test
629 nearby.test
797− , id = NoId
798 }
630 }
799 )
631 )
800 nearby.element
632 nearby.element
@@ -802,12 +634,11 @@ createAttributeTest parent cache level attrIndex surroundings attr =
802
634
803 Batch batch ->
635 Batch batch ->
804 batch
636 batch
805− |> List.indexedMap (\i attribute -> createAttributeTest parent cache level i surroundings attribute)
637+ |> List.indexedMap (\i attribute -> createAttributeTest parent cache (attrIndex :: level) i surroundings attribute)
806 |> List.concat
638 |> List.concat
807
639
808 LabeledTest { label, test } ->
640 LabeledTest { label, test } ->
809 [ { elementDomId = domId
641 [ { elementDomId = domId
810− , elementType = toElementType surroundings.selfElement
811 , label = label
642 , label = label
812 , expectations = test surroundings
643 , expectations = test surroundings
813 }
644 }
@@ -820,9 +651,6 @@ addAttribute attr el =
820 El attrs child ->
651 El attrs child ->
821 El (attr :: attrs) child
652 El (attr :: attrs) child
822
653
823− Link url attrs child ->
824− Link url (attr :: attrs) child
825−
826 Row attrs children ->
654 Row attrs children ->
827 Row (attr :: attrs) children
655 Row (attr :: attrs) children
828
656
@@ -842,6 +670,45 @@ addAttribute attr el =
842 Text str
670 Text str
843
671
844
672
673+
674+-- runTests :
675+-- Random.Seed
676+-- -> Test
677+-- ->
678+-- List
679+-- ( String
680+-- , Maybe
681+-- { given : Maybe String
682+-- , description : String
683+-- , reason : Test.Runner.Failure.Reason
684+-- }
685+-- )
686+-- runTests seed tests =
687+-- let
688+-- run runner =
689+-- let
690+-- ran =
691+-- List.map Test.Runner.getFailureReason (runner.run ())
692+-- in
693+-- List.map2 Tuple.pair runner.labels ran
694+-- results =
695+-- case Test.Runner.fromTest 100 seed tests of
696+-- Test.Runner.Plain rnrs ->
697+-- List.map run rnrs
698+-- Test.Runner.Only rnrs ->
699+-- List.map run rnrs
700+-- Test.Runner.Skipping rnrs ->
701+-- List.map run rnrs
702+-- Test.Runner.Invalid invalid ->
703+-- let
704+-- _ =
705+-- Debug.log "Invalid tests" invalid
706+-- in
707+-- []
708+-- in
709+-- List.concat results
710+
711+
845compareFormattedColor : Color -> String -> Bool
712compareFormattedColor : Color -> String -> Bool
846compareFormattedColor color expected =
713compareFormattedColor color expected =
847 formatColor color == expected || formatColorWithAlpha color == expected
714 formatColor color == expected || formatColorWithAlpha color == expected
@@ -878,21 +745,6 @@ formatColor (Internal.Rgba red green blue alpha) =
878 ++ ")"
745 ++ ")"
879
746
880
747
881−getSpacingFromAttributes attrs =
882− case attrs of
883− [] ->
884− 0
885−
886− (Spacing i) :: remain ->
887− i
888−
889− (Batch batched) :: remain ->
890− getSpacingFromAttributes (batched ++ remain)
891−
892− _ :: remain ->
893− getSpacingFromAttributes remain
894−
895−
896getSpacing : Element msg -> Maybe Int
748getSpacing : Element msg -> Maybe Int
897getSpacing el =
749getSpacing el =
898 let
750 let
@@ -918,9 +770,6 @@ getSpacing el =
918 El attrs _ ->
770 El attrs _ ->
919 filterAttrs attrs
771 filterAttrs attrs
920
772
921− Link _ attrs _ ->
922− filterAttrs attrs
923−
924 Row attrs _ ->
773 Row attrs _ ->
925 filterAttrs attrs
774 filterAttrs attrs
926
775
tests-rendering/src/Testable/Element.elm+163−711
@@ -10,7 +10,6 @@ module Testable.Element exposing
10 , below
10 , below
11 , centerX
11 , centerX
12 , centerY
12 , centerY
13− , clip
14 , column
13 , column
15 , el
14 , el
16 , expectRoundedEquality
15 , expectRoundedEquality
@@ -21,7 +20,6 @@ module Testable.Element exposing
21 , isVisible
20 , isVisible
22 , label
21 , label
23 , layout
22 , layout
24− , link
25 , maximum
23 , maximum
26 , minimum
24 , minimum
27 , moveDown
25 , moveDown
@@ -38,14 +36,10 @@ module Testable.Element exposing
38 , rgb
36 , rgb
39 , rgba
37 , rgba
40 , row
38 , row
41− , scrollbarX
42− , scrollbarY
43− , scrollbars
44 , shrink
39 , shrink
45 , spacing
40 , spacing
46 , text
41 , text
47 , textColumn
42 , textColumn
48− , toProgram
49 , transparent
43 , transparent
50 , width
44 , width
51 )
45 )
@@ -64,21 +58,17 @@ In order to run the test:
64
58
65import Dict
59import Dict
66import Element
60import Element
61+import Expect
67import Html.Attributes
62import Html.Attributes
68import Testable
63import Testable
69import Testable.Runner
64import Testable.Runner
70
65
71
66
72−{-| This is used when we want to run all tests in a test suite instead of one at a time.
73−-}
74−toProgram : Testable.Runner.Testable -> Testable.Runner.TestableProgram
75−toProgram testable =
76− Testable.Runner.program [ testable ]
77−
78−
79−layout : List (Testable.Attr msg) -> Testable.Element Testable.Runner.Msg -> Testable.Runner.Testable
67+layout : List (Testable.Attr msg) -> Testable.Element Testable.Runner.Msg -> Testable.Runner.TestableProgram
80layout attrs elem =
68layout attrs elem =
81− Testable.Runner.testable "Test" elem
69+ Testable.Runner.program
70+ [ ( "Open Case", elem )
71+ ]
82
72
83
73
84text : String -> Testable.Element msg
74text : String -> Testable.Element msg
@@ -87,18 +77,18 @@ text =
87
77
88
78
89el : List (Testable.Attr msg) -> Testable.Element msg -> Testable.Element msg
79el : List (Testable.Attr msg) -> Testable.Element msg -> Testable.Element msg
90−el attrs =
80+el =
91− Testable.El (implicitWidthHeightShrink attrs)
81+ Testable.El
92
82
93
83
94row : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
84row : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
95−row attrs =
85+row =
96− Testable.Row (implicitWidthHeightShrink attrs)
86+ Testable.Row
97
87
98
88
99column : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
89column : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
100−column attrs =
90+column =
101− Testable.Column (implicitWidthHeightShrink attrs)
91+ Testable.Column
102
92
103
93
104none : Testable.Element msg
94none : Testable.Element msg
@@ -107,60 +97,13 @@ none =
107
97
108
98
109paragraph : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
99paragraph : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
110−paragraph attrs =
100+paragraph =
111− let
112− withImplicits =
113− implicitTest (widthHelper Nothing Nothing (Fill 1))
114− :: implicitTest (heightHelper Nothing Nothing Shrink)
115− :: attrs
116− in
117− Testable.Paragraph (skipOverridden withImplicits)
101+ Testable.Paragraph
118
102
119
103
120textColumn : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
104textColumn : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
121−textColumn attrs =
105+textColumn =
122− let
123− withImplicits =
124− implicitTest (widthHelper (Just 500) (Just 750) (Fill 1))
125− :: implicitTest (heightHelper Nothing Nothing Shrink)
126− :: attrs
127− in
128− Testable.TextColumn (skipOverridden withImplicits)
106+ Testable.TextColumn
129−
130−
131−link :
132− List (Testable.Attr msg)
133− ->
134− { url : String
135− , label : Testable.Element msg
136− }
137− -> Testable.Element msg
138−link attrs details =
139− Testable.Link details.url
140− (implicitWidthHeightShrink attrs)
141− details.label
142−
143−
144−clip =
145− Testable.Attr Element.clip
146−
147−
148−{-| -}
149−scrollbars : Testable.Attr msg
150−scrollbars =
151− Testable.Attr Element.scrollbars
152−
153−
154−{-| -}
155−scrollbarY : Testable.Attr msg
156−scrollbarY =
157− Testable.Attr Element.scrollbarY
158−
159−
160−{-| -}
161−scrollbarX : Testable.Attr msg
162−scrollbarX =
163− Testable.Attr Element.scrollbarX
164
107
165
108
166{-| Old labeling mechanism that i removed to hastily
109{-| Old labeling mechanism that i removed to hastily
@@ -239,7 +182,6 @@ transparent on =
239 else
182 else
240 "opaque"
183 "opaque"
241 , attr = Element.transparent on
184 , attr = Element.transparent on
242− , id = Testable.NoId
243 , test =
185 , test =
244 \context ->
186 \context ->
245 let
187 let
@@ -262,9 +204,9 @@ transparent on =
262{-| -}
204{-| -}
263isVisible : Testable.Attr msg
205isVisible : Testable.Attr msg
264isVisible =
206isVisible =
265− Testable.AttrTest
207+ Testable.LabeledTest
266 { label = "is-visible"
208 { label = "is-visible"
267− , id = Testable.NoId
209+ , attr = Element.htmlAttribute (Html.Attributes.style "not" "applicable")
268 , test =
210 , test =
269 \context ->
211 \context ->
270 [ Testable.equal context.self.isVisible True ]
212 [ Testable.equal context.self.isVisible True ]
@@ -277,7 +219,6 @@ alpha a =
277 Testable.LabeledTest
219 Testable.LabeledTest
278 { label = "alpha-" ++ String.fromFloat a
220 { label = "alpha-" ++ String.fromFloat a
279 , attr = Element.alpha a
221 , attr = Element.alpha a
280− , id = Testable.NoId
281 , test =
222 , test =
282 \context ->
223 \context ->
283 let
224 let
@@ -296,7 +237,6 @@ padding pad =
296 Testable.LabeledTest
237 Testable.LabeledTest
297 { label = "padding " ++ String.fromInt pad
238 { label = "padding " ++ String.fromInt pad
298 , attr = Element.padding pad
239 , attr = Element.padding pad
299− , id = Testable.NoId
300 , test =
240 , test =
301 \found ->
241 \found ->
302 [ Testable.true ("Padding " ++ String.fromInt pad ++ " is present")
242 [ Testable.true ("Padding " ++ String.fromInt pad ++ " is present")
@@ -317,7 +257,6 @@ paddingXY x y =
317 Testable.LabeledTest
257 Testable.LabeledTest
318 { label = "paddingXY " ++ String.fromInt x ++ ", " ++ String.fromInt y
258 { label = "paddingXY " ++ String.fromInt x ++ ", " ++ String.fromInt y
319 , attr = Element.paddingXY x y
259 , attr = Element.paddingXY x y
320− , id = Testable.NoId
321 , test =
260 , test =
322 \found ->
261 \found ->
323 [ Testable.true ("PaddingXY (" ++ String.fromInt x ++ ", " ++ String.fromInt y ++ ") is present")
262 [ Testable.true ("PaddingXY (" ++ String.fromInt x ++ ", " ++ String.fromInt y ++ ") is present")
@@ -334,11 +273,6 @@ paddingXY x y =
334 }
273 }
335
274
336
275
337−listIf ls =
338− List.filter Tuple.first ls
339− |> List.map Tuple.second
340−
341−
342widthHelper maybeMin maybeMax len =
276widthHelper maybeMin maybeMax len =
343 let
277 let
344 addMin l =
278 addMin l =
@@ -398,7 +332,6 @@ widthHelper maybeMin maybeMax len =
398 -- Pixel values should ignore min and max?
332 -- Pixel values should ignore min and max?
399 Testable.LabeledTest
333 Testable.LabeledTest
400 { label = "width " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel
334 { label = "width " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel
401− , id = Testable.IsWidth
402 , attr =
335 , attr =
403 Element.width
336 Element.width
404 (Element.px val
337 (Element.px val
@@ -407,10 +340,7 @@ widthHelper maybeMin maybeMax len =
407 )
340 )
408 , test =
341 , test =
409 \found ->
342 \found ->
410− [ expectRoundedEquality
411− { expected = toFloat val
412− , found = found.self.bbox.width
343+ [ Testable.true "exact width is exact" (floor found.self.bbox.width == val)
413− }
414 , Testable.true "min/max is upheld" (minMaxTest (floor found.self.bbox.width))
344 , Testable.true "min/max is upheld" (minMaxTest (floor found.self.bbox.width))
415 ]
345 ]
416 }
346 }
@@ -423,7 +353,6 @@ widthHelper maybeMin maybeMax len =
423
353
424 else
354 else
425 "width fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel
355 "width fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel
426− , id = Testable.IsWidth
427 , attr =
356 , attr =
428 Element.width
357 Element.width
429 (Element.fillPortion portion
358 (Element.fillPortion portion
@@ -432,7 +361,7 @@ widthHelper maybeMin maybeMax len =
432 )
361 )
433 , test =
362 , test =
434 \context ->
363 \context ->
435− if List.member context.parentLayout [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
364+ if List.member context.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
436 [ Testable.true "width fill doesn't apply to onright/onleft elements" True ]
365 [ Testable.true "width fill doesn't apply to onright/onleft elements" True ]
437
366
438 else
367 else
@@ -440,93 +369,33 @@ widthHelper maybeMin maybeMax len =
440 parentAvailableWidth =
369 parentAvailableWidth =
441 context.parent.bbox.width - (context.self.bbox.padding.left + context.self.bbox.padding.right)
370 context.parent.bbox.width - (context.self.bbox.padding.left + context.self.bbox.padding.right)
442 in
371 in
443− List.concat
444− [ case context.parentLayout of
372+ [ case context.location of
445− Testable.IsNearby _ ->
373+ Testable.IsNearby _ ->
446− [ Testable.true "Nearby Element has fill width"
374+ Testable.true "Nearby Element has fill width"
447− ((floor context.parent.bbox.width == floor context.self.bbox.width)
375+ ((floor context.parent.bbox.width == floor context.self.bbox.width)
448− || minMaxTest (floor context.self.bbox.width)
376+ || minMaxTest (floor context.self.bbox.width)
449− )
377+ )
450− ]
378+
451−
452− Testable.InColumn ->
379+ Testable.InColumn ->
453− [ Testable.true "Element within column has fill width"
380+ Testable.true "Element within column has fill width"
454− ((floor parentAvailableWidth == floor context.self.bbox.width)
381+ ((floor parentAvailableWidth == floor context.self.bbox.width)
455− || minMaxTest (floor context.self.bbox.width)
382+ || minMaxTest (floor context.self.bbox.width)
456− )
383+ )
457− ]
384+
458−
459− Testable.InEl ->
385+ Testable.InEl ->
460− [ Testable.true "Element within element has fill width" <|
386+ Testable.true "Element within element has fill width" <|
461− (floor parentAvailableWidth == floor context.self.bbox.width)
387+ (floor parentAvailableWidth == floor context.self.bbox.width)
462− || minMaxTest (floor context.self.bbox.width)
388+ || minMaxTest (floor context.self.bbox.width)
463− ]
389+
464−
465− _ ->
390+ _ ->
466− let
391+ let
467− spacePerPortion =
392+ spacePerPortion =
468− parentAvailableWidth / toFloat (List.length context.siblings + 1)
393+ parentAvailableWidth / toFloat (List.length context.siblings + 1)
469− in
394+ in
470− [ Testable.true "element has fill width" <|
395+ Testable.true "element has fill width" <|
471− (floor spacePerPortion == floor context.self.bbox.width)
396+ (floor spacePerPortion == floor context.self.bbox.width)
472− || minMaxTest (floor context.self.bbox.width)
397+ || minMaxTest (floor context.self.bbox.width)
473− ]
474− , [ Testable.lessThanOrEqual "not larger than parent"
475− context.self.bbox.width
476− context.parent.bbox.width
477− ]
478− , case context.selfElement of
479− Testable.Paragraph _ _ ->
480− -- A paragraph with width fill
481− -- we want to test for correct text wrapping here.
482− --
483− let
484− childWidth child =
485− child.bbox.width
486−
487− totalChildren =
488− context.children
489− |> List.map childWidth
490− |> List.append (List.map .width context.self.textMetrics)
491− |> List.sum
492−
493− horizontalPadding =
494− context.self.bbox.padding.left + context.self.bbox.padding.right
495−
496− totalCalculatedWidth =
497− totalChildren + horizontalPadding
498−
499− expectedLines =
500− if boxChildrenHeight > 20 then
501− ceiling (boxChildrenHeight / 20)
502−
503− else
504− ceiling (totalCalculatedWidth / context.self.bbox.width)
505−
506− boxChildrenHeight =
507− context.children
508− |> List.map
509− (\c ->
510− c.bbox.height
511− )
512− |> List.sum
513− in
514− [ Testable.true "text wrapping, checking height"
515− -- all we're doing here is testing if wrapping is occurring
516− -- not the exact height, which is a little tricky to calculate perfectly without more information.
517− (if expectedLines > 1 then
518− context.self.bbox.height >= (20 * 2)
519−
520− else
521− -- then it's less than 2 ~ line heights
522− -- there's some weird variance here which makes it hard to be exact.
523− context.self.bbox.height < (20 * 2)
524− )
525− ]
526−
527− _ ->
528− []
529− ]
398+ ]
530 }
399 }
531
400
532 Shrink ->
401 Shrink ->
@@ -538,211 +407,33 @@ widthHelper maybeMin maybeMax len =
538 |> addMin
407 |> addMin
539 |> addMax
408 |> addMax
540 )
409 )
541− , id = Testable.IsWidth
542 , test =
410 , test =
543 \context ->
411 \context ->
544− case context.selfElement of
545− Testable.El _ _ ->
546− let
412+ let
547− childWidth child =
548− child.bbox.width
549−
550− totalChildren =
551− context.children
552− |> List.map childWidth
553− |> List.append (List.map .width context.self.textMetrics)
554− |> List.sum
555−
556− horizontalPadding =
557− context.self.bbox.padding.left + context.self.bbox.padding.right
558− in
559− listIf
560− [ ( (context.parentLayout /= Testable.InParagraph)
561− && (context.parentLayout /= Testable.InTextCol)
562− , Testable.rounded "equals children"
563− { expected = totalChildren + horizontalPadding
564− , found = context.self.bbox.width
565− }
566− )
567− , ( context.parentLayout /= Testable.AtRoot
568− , Testable.lessThanOrEqual "not larger than parent"
569− context.self.bbox.width
570− context.parent.bbox.width
571− )
572− ]
573−
574− Testable.Link _ _ _ ->
575− let
576− childWidth child =
413+ childWidth child =
577− child.bbox.width
414+ -- TODO: add margin values to widths
578−
579− totalChildren =
580− context.children
581− |> List.map childWidth
582− |> List.append (List.map .width context.self.textMetrics)
583− |> List.sum
584−
585− horizontalPadding =
586− context.self.bbox.padding.left + context.self.bbox.padding.right
587− in
588− listIf
589− [ ( (context.parentLayout /= Testable.InParagraph)
590− && (context.parentLayout /= Testable.InTextCol)
591− , Testable.rounded "equals children"
592− { expected = totalChildren + horizontalPadding
593− , found = context.self.bbox.width
594− }
595− )
596− , ( context.parentLayout /= Testable.AtRoot
597− , Testable.lessThanOrEqual "not larger than parent"
598− context.self.bbox.width
599− context.parent.bbox.width
600− )
601− ]
602−
603− Testable.Row rowAttrs _ ->
604− -- width of row is the sum of all children widths
605− -- both text elements and others.
606− let
607− childWidth child =
608− child.bbox.width
415+ child.bbox.width
609−
416+
610− totalChildren =
417+ totalChildren =
611− context.children
418+ context.children
612− |> List.map childWidth
419+ |> List.map childWidth
613− |> List.append (List.map .width context.self.textMetrics)
614− |> List.sum
420+ |> List.sum
615−
421+
616− horizontalPadding =
422+ horizontalPadding =
617− context.self.bbox.padding.left + context.self.bbox.padding.right
423+ context.self.bbox.padding.left + context.self.bbox.padding.right
618−
424+
619− spacingAmount =
425+ spacingValue =
620− Testable.getSpacingFromAttributes rowAttrs
621−
622− totalSpacing =
623− toFloat spacingAmount * (toFloat (List.length context.children) - 1)
426+ toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)
624− in
427+ in
625− listIf
428+ if totalChildren == 0 then
626− [ ( True
429+ -- TODO: The issue is that we have a hard time measuring `text` elements
627− , expectRoundedEquality
430+ -- So if a element has a text child, then it's width isn't going to show up in the system.
628− { expected = totalChildren + horizontalPadding + totalSpacing
431+ [ expectRoundedEquality context.self.bbox.width context.self.bbox.width ]
629− , found = context.self.bbox.width
630− }
631− )
632− , ( context.parentLayout /= Testable.AtRoot
633− , Testable.lessThanOrEqual "not larger than parent"
634− context.self.bbox.width
635− context.parent.bbox.width
636− )
637− ]
638−
639− Testable.Column _ _ ->
640− -- The width of the column is the width of the widest child.
641− let
642− childWidth child =
643− child.bbox.width
644− + context.self.bbox.padding.left
645− + context.self.bbox.padding.right
646−
647− textChildren =
648− List.map
649− (\txt ->
650− txt.width
651− + context.self.bbox.padding.left
652− + context.self.bbox.padding.right
653− )
654− context.self.textMetrics
655−
656− allChildren =
657− context.children
658− |> List.map childWidth
659− |> List.append textChildren
660− in
661− listIf
662− [ ( True
663− , expectRoundedEquality
664− { expected = Maybe.withDefault 0 (List.maximum allChildren)
665− , found = context.self.bbox.width
666− }
667− )
668− , ( context.parentLayout /= Testable.AtRoot
669− , Testable.lessThanOrEqual "not larger than parent"
670− context.self.bbox.width
671− context.parent.bbox.width
672− )
673− ]
674−
675− Testable.TextColumn _ _ ->
676− -- The width of the column is the width of the widest child.
677− let
678− childWidth child =
679− child.bbox.width
680− + context.self.bbox.padding.left
681− + context.self.bbox.padding.right
682−
683− textChildren =
684− List.map
685− (\txt ->
686− txt.width
687− + context.self.bbox.padding.left
688− + context.self.bbox.padding.right
689− )
690− context.self.textMetrics
691−
692− allChildren =
693− context.children
694− |> List.map childWidth
695− |> List.append textChildren
696− in
697− listIf
698− [ ( True
699− , expectRoundedEquality
700− { expected = Maybe.withDefault 0 (List.maximum allChildren)
701− , found = context.self.bbox.width
702− }
703− )
704− , ( context.parentLayout /= Testable.AtRoot
705− , Testable.lessThanOrEqual "not larger than parent"
706− context.self.bbox.width
707− context.parent.bbox.width
708− )
709− ]
710
432
711− Testable.Paragraph _ _ ->
433+ else
712− -- This should be the size it's text,
434+ -- This fails if this element is actually a column
713− -- unless it takes up all available space, in which case it should wrap.
435+ -- So we need to capture what this element is in order to do this calculation.
714− let
715− childWidth child =
716− child.bbox.width
717−
718− totalChildren =
719− context.children
720− |> List.map childWidth
721− |> List.append (List.map .width context.self.textMetrics)
722− |> List.sum
723−
724− horizontalPadding =
725− context.self.bbox.padding.left + context.self.bbox.padding.right
726− in
727− listIf
728− [ ( True
729− , expectRoundedEquality
730− { expected = totalChildren + horizontalPadding
436+ [ expectRoundedEquality (totalChildren + horizontalPadding + spacingValue) context.self.bbox.width ]
731− , found = context.self.bbox.width
732− }
733− )
734− , ( context.parentLayout /= Testable.AtRoot
735− , Testable.lessThanOrEqual "not larger than parent"
736− context.self.bbox.width
737− context.parent.bbox.width
738− )
739− ]
740−
741− Testable.Text _ ->
742− []
743−
744− Testable.Empty ->
745− []
746 }
437 }
747
438
748
439
@@ -811,13 +502,10 @@ heightHelper maybeMin maybeMax len =
811 |> addMin
502 |> addMin
812 |> addMax
503 |> addMax
813 )
504 )
814− , id = Testable.IsHeight
815 , test =
505 , test =
816 \found ->
506 \found ->
817− [ expectRoundedEquality
507+ [ Testable.true ("exact height is exact: " ++ String.fromInt (floor found.self.bbox.height) ++ "," ++ String.fromInt val)
818− { expected = toFloat val
819− , found = found.self.bbox.height
508+ (floor found.self.bbox.height == val)
820− }
821 , Testable.true "min/max holds true"
509 , Testable.true "min/max holds true"
822 (minMaxTest (floor found.self.bbox.height))
510 (minMaxTest (floor found.self.bbox.height))
823 ]
511 ]
@@ -832,10 +520,9 @@ heightHelper maybeMin maybeMax len =
832 |> addMin
520 |> addMin
833 |> addMax
521 |> addMax
834 )
522 )
835− , id = Testable.IsHeight
836 , test =
523 , test =
837 \context ->
524 \context ->
838− [ if List.member context.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
525+ [ if List.member context.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
839 Testable.true "height fill doesn't apply to above/below elements" True
526 Testable.true "height fill doesn't apply to above/below elements" True
840
527
841 else
528 else
@@ -843,7 +530,7 @@ heightHelper maybeMin maybeMax len =
843 parentAvailableHeight =
530 parentAvailableHeight =
844 context.parent.bbox.height - (context.self.bbox.padding.top + context.self.bbox.padding.bottom)
531 context.parent.bbox.height - (context.self.bbox.padding.top + context.self.bbox.padding.bottom)
845 in
532 in
846− case context.parentLayout of
533+ case context.location of
847 Testable.IsNearby _ ->
534 Testable.IsNearby _ ->
848 Testable.true "Nearby Element has fill height"
535 Testable.true "Nearby Element has fill height"
849 ((floor context.parent.bbox.height == floor context.self.bbox.height)
536 ((floor context.parent.bbox.height == floor context.self.bbox.height)
@@ -881,134 +568,33 @@ heightHelper maybeMin maybeMax len =
881 |> addMin
568 |> addMin
882 |> addMax
569 |> addMax
883 )
570 )
884− , id = Testable.IsHeight
885 , test =
571 , test =
886 \context ->
572 \context ->
887− case context.selfElement of
888− Testable.El _ _ ->
889− let
573+ let
890− childHeight child =
574+ childWidth child =
575+ -- TODO: add margin values to heights
891− child.bbox.height
576+ child.bbox.height
892− in
577+
893− if List.isEmpty context.children then
578+ totalChildren =
894− -- context.self.textMetrics
579+ context.children
895− -- |> List.map Testable.textHeight
580+ |> List.map childWidth
896− -- |> List.sum
581+ |> List.sum
897− -- TODO: apparently the font metrics we have are for the literal characters rendered
582+
898− -- not for the font itself.
583+ verticalPadding =
899− [ Testable.todo "calculate height from actual text metrics"
584+ context.self.bbox.padding.top + context.self.bbox.padding.bottom
900− ]
585+
901−
586+ spacingValue =
902− else
587+ toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)
588+ in
589+ if totalChildren == 0 then
590+ -- TODO: The issue is that we have a hard time measuring `text` elements
591+ -- So if a element has a text child, then it's height isn't going to show up in the system.
903− [ expectRoundedEquality
592+ [ expectRoundedEquality context.self.bbox.height context.self.bbox.height ]
904− { expected =
905− context.children
906− |> List.map childHeight
907− |> List.sum
908− |> (\h -> h + context.self.bbox.padding.top + context.self.bbox.padding.bottom)
909− , found = context.self.bbox.height
910− }
911− , Testable.lessThanOrEqual "not larger than parent"
912− context.self.bbox.height
913− context.parent.bbox.height
914− ]
915
593
916− Testable.Link _ _ _ ->
594+ else
917− let
595+ -- This fails if this element is actually a column
918− childHeight child =
596+ -- So we need to capture what this element is in order to do this calculation.
919− child.bbox.height
920− in
921− if List.isEmpty context.children then
922− -- context.self.textMetrics
923− -- |> List.map Testable.textHeight
924− -- |> List.sum
925− -- TODO: apparently the font metrics we have are for the literal characters rendered
926− -- not for the font itself.
927− [ Testable.todo "calculate height from actual text metrics"
928− ]
929−
930− else
931− [ expectRoundedEquality
597+ [ expectRoundedEquality (totalChildren + verticalPadding + spacingValue) context.self.bbox.height ]
932− { expected =
933− context.children
934− |> List.map childHeight
935− |> List.sum
936− |> (\h -> h + context.self.bbox.padding.top + context.self.bbox.padding.bottom)
937− , found = context.self.bbox.height
938− }
939− , Testable.lessThanOrEqual "not larger than parent"
940− context.self.bbox.height
941− context.parent.bbox.height
942− ]
943−
944− Testable.Row _ _ ->
945− let
946− childHeight child =
947− child.bbox.height
948− in
949− if List.isEmpty context.children then
950− -- context.self.textMetrics
951− -- |> List.map Testable.textHeight
952− -- |> List.sum
953− -- TODO: apparently the font metrics we have are for the literal characters rendered
954− -- not for the font itself.
955− [ Testable.todo "calculate height from actual text metrics" ]
956−
957− else
958− [ expectRoundedEquality
959− { expected =
960− context.children
961− |> List.map childHeight
962− |> List.maximum
963− |> Maybe.withDefault 0
964− |> (\h -> h + context.self.bbox.padding.top + context.self.bbox.padding.bottom)
965− , found = context.self.bbox.height
966− }
967− , Testable.lessThanOrEqual "not larger than parent"
968− context.self.bbox.height
969− context.parent.bbox.height
970− ]
971−
972− Testable.Column colAttrs _ ->
973− let
974− childHeight child =
975− child.bbox.height
976−
977− totalChildren =
978− context.children
979− |> List.map childHeight
980− |> List.append (List.map Testable.textHeight context.self.textMetrics)
981− |> List.sum
982−
983− verticalPadding =
984− context.self.bbox.padding.top + context.self.bbox.padding.bottom
985−
986− spacingAmount =
987− Testable.getSpacingFromAttributes colAttrs
988−
989− totalSpacing =
990− toFloat spacingAmount * (toFloat (List.length context.children) - 1)
991− in
992− [ expectRoundedEquality
993− { expected = totalChildren + verticalPadding + totalSpacing
994− , found = context.self.bbox.height
995− }
996− , Testable.lessThanOrEqual "not larger than parent"
997− context.self.bbox.height
998− context.parent.bbox.height
999− ]
1000−
1001− Testable.TextColumn _ _ ->
1002− []
1003−
1004− Testable.Paragraph _ _ ->
1005− []
1006−
1007− Testable.Text _ ->
1008− []
1009−
1010− Testable.Empty ->
1011− []
1012 }
598 }
1013
599
1014
600
@@ -1029,7 +615,6 @@ spacing space =
1029 , Testable.LabeledTest
615 , Testable.LabeledTest
1030 { label = "spacing: " ++ String.fromInt space
616 { label = "spacing: " ++ String.fromInt space
1031 , attr = Element.spacing space
617 , attr = Element.spacing space
1032− , id = Testable.NoId
1033 , test =
618 , test =
1034 \found ->
619 \found ->
1035 let
620 let
@@ -1108,14 +693,13 @@ alignLeft =
1108 Testable.LabeledTest
693 Testable.LabeledTest
1109 { label = "alignLeft"
694 { label = "alignLeft"
1110 , attr = Element.alignLeft
695 , attr = Element.alignLeft
1111− , id = Testable.NoId
1112 , test =
696 , test =
1113 \found ->
697 \found ->
1114− [ if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
698+ [ if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
1115 Testable.true "alignLeft doesn't apply to elements that are onLeft or onRight" True
699 Testable.true "alignLeft doesn't apply to elements that are onLeft or onRight" True
1116
700
1117 else if
701 else if
1118− List.member found.parentLayout
702+ List.member found.location
1119 [ Testable.IsNearby Testable.InFront
703 [ Testable.IsNearby Testable.InFront
1120 , Testable.IsNearby Testable.Behind
704 , Testable.IsNearby Testable.Behind
1121 , Testable.IsNearby Testable.Above
705 , Testable.IsNearby Testable.Above
@@ -1123,18 +707,16 @@ alignLeft =
1123 ]
707 ]
1124 then
708 then
1125 expectRoundedEquality
709 expectRoundedEquality
1126− { found = found.self.bbox.left
710+ found.self.bbox.left
1127− , expected = found.parent.bbox.left
711+ found.parent.bbox.left
1128− }
1129
712
1130 else if List.length found.siblings == 0 then
713 else if List.length found.siblings == 0 then
1131 expectRoundedEquality
714 expectRoundedEquality
1132− { found = found.self.bbox.left
715+ found.self.bbox.left
1133− , expected = found.parent.bbox.left + found.parent.bbox.padding.left
716+ (found.parent.bbox.left + found.parent.bbox.padding.left)
1134− }
1135
717
1136 else
718 else
1137− case found.parentLayout of
719+ case found.location of
1138 Testable.InRow ->
720 Testable.InRow ->
1139 let
721 let
1140 siblingsOnLeft =
722 siblingsOnLeft =
@@ -1149,15 +731,13 @@ alignLeft =
1149 |> List.sum
731 |> List.sum
1150 in
732 in
1151 expectRoundedEquality
733 expectRoundedEquality
1152− { found = found.self.bbox.left
734+ found.self.bbox.left
1153− , expected = found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings)
735+ (found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings))
1154− }
1155
736
1156 _ ->
737 _ ->
1157 expectRoundedEquality
738 expectRoundedEquality
1158− { found = found.self.bbox.left
739+ found.self.bbox.left
1159− , expected = found.parent.bbox.left + found.parent.bbox.padding.left
740+ (found.parent.bbox.left + found.parent.bbox.padding.left)
1160− }
1161 ]
741 ]
1162 }
742 }
1163
743
@@ -1168,7 +748,6 @@ centerX =
1168 Testable.LabeledTest
748 Testable.LabeledTest
1169 { label = "centerX"
749 { label = "centerX"
1170 , attr = Element.centerX
750 , attr = Element.centerX
1171− , id = Testable.NoId
1172 , test =
751 , test =
1173 \found ->
752 \found ->
1174 let
753 let
@@ -1180,18 +759,17 @@ centerX =
1180 parentCenter =
759 parentCenter =
1181 found.parent.bbox.left + (found.parent.bbox.width / 2)
760 found.parent.bbox.left + (found.parent.bbox.width / 2)
1182 in
761 in
1183− if List.member found.parentLayout [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
762+ if List.member found.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
1184 [ Testable.true "centerX doesn't apply to elements that are onLeft or onRight" True ]
763 [ Testable.true "centerX doesn't apply to elements that are onLeft or onRight" True ]
1185
764
1186 else if List.length found.siblings == 0 then
765 else if List.length found.siblings == 0 then
1187 [ expectRoundedEquality
766 [ expectRoundedEquality
1188− { found = selfCenter
767+ selfCenter
1189− , expected = parentCenter
768+ parentCenter
1190− }
1191 ]
769 ]
1192
770
1193 else
771 else
1194− case found.parentLayout of
772+ case found.location of
1195 Testable.InRow ->
773 Testable.InRow ->
1196 let
774 let
1197 siblingsOnLeft =
775 siblingsOnLeft =
@@ -1222,17 +800,12 @@ centerX =
1222 )
800 )
1223 in
801 in
1224 [ expectRoundedEquality
802 [ expectRoundedEquality
1225− { found = selfCenter
803+ selfCenter
1226− , expected = expectedCenter
804+ expectedCenter
1227− }
1228 ]
805 ]
1229
806
1230 _ ->
807 _ ->
1231− [ expectRoundedEquality
808+ [ expectRoundedEquality selfCenter parentCenter ]
1232− { found = selfCenter
1233− , expected = parentCenter
1234− }
1235− ]
1236 }
809 }
1237
810
1238
811
@@ -1242,14 +815,13 @@ alignRight =
1242 Testable.LabeledTest
815 Testable.LabeledTest
1243 { label = "alignRight"
816 { label = "alignRight"
1244 , attr = Element.alignRight
817 , attr = Element.alignRight
1245− , id = Testable.NoId
1246 , test =
818 , test =
1247 \found ->
819 \found ->
1248− if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
820+ if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
1249 [ Testable.true "alignRight doesn't apply to elements that are onLeft or onRight" True ]
821 [ Testable.true "alignRight doesn't apply to elements that are onLeft or onRight" True ]
1250
822
1251 else if
823 else if
1252− List.member found.parentLayout
824+ List.member found.location
1253 [ Testable.IsNearby Testable.InFront
825 [ Testable.IsNearby Testable.InFront
1254 , Testable.IsNearby Testable.Behind
826 , Testable.IsNearby Testable.Behind
1255 , Testable.IsNearby Testable.Above
827 , Testable.IsNearby Testable.Above
@@ -1257,20 +829,18 @@ alignRight =
1257 ]
829 ]
1258 then
830 then
1259 [ expectRoundedEquality
831 [ expectRoundedEquality
1260− { found = found.self.bbox.right
832+ found.self.bbox.right
1261− , expected = found.parent.bbox.right
833+ found.parent.bbox.right
1262− }
1263 ]
834 ]
1264
835
1265 else if List.length found.siblings == 0 then
836 else if List.length found.siblings == 0 then
1266 [ expectRoundedEquality
837 [ expectRoundedEquality
1267− { found = found.self.bbox.right
838+ found.self.bbox.right
1268− , expected = found.parent.bbox.right + found.parent.bbox.padding.right
839+ (found.parent.bbox.right + found.parent.bbox.padding.right)
1269− }
1270 ]
840 ]
1271
841
1272 else
842 else
1273− case found.parentLayout of
843+ case found.location of
1274 Testable.InRow ->
844 Testable.InRow ->
1275 let
845 let
1276 siblingsOnRight =
846 siblingsOnRight =
@@ -1285,16 +855,14 @@ alignRight =
1285 |> List.sum
855 |> List.sum
1286 in
856 in
1287 [ expectRoundedEquality
857 [ expectRoundedEquality
1288− { found = found.self.bbox.right
858+ found.self.bbox.right
1289− , expected = found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings)
859+ (found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings))
1290− }
1291 ]
860 ]
1292
861
1293 _ ->
862 _ ->
1294 [ expectRoundedEquality
863 [ expectRoundedEquality
1295− { found = found.self.bbox.right
864+ found.self.bbox.right
1296− , expected = found.parent.bbox.right + found.parent.bbox.padding.right
865+ (found.parent.bbox.right + found.parent.bbox.padding.right)
1297− }
1298 ]
866 ]
1299 }
867 }
1300
868
@@ -1305,14 +873,13 @@ alignTop =
1305 Testable.LabeledTest
873 Testable.LabeledTest
1306 { label = "alignTop"
874 { label = "alignTop"
1307 , attr = Element.alignTop
875 , attr = Element.alignTop
1308− , id = Testable.NoId
1309 , test =
876 , test =
1310 \found ->
877 \found ->
1311− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
878+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
1312 [ Testable.true "alignTop doesn't apply to elements that are above or below" True ]
879 [ Testable.true "alignTop doesn't apply to elements that are above or below" True ]
1313
880
1314 else if
881 else if
1315− List.member found.parentLayout
882+ List.member found.location
1316 [ Testable.IsNearby Testable.InFront
883 [ Testable.IsNearby Testable.InFront
1317 , Testable.IsNearby Testable.Behind
884 , Testable.IsNearby Testable.Behind
1318 , Testable.IsNearby Testable.OnRight
885 , Testable.IsNearby Testable.OnRight
@@ -1320,20 +887,18 @@ alignTop =
1320 ]
887 ]
1321 then
888 then
1322 [ expectRoundedEquality
889 [ expectRoundedEquality
1323− { found = found.self.bbox.top
890+ found.self.bbox.top
1324− , expected = found.parent.bbox.top
891+ found.parent.bbox.top
1325− }
1326 ]
892 ]
1327
893
1328 else if List.length found.siblings == 0 then
894 else if List.length found.siblings == 0 then
1329 [ expectRoundedEquality
895 [ expectRoundedEquality
1330− { found = found.self.bbox.top
896+ found.self.bbox.top
1331− , expected = found.parent.bbox.top + found.parent.bbox.padding.top
897+ (found.parent.bbox.top + found.parent.bbox.padding.top)
1332− }
1333 ]
898 ]
1334
899
1335 else
900 else
1336− case found.parentLayout of
901+ case found.location of
1337 Testable.InColumn ->
902 Testable.InColumn ->
1338 let
903 let
1339 siblingsAbove =
904 siblingsAbove =
@@ -1348,16 +913,14 @@ alignTop =
1348 |> List.sum
913 |> List.sum
1349 in
914 in
1350 [ expectRoundedEquality
915 [ expectRoundedEquality
1351− { found = found.self.bbox.top
916+ found.self.bbox.top
1352− , expected = found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings)
917+ (found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings))
1353− }
1354 ]
918 ]
1355
919
1356 _ ->
920 _ ->
1357 [ expectRoundedEquality
921 [ expectRoundedEquality
1358− { found = found.self.bbox.top
922+ found.self.bbox.top
1359− , expected = found.parent.bbox.top
923+ found.parent.bbox.top
1360− }
1361 ]
924 ]
1362 }
925 }
1363
926
@@ -1368,14 +931,13 @@ alignBottom =
1368 Testable.LabeledTest
931 Testable.LabeledTest
1369 { label = "alignBottom"
932 { label = "alignBottom"
1370 , attr = Element.alignBottom
933 , attr = Element.alignBottom
1371− , id = Testable.NoId
1372 , test =
934 , test =
1373 \found ->
935 \found ->
1374− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
936+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
1375 [ Testable.true "alignBottom doesn't apply to elements that are above or below" True ]
937 [ Testable.true "alignBottom doesn't apply to elements that are above or below" True ]
1376
938
1377 else if
939 else if
1378− List.member found.parentLayout
940+ List.member found.location
1379 [ Testable.IsNearby Testable.InFront
941 [ Testable.IsNearby Testable.InFront
1380 , Testable.IsNearby Testable.Behind
942 , Testable.IsNearby Testable.Behind
1381 , Testable.IsNearby Testable.OnRight
943 , Testable.IsNearby Testable.OnRight
@@ -1383,20 +945,18 @@ alignBottom =
1383 ]
945 ]
1384 then
946 then
1385 [ expectRoundedEquality
947 [ expectRoundedEquality
1386− { found = found.self.bbox.bottom
948+ found.self.bbox.bottom
1387− , expected = found.parent.bbox.bottom
949+ found.parent.bbox.bottom
1388− }
1389 ]
950 ]
1390
951
1391 else if List.length found.siblings == 0 then
952 else if List.length found.siblings == 0 then
1392 [ expectRoundedEquality
953 [ expectRoundedEquality
1393− { found = found.self.bbox.bottom
954+ found.self.bbox.bottom
1394− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom
955+ (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)
1395− }
1396 ]
956 ]
1397
957
1398 else
958 else
1399− case found.parentLayout of
959+ case found.location of
1400 Testable.InColumn ->
960 Testable.InColumn ->
1401 let
961 let
1402 siblingsBelow =
962 siblingsBelow =
@@ -1411,25 +971,22 @@ alignBottom =
1411 |> List.sum
971 |> List.sum
1412 in
972 in
1413 [ expectRoundedEquality
973 [ expectRoundedEquality
1414− { found = found.self.bbox.bottom
974+ found.self.bbox.bottom
1415− , expected = found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings)
975+ (found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings))
1416− }
1417 ]
976 ]
1418
977
1419 _ ->
978 _ ->
1420 [ expectRoundedEquality
979 [ expectRoundedEquality
1421− { found = found.self.bbox.bottom
980+ found.self.bbox.bottom
1422− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom
981+ (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)
1423− }
1424 ]
982 ]
1425 }
983 }
1426
984
1427
985
1428−expectRoundedEquality : { expected : Float, found : Float } -> Testable.LayoutExpectation
986+expectRoundedEquality x y =
1429−expectRoundedEquality { expected, found } =
1430 Testable.true
987 Testable.true
1431− ("expected " ++ floatToString expected ++ ", found " ++ floatToString found)
988+ ("within 1 of each other " ++ floatToString x ++ ", " ++ floatToString y)
1432− (abs (expected - found) < 1)
989+ (abs (x - y) < 1)
1433
990
1434
991
1435floatToString : Float -> String
992floatToString : Float -> String
@@ -1443,7 +1000,6 @@ centerY =
1443 Testable.LabeledTest
1000 Testable.LabeledTest
1444 { label = "centerY"
1001 { label = "centerY"
1445 , attr = Element.centerY
1002 , attr = Element.centerY
1446− , id = Testable.NoId
1447 , test =
1003 , test =
1448 \found ->
1004 \found ->
1449 let
1005 let
@@ -1453,18 +1009,17 @@ centerY =
1453 parentCenter =
1009 parentCenter =
1454 found.parent.bbox.top + (found.parent.bbox.height / 2)
1010 found.parent.bbox.top + (found.parent.bbox.height / 2)
1455 in
1011 in
1456− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
1012+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
1457 [ Testable.true "centerY doesn't apply to elements that are above or below" True ]
1013 [ Testable.true "centerY doesn't apply to elements that are above or below" True ]
1458
1014
1459 else if List.length found.siblings == 0 then
1015 else if List.length found.siblings == 0 then
1460 [ expectRoundedEquality
1016 [ expectRoundedEquality
1461− { found = selfCenter
1017+ selfCenter
1462− , expected = parentCenter
1018+ parentCenter
1463− }
1464 ]
1019 ]
1465
1020
1466 else
1021 else
1467− case found.parentLayout of
1022+ case found.location of
1468 Testable.InColumn ->
1023 Testable.InColumn ->
1469 let
1024 let
1470 siblingsOnTop =
1025 siblingsOnTop =
@@ -1495,17 +1050,12 @@ centerY =
1495 )
1050 )
1496 in
1051 in
1497 [ expectRoundedEquality
1052 [ expectRoundedEquality
1498− { found = selfCenter
1053+ selfCenter
1499− , expected = expectedCenter
1054+ expectedCenter
1500− }
1501 ]
1055 ]
1502
1056
1503 _ ->
1057 _ ->
1504− [ expectRoundedEquality
1058+ [ expectRoundedEquality selfCenter parentCenter ]
1505− { found = selfCenter
1506− , expected = parentCenter
1507− }
1508− ]
1509 }
1059 }
1510
1060
1511
1061
@@ -1518,11 +1068,7 @@ above element =
1518 , label = "above"
1068 , label = "above"
1519 , test =
1069 , test =
1520 \found ->
1070 \found ->
1521− [ expectRoundedEquality
1071+ [ expectRoundedEquality found.self.bbox.bottom found.parent.bbox.top ]
1522− { found = found.self.bbox.bottom
1523− , expected = found.parent.bbox.top
1524− }
1525− ]
1526 }
1072 }
1527
1073
1528
1074
@@ -1535,11 +1081,7 @@ below element =
1535 , label = "below"
1081 , label = "below"
1536 , test =
1082 , test =
1537 \found ->
1083 \found ->
1538− [ expectRoundedEquality
1084+ [ expectRoundedEquality found.self.bbox.top found.parent.bbox.bottom ]
1539− { found = found.self.bbox.top
1540− , expected = found.parent.bbox.bottom
1541− }
1542− ]
1543 }
1085 }
1544
1086
1545
1087
@@ -1552,11 +1094,7 @@ onRight element =
1552 , label = "onRight"
1094 , label = "onRight"
1553 , test =
1095 , test =
1554 \found ->
1096 \found ->
1555− [ expectRoundedEquality
1097+ [ expectRoundedEquality found.self.bbox.left found.parent.bbox.right ]
1556− { found = found.self.bbox.left
1557− , expected = found.parent.bbox.right
1558− }
1559− ]
1560 }
1098 }
1561
1099
1562
1100
@@ -1569,11 +1107,7 @@ onLeft element =
1569 , label = "onLeft"
1107 , label = "onLeft"
1570 , test =
1108 , test =
1571 \found ->
1109 \found ->
1572− [ expectRoundedEquality
1110+ [ expectRoundedEquality found.self.bbox.right found.parent.bbox.left ]
1573− { found = found.self.bbox.right
1574− , expected = found.parent.bbox.left
1575− }
1576− ]
1577 }
1111 }
1578
1112
1579
1113
@@ -1639,85 +1173,3 @@ behindContent element =
1639 \found ->
1173 \found ->
1640 [ withinHelper found ]
1174 [ withinHelper found ]
1641 }
1175 }
1642−
1643−
1644−
1645−{- Implicit width/height calcualtions -}
1646−
1647−
1648−implicitWidthHeightShrink attrs =
1649− let
1650− withImplicits =
1651− implicitTest (widthHelper Nothing Nothing Shrink)
1652− :: implicitTest (heightHelper Nothing Nothing Shrink)
1653− :: attrs
1654− in
1655− skipOverridden withImplicits
1656−
1657−
1658−attrId attr =
1659− case attr of
1660− Testable.LabeledTest details ->
1661− details.id
1662−
1663− Testable.AttrTest details ->
1664− details.id
1665−
1666− _ ->
1667− Testable.NoId
1668−
1669−
1670−skipOverridden ls =
1671− List.foldr
1672− (\attr ( found, caught ) ->
1673− let
1674− ( skip, has ) =
1675− case attrId attr of
1676− Testable.NoId ->
1677− ( False, found )
1678−
1679− Testable.IsWidth ->
1680− ( found.hasWidth
1681− , { hasWidth = True
1682− , hasHeight = found.hasHeight
1683− }
1684− )
1685−
1686− Testable.IsHeight ->
1687− ( found.hasHeight
1688− , { hasWidth = found.hasWidth
1689− , hasHeight = True
1690− }
1691− )
1692− in
1693− ( has
1694− , if skip then
1695− caught
1696−
1697− else
1698− attr :: caught
1699− )
1700− )
1701− ( { hasWidth = False
1702− , hasHeight = False
1703− }
1704− , []
1705− )
1706− ls
1707− |> Tuple.second
1708− |> List.reverse
1709−
1710−
1711−{-| This is taking a normal test and rmoving its ability to attach a real `Element` attribute.
1712−-}
1713−implicitTest attr =
1714− case attr of
1715− Testable.LabeledTest details ->
1716− Testable.AttrTest
1717− { test = details.test
1718− , label = "Implicit -> " ++ details.label
1719− , id = details.id
1720− }
1721−
1722− otherwise ->
1723− otherwise
tests-rendering/src/Testable/Element/Background.elm+1−2
@@ -13,7 +13,6 @@ color clr =
13 Testable.LabeledTest
13 Testable.LabeledTest
14 { label = "background color"
14 { label = "background color"
15 , attr = Background.color clr
15 , attr = Background.color clr
16− , id = Testable.NoId
17 , test =
16 , test =
18 \context ->
17 \context ->
19 let
18 let
@@ -22,7 +21,7 @@ color clr =
22 |> Dict.get "background-color"
21 |> Dict.get "background-color"
23 |> Maybe.withDefault "notfound"
22 |> Maybe.withDefault "notfound"
24 in
23 in
25− [ Testable.true ("expected " ++ (Testable.formatColor clr ++ ", found " ++ selfBackgroundColor))
24+ [ Testable.true ("expected: " ++ (Testable.formatColor clr ++ ", found:" ++ selfBackgroundColor))
26 (Testable.compareFormattedColor clr selfBackgroundColor)
25 (Testable.compareFormattedColor clr selfBackgroundColor)
27 ]
26 ]
28 }
27 }
tests-rendering/src/Testable/Element/Font.elm+2−8
@@ -1,24 +1,19 @@
1−module Testable.Element.Font exposing (bold, color, size)
1+module Testable.Element.Font exposing (color)
2
2
3{-| -}
3{-| -}
4
4
5import Dict
5import Dict
6import Element exposing (Color)
6import Element exposing (Color)
7import Element.Font as Font
7import Element.Font as Font
8+import Expect
8import Testable
9import Testable
9
10
10
11
11−bold : Testable.Attr msg
12−bold =
13− Testable.Attr Font.bold
14−
15−
16color : Color -> Testable.Attr msg
12color : Color -> Testable.Attr msg
17color clr =
13color clr =
18 Testable.LabeledTest
14 Testable.LabeledTest
19 { label = "font color-" ++ Testable.formatColor clr
15 { label = "font color-" ++ Testable.formatColor clr
20 , attr = Font.color clr
16 , attr = Font.color clr
21− , id = Testable.NoId
22 , test =
17 , test =
23 \context ->
18 \context ->
24 let
19 let
@@ -38,7 +33,6 @@ size i =
38 Testable.LabeledTest
33 Testable.LabeledTest
39 { label = "font size-" ++ String.fromInt i
34 { label = "font size-" ++ String.fromInt i
40 , attr = Font.size i
35 , attr = Font.size i
41− , id = Testable.NoId
42 , test =
36 , test =
43 \context ->
37 \context ->
44 let
38 let
tests-rendering/src/Testable/Generator.elmdeleted−398
@@ -1,398 +0,0 @@
1−module Testable.Generator exposing (..)
2−
3−{-| -}
4−
5−import Testable
6−import Testable.Element exposing (..)
7−import Testable.Element.Background as Background
8−import Testable.Element.Font as Font
9−
10−
11−{-| Given a list of attributes, generate every context this list of attributes could be in.
12−
13−So, this means,
14−
15− - every element type
16− - in every element type
17−
18−-}
19−element : String -> List (Testable.Attr msg) -> List ( String, Testable.Element msg )
20−element label attrs =
21− -- [ ( label, paragraph attrs [ short ] )
22− -- ]
23− mapEveryCombo
24− (\( selfLabel, makeSelf ) ( childLabel, child ) ->
25− ( label ++ " - " ++ selfLabel ++ " > " ++ childLabel
26− , makeSelf attrs child
27− )
28− )
29− layouts
30− contents
31−
32−
33−{-| Given a list of attributes, generate every context this list of attributes could be in.
34−
35−So, this means,
36−
37− - every element type
38− - in every element type
39−
40−-}
41−elementInLayout : String -> List (Testable.Attr msg) -> List ( String, Testable.Element msg )
42−elementInLayout label attrs =
43− mapEveryCombo3
44− (\( layoutLabel, makeLayout ) ( selfLabel, makeSelf ) ( childLabel, child ) ->
45− ( label ++ " - " ++ layoutLabel ++ " > " ++ selfLabel ++ " > " ++ childLabel
46− , makeLayout [] (makeSelf attrs child)
47− )
48− )
49− layouts
50− layouts
51− contents
52−
53−
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−
97−layouts =
98− [ ( "el"
99− , \attrs child ->
100− el attrs child
101− )
102− , ( "row"
103− , \attrs child ->
104− row attrs [ child ]
105− )
106− , ( "col"
107− , \attrs child ->
108− column attrs [ child ]
109− )
110− , ( "para"
111− , \attrs child ->
112− paragraph attrs [ child ]
113− )
114− , ( "txtCol"
115− , \attrs child ->
116− textColumn attrs [ child ]
117− )
118− ]
119−
120−
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−
185−nearbys =
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
210− ]
211−
212−
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−
240−contents =
241− [ ( "none", none )
242− , ( "short text", text short )
243−
244− -- , ( "long text", text lorem )
245− , ( "box"
246− , box
247− )
248− ]
249−
250−
251−box =
252− el
253− [ width (px 50)
254− , height (px 50)
255− , Background.color (rgb (240 / 255) 0 (245 / 255))
256− , Font.color (rgb 1 1 1)
257− ]
258− none
259−
260−
261−short =
262− "short and small"
263−
264−
265−lorem =
266− "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc."
267−
268−
269−mapEveryCombo fn listOne listTwo =
270− List.concatMap
271− (\one ->
272− List.map
273− (\two ->
274− fn one two
275− )
276− listTwo
277− )
278− listOne
279−
280−
281−mapEveryCombo3 fn listOne listTwo listThree =
282− List.concatMap
283− (\one ->
284− List.concatMap
285− (\two ->
286− List.map
287− (\three ->
288− fn one two three
289− )
290− listThree
291− )
292− listTwo
293− )
294− listOne
295−
296−
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−
317−sizes render =
318− List.concatMap
319− (\( widthLen, heightLen ) ->
320− [ text (Debug.toString ( widthLen, heightLen ))
321− , render
322− (\attrs children ->
323− el
324− (width widthLen
325− :: height heightLen
326− :: attrs
327− )
328− children
329− )
330− ]
331− )
332− allLengthPairs
333−
334−
335−allLengthPairs : List ( Length, Length )
336−allLengthPairs =
337− let
338− crossProduct len =
339− List.map (Tuple.pair len) lengths
340− in
341− List.concatMap crossProduct lengths
342−
343−
344−lengths =
345− [ px 50
346− , fill
347− , shrink
348− , fill
349− |> maximum 100
350− , fill
351− |> maximum 100
352− |> minimum 50
353− , shrink
354− |> maximum 100
355− , shrink
356− |> maximum 100
357− |> minimum 50
358− ]
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/Testable/Runner.elm+96−204
@@ -1,12 +1,4 @@
1−port module Testable.Runner exposing
1+port module Testable.Runner exposing (Msg, TestableProgram, program, show)
2− ( Msg
3− , Testable
4− , TestableProgram
5− , program
6− , rename
7− , show
8− , testable
9− )
10
2
11{-| -}
3{-| -}
12
4
@@ -34,22 +26,6 @@ type alias TestableProgram =
34 Program () (Model Msg) Msg
26 Program () (Model Msg) Msg
35
27
36
28
37−{-| This should be a real type, but I'm too busy atm.
38−-}
39−type alias Testable =
40− ( String, Testable.Element Msg )
41−
42−
43−rename : String -> Testable -> Testable
44−rename newName ( _, el ) =
45− ( newName, el )
46−
47−
48−testable : String -> Testable.Element Msg -> Testable
49−testable =
50− Tuple.pair
51−
52−
53palette =
29palette =
54 { white = Element.rgb 1 1 1
30 { white = Element.rgb 1 1 1
55 , red = Element.rgb 1 0 0
31 , red = Element.rgb 1 0 0
@@ -59,7 +35,7 @@ palette =
59 }
35 }
60
36
61
37
62−program : List Testable -> TestableProgram
38+program : List ( String, Testable.Element Msg ) -> TestableProgram
63program tests =
39program tests =
64 let
40 let
65 ( current, upcoming ) =
41 ( current, upcoming ) =
@@ -70,17 +46,16 @@ program tests =
70 cur :: remaining ->
46 cur :: remaining ->
71 ( Just cur, remaining )
47 ( Just cur, remaining )
72 in
48 in
73− Browser.element
49+ Browser.document
74 { init =
50 { init =
75 always
51 always
76 ( { current = current
52 ( { current = current
77 , upcoming = upcoming
53 , upcoming = upcoming
78 , finished = []
54 , finished = []
79− , selected = 0
80 , highlightDomId = Nothing
55 , highlightDomId = Nothing
81 }
56 }
82 , Task.perform (always Analyze)
57 , Task.perform (always Analyze)
83− (Process.sleep 64
58+ (Process.sleep 32
84 |> Task.andThen
59 |> Task.andThen
85 (always Time.now)
60 (always Time.now)
86 )
61 )
@@ -102,14 +77,12 @@ type alias Model msg =
102 { current : Maybe ( String, Testable.Element msg )
77 { current : Maybe ( String, Testable.Element msg )
103 , upcoming : List ( String, Testable.Element msg )
78 , upcoming : List ( String, Testable.Element msg )
104 , finished : List (WithResults (Testable.Element msg))
79 , finished : List (WithResults (Testable.Element msg))
105− , selected : Int
106 , highlightDomId : Maybe String
80 , highlightDomId : Maybe String
107 }
81 }
108
82
109
83
110type alias WithResults thing =
84type alias WithResults thing =
111− { index : Int
112− , element : thing
85+ { element : thing
113 , label : String
86 , label : String
114 , results :
87 , results :
115 List Testable.LayoutTest
88 List Testable.LayoutTest
@@ -158,27 +131,24 @@ encodeForReport withResults =
158type Msg
131type Msg
159 = NoOp
132 = NoOp
160 | Analyze
133 | Analyze
161− | Select Int
162 | HighlightDomID (Maybe String)
134 | HighlightDomID (Maybe String)
163 | RefreshBoundingBox
135 | RefreshBoundingBox
164 (List
136 (List
165 { id : String
137 { id : String
166 , bbox : Testable.BoundingBox
138 , bbox : Testable.BoundingBox
167− , style : List ( String, String )
168 , isVisible : Bool
139 , isVisible : Bool
169− , textMetrics : List Testable.TextMetrics
140+ , style : List ( String, String )
170 }
141 }
171 )
142 )
172
143
173
144
174−runTest : Int -> Dict String Testable.Found -> String -> Testable.Element msg -> WithResults (Testable.Element msg)
145+runTest : Dict String Testable.Found -> String -> Testable.Element msg -> WithResults (Testable.Element msg)
175−runTest index boxes label element =
146+runTest boxes label element =
176 let
147 let
177 results =
148 results =
178 Testable.runTests boxes element
149 Testable.runTests boxes element
179 in
150 in
180− { index = index
181− , element = element
151+ { element = element
182 , label = label
152 , label = label
183 , results = results
153 , results = results
184 }
154 }
@@ -195,11 +165,6 @@ update msg model =
195 , Cmd.none
165 , Cmd.none
196 )
166 )
197
167
198− Select index ->
199− ( { model | selected = index }
200− , Cmd.none
201− )
202−
203 RefreshBoundingBox boxes ->
168 RefreshBoundingBox boxes ->
204 case model.current of
169 case model.current of
205 Nothing ->
170 Nothing ->
@@ -214,7 +179,6 @@ update msg model =
214 , { style = Dict.fromList box.style
179 , { style = Dict.fromList box.style
215 , bbox = box.bbox
180 , bbox = box.bbox
216 , isVisible = box.isVisible
181 , isVisible = box.isVisible
217− , textMetrics = box.textMetrics
218 }
182 }
219 )
183 )
220
184
@@ -224,7 +188,7 @@ update msg model =
224 |> Dict.fromList
188 |> Dict.fromList
225
189
226 currentResults =
190 currentResults =
227− runTest (List.length model.finished) foundData label current
191+ runTest foundData label current
228 in
192 in
229 case model.upcoming of
193 case model.upcoming of
230 [] ->
194 [] ->
@@ -242,7 +206,7 @@ update msg model =
242 , upcoming = remaining
206 , upcoming = remaining
243 }
207 }
244 , Task.perform (always Analyze)
208 , Task.perform (always Analyze)
245− (Process.sleep 64
209+ (Process.sleep 32
246 |> Task.andThen
210 |> Task.andThen
247 (always Time.now)
211 (always Time.now)
248 )
212 )
@@ -261,86 +225,69 @@ update msg model =
261 )
225 )
262
226
263
227
264−view : Model Msg -> Html.Html Msg
228+view : Model Msg -> Browser.Document Msg
265view model =
229view model =
266 case model.current of
230 case model.current of
267 Nothing ->
231 Nothing ->
268 if List.isEmpty model.upcoming then
232 if List.isEmpty model.upcoming then
269− let
233+ { title = "tests finished"
270− selected =
234+ , body =
271− getByIndex model.selected model.finished
235+ [ case model.finished of
272− in
236+ [] ->
273− Element.layout
237+ Element.layout [] <|
238+ Element.column
239+ [ Element.spacing 20
240+ , Element.padding 20
241+ , Element.width (Element.px 800)
242+ ]
243+ [ Element.none ]
244+
245+ finished :: remaining ->
246+ Element.layout
274− [ Font.size 16
247+ [ Font.size 16
275− , Element.inFront (Element.html (viewElementHighlight model))
248+ , Element.inFront (Element.html (viewElementHighlight model))
276− , Element.height Element.fill
277− ]
278− <|
279− Element.row [ Element.width Element.fill, Element.height Element.fill ]
280− [ Element.el
281− [ Element.width
282− (Element.fill
283− |> Element.maximum 900
284− )
285− , Element.alignTop
286− , Element.height Element.fill
287− , Element.scrollbars
288− ]
289− (Element.el
290− [ Element.centerX
291− , Element.padding 100
292− , Border.dashed
293− , Border.width 2
294− , Border.color palette.lightGrey
295− , Font.size 20
296− , Element.inFront
297− (Element.el
298− [ Font.size 14
299− , Font.color palette.lightGrey
300− ]
301− (Element.text "test case")
302− )
303 ]
249 ]
304− (case selected of
250+ <|
305− Nothing ->
251+ Element.row [ Element.width Element.fill ]
306− Element.text "nothing selected"
252+ [ Element.el
307−
253+ [ Element.width Element.fill
308− Just sel ->
254+ ]
255+ (Element.el
256+ [ Element.centerX
257+ , Element.padding 100
258+ , Border.dashed
259+ , Border.width 2
260+ , Border.color palette.lightGrey
261+ , Element.inFront
262+ (Element.el
263+ [ Font.size 14
264+ , Font.color palette.lightGrey
265+ ]
266+ (Element.text "test case")
267+ )
268+ ]
309− Testable.toElement sel.element
269+ (Testable.toElement finished.element)
310− )
311− )
270+ )
312− , Element.column
271+ , Element.column
313− [ Element.spacing 20
272+ [ Element.spacing 20
314− , Element.padding 20
273+ , Element.padding 20
315− , Element.width Element.fill
274+ , Element.width Element.fill
316− , Element.height Element.fill
317− , Element.scrollbarY
318− ]
275+ ]
319− (model.finished
320− |> List.sortBy hasFailure
321− |> List.map (viewResult model.selected)
276+ (List.map viewResult (finished :: remaining))
322− )
323− ]
277+ ]
278+ ]
279+ }
324
280
325 else
281 else
326− Html.text ""
282+ { title = "tests finished"
283+ , body = []
284+ }
327
285
328 Just ( label, current ) ->
286 Just ( label, current ) ->
287+ { title = "running"
288+ , body =
329− Testable.toHtml current
289+ [ Testable.toHtml current ]
330−
290+ }
331−
332−getByIndex i ls =
333− List.foldl
334− (\elem ( index, found ) ->
335− if i == index then
336− ( index + 1, Just elem )
337−
338− else
339− ( index + 1, found )
340− )
341− ( 0, Nothing )
342− ls
343− |> Tuple.second
344
291
345
292
346viewElementHighlight model =
293viewElementHighlight model =
@@ -351,7 +298,7 @@ viewElementHighlight model =
351 Just highlightDomId ->
298 Just highlightDomId ->
352 let
299 let
353 elementHighlight =
300 elementHighlight =
354− highlightDomId ++ " { outline: solid black; }"
301+ highlightDomId ++ " { outline: solid; }"
355
302
356 testId =
303 testId =
357 highlightDomId
304 highlightDomId
@@ -359,7 +306,7 @@ viewElementHighlight model =
359 |> String.append "#tests-"
306 |> String.append "#tests-"
360
307
361 testHighlight =
308 testHighlight =
362− testId ++ " { outline: dashed black; }"
309+ testId ++ " { outline: dashed; }"
363
310
364 styleSheet =
311 styleSheet =
365 String.join "\n"
312 String.join "\n"
@@ -373,88 +320,37 @@ viewElementHighlight model =
373 ]
320 ]
374
321
375
322
376−hasFailure : WithResults (Testable.Element Msg) -> Int
323+viewResult : WithResults (Testable.Element Msg) -> Element.Element Msg
377−hasFailure myTest =
324+viewResult testable =
378− if
325+ let
379− List.any
380− (not << isPassing)
381− myTest.results
382− then
383− 0
384−
385− else
386− 1
387−
388−
389−isExpectationPassing result =
326+ isExpectationPassing result =
390− case result of
327+ case result of
391− Testable.Todo label ->
328+ Testable.Todo label ->
392− True
329+ True
393−
394− Testable.Expect details ->
395− details.result
396−
397−
398−isPassing layoutTest =
399− List.all isExpectationPassing layoutTest.expectations
400−
401−
402−viewResult : Int -> WithResults (Testable.Element Msg) -> Element.Element Msg
403−viewResult selectedIndex myTest =
404− if myTest.index == selectedIndex then
405− Element.column
406− [ Element.alignLeft
407− , Element.spacing 16
408− ]
409− [ Element.el [ Font.size 24 ] (Element.text myTest.label)
410− , Element.column
411− [ Element.alignLeft, Element.spacing 16 ]
412− (myTest.results
413− |> groupBy .elementDomId
414− |> List.map (expandDetails >> viewLayoutTestGroup)
415− )
416− ]
417−
418− else
419− let
420− ( passing, failing ) =
421− List.partition isPassing myTest.results
422− in
423− Element.column
424− [ Element.alignLeft
425− , Element.spacing 16
426− , Element.pointer
427− , Events.onClick (Select myTest.index)
428− ]
429− [ Element.row [ Element.spacing 16 ]
430− [ Element.el [ Font.size 16 ] (Element.text myTest.label)
431− , Element.text (String.fromInt (List.length passing) ++ " passing")
432− , let
433− failingCount =
434− List.length failing
435− in
436− if failingCount == 0 then
437− Element.none
438−
439− else
440− Element.text (String.fromInt (List.length failing) ++ " failing")
441− ]
442− ]
443
330
331+ Testable.Expect details ->
332+ details.result
444
333
445−expandDetails group =
334+ isPassing layoutTest =
446− case group.members of
335+ List.any isExpectationPassing layoutTest.expectations
447− [] ->
448− { id = group.id
449− , elementType = Testable.EmptyType
450− , members = group.members
451− }
452
336
453− top :: _ ->
337+ ( passing, failing ) =
454− { id = group.id
338+ List.partition isPassing testable.results
455− , elementType = top.elementType
339+ in
456− , members = group.members
340+ Element.column
457− }
341+ [ Element.alignLeft
342+ , Element.spacing 16
343+ ]
344+ [ Element.el [ Font.size 24 ] (Element.text testable.label)
345+ , Element.column [ Element.alignLeft, Element.spacing 20 ]
346+ (List.map viewLayoutTest failing)
347+ , Element.column
348+ [ Element.alignLeft, Element.spacing 16 ]
349+ (passing
350+ |> groupBy .elementDomId
351+ |> List.map viewLayoutTestGroup
352+ )
353+ ]
458
354
459
355
460groupBy fn list =
356groupBy fn list =
@@ -500,10 +396,7 @@ viewLayoutTestGroup group =
500 , Events.onMouseLeave (HighlightDomID Nothing)
396 , Events.onMouseLeave (HighlightDomID Nothing)
501 , Element.htmlAttribute (Html.Attributes.style "user-select" "none")
397 , Element.htmlAttribute (Html.Attributes.style "user-select" "none")
502 ]
398 ]
503− [ Element.row [ Element.spacing 16 ]
504− [ Element.el [] (Element.text (Testable.elementTypeToString group.elementType))
505− , Element.el [ Font.color palette.lightGrey ] (Element.text group.id)
399+ [ Element.el [ Font.color palette.lightGrey ] (Element.text group.id)
506− ]
507 , Element.column
400 , Element.column
508 [ Element.spacing 8
401 [ Element.spacing 8
509 , Element.paddingXY 32 0
402 , Element.paddingXY 32 0
@@ -600,7 +493,6 @@ port styles :
600 , bbox : Testable.BoundingBox
493 , bbox : Testable.BoundingBox
601 , style : List ( String, String )
494 , style : List ( String, String )
602 , isVisible : Bool
495 , isVisible : Bool
603− , textMetrics : List Testable.TextMetrics
604 }
496 }
605 -> msg
497 -> msg
606 )
498 )
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.elmdeleted−44
@@ -1,44 +0,0 @@
1−module Tests.All exposing (main)
2−
3−{-| -}
4−
5−import Layout.NestedParagraphs
6−import Layout.SafariBugIssue147
7−import Testable.Generator
8−import Testable.Runner
9−import Tests.Alignment
10−import Tests.Nearby
11−import Tests.Spacing
12−import Tests.TextWrapping
13−import Tests.Transparency
14−
15−
16−main : Testable.Runner.TestableProgram
17−main =
18− (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
30− ]
31−
32−
33−issues =
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
44− ]
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 as Element exposing (..)
9+import Testable.Element.Background as Background
10+import Testable.Element.Font as Font
11+import Testable.Runner
12+import Tests.Palette as Palette
13+
14+
15+{-| -}
16+main : Html.Html msg
17+main =
18+ Testable.Runner.show view
19+
20+
21+{-| -}
22+view : Testable.Element msg
23+view =
24+ row [ spacing 50, alignTop ]
25+ [ el
26+ [ width (px 200)
27+ , height (px 200)
28+ , Background.color Palette.blue
29+ , Font.color Palette.white
30+ ]
31+ (text "Hello!")
32+ , el
33+ [ width (px 200)
34+ , height (px 200)
35+ , Background.color Palette.blue
36+ , Font.color Palette.white
37+ ]
38+ (text "Hello!")
39+ , el
40+ [ width (px 200)
41+ , height (px 200)
42+ , Background.color (Actual.rgba 0 0 1 1)
43+ , Font.color Palette.white
44+ , below
45+ (el
46+ [ Background.color Palette.grey
47+ , width (px 50)
48+ , height (px 50)
49+ ]
50+ none
51+ )
52+ ]
53+ (text "Hello!")
54+ ]
tests-rendering/src/Tests/ColumnAlignment.elmnew file+176
@@ -0,0 +1,176 @@
1+module Tests.ColumnAlignment exposing (..)
2+
3+import Html
4+import Testable
5+import Testable.Element as Element exposing (..)
6+import Testable.Element.Background as Background
7+import Testable.Element.Font as Font
8+import Testable.Runner
9+import Tests.Palette as Palette exposing (..)
10+
11+
12+{-| -}
13+main : Html.Html msg
14+main =
15+ Testable.Runner.show view
16+
17+
18+box attrs =
19+ el
20+ ([ width (px 50)
21+ , height (px 50)
22+ , Background.color blue
23+ ]
24+ ++ attrs
25+ )
26+ none
27+
28+
29+container =
30+ el [ width (px 100), height (px 100) ]
31+
32+
33+view =
34+ let
35+ colContainer attrs children =
36+ column ([ Background.color lightGrey, spacing 20, width (px 100), height (px 500) ] ++ attrs) children
37+
38+ tallContainer attrs children =
39+ column ([ Background.color lightGrey, spacing 20, width (px 100), height fill ] ++ attrs) children
40+ in
41+ column
42+ [ width fill, spacing 20 ]
43+ [ el [] (text "Alignment Within a Column")
44+ , row [ spacing 20 ]
45+ [ colContainer []
46+ [ box [] ]
47+ , colContainer []
48+ [ box [ centerY ]
49+ ]
50+ , colContainer []
51+ [ box [ alignBottom, label "first" ]
52+ ]
53+ ]
54+ , row [ spacing 20 ]
55+ [ colContainer []
56+ [ box [] ]
57+ , colContainer []
58+ [ box []
59+ , box []
60+ , box []
61+ ]
62+ , colContainer []
63+ [ box [ alignLeft, label "first" ]
64+ , box [ centerX, label "second" ]
65+ , box [ alignRight, label "third" ]
66+ ]
67+ ]
68+ , row [ spacing 20 ]
69+ [ colContainer []
70+ [ box []
71+ , box []
72+ , box []
73+ ]
74+ , colContainer []
75+ [ box []
76+ , box []
77+ , box [ alignBottom, label "third" ]
78+ ]
79+ , colContainer []
80+ [ box []
81+ , box [ alignBottom, label "second" ]
82+ , box []
83+ ]
84+ , colContainer []
85+ [ box [ alignBottom, label "first" ]
86+ , box []
87+ , box []
88+ ]
89+ ]
90+ , text "centerY"
91+ , row [ spacing 20 ]
92+ [ colContainer [ height fill ]
93+ [ box [ centerY, label "solo" ]
94+ ]
95+ , colContainer []
96+ [ box []
97+ , box [ centerY, label "middle" ]
98+ , box []
99+ ]
100+ , colContainer []
101+ [ box []
102+ , box []
103+ , box [ centerY, label "last" ]
104+ ]
105+ ]
106+ , text "multiple centerY"
107+ , row [ height (px 800), spacing 20 ]
108+ [ tallContainer []
109+ [ box []
110+ , box [ centerY ]
111+ , box [ centerY ]
112+ , box [ centerY ]
113+ , box [ centerY ]
114+ , box [ alignBottom ]
115+ ]
116+ , tallContainer []
117+ [ box []
118+ , box [ centerY ]
119+ , box []
120+ ]
121+ , tallContainer []
122+ [ box []
123+ , box []
124+ , box [ centerY ]
125+ ]
126+ ]
127+ , text "top, center, bottom"
128+ , row [ spacing 20 ]
129+ [ colContainer []
130+ [ box [ alignTop, label "first" ]
131+ , box []
132+ , box [ alignBottom, label "last" ]
133+ ]
134+ , colContainer []
135+ [ box [ alignTop ]
136+ , box [ centerY ]
137+ , box [ alignBottom ]
138+ ]
139+ , colContainer []
140+ [ box [ alignLeft, alignTop ]
141+ , box [ centerX, centerY ]
142+ , box [ alignRight, alignBottom ]
143+ ]
144+ ]
145+ , el [ width fill ] (text "Column in a Row")
146+ , row [ width fill, spacing 20, label "row" ]
147+ [ box [ alignLeft, alignTop, label "box" ]
148+ , column
149+ [ alignLeft
150+ , alignTop
151+ , spacing 20
152+ , label "column"
153+ , Background.color lightGrey
154+ ]
155+ [ box []
156+ , box []
157+ , box []
158+ ]
159+ , column
160+ [ spacing 20
161+ , width (px 100)
162+ , alignLeft
163+ , alignTop
164+ , Background.color lightGrey
165+ ]
166+ [ box []
167+ , box []
168+ , box []
169+ ]
170+ , colContainer []
171+ [ box [ alignRight ]
172+ , box [ centerX ]
173+ , box [ alignLeft ]
174+ ]
175+ ]
176+ ]
tests-rendering/src/Tests/ColumnSpacing.elmnew file+68
@@ -0,0 +1,68 @@
1+module Tests.ColumnSpacing exposing (..)
2+
3+import Html
4+import Testable
5+import Testable.Element as Element exposing (..)
6+import Testable.Element.Background as Background
7+import Testable.Element.Font as Font
8+import Testable.Runner
9+import Tests.Palette as Palette exposing (..)
10+
11+
12+{-| -}
13+main : Html.Html msg
14+main =
15+ Testable.Runner.show view
16+
17+
18+box attrs =
19+ el
20+ ([ width (px 50)
21+ , height (px 50)
22+ , Background.color blue
23+ ]
24+ ++ attrs
25+ )
26+ none
27+
28+
29+tinyBox attrs =
30+ el
31+ ([ width (px 20)
32+ , height (px 20)
33+
34+ -- , centerY
35+ , Background.color darkCharcoal
36+ ]
37+ ++ attrs
38+ )
39+ none
40+
41+
42+container =
43+ el [ width (px 100), height (px 100) ]
44+
45+
46+view =
47+ let
48+ colContainer attrs children =
49+ column ([ spacing 20, width (px 100), height (px 500) ] ++ attrs) children
50+ in
51+ column
52+ []
53+ [ el [] (text "Spacing within a column")
54+ , row []
55+ [ colContainer []
56+ [ box [] ]
57+ , colContainer []
58+ [ box []
59+ , box []
60+ , box []
61+ ]
62+ , colContainer [ onRight (tinyBox []) ]
63+ [ box []
64+ , box []
65+ , box []
66+ ]
67+ ]
68+ ]
tests-rendering/src/Tests/ElementAlignment.elmnew file+111
@@ -0,0 +1,111 @@
1+module Tests.ElementAlignment exposing (..)
2+
3+import Generator
4+import Html
5+import Testable
6+import Testable.Element as Element exposing (..)
7+import Testable.Element.Background as Background
8+import Testable.Element.Font as Font
9+import Testable.Runner
10+import Tests.Palette as Palette exposing (..)
11+
12+
13+{-| -}
14+main : Html.Html msg
15+main =
16+ Testable.Runner.show view
17+
18+
19+box : List (Testable.Attr msg) -> Testable.Element msg
20+box attrs =
21+ el
22+ ([ width (px 50)
23+ , height (px 50)
24+ , Background.color blue
25+ ]
26+ ++ attrs
27+ )
28+ none
29+
30+
31+container : Testable.Element msg -> Testable.Element msg
32+container =
33+ el
34+ [ width (px 200)
35+ , height (px 200)
36+ , Background.color lightGrey
37+ ]
38+
39+
40+view : Testable.Element msg
41+view =
42+ column []
43+ [ el [] (text "Alignment Within an El")
44+ , container <|
45+ box []
46+ , text "alignLeft, centerX, alignRight"
47+ , column [ spacing 20 ] <|
48+ Generator.sizes
49+ (\resizeable ->
50+ row [ spacing 20 ]
51+ [ container <|
52+ resizeable [ Background.color blue, alignLeft ] none
53+ , container <|
54+ resizeable [ Background.color blue, centerX ] none
55+ , container <|
56+ resizeable [ Background.color blue, alignRight ] none
57+ ]
58+ )
59+ , text "top, centerY, bottom"
60+ , column [ spacing 20 ] <|
61+ Generator.sizes
62+ (\resizeable ->
63+ row [ spacing 20 ]
64+ [ container <|
65+ resizeable [ alignTop ] none
66+ , container <|
67+ resizeable [ centerY ] none
68+ , container <|
69+ resizeable [ alignBottom ] none
70+ ]
71+ )
72+ , text "align top ++ alignments"
73+ , column [ spacing 20 ] <|
74+ Generator.sizes
75+ (\resizeable ->
76+ row [ spacing 20 ]
77+ [ container <|
78+ resizeable [ alignTop, alignLeft ] none
79+ , container <|
80+ resizeable [ alignTop, centerX ] none
81+ , container <|
82+ resizeable [ alignTop, alignRight ] none
83+ ]
84+ )
85+ , text "centerY ++ alignments"
86+ , column [ spacing 20 ] <|
87+ Generator.sizes
88+ (\resizeable ->
89+ row [ spacing 20 ]
90+ [ container <|
91+ resizeable [ centerY, alignLeft ] none
92+ , container <|
93+ resizeable [ centerY, centerX ] none
94+ , container <|
95+ resizeable [ centerY, alignRight ] none
96+ ]
97+ )
98+ , text "alignBottom ++ alignments"
99+ , column [ spacing 20 ] <|
100+ Generator.sizes
101+ (\resizeable ->
102+ row [ spacing 20 ]
103+ [ container <|
104+ resizeable [ alignBottom, alignLeft ] none
105+ , container <|
106+ resizeable [ alignBottom, centerX ] none
107+ , container <|
108+ resizeable [ alignBottom, alignRight ] none
109+ ]
110+ )
111+ ]
tests-rendering/src/Tests/Nearby.elm+356−97
@@ -8,7 +8,6 @@ import Testable
8import Testable.Element exposing (..)
8import Testable.Element exposing (..)
9import Testable.Element.Background as Background
9import Testable.Element.Background as Background
10import Testable.Element.Font as Font
10import Testable.Element.Font as Font
11−import Testable.Generator
12import Testable.Runner
11import Testable.Runner
13import Tests.Palette as Palette exposing (..)
12import Tests.Palette as Palette exposing (..)
14
13
@@ -58,39 +57,365 @@ p attrs =
58
57
59
58
60{-| -}
59{-| -}
60+main : Html.Html msg
61+main =
62+ Testable.Runner.show view
63+
64+
65+{-| -}
61−view : List ( String, Testable.Element msg )
66+view : Testable.Element msg
62view =
67view =
63− List.concat
68+ let
64− [ [ Tuple.pair "Parent inFront above child inFront" layeredVisibility
69+ transparentBox attrs =
65− , Tuple.pair "Sibling onLeft above sibling inFront" overlappingChildren
70+ el
66− , Tuple.pair "el with all nearbys and alignments" master
71+ ([ Font.color white
67− , Tuple.pair "paragraph with all nearbys and alignments" masterParagraph
72+ , width (px 50)
68− ]
73+ , height (px 50)
69− , Testable.Generator.generate "Nearbys"
74+ , Background.color white
70− (\element nearby ->
75+ ]
71− element
76+ ++ attrs
72− [ nearby (box [])
77+ )
78+ (text "hi")
79+
80+ -- single location name box =
81+ -- row [ height (px 100), width fill, spacing 50 ]
82+ -- [ box
83+ -- [ location
84+ -- (el
85+ -- [ width (px 20)
86+ -- , height (px 20)
87+ -- , Background.color darkCharcoal
88+ -- ]
89+ -- none
90+ -- )
91+ -- ]
92+ -- , box
93+ -- [ location
94+ -- (el
73− , width (px 200)
95+ -- [ width (px 20)
74− , height (px 200)
96+ -- , height (px 20)
75− , Background.color red
97+ -- , alignLeft
98+ -- , Background.color darkCharcoal
99+ -- ]
100+ -- none
101+ -- )
102+ -- ]
103+ -- ]
104+ little name attrs =
105+ el
106+ ([ label name
107+ , width (px 5)
108+ , height (px 5)
109+ , Background.color darkCharcoal
110+ ]
111+ ++ attrs
112+ )
113+ none
114+
115+ nearby location name render =
116+ column [ spacing 32, label "column" ]
117+ [ el [ padding 20, Background.color green, Font.color white ] (text name)
118+ , row [ height (px 100), width fill, spacing 50 ]
119+ [ render
120+ [ location
121+ (el
122+ [ label name
123+ , width (px 20)
124+ , height (px 20)
125+ , Background.color darkCharcoal
126+ ]
127+ none
128+ )
129+ ]
130+ , render
131+ [ location
132+ (el
133+ [ label name
134+ , width (px 20)
135+ , height (px 20)
136+ , alignLeft
137+ , Background.color darkCharcoal
138+ ]
139+ none
140+ )
141+ ]
142+ , render
143+ [ location
144+ (el
145+ [ label name
146+ , width (px 20)
147+ , height (px 20)
148+ , centerX
149+ , Background.color darkCharcoal
150+ ]
151+ none
152+ )
153+ ]
154+ , render
155+ [ location
156+ (el
157+ [ label name
158+ , width (px 20)
159+ , height (px 20)
160+ , alignRight
161+ , Background.color darkCharcoal
162+ ]
163+ none
164+ )
165+ ]
166+ , render
167+ [ location
168+ (el
169+ [ label name
170+ , width (px 20)
171+ , height (px 20)
172+ , alignTop
173+ , Background.color darkCharcoal
174+ ]
175+ none
176+ )
177+ ]
178+ , render
179+ [ location
180+ (el
181+ [ label name
182+ , width (px 20)
183+ , height (px 20)
184+ , centerY
185+ , Background.color darkCharcoal
186+ ]
187+ none
188+ )
189+ ]
190+ , render
191+ [ location
192+ (el
193+ [ label name
194+ , width (px 20)
195+ , height (px 20)
196+ , alignBottom
197+ , Background.color darkCharcoal
198+ ]
199+ none
200+ )
201+ ]
202+ ]
203+ , text "widths/heights"
204+ , row [ height (px 100), width fill, spacing 50, label "Row" ]
205+ [ render
206+ [ location
207+ (el
208+ [ label name
209+ , width fill
210+ , height fill
211+ , Background.color darkCharcoal
212+ ]
213+ none
214+ )
215+ ]
216+ , render
217+ [ location
218+ (el
219+ [ label name
220+ , width (px 20)
221+ , height fill
222+ , Background.color darkCharcoal
223+ ]
224+ none
225+ )
226+ ]
227+ , render
228+ [ label "render"
229+ , location
230+ (el
231+ [ label name
232+ , width fill
233+ , height (px 20)
234+ , Background.color darkCharcoal
235+ ]
236+ none
237+ )
238+ ]
239+ , render
240+ [ location
241+ (el
242+ [ label name
243+ , width (px 20)
244+ , height shrink
245+ , Background.color darkCharcoal
246+ , Font.color white
247+ ]
248+ (text "h-shrink")
249+ )
250+ ]
251+ , render
252+ [ location
253+ (el
254+ [ label name
255+ , width shrink
256+ , height (px 20)
257+ , Background.color darkCharcoal
258+ , Font.color white
259+ ]
260+ (text "w-shrink")
261+ )
262+ ]
76 ]
263 ]
77− none
264+ , text "on paragraph"
78− )
265+ , row [ width fill, spacing 50, label "Row" ]
79− |> Testable.Generator.with Testable.Generator.allElements
266+ [ p
80− |> Testable.Generator.with Testable.Generator.nearbys
267+ [ location
81− , Testable.Generator.generate "Nearbys with alignment"
268+ (el
82− (\element nearby align ->
269+ [ label name
83− element
270+ , width (px 20)
84− [ nearby (box [ align ])
271+ , height (px 20)
272+ , Background.color darkCharcoal
273+ ]
274+ none
275+ )
276+ ]
277+ , p
278+ [ location
279+ (el
280+ [ label name
281+ , width (px 20)
282+ , height (px 20)
283+ , alignLeft
284+ , Background.color darkCharcoal
285+ ]
286+ none
287+ )
288+ ]
289+ , p
290+ [ location
291+ (el
292+ [ label name
293+ , width (px 20)
294+ , height (px 20)
295+ , centerX
296+ , Background.color darkCharcoal
297+ ]
298+ none
299+ )
300+ ]
301+ , p
302+ [ location
303+ (el
304+ [ label name
305+ , width (px 20)
306+ , height (px 20)
307+ , alignRight
308+ , Background.color darkCharcoal
309+ ]
310+ none
311+ )
312+ ]
313+ , p
314+ [ location
315+ (el
316+ [ label name
85− , width (px 200)
317+ , width (px 20)
318+ , height (px 20)
319+ , alignTop
320+ , Background.color darkCharcoal
321+ ]
322+ none
323+ )
324+ ]
325+ , p
326+ [ location
327+ (el
328+ [ label name
329+ , width (px 20)
86− , height (px 200)
330+ , height (px 20)
331+ , centerY
332+ , Background.color darkCharcoal
333+ ]
334+ none
335+ )
336+ ]
337+ , p
338+ [ location
339+ (el
340+ [ label name
341+ , width (px 20)
342+ , height (px 20)
343+ , alignBottom
87− , Background.color red
344+ , Background.color darkCharcoal
345+ ]
346+ none
347+ )
348+ ]
88 ]
349 ]
89− none
350+ ]
90− )
351+
91− |> Testable.Generator.with Testable.Generator.allElements
352+ master =
92− |> Testable.Generator.with Testable.Generator.nearbys
353+ el [ padding 20 ] <|
93− |> Testable.Generator.with Testable.Generator.alignments
354+ box
355+ [ above (little "above-left" [ alignLeft ])
356+ , above (little "above-center" [ centerX ])
357+ , above (little "above-right" [ alignRight ])
358+ , below (little "below-left" [ alignLeft ])
359+ , below (little "below-center" [ centerX ])
360+ , below (little "below-right" [ alignRight ])
361+ , onRight (little "onRight-left" [ alignTop ])
362+ , onRight (little "onRight-center" [ centerY ])
363+ , onRight (little "onRight-right" [ alignBottom ])
364+ , onLeft (little "onLeft-left" [ alignTop ])
365+ , onLeft (little "onLeft-center" [ centerY ])
366+ , onLeft (little "onLeft-right" [ alignBottom ])
367+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])
368+ , inFront (little "infront-center-top" [ alignTop, centerX ])
369+ , inFront (little "infront-right-top" [ alignTop, alignRight ])
370+ , inFront (little "infront-left-center" [ centerY, alignLeft ])
371+ , inFront (little "infront-center-center" [ centerY, centerX ])
372+ , inFront (little "infront-right-center" [ centerY, alignRight ])
373+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
374+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
375+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
376+ ]
377+
378+ masterParagraph =
379+ el [ padding 20 ] <|
380+ p
381+ [ above (little "above-left" [ alignLeft ])
382+ , above (little "above-center" [ centerX ])
383+ , above (little "above-right" [ alignRight ])
384+ , below (little "below-left" [ alignLeft ])
385+ , below (little "below-center" [ centerX ])
386+ , below (little "below-right" [ alignRight ])
387+ , onRight (little "onRight-left" [ alignTop ])
388+ , onRight (little "onRight-center" [ centerY ])
389+ , onRight (little "onRight-right" [ alignBottom ])
390+ , onLeft (little "onLeft-left" [ alignTop ])
391+ , onLeft (little "onLeft-center" [ centerY ])
392+ , onLeft (little "onLeft-right" [ alignBottom ])
393+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])
394+ , inFront (little "infront-center-top" [ alignTop, centerX ])
395+ , inFront (little "infront-right-top" [ alignTop, alignRight ])
396+ , inFront (little "infront-left-center" [ centerY, alignLeft ])
397+ , inFront (little "infront-center-center" [ centerY, centerX ])
398+ , inFront (little "infront-right-center" [ centerY, alignRight ])
399+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
400+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
401+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
402+ ]
403+ in
404+ column
405+ [ centerX, label "Nearby Elements", spacing 100 ]
406+ [ layeredVisibility
407+ , overlappingChildren
408+
409+ -- Note: visibility checks like the above
410+ -- need to be at the top so they're in the viewport
411+ , master
412+ , masterParagraph
413+ , nearby above "above" box
414+ , nearby below "below" box
415+ , nearby inFront "inFront" box
416+ , nearby onRight "onRight" box
417+ , nearby onLeft "onLeft" box
418+ , nearby behindContent "behindContent" transparentBox
94 ]
419 ]
95
420
96
421
@@ -111,69 +436,3 @@ overlappingChildren =
111 , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]
436 , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]
112 (justBox 40 darkGrey [])
437 (justBox 40 darkGrey [])
113 ]
438 ]
114−
115−
116−little name attrs =
117− el
118− ([ label name
119− , width (px 5)
120− , height (px 5)
121− , Background.color darkCharcoal
122− ]
123− ++ attrs
124− )
125− none
126−
127−
128−master =
129− el [ padding 20 ] <|
130− box
131− [ above (little "above-left" [ alignLeft ])
132− , above (little "above-center" [ centerX ])
133− , above (little "above-right" [ alignRight ])
134− , below (little "below-left" [ alignLeft ])
135− , below (little "below-center" [ centerX ])
136− , below (little "below-right" [ alignRight ])
137− , onRight (little "onRight-left" [ alignTop ])
138− , onRight (little "onRight-center" [ centerY ])
139− , onRight (little "onRight-right" [ alignBottom ])
140− , onLeft (little "onLeft-left" [ alignTop ])
141− , onLeft (little "onLeft-center" [ centerY ])
142− , onLeft (little "onLeft-right" [ alignBottom ])
143− , inFront (little "infront-left-top" [ alignTop, alignLeft ])
144− , inFront (little "infront-center-top" [ alignTop, centerX ])
145− , inFront (little "infront-right-top" [ alignTop, alignRight ])
146− , inFront (little "infront-left-center" [ centerY, alignLeft ])
147− , inFront (little "infront-center-center" [ centerY, centerX ])
148− , inFront (little "infront-right-center" [ centerY, alignRight ])
149− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
150− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
151− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
152− ]
153−
154−
155−masterParagraph =
156− el [ padding 20 ] <|
157− p
158− [ above (little "above-left" [ alignLeft ])
159− , above (little "above-center" [ centerX ])
160− , above (little "above-right" [ alignRight ])
161− , below (little "below-left" [ alignLeft ])
162− , below (little "below-center" [ centerX ])
163− , below (little "below-right" [ alignRight ])
164− , onRight (little "onRight-left" [ alignTop ])
165− , onRight (little "onRight-center" [ centerY ])
166− , onRight (little "onRight-right" [ alignBottom ])
167− , onLeft (little "onLeft-left" [ alignTop ])
168− , onLeft (little "onLeft-center" [ centerY ])
169− , onLeft (little "onLeft-right" [ alignBottom ])
170− , inFront (little "infront-left-top" [ alignTop, alignLeft ])
171− , inFront (little "infront-center-top" [ alignTop, centerX ])
172− , inFront (little "infront-right-top" [ alignTop, alignRight ])
173− , inFront (little "infront-left-center" [ centerY, alignLeft ])
174− , inFront (little "infront-center-center" [ centerY, centerX ])
175− , inFront (little "infront-right-center" [ centerY, alignRight ])
176− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
177− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
178− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
179− ]
tests-rendering/src/Tests/RowAlignment.elmnew file+212
@@ -0,0 +1,212 @@
1+module Tests.RowAlignment exposing (..)
2+
3+import Generator
4+import Html
5+import Testable
6+import Testable.Element as Element exposing (..)
7+import Testable.Element.Background as Background
8+import Testable.Element.Font as Font
9+import Testable.Runner
10+import Tests.Palette as Palette exposing (..)
11+
12+
13+{-| -}
14+main : Html.Html msg
15+main =
16+ Testable.Runner.show view
17+
18+
19+box attrs =
20+ el
21+ ([ width (px 50)
22+ , height (px 50)
23+ , Background.color blue
24+ ]
25+ ++ attrs
26+ )
27+ none
28+
29+
30+view =
31+ let
32+ rowContainer attrs children =
33+ row
34+ ([ spacing 20
35+ , height (px 100)
36+ , Background.color lightGrey
37+ ]
38+ ++ attrs
39+ )
40+ children
41+ in
42+ column [ width (px 500), spacing 20 ]
43+ [ el [] (text "Alignment Within a Row")
44+ , column [ spacing 20 ] <|
45+ Generator.sizes <|
46+ \resizeable ->
47+ rowContainer
48+ [ label "single child" ]
49+ [ resizeable [] none ]
50+ , column [ spacing 20 ] <|
51+ Generator.sizes <|
52+ \resizeable ->
53+ rowContainer
54+ [ label "single child" ]
55+ [ resizeable [ centerX ] none ]
56+ , column [ spacing 20 ] <|
57+ Generator.sizes <|
58+ \resizeable ->
59+ rowContainer [ label "single child" ]
60+ [ resizeable [ alignRight ] none ]
61+ , column [ spacing 20 ] <|
62+ Generator.sizes <|
63+ \resizeable ->
64+ rowContainer []
65+ [ resizeable [] none
66+ , resizeable [] none
67+ , resizeable [] none
68+ ]
69+ , column [ spacing 20 ] <|
70+ Generator.sizes <|
71+ \resizeable ->
72+ rowContainer []
73+ [ resizeable [] none
74+ , resizeable [] none
75+ , resizeable [ alignRight, label "Right Child in Row" ] none
76+ ]
77+ , column [ spacing 20 ] <|
78+ Generator.sizes <|
79+ \resizeable ->
80+ rowContainer
81+ []
82+ [ resizeable [] none
83+ , resizeable [ alignRight, label "Middle Child in Row" ] none
84+ , resizeable [] none
85+ ]
86+ , column [ spacing 20 ] <|
87+ Generator.sizes <|
88+ \resizeable ->
89+ rowContainer []
90+ [ resizeable [ alignRight, label "Left Child in Row" ] none
91+ , resizeable [] none
92+ , resizeable [] none
93+ ]
94+ , text "center X"
95+ , column [ spacing 20 ] <|
96+ Generator.sizes <|
97+ \resizeable ->
98+ rowContainer []
99+ [ resizeable [ centerX, label "Left Child in Row" ] none
100+ , resizeable [] none
101+ , resizeable [] none
102+ ]
103+ , column [ spacing 20 ] <|
104+ Generator.sizes <|
105+ \resizeable ->
106+ rowContainer []
107+ [ resizeable [] none
108+ , resizeable [ centerX, label "Middle Child in Row" ] none
109+ , resizeable [] none
110+ ]
111+ , column [ spacing 20 ] <|
112+ Generator.sizes <|
113+ \resizeable ->
114+ rowContainer []
115+ [ resizeable [] none
116+ , resizeable [] none
117+ , resizeable [ centerX, label "Right Child in Row" ] none
118+ ]
119+ , column [ spacing 20 ] <|
120+ Generator.sizes <|
121+ \resizeable ->
122+ rowContainer []
123+ [ resizeable [] none
124+ , resizeable [] none
125+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
126+ , resizeable [] none
127+ ]
128+ , column [ spacing 20 ] <|
129+ Generator.sizes <|
130+ \resizeable ->
131+ rowContainer []
132+ [ resizeable [] none
133+ , resizeable [] none
134+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
135+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
136+ , resizeable [] none
137+ ]
138+ , column [ spacing 20 ] <|
139+ Generator.sizes <|
140+ \resizeable ->
141+ rowContainer []
142+ [ resizeable [] none
143+ , resizeable [] none
144+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
145+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
146+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
147+ , resizeable [] none
148+ ]
149+ , text "left x right"
150+ , column [ spacing 20 ] <|
151+ Generator.sizes <|
152+ \resizeable ->
153+ rowContainer []
154+ [ resizeable [ alignLeft, label "Left Child in Row" ] none
155+ , resizeable [] none
156+ , resizeable [ alignRight, label "Right Child in Row" ] none
157+ ]
158+ , text "left center right"
159+ , column [ spacing 20 ] <|
160+ Generator.sizes <|
161+ \resizeable ->
162+ rowContainer []
163+ [ resizeable [ alignLeft, label "Left Child in Row" ] none
164+ , resizeable [ centerX, label "Middle Child in Row" ] none
165+ , resizeable [ alignRight, label "Right Child in Row" ] none
166+ ]
167+ , text "vertical alignment"
168+ , column [ spacing 20 ] <|
169+ Generator.sizes <|
170+ \resizeable ->
171+ rowContainer []
172+ [ resizeable [ alignTop, label "Left Child in Row" ] none
173+ , resizeable [ centerY, label "Middle Child in Row" ] none
174+ , resizeable [ alignBottom, label "Right Child in Row" ] none
175+ ]
176+ , text "x and y alignments"
177+ , column [ spacing 20 ] <|
178+ Generator.sizes <|
179+ \resizeable ->
180+ rowContainer []
181+ [ resizeable [ alignLeft, alignTop, label "Left Child" ] none
182+ , resizeable [ centerX, centerY, label "Middle Child" ] none
183+ , resizeable [ alignRight, alignBottom, label "Right Child" ] none
184+ ]
185+ , text "align Top and X alignments "
186+ , column [ spacing 20 ] <|
187+ Generator.sizes <|
188+ \resizeable ->
189+ rowContainer []
190+ [ resizeable [ alignLeft, alignTop, label "Left Child" ] none
191+ , resizeable [ centerX, alignTop, label "Middle Child" ] none
192+ , resizeable [ alignRight, alignTop, label "Right Child" ] none
193+ ]
194+ , text "align Bottom and X alignments "
195+ , column [ spacing 20 ] <|
196+ Generator.sizes <|
197+ \resizeable ->
198+ rowContainer []
199+ [ resizeable [ alignLeft, alignBottom, label "Left Child" ] none
200+ , resizeable [ centerX, alignBottom, label "Middle Child" ] none
201+ , resizeable [ alignRight, alignBottom, label "Right Child" ] none
202+ ]
203+ , text "centerY and X alignments "
204+ , column [ spacing 20 ] <|
205+ Generator.sizes <|
206+ \resizeable ->
207+ rowContainer []
208+ [ resizeable [ alignLeft, centerY, label "Left Child" ] none
209+ , resizeable [ centerX, centerY, label "Middle Child" ] none
210+ , resizeable [ alignRight, centerY, label "Right Child" ] none
211+ ]
212+ ]
tests-rendering/src/Tests/RowSpacing.elmnew file+69
@@ -0,0 +1,69 @@
1+module Tests.RowSpacing exposing (..)
2+
3+import Html
4+import Testable
5+import Testable.Element as Element exposing (..)
6+import Testable.Element.Background as Background
7+import Testable.Element.Font as Font
8+import Testable.Runner
9+import Tests.Palette as Palette exposing (..)
10+
11+
12+{-| -}
13+main : Html.Html msg
14+main =
15+ Testable.Runner.show view
16+
17+
18+box attrs =
19+ el
20+ ([ width (px 50)
21+ , height (px 50)
22+ , Background.color blue
23+ ]
24+ ++ attrs
25+ )
26+ none
27+
28+
29+tinyBox attrs =
30+ el
31+ ([ width (px 20)
32+ , height (px 20)
33+
34+ -- , centerY
35+ , Background.color darkCharcoal
36+ ]
37+ ++ attrs
38+ )
39+ none
40+
41+
42+container =
43+ el [ width (px 100), height (px 100) ]
44+
45+
46+view =
47+ let
48+ colContainer attrs children =
49+ row ([ spacing 20, width (px 500), height (px 120) ] ++ attrs) children
50+ in
51+ column
52+ []
53+ [ el [] (text "Spacing within a row")
54+ , column []
55+ [ box []
56+ , colContainer []
57+ [ box [] ]
58+ , colContainer []
59+ [ box []
60+ , box []
61+ , box []
62+ ]
63+ , colContainer [ below (tinyBox []) ]
64+ [ box []
65+ , box []
66+ , box []
67+ ]
68+ ]
69+ ]
tests-rendering/src/Tests/Run.elm+20−5
@@ -1,14 +1,29 @@
1module Tests.Run exposing (main)
1module Tests.Run exposing (main)
2
2
3−{-| _NOTE_ this is auto-generated! Notouchy!
4−-}
3+{-| -}
5
4
6−import ElInFixedHeightColumn
7import Testable.Runner
5import Testable.Runner
6+import Tests.Basic
7+import Tests.ColumnAlignment
8+import Tests.ColumnSpacing
9+import Tests.ElementAlignment
10+import Tests.Nearby
11+import Tests.RowAlignment
12+import Tests.RowSpacing
13+import Tests.Transparency
8
14
9
15
10main : Testable.Runner.TestableProgram
16main : Testable.Runner.TestableProgram
11main =
17main =
12− Testable.Runner.program
18+ Testable.Runner.program
13− [ Testable.Runner.rename " El In Fixed Height Column" ElInFixedHeightColumn.view
19+ [ Tuple.pair "Basic Element" Tests.Basic.view
20+ , Tuple.pair "Nearby" Tests.Nearby.view
21+ , Tuple.pair "Element Alignment" Tests.ElementAlignment.view
22+ , Tuple.pair "Transparency" Tests.Transparency.view
23+ , Tuple.pair "Column Alignment" Tests.ColumnAlignment.view
24+
25+ -- This has 12k cases, so it runs slow and sometimes crashes IE
26+ , Tuple.pair "Row Alignment" Tests.RowAlignment.view
27+ , Tuple.pair "Column Spacing" Tests.ColumnSpacing.view
28+ , Tuple.pair "Row Spacing" Tests.RowSpacing.view
14 ]
29 ]
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− ]
tests-rendering/src/Tests/TextWrapping.elmdeleted−51
@@ -1,51 +0,0 @@
1−module Tests.TextWrapping exposing (main, view)
2−
3−import Html
4−import Testable
5−import Testable.Element exposing (..)
6−import Testable.Element.Background as Background
7−import Testable.Element.Font as Font
8−import Testable.Generator
9−import Testable.Runner
10−import Tests.Palette as Palette exposing (..)
11−
12−
13−box attrs =
14− el
15− ([ width (px 50)
16− , height (px 50)
17− , Background.color blue
18− ]
19− ++ attrs
20− )
21− none
22−
23−
24−{-| -}
25−main : Html.Html msg
26−main =
27− Testable.Runner.show view
28−
29−
30−view =
31− el [] <|
32− paragraph []
33− [ Testable.Generator.box
34− ]
35−
36−
37−
38−-- column [ spacing 16 ]
39−-- [ paragraph []
40−-- [ el [] (text Testable.Generator.short)
41−-- ]
42−-- -- , paragraph []
43−-- -- [ text Testable.Generator.lorem
44−-- -- , text Testable.Generator.lorem
45−-- -- ]
46−-- -- , paragraph []
47−-- -- [ text Testable.Generator.lorem
48−-- -- , paragraph []
49−-- -- [ text Testable.Generator.lorem ]
50−-- -- ]
51−-- ]
tests-rendering/view/view.htmlnew file+104
@@ -0,0 +1,104 @@
1+<!DOCTYPE html>
2+<html>
3+ <head>
4+ <meta charset="UTF-8" />
5+ <title>Rendering Benchmark Viewer</title>
6+ <script type="text/javascript" src="./elm.js"></script>
7+ </head>
8+ <style></style>
9+ <body id="root"></body>
10+
11+ <script type="text/javascript">
12+ var app = Elm.WeirdCentering.init();
13+
14+ var test_results = "waiting..";
15+
16+ app.ports.report.subscribe(function (results) {
17+ test_results = results;
18+ });
19+
20+ app.ports.analyze.subscribe(function (ids) {
21+ // ids : List String
22+ var idsLength = ids.length;
23+ var results = [];
24+ for (var i = 0; i < idsLength; i++) {
25+ var id = ids[i];
26+ var element = document.getElementById(id);
27+ if (element == null) {
28+ console.log("id " + id + " not found");
29+ }
30+ var style = getStyle(element);
31+ var bbox = getBoundingBox(element);
32+
33+ var visible = isVisible(id, bbox);
34+
35+ var result = { bbox: bbox, style: style, id: id, isVisible: visible };
36+ results.push(result);
37+ }
38+ app.ports.styles.send(results);
39+ });
40+
41+ function isVisible(id, bbox) {
42+ var current = document.getElementById(id);
43+ var result = 0;
44+ if (current == document.elementFromPoint(bbox["left"], bbox["top"])) {
45+ result++;
46+ }
47+ if (
48+ current == document.elementFromPoint(bbox["left"], bbox["bottom"] - 1)
49+ ) {
50+ result++;
51+ }
52+ if (
53+ current == document.elementFromPoint(bbox["right"] - 1, bbox["top"])
54+ ) {
55+ result++;
56+ }
57+ if (
58+ current ==
59+ document.elementFromPoint(bbox["right"] - 1, bbox["bottom"] - 1)
60+ ) {
61+ result++;
62+ }
63+
64+ if (result == 4) {
65+ return true;
66+ } else {
67+ return false;
68+ }
69+ }
70+
71+ function getStyle(element) {
72+ var props = [];
73+ var style = window.getComputedStyle(element);
74+ for (var i = style.length; i--; ) {
75+ var name = style.item(i);
76+ var value = style.getPropertyValue(name);
77+ props.push([name, value]);
78+ }
79+ return props;
80+ }
81+
82+ function getBoundingBox(element) {
83+ var bbox = element.getBoundingClientRect();
84+ var style = window.getComputedStyle(element, null);
85+
86+ var padding = {
87+ top: parseFloat(style.getPropertyValue("padding-top")),
88+ bottom: parseFloat(style.getPropertyValue("padding-bottom")),
89+ left: parseFloat(style.getPropertyValue("padding-left")),
90+ right: parseFloat(style.getPropertyValue("padding-right")),
91+ };
92+
93+ return {
94+ top: bbox.top,
95+ bottom: bbox.bottom,
96+ left: bbox.left,
97+ right: bbox.right,
98+ width: bbox.width,
99+ height: bbox.height,
100+ padding: padding,
101+ };
102+ }
103+ </script>
104+</html>