git.iko.soy/typeable/elm-ui
on 510b32a help sign in
73 files changed+2145−4355
since splitsnapshots
unifiedsplit
README.md−4 elm.json+1−1 examples/Basic.elm+1−1 examples/Form.elm+4−12 examples/Table.elm+1−1 examples/elm.json+22−19 notes/discussion/ColorWithoutAlpha.API.md+2−2 package-lock.json+31−19 package.json+4−5 src/Element.elm+37−79 src/Element/Input.elm+40−75 src/Element/Region.elm+1−5 src/Internal/Model.elm+32−30 src/Internal/Style.elm+16−63 tests-rendering/automation/build.js−90 tests-rendering/automation/run.js+25−18 tests-rendering/automation/templates/Run.elm−14 tests-rendering/automation/templates/gather-styles.html+99−179 tests-rendering/automation/view.js−73 tests-rendering/cases/resolved/Input/FocusStylePrecedingElements.elm → tests-rendering/cases/open/FocusStylePrecedingElements.elm+3−3 tests-rendering/cases/open/InFrontSize.elm+2−2 tests-rendering/cases/open/LabelledInputAlignRight.elm−28 tests-rendering/cases/open/NearbyElementBordersOverlap.elm−46 tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elm → tests-rendering/cases/open/SafariBugIssue147.elm+3−13 tests-rendering/cases/open/Scrollbar2.elm+1−1 tests-rendering/cases/open/Scrollbars.elm+1−1 tests-rendering/cases/open/StackedScrollingColumnsHeight.elm−42 tests-rendering/cases/open/WeirdCentering.elm+6−14 tests-rendering/cases/resolved/ClippedElInFixedWidthColumn.elm−31 tests-rendering/cases/resolved/ElInFixedHeightColumn.elm−41 tests-rendering/cases/resolved/Images/ImageRegression.elm−63 tests-rendering/cases/resolved/Images/ImageRegression2.elm−19 tests-rendering/cases/resolved/Images/ImageSizing.elm−24 tests-rendering/cases/resolved/Input/FocusLinks.elm−37 tests-rendering/cases/resolved/Input/InputAlignment.elm−44 tests-rendering/cases/resolved/Input/LabelAlignBaseline.elm−34 tests-rendering/cases/resolved/Input/Placeholder.elm−59 tests-rendering/cases/resolved/Input/Slider.elm−74 tests-rendering/cases/resolved/Layout/BreaksWithinParagraph.elm−17 tests-rendering/cases/resolved/Layout/ColumnLayouts.elm−103 tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elm−46 tests-rendering/cases/resolved/Layout/Columns/DistributeHeightCorrectly2.elm−86 tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elm−40 tests-rendering/cases/resolved/Layout/NestedParagraphs.elm−165 tests-rendering/cases/resolved/Layout/Rounded.elm−54 tests-rendering/cases/resolved/Layout/SafariBugIssue147.elm−37 tests-rendering/cases/resolved/Layout/WrapRow.elm−13 tests-rendering/cases/resolved/Misc/Scroll.elm−48 tests-rendering/cases/resolved/Nearby/InFrontIssue.elm−64 tests-rendering/cases/resolved/Nearby/Issue22ZIndex.elm−87 tests-rendering/cases/resolved/Nearby/OtherInFrontIssue.elm−55 tests-rendering/cases/resolved/Nearby/ZIndexRegression.elm−43 tests-rendering/elm.json+24−21 tests-rendering/make.sh+2 tests-rendering/src/Testable.elm+141−321 tests-rendering/src/Testable/Element.elm+245−832 tests-rendering/src/Testable/Element/Background.elm+4−5 tests-rendering/src/Testable/Element/Font.elm+6−14 tests-rendering/src/Testable/Generator.elm−398 tests-rendering/src/Testable/Runner.elm+221−358 tests-rendering/src/Tests/Alignment.elm−49 tests-rendering/src/Tests/All.elm−44 tests-rendering/src/Tests/Basic.elm+54 tests-rendering/src/Tests/ColumnAlignment.elm+176 tests-rendering/src/Tests/ColumnSpacing.elm+68 tests-rendering/src/Tests/ElementAlignment.elm+111 tests-rendering/src/Tests/Nearby.elm+356−97 tests-rendering/src/Tests/RowAlignment.elm+212 tests-rendering/src/Tests/RowSpacing.elm+69 tests-rendering/src/Tests/Run.elm+20−5 tests-rendering/src/Tests/Spacing.elm−36 tests-rendering/src/Tests/TextWrapping.elm−51 tests-rendering/view/view.html+104
README.md−4
@@ -66,10 +66,6 @@ The work is based off of a rewrite of the [Style Elements](https://github.com/md
6666
6767The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.
6868
69−## Notes
70−
71−Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.
72−
7369## Contributing
7470
7571Want to help out fixing bugs or reporting issues?
elm.json+1−1
@@ -3,7 +3,7 @@
33 "name": "mdgriffith/elm-ui",
44 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",
55 "license": "BSD-3-Clause",
6− "version": "1.1.8",
6+ "version": "1.1.5",
77 "exposed-modules": [
88 "Element",
99 "Element.Input",
examples/Basic.elm+1−1
@@ -1,4 +1,4 @@
1−module Basic exposing (..)
1+module Main exposing (..)
22
33{-| -}
44
examples/Form.elm+4−12
@@ -1,4 +1,4 @@
1−module Form exposing (..)
1+module Main exposing (..)
22
33{-| -}
44
@@ -80,14 +80,7 @@ view model =
8080 [ Font.size 20
8181 ]
8282 <|
83− Element.column
84− [ width (px 800)
85− , height shrink
86− , centerY
87− , centerX
88− , spacing 36
89− , padding 10
90− ]
83+ Element.column [ width (px 800), height shrink, centerY, centerX, spacing 36, padding 10, explain Debug.todo ]
9184 [ el
9285 [ Region.heading 1
9386 , alignLeft
@@ -124,7 +117,7 @@ view model =
124117 , onChange = \new -> Update { model | username = new }
125118 , label = Input.labelAbove [ Font.size 14 ] (text "Username")
126119 }
127− , Input.currentPassword [ spacing 12 ]
120+ , Input.currentPassword [ spacing 12, width shrink ]
128121 { text = model.password
129122 , placeholder = Nothing
130123 , onChange = \new -> Update { model | password = new }
@@ -200,8 +193,7 @@ view model =
200193 , Border.color darkBlue
201194 , paddingXY 32 16
202195 , Border.rounded 3
203−
204− -- , width fill
196+ , width fill
205197 ]
206198 { onPress = Nothing
207199 , label = Element.text "Place your lunch order!"
examples/Table.elm+1−1
@@ -1,4 +1,4 @@
1−module Table exposing (..)
1+module Main exposing (..)
22
33{-| -}
44
examples/elm.json+22−19
@@ -1,22 +1,25 @@
11{
2− "type": "application",
3− "source-directories": [".", "../src/"],
4− "elm-version": "0.19.1",
5− "dependencies": {
6− "direct": {
7− "elm/browser": "1.0.0",
8− "elm/core": "1.0.0",
9− "elm/html": "1.0.0",
10− "elm/json": "1.0.0",
11− "elm/virtual-dom": "1.0.0"
2+ "type": "application",
3+ "source-directories": [
4+ ".",
5+ "../src/"
6+ ],
7+ "elm-version": "0.19.0",
8+ "dependencies": {
9+ "direct": {
10+ "elm/browser": "1.0.0",
11+ "elm/core": "1.0.0",
12+ "elm/html": "1.0.0",
13+ "elm/json": "1.0.0",
14+ "elm/virtual-dom": "1.0.0"
15+ },
16+ "indirect": {
17+ "elm/time": "1.0.0",
18+ "elm/url": "1.0.0"
19+ }
1220 },
13− "indirect": {
14− "elm/time": "1.0.0",
15− "elm/url": "1.0.0"
21+ "test-dependencies": {
22+ "direct": {},
23+ "indirect": {}
1624 }
17− },
18− "test-dependencies": {
19− "direct": {},
20− "indirect": {}
21− }
22−}
25+}
notes/discussion/ColorWithoutAlpha.API.md+2−2
@@ -6,8 +6,8 @@ If we separate out alpha from the core color type, we can
66
771. Have a unified `Color` type that works in all contexts, including in webGL situations where transparency may be handled differently, or not at all.
88
9−2. Encourage people to use actual color mixing functions where possible and 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?
9+2. Encourage people to use actual color mixing functions where possible or to enumerate their colors concretely.
10+ - The point here is that alpha mixing can sometimes lead to colors that don't look great or are unexpected.
1111
12123. 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.
1313
package-lock.json+31−19
@@ -734,9 +734,9 @@
734734 }
735735 },
736736 "jszip": {
737− "version": "3.4.0",
738− "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.4.0.tgz",
739− "integrity": "sha512-gZAOYuPl4EhPTXT0GjhI3o+ZAz3su6EhLrKUoAivcKqyqC7laS5JEv4XWZND9BgcDcF83vI85yGbDmDR6UhrIg==",
737+ "version": "3.2.2",
738+ "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",
739+ "integrity": "sha512-NmKajvAFQpbg3taXQXr/ccS2wcucR1AZ+NtyWp2Nq7HHVsXhcJFR8p0Baf32C2yVvBylFWVeKf+WI2AnvlPhpA==",
740740 "requires": {
741741 "lie": "~3.3.0",
742742 "pako": "~1.0.2",
@@ -1002,24 +1002,20 @@
10021002 "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
10031003 "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
10041004 },
1005+ "sax": {
1006+ "version": "1.2.4",
1007+ "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
1008+ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
1009+ },
10051010 "selenium-webdriver": {
1006− "version": "4.0.0-alpha.7",
1007− "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.7.tgz",
1008− "integrity": "sha512-D4qnTsyTr91jT8f7MfN+OwY0IlU5+5FmlO5xlgRUV6hDEV8JyYx2NerdTEqDDkNq7RZDYc4VoPALk8l578RBHw==",
1011+ "version": "4.0.0-alpha.4",
1012+ "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.4.tgz",
1013+ "integrity": "sha512-etJt20d8qInkxMAHIm5SEpPBSS+CdxVcybnxzSIB/GlWErb8pIWrArz/VA6VfUW0/6tIcokepXQ5ufvdzqqk1A==",
10091014 "requires": {
1010− "jszip": "^3.2.2",
1011− "rimraf": "^2.7.1",
1012− "tmp": "0.0.30"
1013− },
1014− "dependencies": {
1015− "rimraf": {
1016− "version": "2.7.1",
1017− "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
1018− "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
1019− "requires": {
1020− "glob": "^7.1.3"
1021− }
1022− }
1015+ "jszip": "^3.1.5",
1016+ "rimraf": "^2.6.3",
1017+ "tmp": "0.0.30",
1018+ "xml2js": "^0.4.19"
10231019 }
10241020 },
10251021 "semver": {
@@ -1221,6 +1217,22 @@
12211217 "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
12221218 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
12231219 },
1220+ "xml2js": {
1221+ "version": "0.4.19",
1222+ "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
1223+ "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
1224+ "requires": {
1225+ "sax": ">=0.6.0",
1226+ "xmlbuilder": "~9.0.1"
1227+ },
1228+ "dependencies": {
1229+ "xmlbuilder": {
1230+ "version": "9.0.7",
1231+ "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
1232+ "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
1233+ }
1234+ }
1235+ },
12241236 "xmlbuilder": {
12251237 "version": "13.0.2",
12261238 "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
package.json+4−5
@@ -5,13 +5,12 @@
55 "main": "index.js",
66 "scripts": {
77 "test": "elm-test",
8− "view-test": "node tests-rendering/automation/view.js",
98 "test-render": "node tests-rendering/automation/run.js --chrome",
10− "test-render-sauce": "source sauce.env; node tests-rendering/automation/run.js --sauce --headless",
11− "test-render-sauce-automated": "node tests-rendering/automation/run.js --sauce --headless",
9+ "test-render-sauce": "source sauce.env; node tests-rendering/automation/run.js --sauce",
10+ "test-render-sauce-automated": "node tests-rendering/automation/run.js --sauce",
1211 "test-doc-preview": "bash tests-rendering/automation/doc-preview.sh",
1312 "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"
1514 },
1615 "repository": {
1716 "type": "git",
@@ -29,6 +28,6 @@
2928 "elm": "^0.19.1-3",
3029 "elm-test": "^0.19.1-revision2",
3130 "node-elm-compiler": "^5.0.4",
32− "selenium-webdriver": "^4.0.0-alpha.7"
31+ "selenium-webdriver": "^4.0.0-alpha.4"
3332 }
3433}
src/Element.elm+37−79
@@ -645,34 +645,14 @@ wrappedRow attrs children =
645645 newPadding =
646646 case padded of
647647 Just (Internal.Padding name t r b l) ->
648− if r >= (toFloat x / 2) && b >= (toFloat y / 2) then
649− let
650− newTop =
651− t - (toFloat y / 2)
652−
653− newRight =
654− r - (toFloat x / 2)
655−
656− newBottom =
657− b - (toFloat y / 2)
658−
659− newLeft =
660− l - (toFloat x / 2)
661− in
648+ if r >= (x // 2) && b >= (y // 2) then
662649 Just <|
663− Internal.StyleClass Flag.padding
664− (Internal.PaddingStyle
665− (Internal.paddingNameFloat
666− newTop
667− newRight
668− newBottom
669− newLeft
670− )
671− newTop
672− newRight
673− newBottom
674− newLeft
675− )
650+ paddingEach
651+ { top = t - (y // 2)
652+ , right = r - (x // 2)
653+ , bottom = b - (y // 2)
654+ , left = l - (x // 2)
655+ }
676656
677657 else
678658 Nothing
@@ -1008,15 +988,14 @@ tableHelper attrs config =
1008988
1009989{-| A paragraph will layout all children as wrapped, inline elements.
1010990
1011− import Element exposing (el, paragraph, text)
991+ import Element
1012992 import Element.Font as Font
1013993
1014− view =
1015− paragraph []
1016− [ text "lots of text ...."
1017− , el [ Font.bold ] (text "this is bold")
1018− , text "lots of text ...."
1019− ]
994+ Element.paragraph []
995+ [ text "lots of text ...."
996+ , el [ Font.bold ] (text "this is bold")
997+ , text "lots of text ...."
998+ ]
1020999
10211000This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.
10221001
@@ -1024,18 +1003,17 @@ Also, if a child element has `alignLeft` or `alignRight`, then it will be moved
10241003
10251004This makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).
10261005
1027− import Element exposing (alignLeft, el, padding, paragraph, text)
1006+ import Element
10281007 import Element.Font as Font
10291008
1030− view =
1031− paragraph []
1032− [ el
1033− [ alignLeft
1034− , padding 5
1035− ]
1036− (text "S")
1037− , text "o much text ...."
1009+ Element.paragraph []
1010+ [ el
1011+ [ alignLeft
1012+ , padding 5
10381013 ]
1014+ (text "S")
1015+ , text "o much text ...."
1016+ ]
10391017
10401018Which will look something like
10411019
@@ -1203,6 +1181,11 @@ newTabLink attrs { url, label } =
12031181
12041182
12051183{-| 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+
12061189-}
12071190download :
12081191 List (Attribute msg)
@@ -1358,11 +1341,7 @@ moveLeft x =
13581341{-| -}
13591342padding : Int -> Attribute msg
13601343padding 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)
13661345
13671346
13681347{-| Set horizontal and vertical padding.
@@ -1370,27 +1349,16 @@ padding x =
13701349paddingXY : Int -> Int -> Attribute msg
13711350paddingXY x y =
13721351 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)
13781353
13791354 else
1380− let
1381− xFloat =
1382− toFloat x
1383−
1384− yFloat =
1385− toFloat y
1386− in
13871355 Internal.StyleClass Flag.padding
13881356 (Internal.PaddingStyle
13891357 ("p-" ++ String.fromInt x ++ "-" ++ String.fromInt y)
1390− yFloat
1391− xFloat
1392− yFloat
1393− xFloat
1358+ y
1359+ x
1360+ y
1361+ x
13941362 )
13951363
13961364
@@ -1411,26 +1379,16 @@ And then just do
14111379paddingEach : { top : Int, right : Int, bottom : Int, left : Int } -> Attribute msg
14121380paddingEach { top, right, bottom, left } =
14131381 if top == right && top == bottom && top == left then
1414− let
1415− topFloat =
1416− toFloat top
1417− in
1418− Internal.StyleClass Flag.padding
1419− (Internal.PaddingStyle ("p-" ++ String.fromInt top)
1420− topFloat
1421− topFloat
1422− topFloat
1423− topFloat
1424− )
1382+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt top) top top top top)
14251383
14261384 else
14271385 Internal.StyleClass Flag.padding
14281386 (Internal.PaddingStyle
14291387 (Internal.paddingName top right bottom left)
1430− (toFloat top)
1431− (toFloat right)
1432− (toFloat bottom)
1433− (toFloat left)
1388+ top
1389+ right
1390+ bottom
1391+ left
14341392 )
14351393
14361394
src/Element/Input.elm+40−75
@@ -132,12 +132,10 @@ Instead of implicit submission behavior, [try making an `onEnter` event handler
132132
133133And no one has to look up obtuse html documentation to understand the behavior of their code :).
134134
135−
136135# File Inputs
137136
138137Presently, elm-ui does not expose a replacement for `<input type="file">`; in the meantime, an `Input.button` and `elm/file`'s `File.Select` may meet your needs.
139138
140−
141139# Disabling Inputs
142140
143141You also might be wondering how to disable an input.
@@ -330,8 +328,6 @@ The `onPress` handler will be fired either `onClick` or when the element is focu
330328 , label = text "My Button"
331329 }
332330
333−**Note** If you have an icon button but want it to be accessible, consider adding a [`Region.description`](Element-Region#description), which will describe the button to screen readers.
334−
335331-}
336332button :
337333 List (Attribute msg)
@@ -369,17 +365,7 @@ button attrs { onPress, label } =
369365
370366 Just msg ->
371367 Events.onClick msg
372− :: onKeyLookup
373− (\code ->
374− if code == enter then
375− Just msg
376−
377− else if code == space then
378− Just msg
379−
380− else
381− Nothing
382− )
368+ :: onEnter msg
383369 :: attrs
384370 )
385371 )
@@ -457,24 +443,22 @@ checkbox attrs { label, icon, checked, onChange } =
457443 ]
458444 ++ attrs
459445 in
460− applyLabel
461− (Internal.Attr (Html.Attributes.attribute "role" "checkbox")
462− :: Internal.Attr
463− (Html.Attributes.attribute "aria-checked" <|
446+ applyLabel attributes
447+ label
448+ (Internal.element
449+ Internal.asEl
450+ Internal.div
451+ [ Internal.Attr <|
452+ Html.Attributes.attribute "role" "checkbox"
453+ , Internal.Attr <|
454+ Html.Attributes.attribute "aria-checked" <|
464455 if checked then
465456 "true"
466457
467458 else
468459 "false"
469− )
470− :: hiddenLabelAttribute label
471− :: attributes
472− )
473− label
474− (Internal.element
475− Internal.asEl
476− Internal.div
477− [ Element.centerY
460+ , hiddenLabelAttribute label
461+ , Element.centerY
478462 , Element.height Element.fill
479463 , Element.width Element.shrink
480464 ]
@@ -713,7 +697,7 @@ slider attributes input =
713697 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")
714698 thumbShadowStyle
715699 )
716− , Internal.Attr (Html.Attributes.class (className ++ " ui-slide-bar focusable-parent"))
700+ , Internal.Attr (Html.Attributes.class (className ++ " focusable-parent"))
717701 , Internal.Attr
718702 (Html.Events.onInput
719703 (\str ->
@@ -779,10 +763,10 @@ slider attributes input =
779763 -- This is after `attributes` because the thumb should be in front of everything.
780764 ++ [ Element.behindContent <|
781765 if vertical then
782− viewVerticalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackWidth
766+ viewVerticalThumb factor thumbAttributes trackWidth
783767
784768 else
785− viewHorizontalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackHeight
769+ viewHorizontalThumb factor thumbAttributes trackHeight
786770 ]
787771 )
788772 Element.none
@@ -882,10 +866,10 @@ textHelper textInput attrs textOptions =
882866 -- when things are off by a pixel or two.
883867 -- (or at least when the browser *thinks* it's off by a pixel or two)
884868 Just
885− { top = max 0 (floor (t - 3))
886− , right = max 0 (floor (r - 3))
887− , bottom = max 0 (floor (b - 3))
888− , left = max 0 (floor (l - 3))
869+ { top = max 0 (floor (toFloat t - 3))
870+ , right = max 0 (floor (toFloat r - 3))
871+ , bottom = max 0 (floor (toFloat b - 3))
872+ , left = max 0 (floor (toFloat l - 3))
889873 }
890874
891875 _ ->
@@ -1328,36 +1312,23 @@ redistributeOver isMultiline stacked attr els =
13281312 Element.htmlAttribute
13291313 (Html.Attributes.style
13301314 "height"
1331− ("calc(1.0em + " ++ String.fromFloat (2 * min t b) ++ "px)")
1315+ ("calc(1.0em + " ++ String.fromInt (2 * min t b) ++ "px)")
13321316 )
13331317
13341318 newLineHeight =
13351319 Element.htmlAttribute
13361320 (Html.Attributes.style
13371321 "line-height"
1338− ("calc(1.0em + " ++ String.fromFloat (2 * min t b) ++ "px)")
1322+ ("calc(1.0em + " ++ String.fromInt (2 * min t b) ++ "px)")
13391323 )
13401324
1341− newTop =
1342− t - min t b
1343−
1344− newBottom =
1345− b - min t b
1346−
13471325 reducedVerticalPadding =
1348− Internal.StyleClass Flag.padding
1349− (Internal.PaddingStyle
1350− (Internal.paddingNameFloat
1351− newTop
1352− r
1353− newBottom
1354− l
1355− )
1356− newTop
1357− r
1358− newBottom
1359− l
1360− )
1326+ Element.paddingEach
1327+ { top = t - min t b
1328+ , right = r
1329+ , bottom = b - min t b
1330+ , left = l
1331+ }
13611332 in
13621333 { els
13631334 | parent = reducedVerticalPadding :: els.parent
@@ -1565,8 +1536,6 @@ email =
15651536
15661537By default it will have a minimum height of one line and resize based on it's contents.
15671538
1568−Use `Element.spacing` to change its line-height.
1569−
15701539-}
15711540multiline :
15721541 List (Attribute msg)
@@ -1628,28 +1597,28 @@ applyLabel attrs label input =
16281597 Internal.element
16291598 Internal.asColumn
16301599 (Internal.NodeName "label")
1631− (Internal.htmlClass classes.inputLabel :: attrs)
1600+ attrs
16321601 (Internal.Unkeyed [ labelElement, input ])
16331602
16341603 Below ->
16351604 Internal.element
16361605 Internal.asColumn
16371606 (Internal.NodeName "label")
1638− (Internal.htmlClass classes.inputLabel :: attrs)
1607+ attrs
16391608 (Internal.Unkeyed [ input, labelElement ])
16401609
16411610 OnRight ->
16421611 Internal.element
16431612 Internal.asRow
16441613 (Internal.NodeName "label")
1645− (Internal.htmlClass classes.inputLabel :: attrs)
1614+ attrs
16461615 (Internal.Unkeyed [ input, labelElement ])
16471616
16481617 OnLeft ->
16491618 Internal.element
16501619 Internal.asRow
16511620 (Internal.NodeName "label")
1652− (Internal.htmlClass classes.inputLabel :: attrs)
1621+ attrs
16531622 (Internal.Unkeyed [ labelElement, input ])
16541623
16551624
@@ -2105,11 +2074,7 @@ onKeyLookup lookup =
21052074 Json.field "key" Json.string
21062075 |> Json.andThen decode
21072076 in
2108− -- We generally want these attached to the keydown event becaues it allows us to prevent default on things like spacebar scrolling the page.
2109− -- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
2110− Internal.Attr <|
2111− Html.Events.preventDefaultOn "keydown"
2112− (Json.map (\fired -> ( fired, True )) isKey)
2077+ Internal.Attr <| Html.Events.on "keyup" isKey
21132078
21142079
21152080{-| -}
@@ -2205,8 +2170,7 @@ defaultCheckbox : Bool -> Element msg
22052170defaultCheckbox checked =
22062171 Element.el
22072172 [ Internal.htmlClass "focusable"
2208− , Element.width
2209− (Element.px 14)
2173+ , Element.width (Element.px 14)
22102174 , Element.height (Element.px 14)
22112175 , Font.color white
22122176 , Element.centerY
@@ -2242,8 +2206,9 @@ defaultCheckbox checked =
22422206
22432207 else
22442208 1
2245− , Element.inFront
2246− (Element.el
2209+ ]
2210+ (if checked then
2211+ Element.el
22472212 [ Border.color white
22482213 , Element.height (Element.px 6)
22492214 , Element.width (Element.px 9)
@@ -2251,7 +2216,6 @@ defaultCheckbox checked =
22512216 , Element.centerX
22522217 , Element.centerY
22532218 , Element.moveUp 1
2254− , Element.transparent (not checked)
22552219 , Border.widthEach
22562220 { top = 0
22572221 , left = 2
@@ -2260,6 +2224,7 @@ defaultCheckbox checked =
22602224 }
22612225 ]
22622226 Element.none
2263− )
2264− ]
2265− Element.none
2227+
2228+ else
2229+ Element.none
2230+ )
src/Element/Region.elm+1−5
@@ -101,11 +101,7 @@ announce =
101101 Internal.Describe LivePolite
102102
103103
104−{-| Adds an `aria-label`, which is used by accessibility software to identity otherwise unlabeled elements.
105−
106−A common use for this would be to label buttons that only have an icon.
107−
108−-}
104+{-| -}
109105description : String -> Attribute msg
110106description =
111107 Internal.Describe << Internal.Label
src/Internal/Model.elm+32−30
@@ -79,7 +79,6 @@ module Internal.Model exposing
7979 , onlyStyles
8080 , optionsToRecord
8181 , paddingName
82− , paddingNameFloat
8382 , pageClass
8483 , paragraphClass
8584 , reduceRecursive
@@ -174,7 +173,7 @@ type Style
174173 | Colored String String Color
175174 | SpacingStyle String Int Int
176175 | BorderWidth String Int Int Int Int
177− | PaddingStyle String Float Float Float Float
176+ | PaddingStyle String Int Int Int Int
178177 | GridTemplateStyle
179178 { spacing : ( Length, Length )
180179 , columns : List Length
@@ -1478,9 +1477,7 @@ renderHeight h =
14781477 Single
14791478 cls
14801479 "min-height"
1481− -- This needs to be !important because we're using `min-height: min-content`
1482− -- to correct for safari's incorrect implementation of flexbox.
1483− (String.fromInt minSize ++ "px !important")
1480+ (String.fromInt minSize ++ "px")
14841481
14851482 ( newFlag, newAttrs, newStyle ) =
14861483 renderHeight len
@@ -1948,7 +1945,7 @@ type Spacing
19481945
19491946
19501947type Padding
1951− = Padding String Float Float Float Float
1948+ = Padding String Int Int Int Int
19521949
19531950
19541951extractSpacingAndPadding : List (Attribute aligned msg) -> ( Maybe Padding, Maybe Spacing )
@@ -2244,11 +2241,7 @@ renderFocusStyle focus =
22442241 , Just <| Property "outline" "none"
22452242 ]
22462243 )
2247− , Style
2248− ((Internal.Style.dot classes.any ++ ":focus .focusable, ")
2249− ++ (Internal.Style.dot classes.any ++ ".focusable:focus, ")
2250− ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")
2251− )
2244+ , Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")
22522245 (List.filterMap identity
22532246 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
22542247 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
@@ -2649,14 +2642,34 @@ renderStyle options maybePseudo selector props =
26492642 renderedProps =
26502643 List.foldl (renderProps False) "" props
26512644 in
2652− [ selector ++ "-fs:focus {" ++ renderedProps ++ "\n}"
2653− , ("." ++ classes.any ++ ":focus " ++ selector ++ "-fs {")
2645+ [ selector
2646+ ++ "-fs:focus {"
2647+ ++ renderedProps
2648+ ++ "\n}"
2649+ , "."
2650+ ++ classes.any
2651+ ++ ":focus ~ "
2652+ ++ selector
2653+ ++ "-fs:not(.focus) {"
26542654 ++ renderedProps
26552655 ++ "\n}"
2656− , (selector ++ "-fs:focus-within {")
2656+ , "."
2657+ ++ classes.any
2658+ ++ ":focus "
2659+ ++ selector
2660+ ++ "-fs {"
26572661 ++ renderedProps
26582662 ++ "\n}"
2659− , (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb" ++ selector ++ "-fs {")
2663+ , selector
2664+ ++ "-fs:focus-within {"
2665+ ++ renderedProps
2666+ ++ "\n}"
2667+ , ".focusable-parent:focus ~ "
2668+ ++ "."
2669+ ++ classes.any
2670+ ++ " "
2671+ ++ selector
2672+ ++ "-fs {"
26602673 ++ renderedProps
26612674 ++ "\n}"
26622675 ]
@@ -2863,13 +2876,13 @@ renderStyleRule options rule maybePseudo =
28632876 maybePseudo
28642877 class
28652878 [ Property "padding"
2866− (String.fromFloat top
2879+ (String.fromInt top
28672880 ++ "px "
2868− ++ String.fromFloat right
2881+ ++ String.fromInt right
28692882 ++ "px "
2870− ++ String.fromFloat bottom
2883+ ++ String.fromInt bottom
28712884 ++ "px "
2872− ++ String.fromFloat left
2885+ ++ String.fromInt left
28732886 ++ "px"
28742887 )
28752888 ]
@@ -3199,17 +3212,6 @@ paddingName top right bottom left =
31993212 ++ String.fromInt left
32003213
32013214
3202−paddingNameFloat top right bottom left =
3203− "pad-"
3204− ++ floatClass top
3205− ++ "-"
3206− ++ floatClass right
3207− ++ "-"
3208− ++ floatClass bottom
3209− ++ "-"
3210− ++ floatClass left
3211−
3212−
32133215getStyleName : Style -> String
32143216getStyleName style =
32153217 case style of
src/Internal/Style.elm+16−63
@@ -10,7 +10,6 @@ type Class
1010type Rule
1111 = Prop String String
1212 | Child String (List Rule)
13− | AllChildren String (List Rule)
1413 | Supports ( String, String ) (List ( String, String ))
1514 | Descriptor String (List Rule)
1615 | Adjacent String (List Rule)
@@ -257,7 +256,6 @@ classes =
257256 , inputMultilineParent = "imlp"
258257 , inputMultilineFiller = "imlf"
259258 , inputMultilineWrapper = "implw"
260− , inputLabel = "lbl"
261259
262260 -- link
263261 , link = "lnk"
@@ -562,15 +560,6 @@ renderRules (Intermediate parent) rulesToRender =
562560 :: rendered.others
563561 }
564562
565− AllChildren child childRules ->
566− { rendered
567− | others =
568− renderRules
569− (emptyIntermediate (parent.selector ++ " " ++ child) "")
570− childRules
571− :: rendered.others
572− }
573−
574563 Descriptor descriptor descriptorRules ->
575564 { rendered
576565 | others =
@@ -961,18 +950,6 @@ baseSheet =
961950 ]
962951 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)
963952 [ 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− ]
976953 ]
977954 , Class (dot classes.any ++ ":focus")
978955 [ Prop "outline" "none"
@@ -995,7 +972,6 @@ baseSheet =
995972 , Child (dot classes.inFront)
996973 [ Descriptor (dot classes.nearby)
997974 [ Prop "position" "fixed"
998− , Prop "z-index" "20"
999975 ]
1000976 ]
1001977 ]
@@ -1244,7 +1220,6 @@ baseSheet =
12441220 -- If it's 1, it bumps up to something like 1.2
12451221 [ Prop "line-height" "1.05"
12461222 , Prop "background" "transparent"
1247− , Prop "text-align" "inherit"
12481223 ]
12491224 , Descriptor (dot classes.single)
12501225 elDescription
@@ -1371,28 +1346,18 @@ baseSheet =
13711346 , Descriptor (dot classes.spaceEvenly)
13721347 [ Prop "justify-content" "space-between"
13731348 ]
1374− , Descriptor (dot classes.inputLabel)
1375− [ Prop "align-items" "baseline"
1376− ]
13771349 ]
13781350 , Descriptor (dot classes.column)
13791351 [ Prop "display" "flex"
13801352 , Prop "flex-direction" "column"
13811353 , 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"
1392− , Prop "min-height" "min-content"
1354+ [ Prop "flex-basis" "0%"
13931355 , Descriptor (dot classes.heightExact)
13941356 [ Prop "flex-basis" "auto"
13951357 ]
1358+ , Descriptor (dot classes.column)
1359+ [ Prop "flex-basis" "auto"
1360+ ]
13961361 ]
13971362 , Child (dot classes.heightFill)
13981363 [ Prop "flex-grow" "100000"
@@ -1596,7 +1561,7 @@ baseSheet =
15961561 )
15971562 ]
15981563 , Descriptor (dot classes.inputMultiline)
1599− [ Prop "white-space" "pre-wrap !important"
1564+ [ Prop "white-space" "pre-wrap"
16001565 , Prop "height" "100%"
16011566 , Prop "width" "100%"
16021567 , Prop "background-color" "transparent"
@@ -1616,47 +1581,29 @@ baseSheet =
16161581 [ Prop "flex-basis" "auto" ]
16171582 ]
16181583 , Descriptor (dot classes.inputMultilineParent)
1619− [ Prop "white-space" "pre-wrap !important"
1584+ [ Prop "white-space" "pre-wrap"
16201585 , Prop "cursor" "text"
16211586 , Child (dot classes.inputMultilineFiller)
1622− [ Prop "white-space" "pre-wrap !important"
1587+ [ Prop "white-space" "pre-wrap"
16231588 , Prop "color" "transparent"
16241589 ]
16251590 ]
16261591 , Descriptor (dot classes.paragraph)
16271592 [ Prop "display" "block"
16281593 , Prop "white-space" "normal"
1629− , Prop "overflow-wrap" "break-word"
16301594 , Descriptor (dot classes.hasBehind)
16311595 [ Prop "z-index" "0"
16321596 , Child (dot classes.behind)
16331597 [ Prop "z-index" "-1"
16341598 ]
16351599 ]
1636− , AllChildren (dot classes.text)
1600+ , Child (dot classes.text)
16371601 [ Prop "display" "inline"
16381602 , Prop "white-space" "normal"
16391603 ]
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)
16501605 [ Prop "display" "inline"
16511606 , 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− ]
16601607 , Descriptor (dot classes.inFront)
16611608 [ Prop "display" "flex"
16621609 ]
@@ -1679,9 +1626,15 @@ baseSheet =
16791626 [ Prop "display" "inline"
16801627 , Prop "white-space" "normal"
16811628 ]
1629+ , Child (dot classes.single)
1630+ [ Child (dot classes.text)
1631+ [ Prop "display" "inline"
1632+ , Prop "white-space" "normal"
1633+ ]
1634+ ]
16821635 ]
16831636 , Child (dot classes.row)
1684− [ Prop "display" "inline"
1637+ [ Prop "display" "inline-flex"
16851638 ]
16861639 , Child (dot classes.column)
16871640 [ 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+25−18
@@ -1,3 +1,4 @@
1+const compileToString = require("node-elm-compiler").compileToString;
12const { Builder, By, Key, until } = require("selenium-webdriver");
23const chrome = require("selenium-webdriver/chrome");
34const firefox = require("selenium-webdriver/firefox");
@@ -6,7 +7,6 @@ const program = require("commander");
67const path = require("path");
78const chalk = require("chalk");
89const childProcess = require("child_process");
9−const compile_and_embed = require("./build.js").compile_and_embed;
1010
1111program
1212 .option("-s, --sauce", "run tests on sauce labs")
@@ -17,7 +17,6 @@ program
1717 .option("--build [value]", "Set build number for sauce labs")
1818 .option("--name [value]", "Set run name for sauce labs")
1919 .option("--verbose", "Print out all test results")
20− .option("--headless", "run tests without showing the browser")
2120 .parse(process.argv);
2221
2322// 'Windows 10'
@@ -103,6 +102,17 @@ function prepare_all_envs(config) {
103102 return envs;
104103}
105104
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+
106116function prepare_sauce_driver(env) {
107117 const username = process.env.SAUCE_USERNAME;
108118 const accessKey = process.env.SAUCE_ACCESS_KEY;
@@ -127,13 +137,8 @@ function prepare_sauce_driver(env) {
127137}
128138
129139async function prepare_local_driver(env) {
130− const firefoxOptions = new firefox.Options();
131− const chromeOptions = new chrome.Options();
132−
133− if (program.headless) {
134− firefoxOptions.headless();
135− chromeOptions.headless();
136− }
140+ const firefoxOptions = new firefox.Options().headless();
141+ const chromeOptions = new chrome.Options().headless();
137142
138143 let driver = await new Builder()
139144 .forBrowser(env.browser)
@@ -169,7 +174,7 @@ async function run_test(driver, url) {
169174 await compile_and_embed({
170175 template: "./tests-rendering/automation/templates/gather-styles.html",
171176 target: "./tmp/test.html",
172− elm: "src/Tests/All.elm",
177+ elm: ["src/Tests/Run.elm"],
173178 elmOptions: { cwd: "./tests-rendering" },
174179 });
175180 console.log("Done compiling");
@@ -260,29 +265,31 @@ function renderEnvName(env) {
260265 return `${env.platform}, ${env.browser} ${env.browserVersion}`;
261266}
262267
263−function print_results(label, tests) {
268+function print_results(label, results) {
264269 var total_passed = 0;
265270 var total_failed = 0;
266271 var i;
267272 if (program.verbose) {
268273 console.log(label);
269274 }
270− for (i = 0; i < tests.length; i++) {
275+ for (i = 0; i < results.length; i++) {
271276 var passed = 0;
272277 var failed = 0;
273− for (j = 0; j < tests[i].results.length; j++) {
274− if (tests[i].results[j].passing) {
278+ for (j = 0; j < results[i].results.length; j++) {
279+ if (results[i].results[j][1] == null) {
275280 passed = passed + 1;
276281 } else {
277282 if (failed == 0) {
278283 if (!program.verbose) {
279284 console.log(label);
280285 }
281− console.log(tests[i].label);
286+ console.log(results[i].label);
282287 }
283288 failed = failed + 1;
284− console.log(" " + chalk.red("fail") + " ->");
285− console.log(" " + tests[i].results[j].description);
289+ console.log(
290+ " " + chalk.red("fail") + " -> " + results[i].results[j][0]
291+ );
292+ console.log(" " + results[i].results[j][1].description);
286293 }
287294 }
288295 total_passed = total_passed + passed;
@@ -293,7 +300,7 @@ function print_results(label, tests) {
293300 console.log(chalk.red(` ${failed} tests failed`));
294301 console.log();
295302 } else if (program.verbose) {
296− console.log(tests[i].label + chalk.green(` ${passed} tests passed`));
303+ console.log(results[i].label + chalk.green(` ${passed} tests passed`));
297304 }
298305 }
299306 if (total_failed == 0) {
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+99−179
@@ -1,185 +1,105 @@
1−<!DOCTYPE html>
1+<!DOCTYPE HTML>
22<html>
3− <head>
4− <meta charset="UTF-8" />
5− <title>Elm UI Rendering Test</title>
6− <script>
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++;
3+ <head>
4+ <meta charset="UTF-8">
5+ <title>Rendering Benchmark Viewer</title>
6+ <script>
7+ ${compiled_elm_code}
8+ </script>
9+ </head>
10+ <style>
11+ </style>
12+ <body id="root"></body>
13+
14+ <script type="text/javascript">
15+
16+ var app = Elm.Tests.Run.init();
17+
18+ var test_results = "waiting.."
19+
20+ app.ports.report.subscribe(function (results) {
21+ test_results = results;
22+ })
23+
24+ app.ports.analyze.subscribe(function (ids) {
25+ // ids : List String
26+ var idsLength = ids.length;
27+ var results = [];
28+ for (var i = 0; i < idsLength; i++) {
29+ var id = ids[i];
30+ var element = document.getElementById(id);
31+ if (element == null) {
32+ console.log("id " + id + " not found");
33+ }
34+ var style = getStyle(element);
35+ var bbox = getBoundingBox(element);
36+
37+ var visible = isVisible(id, bbox);
38+
39+
40+ var result = { "bbox": bbox, "style": style, "id": id, "isVisible": visible };
41+ results.push(result);
42+
43+ }
44+ app.ports.styles.send(results);
45+ });
46+
47+ function isVisible(id, bbox) {
48+ var current = document.getElementById(id);
49+ var result = 0;
50+ if (current == document.elementFromPoint(bbox['left'], bbox['top'])) {
51+ result++;
52+ }
53+ if (current == document.elementFromPoint(bbox['left'], bbox['bottom'] - 1)) {
54+ result++;
55+ }
56+ if (current == document.elementFromPoint(bbox['right'] - 1, bbox['top'])) {
57+ result++;
58+ }
59+ if (current == document.elementFromPoint(bbox['right'] - 1, bbox['bottom'] - 1)) {
60+ result++;
61+ }
62+
63+
64+ if (result == 4) {
65+ return true;
66+ } else {
67+ return false
68+ }
6069 }
6170
62− if (result == 4) {
63− return true;
64− } else {
65− return false;
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;
6680 }
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− }
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+ }
126102 }
127− return childrenTextMetrics;
128− }
103+
129104 </script>
130− </head>
131− <style></style>
132− <body id="root">
133− <body id="root">
134− <div id="elm-home"></div>
135− <canvas id="canvas"></canvas>
136− </body>
137− </body>
138−
139− <script type="text/javascript">
140− // Starting Elm App,
141− var app = Elm.~~_module_name_~~.init({
142− node: document.getElementById("elm-home"),
143− });
144−
145− // create a canvas for text measurements
146− let canvas = createHiDPICanvas(200, 100, "canvas");
147−
148− var test_results = "waiting..";
149−
150− app.ports.report.subscribe(function (results) {
151− test_results = results;
152− // NOTE - this is the signal to the automation that it is cool to retrieve results now
153− // So don't remove this like you did before :D
154− document.title = "tests finished";
155− });
156−
157− app.ports.analyze.subscribe(function (ids) {
158− // ids : List String
159− var idsLength = ids.length;
160− var results = [];
161− for (var i = 0; i < idsLength; i++) {
162− var id = ids[i];
163− var element = document.getElementById(id);
164− if (element == null) {
165− console.log("id " + id + " not found");
166− }
167− var style = getStyle(element);
168− var bbox = getBoundingBox(element);
169− var metrics = getTextMetrics(element);
170−
171− var visible = isVisible(id, bbox);
172−
173− var result = {
174− textMetrics: metrics,
175− bbox: bbox,
176− style: style,
177− id: id,
178− isVisible: visible,
179− };
180− results.push(result);
181− }
182− app.ports.styles.send(results);
183− });
184− </script>
185−</html>
105+</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.
2222
2323-}
2424
25−import Element exposing (..)
26−import Element.Font as Font
27−import Element.Input as Input
25+import Testable.Element exposing (..)
26+import Testable.Element.Font as Font
27+import Testable.Element.Input as Input
2828
2929
3030main =
tests-rendering/cases/open/InFrontSize.elm+2−2
@@ -1,4 +1,4 @@
1−module InFrontSize exposing (view)
1+module InFrontSize exposing (main)
22
33{-|
44
@@ -16,7 +16,7 @@ import Testable.Element.Background as Background
1616import Testable.Element.Border as Border
1717
1818
19−view =
19+main =
2020 layout []
2121 (el
2222 [ 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)
22
33{-|
44
@@ -25,24 +25,14 @@ I was able to pinpoint the issue using git bisect to this fd08f1a commit, which
2525-}
2626
2727import Browser
28−import Element exposing (column, el, fill, height, layout, scrollbarY, text)
2928import Html exposing (Html)
29+import Testable.Element exposing (..)
3030
3131
32−view : () -> Html ()
33−view () =
32+main =
3433 layout [ height fill ] <|
3534 column
3635 [ height fill ]
3736 [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
3837 , text "Text below the el above"
3938 ]
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)
22
33import Element exposing (Element, alignRight, centerY, column, el, fill, height, padding, px, rgb255, row, spacing, text, width)
44import 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)
22
33import Element exposing (..)
44import 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)
22
3+import Html exposing (Html)
34import Testable.Element exposing (..)
45import Testable.Element.Background as Background
56
67
7−view =
8+main =
89 layout [] <|
910 column []
1011 [ text "Example with centerX:"
1112 , row
1213 [ width fill ]
13− [ row
14− [ centerX
15− , Background.color <| rgb 0 1 0
16− ]
17− [ paragraph
18− [ width shrink
19− ]
20− [ text "Hello world" ]
21− , paragraph
22− [ width shrink
23− ]
24− [ text "Hello world" ]
14+ [ row [ centerX, Background.color <| rgb 0 1 0 ]
15+ [ paragraph [ width shrink ] [ text "Hello world" ]
16+ , paragraph [ width shrink ] [ text "Hello world" ]
2517 ]
2618 ]
2719 , 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 @@
11{
2− "type": "application",
3− "source-directories": ["src", "../src", "cases/open", "cases/resolved"],
4− "elm-version": "0.19.1",
5− "dependencies": {
6− "direct": {
7− "elm/browser": "1.0.2",
8− "elm/core": "1.0.0",
9− "elm/html": "1.0.0",
10− "elm/json": "1.0.0",
11− "elm/parser": "1.1.0",
12− "elm/random": "1.0.0",
13− "elm/time": "1.0.0",
14− "elm/virtual-dom": "1.0.2",
15− "elm-explorations/test": "1.1.0"
2+ "type": "application",
3+ "source-directories": [
4+ "src",
5+ "../src"
6+ ],
7+ "elm-version": "0.19.1",
8+ "dependencies": {
9+ "direct": {
10+ "elm/browser": "1.0.2",
11+ "elm/core": "1.0.0",
12+ "elm/html": "1.0.0",
13+ "elm/json": "1.0.0",
14+ "elm/parser": "1.1.0",
15+ "elm/random": "1.0.0",
16+ "elm/time": "1.0.0",
17+ "elm/virtual-dom": "1.0.2",
18+ "elm-explorations/test": "1.1.0"
19+ },
20+ "indirect": {
21+ "elm/url": "1.0.0"
22+ }
1623 },
17− "indirect": {
18− "elm/url": "1.0.0"
24+ "test-dependencies": {
25+ "direct": {},
26+ "indirect": {}
1927 }
20− },
21− "test-dependencies": {
22− "direct": {},
23− "indirect": {}
24− }
2528}
tests-rendering/make.shnew file+2
@@ -0,0 +1,2 @@
1+
2+elm-live cases/open/InFrontSize.elm --open --dir=view -- --output=view/elm.js --debug
tests-rendering/src/Testable.elm+141−321
@@ -1,48 +1,47 @@
11module Testable exposing
22 ( Attr(..)
3− , AttributeId(..)
43 , BoundingBox
54 , Element(..)
6− , ElementType(..)
75 , Found
86 , LayoutContext(..)
9− , LayoutExpectation(..)
10− , LayoutTest
117 , Location(..)
128 , Style
139 , Surroundings
14− , TextMetrics
10+ , addAttribute
11+ , applyLabels
1512 , compareFormattedColor
16− , elementTypeToString
17− , equal
13+ , createAttributeTest
14+ , createTest
1815 , formatColor
1916 , formatColorWithAlpha
17+ , getElementId
2018 , getIds
2119 , getSpacing
22− , getSpacingFromAttributes
23− , lessThanOrEqual
24− , rounded
20+ , idAttr
21+ , levelToString
22+ , render
23+ , renderAttribute
24+ , renderElement
2525 , runTests
26− , textHeight
27− , toElement
28− , toHtml
29− , todo
30− , true
26+ , toTest
3127 )
3228
3329{-| -}
3430
3531import Dict exposing (Dict)
3632import Element exposing (Color)
33+import Expect
3734import Html exposing (Html)
3835import Html.Attributes
3936import Internal.Model as Internal
37+import Random
4038import Test exposing (Test)
39+import Test.Runner
40+import Test.Runner.Failure
4141
4242
4343type Element msg
4444 = El (List (Attr msg)) (Element msg)
45− | Link String (List (Attr msg)) (Element msg)
4645 | Row (List (Attr msg)) (List (Element msg))
4746 | Column (List (Attr msg)) (List (Element msg))
4847 | TextColumn (List (Attr msg)) (List (Element msg))
@@ -51,104 +50,22 @@ type Element msg
5150 | Empty
5251
5352
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−
13253type Attr msg
13354 = Attr (Element.Attribute msg)
134− | AttrTest
135− { test : Surroundings msg -> List LayoutExpectation
136− , label : String
137− , id : AttributeId
138− }
55+ | AttrTest (Surroundings -> Test)
13956 | Batch (List (Attr msg))
14057 | Spacing Int
14158 | Nearby
14259 { location : Location
14360 , element : Element msg
144− , test : Surroundings msg -> List LayoutExpectation
61+ , test : Surroundings -> () -> Expect.Expectation
14562 , label : String
14663 }
64+ | Label String
14765 | LabeledTest
148− { test : Surroundings msg -> List LayoutExpectation
66+ { test : Surroundings -> () -> Expect.Expectation
14967 , label : String
15068 , attr : Element.Attribute msg
151− , id : AttributeId
15269 }
15370
15471
@@ -166,20 +83,16 @@ type LayoutContext
16683 | InRow
16784 | InEl
16885 | InColumn
169− | InParagraph
170− | InTextCol
171− | AtRoot
17286
17387
174−type alias Surroundings msg =
88+type alias Surroundings =
17589 { siblings : List Found
17690 , parent : Found
17791 , children : List Found
17892 , self : Found
179− , selfElement : Element msg
18093
18194 -- These values are needed to perform some types of tests.
182− , parentLayout : LayoutContext
95+ , location : LayoutContext
18396 , parentSpacing : Int
18497 }
18598
@@ -188,36 +101,9 @@ type alias Found =
188101 { bbox : BoundingBox
189102 , style : Style
190103 , isVisible : Bool
191− , textMetrics : List TextMetrics
192104 }
193105
194106
195−type alias TextMetrics =
196− { actualBoundingBoxAscent : Float
197− , actualBoundingBoxDescent : Float
198− , actualBoundingBoxLeft : Float
199− , actualBoundingBoxRight : Float
200− , width : Float
201− }
202−
203−
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−
221107{-| -}
222108type alias Style =
223109 Dict String String
@@ -239,67 +125,6 @@ type alias BoundingBox =
239125 }
240126
241127
242−type LayoutExpectation
243− = Expect
244− { description : String
245− , result : Bool
246− }
247− | Todo String
248−
249−
250−type alias LayoutTest =
251− { elementDomId : String
252− , elementType : ElementType
253− , label : String
254− , expectations : List LayoutExpectation
255− }
256−
257−
258−
259−{- Expectations -}
260−
261−
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−
282−equal : a -> a -> LayoutExpectation
283−equal one two =
284− Expect
285− { description = "Are equal"
286− , result = one == two
287− }
288−
289−
290−true : String -> Bool -> LayoutExpectation
291−true label passing =
292− Expect
293− { description = label
294− , result = passing
295− }
296−
297−
298−todo : String -> LayoutExpectation
299−todo =
300− Todo
301−
302−
303128
304129{- Retrieve Ids -}
305130
@@ -335,9 +160,6 @@ getElementId level el =
335160 El attrs child ->
336161 id :: getElementId (0 :: level) child ++ attributeIDs attrs
337162
338− Link _ attrs child ->
339− id :: getElementId (0 :: level) child ++ attributeIDs attrs
340−
341163 Row attrs children ->
342164 id :: childrenIDs children ++ attributeIDs attrs
343165
@@ -361,19 +183,9 @@ getElementId level el =
361183{- Render as Html -}
362184
363185
364−toElement : Element msg -> Element.Element msg
365−toElement el =
366− renderElement [ 0, 0 ] el
367−
368−
369−toHtml : Element msg -> Html msg
370−toHtml el =
371− Element.layout
372− [ idAttr "0"
373− , Element.width (Element.px 1000)
374− , Element.height (Element.px 1000)
375− ]
376− <|
186+render : Element msg -> Html msg
187+render el =
188+ Element.layout [ idAttr "0" ] <|
377189 renderElement [ 0, 0 ] el
378190
379191
@@ -402,13 +214,6 @@ renderElement level el =
402214 (id :: makeAttributes attrs)
403215 (renderElement (0 :: level) child)
404216
405− Link url attrs child ->
406− Element.link
407− (id :: makeAttributes attrs)
408− { url = url
409− , label = renderElement (0 :: level) child
410− }
411−
412217 Row attrs children ->
413218 Element.row
414219 (id :: makeAttributes attrs)
@@ -448,6 +253,9 @@ renderAttribute level attrIndex attr =
448253 Spacing _ ->
449254 []
450255
256+ Label _ ->
257+ []
258+
451259 Nearby { location, element } ->
452260 case location of
453261 Above ->
@@ -480,36 +288,30 @@ renderAttribute level attrIndex attr =
480288{- Convert to Test -}
481289
482290
483−runTests : Dict String Found -> Element msg -> List LayoutTest
484−runTests harvested el =
291+toTest : String -> Dict String Found -> Element msg -> Test
292+toTest label harvested el =
485293 let
486294 maybeFound =
487295 Dict.get "se-0" harvested
488296 in
489297 case maybeFound of
490298 Nothing ->
491− [ { elementDomId = "se-0"
492− , elementType = EmptyType
493− , label = "Finding root element"
494− , expectations =
495− [ Expect
496− { description = "Locating root element for rendering tests"
497− , result = False
498− }
499− ]
500− }
501− ]
299+ Test.describe label
300+ [ Test.test "Find Root" <|
301+ \_ -> Expect.fail "unable to find root"
302+ ]
502303
503304 Just root ->
504− createTest
505− { siblings = []
506− , parent = root
507− , cache = harvested
508− , parentSpacing = 0
509− , level = [ 0, 0 ]
510− , element = el
511− , location = AtRoot
512− }
305+ Test.describe label <|
306+ createTest
307+ { siblings = []
308+ , parent = root
309+ , cache = harvested
310+ , parentSpacing = 0
311+ , level = [ 0, 0 ]
312+ , element = el
313+ , location = InEl
314+ }
513315
514316
515317levelToString : List Int -> String
@@ -529,7 +331,7 @@ createTest :
529331 , location : LayoutContext
530332 , parentSpacing : Int
531333 }
532− -> List LayoutTest
334+ -> List Test
533335createTest { siblings, parent, cache, level, element, location, parentSpacing } =
534336 let
535337 spacing =
@@ -539,7 +341,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
539341 id =
540342 levelToString level
541343
542− testChildren : Found -> List (Element msg) -> List LayoutTest
344+ testChildren : Found -> List (Element msg) -> List Test
543345 testChildren found children =
544346 let
545347 childrenFound =
@@ -567,13 +369,13 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
567369 { a
568370 | index : Int
569371 , previous : List Found
570− , tests : List LayoutTest
372+ , tests : List Test
571373 , upcoming : List Found
572374 }
573375 ->
574376 { index : Int
575377 , previous : List Found
576− , tests : List LayoutTest
378+ , tests : List Test
577379 , upcoming : List Found
578380 }
579381 applyChildTest found child childTest =
@@ -600,9 +402,6 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
600402 El _ _ ->
601403 InEl
602404
603− Link _ _ _ ->
604− InEl
605−
606405 Row _ _ ->
607406 InRow
608407
@@ -610,10 +409,10 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
610409 InColumn
611410
612411 TextColumn _ _ ->
613− InTextCol
412+ InColumn
614413
615414 Paragraph _ _ ->
616− InParagraph
415+ InRow
617416
618417 Text _ ->
619418 InEl
@@ -640,7 +439,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
640439 rest
641440 }
642441
643− tests : Found -> List (Attr msg) -> List (Element msg) -> List LayoutTest
442+ tests : Found -> List (Attr msg) -> List (Element msg) -> List Test
644443 tests self attributes children =
645444 let
646445 findBBox elem ( i, gathered ) =
@@ -680,6 +479,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
680479
681480 attributeTests =
682481 attributes
482+ |> applyLabels
683483 |> List.indexedMap
684484 -- Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test
685485 (\i attr ->
@@ -690,9 +490,8 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
690490 { siblings = siblings
691491 , parent = parent
692492 , self = self
693− , selfElement = element
694493 , children = childrenFoundData
695− , parentLayout = location
494+ , location = location
696495 , parentSpacing = parentSpacing
697496 }
698497 attr
@@ -712,26 +511,13 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
712511 []
713512
714513 _ ->
715− [ { elementDomId = id
716− , elementType = EmptyType
717− , label = "Finding element in DOM"
718− , expectations =
719− [ Expect
720− { description = "Locating element for rendering test"
721− , result = False
722− }
723− ]
724− }
725− ]
514+ [ Test.test ("Unable to find " ++ id) (always <| Expect.fail "failed id lookup") ]
726515
727516 Just self ->
728517 case element of
729518 El attrs child ->
730519 tests self attrs [ child ]
731520
732− Link _ attrs child ->
733− tests self attrs [ child ]
734−
735521 Row attrs children ->
736522 tests self attrs children
737523
@@ -751,33 +537,59 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
751537 []
752538
753539
754−createAttributeTest :
755− Found
756− -> Dict String Found
757− -> List Int
758− -> Int
759− -> Surroundings msg
760− -> Attr msg
761− -> List LayoutTest
540+applyLabels : List (Attr msg) -> List (Attr msg)
541+applyLabels attrs =
542+ let
543+ toLabel attr =
544+ case attr of
545+ Label label ->
546+ Just label
547+
548+ _ ->
549+ Nothing
550+
551+ newLabels =
552+ attrs
553+ |> List.filterMap toLabel
554+ |> String.join ", "
555+
556+ applyLabel newLabel attr =
557+ case attr of
558+ LabeledTest labeled ->
559+ LabeledTest
560+ { labeled
561+ | label =
562+ if newLabel == "" then
563+ labeled.label
564+
565+ else
566+ newLabel ++ ", " ++ labeled.label
567+ }
568+
569+ x ->
570+ x
571+ in
572+ List.map (applyLabel newLabels) attrs
573+
574+
575+createAttributeTest : Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test
762576createAttributeTest parent cache level attrIndex surroundings attr =
763577 let
764− domId =
765− "#" ++ levelToString level
578+ indexLabel =
579+ levelToString (attrIndex :: level)
766580 in
767581 case attr of
768582 Attr _ ->
769583 []
770584
585+ Label _ ->
586+ []
587+
771588 Spacing _ ->
772589 []
773590
774− AttrTest details ->
775− [ { elementDomId = domId
776− , elementType =
777− toElementType surroundings.selfElement
778− , label = details.label
779− , expectations = details.test surroundings
780− }
591+ AttrTest test ->
592+ [ test surroundings
781593 ]
782594
783595 Nearby nearby ->
@@ -788,29 +600,16 @@ createAttributeTest parent cache level attrIndex surroundings attr =
788600 , parentSpacing = 0
789601 , level = attrIndex :: -1 :: level
790602 , location = IsNearby nearby.location
791− , element =
792− addAttribute
793− (AttrTest
794− { label = nearby.label
795− , test =
796− nearby.test
797− , id = NoId
798− }
799− )
800− nearby.element
603+ , element = addAttribute (AttrTest (\context -> Test.test (nearby.label ++ " #" ++ indexLabel) (nearby.test context))) nearby.element
801604 }
802605
803606 Batch batch ->
804607 batch
805− |> List.indexedMap (\i attribute -> createAttributeTest parent cache level i surroundings attribute)
608+ |> List.indexedMap (\i attribute -> createAttributeTest parent cache (attrIndex :: level) i surroundings attribute)
806609 |> List.concat
807610
808611 LabeledTest { label, test } ->
809− [ { elementDomId = domId
810− , elementType = toElementType surroundings.selfElement
811− , label = label
812− , expectations = test surroundings
813− }
612+ [ Test.test (label ++ " #" ++ indexLabel) (test surroundings)
814613 ]
815614
816615
@@ -820,9 +619,6 @@ addAttribute attr el =
820619 El attrs child ->
821620 El (attr :: attrs) child
822621
823− Link url attrs child ->
824− Link url (attr :: attrs) child
825−
826622 Row attrs children ->
827623 Row (attr :: attrs) children
828624
@@ -842,6 +638,48 @@ addAttribute attr el =
842638 Text str
843639
844640
641+runTests :
642+ Random.Seed
643+ -> Test
644+ ->
645+ List
646+ ( String
647+ , Maybe
648+ { given : Maybe String
649+ , description : String
650+ , reason : Test.Runner.Failure.Reason
651+ }
652+ )
653+runTests seed tests =
654+ let
655+ run runner =
656+ let
657+ ran =
658+ List.map Test.Runner.getFailureReason (runner.run ())
659+ in
660+ List.map2 Tuple.pair runner.labels ran
661+
662+ results =
663+ case Test.Runner.fromTest 100 seed tests of
664+ Test.Runner.Plain rnrs ->
665+ List.map run rnrs
666+
667+ Test.Runner.Only rnrs ->
668+ List.map run rnrs
669+
670+ Test.Runner.Skipping rnrs ->
671+ List.map run rnrs
672+
673+ Test.Runner.Invalid invalid ->
674+ let
675+ _ =
676+ Debug.log "Invalid tests" invalid
677+ in
678+ []
679+ in
680+ List.concat results
681+
682+
845683compareFormattedColor : Color -> String -> Bool
846684compareFormattedColor color expected =
847685 formatColor color == expected || formatColorWithAlpha color == expected
@@ -878,21 +716,6 @@ formatColor (Internal.Rgba red green blue alpha) =
878716 ++ ")"
879717
880718
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−
896719getSpacing : Element msg -> Maybe Int
897720getSpacing el =
898721 let
@@ -918,9 +741,6 @@ getSpacing el =
918741 El attrs _ ->
919742 filterAttrs attrs
920743
921− Link _ attrs _ ->
922− filterAttrs attrs
923−
924744 Row attrs _ ->
925745 filterAttrs attrs
926746
tests-rendering/src/Testable/Element.elm+245−832
@@ -10,7 +10,6 @@ module Testable.Element exposing
1010 , below
1111 , centerX
1212 , centerY
13− , clip
1413 , column
1514 , el
1615 , expectRoundedEquality
@@ -21,12 +20,9 @@ module Testable.Element exposing
2120 , isVisible
2221 , label
2322 , layout
24− , link
2523 , maximum
2624 , minimum
2725 , moveDown
28− , moveLeft
29− , moveRight
3026 , moveUp
3127 , none
3228 , onLeft
@@ -38,14 +34,10 @@ module Testable.Element exposing
3834 , rgb
3935 , rgba
4036 , row
41− , scrollbarX
42− , scrollbarY
43− , scrollbars
4437 , shrink
4538 , spacing
4639 , text
4740 , textColumn
48− , toProgram
4941 , transparent
5042 , width
5143 )
@@ -64,21 +56,17 @@ In order to run the test:
6456
6557import Dict
6658import Element
59+import Expect
6760import Html.Attributes
6861import Testable
6962import Testable.Runner
7063
7164
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
65+layout : List (Testable.Attr msg) -> Testable.Element Testable.Runner.Msg -> Testable.Runner.TestableProgram
8066layout attrs elem =
81− Testable.Runner.testable "Test" elem
67+ Testable.Runner.program
68+ [ ( "Open Case", elem )
69+ ]
8270
8371
8472text : String -> Testable.Element msg
@@ -87,18 +75,18 @@ text =
8775
8876
8977el : List (Testable.Attr msg) -> Testable.Element msg -> Testable.Element msg
90−el attrs =
91− Testable.El (implicitWidthHeightShrink attrs)
78+el =
79+ Testable.El
9280
9381
9482row : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
95−row attrs =
96− Testable.Row (implicitWidthHeightShrink attrs)
83+row =
84+ Testable.Row
9785
9886
9987column : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
100−column attrs =
101− Testable.Column (implicitWidthHeightShrink attrs)
88+column =
89+ Testable.Column
10290
10391
10492none : Testable.Element msg
@@ -107,66 +95,13 @@ none =
10795
10896
10997paragraph : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
110−paragraph attrs =
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)
98+paragraph =
99+ Testable.Paragraph
118100
119101
120102textColumn : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
121−textColumn attrs =
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)
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−
165−
166−{-| Old labeling mechanism that i removed to hastily
167−-}
168−label str =
169− Testable.Batch []
103+textColumn =
104+ Testable.TextColumn
170105
171106
172107moveUp x =
@@ -177,14 +112,6 @@ moveDown x =
177112 Testable.Attr (Element.moveDown x)
178113
179114
180−moveRight x =
181− Testable.Attr (Element.moveRight x)
182−
183−
184−moveLeft x =
185− Testable.Attr (Element.moveLeft x)
186−
187−
188115type Length
189116 = Px Int
190117 | Fill Int
@@ -229,6 +156,11 @@ fillPortion =
229156 Fill
230157
231158
159+label : String -> Testable.Attr msg
160+label =
161+ Testable.Label
162+
163+
232164transparent : Bool -> Testable.Attr msg
233165transparent on =
234166 Testable.LabeledTest
@@ -239,9 +171,8 @@ transparent on =
239171 else
240172 "opaque"
241173 , attr = Element.transparent on
242− , id = Testable.NoId
243174 , test =
244− \context ->
175+ \context _ ->
245176 let
246177 selfTransparency =
247178 context.self.style
@@ -255,19 +186,19 @@ transparent on =
255186 else
256187 "1"
257188 in
258− [ Testable.equal value selfTransparency ]
189+ Expect.equal value selfTransparency
259190 }
260191
261192
262193{-| -}
263194isVisible : Testable.Attr msg
264195isVisible =
265− Testable.AttrTest
196+ Testable.LabeledTest
266197 { label = "is-visible"
267− , id = Testable.NoId
198+ , attr = Element.htmlAttribute (Html.Attributes.style "not" "applicable")
268199 , test =
269− \context ->
270− [ Testable.equal context.self.isVisible True ]
200+ \context _ ->
201+ Expect.equal context.self.isVisible True
271202 }
272203
273204
@@ -277,16 +208,15 @@ alpha a =
277208 Testable.LabeledTest
278209 { label = "alpha-" ++ String.fromFloat a
279210 , attr = Element.alpha a
280− , id = Testable.NoId
281211 , test =
282− \context ->
212+ \context _ ->
283213 let
284214 selfTransparency =
285215 context.self.style
286216 |> Dict.get "opacity"
287217 |> Maybe.withDefault "notfound"
288218 in
289− [ Testable.equal (String.fromFloat a) selfTransparency ]
219+ Expect.equal (String.fromFloat a) selfTransparency
290220 }
291221
292222
@@ -296,10 +226,9 @@ padding pad =
296226 Testable.LabeledTest
297227 { label = "padding " ++ String.fromInt pad
298228 , attr = Element.padding pad
299− , id = Testable.NoId
300229 , test =
301− \found ->
302− [ Testable.true ("Padding " ++ String.fromInt pad ++ " is present")
230+ \found _ ->
231+ Expect.true ("Padding " ++ String.fromInt pad ++ " is present")
303232 (List.all ((==) pad)
304233 [ floor found.self.bbox.padding.left
305234 , floor found.self.bbox.padding.right
@@ -307,7 +236,6 @@ padding pad =
307236 , floor found.self.bbox.padding.bottom
308237 ]
309238 )
310− ]
311239 }
312240
313241
@@ -317,10 +245,9 @@ paddingXY x y =
317245 Testable.LabeledTest
318246 { label = "paddingXY " ++ String.fromInt x ++ ", " ++ String.fromInt y
319247 , attr = Element.paddingXY x y
320− , id = Testable.NoId
321248 , test =
322− \found ->
323− [ Testable.true ("PaddingXY (" ++ String.fromInt x ++ ", " ++ String.fromInt y ++ ") is present")
249+ \found _ ->
250+ Expect.true ("PaddingXY (" ++ String.fromInt x ++ ", " ++ String.fromInt y ++ ") is present")
324251 (List.all ((==) x)
325252 [ floor found.self.bbox.padding.left
326253 , floor found.self.bbox.padding.right
@@ -330,15 +257,9 @@ paddingXY x y =
330257 , floor found.self.bbox.padding.bottom
331258 ]
332259 )
333− ]
334260 }
335261
336262
337−listIf ls =
338− List.filter Tuple.first ls
339− |> List.map Tuple.second
340−
341−
342263widthHelper maybeMin maybeMax len =
343264 let
344265 addMin l =
@@ -398,7 +319,6 @@ widthHelper maybeMin maybeMax len =
398319 -- Pixel values should ignore min and max?
399320 Testable.LabeledTest
400321 { label = "width " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel
401− , id = Testable.IsWidth
402322 , attr =
403323 Element.width
404324 (Element.px val
@@ -406,24 +326,18 @@ widthHelper maybeMin maybeMax len =
406326 |> addMax
407327 )
408328 , test =
409− \found ->
410− [ expectRoundedEquality
411− { expected = toFloat val
412− , found = found.self.bbox.width
413− }
414− , Testable.true "min/max is upheld" (minMaxTest (floor found.self.bbox.width))
415− ]
329+ \found _ ->
330+ Expect.all
331+ [ \_ ->
332+ Expect.true "exact width is exact" (floor found.self.bbox.width == val)
333+ , \_ -> Expect.true "min/max is upheld" (minMaxTest (floor found.self.bbox.width))
334+ ]
335+ ()
416336 }
417337
418338 Fill portion ->
419339 Testable.LabeledTest
420− { label =
421− if portion == 1 then
422− "width fill" ++ minLabel ++ maxLabel
423−
424− else
425− "width fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel
426− , id = Testable.IsWidth
340+ { label = "width fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel
427341 , attr =
428342 Element.width
429343 (Element.fillPortion portion
@@ -431,102 +345,41 @@ widthHelper maybeMin maybeMax len =
431345 |> addMax
432346 )
433347 , test =
434− \context ->
435− if List.member context.parentLayout [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
436− [ Testable.true "width fill doesn't apply to onright/onleft elements" True ]
348+ \context _ ->
349+ if List.member context.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
350+ Expect.true "width fill doesn't apply to onright/onleft elements" True
437351
438352 else
439353 let
440354 parentAvailableWidth =
441355 context.parent.bbox.width - (context.self.bbox.padding.left + context.self.bbox.padding.right)
442356 in
443− List.concat
444− [ case context.parentLayout of
445− Testable.IsNearby _ ->
446− [ Testable.true "Nearby Element has fill width"
447− ((floor context.parent.bbox.width == floor context.self.bbox.width)
448− || minMaxTest (floor context.self.bbox.width)
449− )
450− ]
451−
452− Testable.InColumn ->
453− [ Testable.true "Element within column has fill width"
454− ((floor parentAvailableWidth == floor context.self.bbox.width)
455− || minMaxTest (floor context.self.bbox.width)
456− )
457− ]
458−
459− Testable.InEl ->
460− [ Testable.true "Element within element has fill width" <|
461− (floor parentAvailableWidth == floor context.self.bbox.width)
462− || minMaxTest (floor context.self.bbox.width)
463− ]
464−
465− _ ->
466− let
467− spacePerPortion =
468− parentAvailableWidth / toFloat (List.length context.siblings + 1)
469− in
470− [ Testable.true "element has fill width" <|
471− (floor spacePerPortion == floor context.self.bbox.width)
472− || 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− ]
357+ case context.location of
358+ Testable.IsNearby _ ->
359+ Expect.true "Nearby Element has fill width"
360+ ((floor context.parent.bbox.width == floor context.self.bbox.width)
361+ || minMaxTest (floor context.self.bbox.width)
362+ )
363+
364+ Testable.InColumn ->
365+ Expect.true "Element within column has fill width"
366+ ((floor parentAvailableWidth == floor context.self.bbox.width)
367+ || minMaxTest (floor context.self.bbox.width)
368+ )
369+
370+ Testable.InEl ->
371+ Expect.true "Element within element has fill width" <|
372+ (floor parentAvailableWidth == floor context.self.bbox.width)
373+ || minMaxTest (floor context.self.bbox.width)
374+
375+ _ ->
376+ let
377+ spacePerPortion =
378+ parentAvailableWidth / toFloat (List.length context.siblings + 1)
379+ in
380+ Expect.true "element has fill width" <|
381+ (floor spacePerPortion == floor context.self.bbox.width)
382+ || minMaxTest (floor context.self.bbox.width)
530383 }
531384
532385 Shrink ->
@@ -538,211 +391,33 @@ widthHelper maybeMin maybeMax len =
538391 |> addMin
539392 |> addMax
540393 )
541− , id = Testable.IsWidth
542394 , test =
543− \context ->
544− case context.selfElement of
545− Testable.El _ _ ->
546− 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− ]
395+ \context _ ->
396+ let
397+ childWidth child =
398+ -- TODO: add margin values to widths
399+ child.bbox.width
400+
401+ totalChildren =
402+ context.children
403+ |> List.map childWidth
404+ |> List.sum
405+
406+ horizontalPadding =
407+ context.self.bbox.padding.left + context.self.bbox.padding.right
408+
409+ spacingValue =
410+ toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)
411+ in
412+ if totalChildren == 0 then
413+ -- TODO: The issue is that we have a hard time measuring `text` elements
414+ -- So if a element has a text child, then it's width isn't going to show up in the system.
415+ expectRoundedEquality context.self.bbox.width context.self.bbox.width
573416
574− Testable.Link _ _ _ ->
575− let
576− childWidth child =
577− child.bbox.width
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
609−
610− totalChildren =
611− context.children
612− |> List.map childWidth
613− |> List.append (List.map .width context.self.textMetrics)
614− |> List.sum
615−
616− horizontalPadding =
617− context.self.bbox.padding.left + context.self.bbox.padding.right
618−
619− spacingAmount =
620− Testable.getSpacingFromAttributes rowAttrs
621−
622− totalSpacing =
623− toFloat spacingAmount * (toFloat (List.length context.children) - 1)
624− in
625− listIf
626− [ ( True
627− , expectRoundedEquality
628− { expected = totalChildren + horizontalPadding + totalSpacing
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−
711− Testable.Paragraph _ _ ->
712− -- This should be the size it's text,
713− -- unless it takes up all available space, in which case it should wrap.
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
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− []
417+ else
418+ -- This fails if this element is actually a column
419+ -- So we need to capture what this element is in order to do this calculation.
420+ expectRoundedEquality (totalChildren + horizontalPadding + spacingValue) context.self.bbox.width
746421 }
747422
748423
@@ -811,16 +486,17 @@ heightHelper maybeMin maybeMax len =
811486 |> addMin
812487 |> addMax
813488 )
814− , id = Testable.IsHeight
815489 , test =
816− \found ->
817− [ expectRoundedEquality
818− { expected = toFloat val
819− , found = found.self.bbox.height
820− }
821− , Testable.true "min/max holds true"
822− (minMaxTest (floor found.self.bbox.height))
823− ]
490+ \found _ ->
491+ Expect.all
492+ [ \_ ->
493+ Expect.true ("exact height is exact: " ++ String.fromInt (floor found.self.bbox.height) ++ "," ++ String.fromInt val)
494+ (floor found.self.bbox.height == val)
495+ , \_ ->
496+ Expect.true "min/max holds true"
497+ (minMaxTest (floor found.self.bbox.height))
498+ ]
499+ ()
824500 }
825501
826502 Fill portion ->
@@ -832,32 +508,31 @@ heightHelper maybeMin maybeMax len =
832508 |> addMin
833509 |> addMax
834510 )
835− , id = Testable.IsHeight
836511 , test =
837− \context ->
838− [ if List.member context.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
839− Testable.true "height fill doesn't apply to above/below elements" True
512+ \context _ ->
513+ if List.member context.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
514+ Expect.true "height fill doesn't apply to above/below elements" True
840515
841− else
516+ else
842517 let
843518 parentAvailableHeight =
844519 context.parent.bbox.height - (context.self.bbox.padding.top + context.self.bbox.padding.bottom)
845520 in
846− case context.parentLayout of
521+ case context.location of
847522 Testable.IsNearby _ ->
848− Testable.true "Nearby Element has fill height"
523+ Expect.true "Nearby Element has fill height"
849524 ((floor context.parent.bbox.height == floor context.self.bbox.height)
850525 || minMaxTest (floor context.self.bbox.height)
851526 )
852527
853528 Testable.InColumn ->
854− Testable.true "Element within column has fill height"
529+ Expect.true "Element within column has fill height"
855530 ((floor parentAvailableHeight == floor context.self.bbox.height)
856531 || minMaxTest (floor context.self.bbox.height)
857532 )
858533
859534 Testable.InEl ->
860− Testable.true "Element within el has fill height" <|
535+ Expect.true "Element within el has fill height" <|
861536 (floor parentAvailableHeight == floor context.self.bbox.height)
862537 || minMaxTest (floor context.self.bbox.height)
863538
@@ -866,10 +541,9 @@ heightHelper maybeMin maybeMax len =
866541 spacePerPortion =
867542 parentAvailableHeight / toFloat (List.length context.siblings + 1)
868543 in
869− Testable.true "el has fill height" <|
544+ Expect.true "el has fill height" <|
870545 (floor spacePerPortion == floor context.self.bbox.height)
871546 || minMaxTest (floor context.self.bbox.height)
872− ]
873547 }
874548
875549 Shrink ->
@@ -881,134 +555,33 @@ heightHelper maybeMin maybeMax len =
881555 |> addMin
882556 |> addMax
883557 )
884− , id = Testable.IsHeight
885558 , test =
886− \context ->
887− case context.selfElement of
888− Testable.El _ _ ->
889− let
890− childHeight child =
891− child.bbox.height
892− in
893− if List.isEmpty context.children then
894− -- context.self.textMetrics
895− -- |> List.map Testable.textHeight
896− -- |> List.sum
897− -- TODO: apparently the font metrics we have are for the literal characters rendered
898− -- not for the font itself.
899− [ Testable.todo "calculate height from actual text metrics"
900− ]
901−
902− else
903− [ expectRoundedEquality
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−
916− Testable.Link _ _ _ ->
917− let
918− childHeight child =
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
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− ]
559+ \context _ ->
560+ let
561+ childWidth child =
562+ -- TODO: add margin values to heights
563+ child.bbox.height
564+
565+ totalChildren =
566+ context.children
567+ |> List.map childWidth
568+ |> List.sum
569+
570+ verticalPadding =
571+ context.self.bbox.padding.top + context.self.bbox.padding.bottom
572+
573+ spacingValue =
574+ toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)
575+ in
576+ if totalChildren == 0 then
577+ -- TODO: The issue is that we have a hard time measuring `text` elements
578+ -- So if a element has a text child, then it's height isn't going to show up in the system.
579+ expectRoundedEquality context.self.bbox.height context.self.bbox.height
971580
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− []
581+ else
582+ -- This fails if this element is actually a column
583+ -- So we need to capture what this element is in order to do this calculation.
584+ expectRoundedEquality (totalChildren + verticalPadding + spacingValue) context.self.bbox.height
1012585 }
1013586
1014587
@@ -1029,9 +602,8 @@ spacing space =
1029602 , Testable.LabeledTest
1030603 { label = "spacing: " ++ String.fromInt space
1031604 , attr = Element.spacing space
1032− , id = Testable.NoId
1033605 , test =
1034− \found ->
606+ \found _ ->
1035607 let
1036608 findDistance child total =
1037609 List.concatMap
@@ -1077,7 +649,7 @@ spacing space =
1077649 []
1078650 distances
1079651 in
1080− [ Testable.true
652+ Expect.true
1081653 ("All children are at least "
1082654 ++ String.fromInt space
1083655 ++ " pixels apart."
@@ -1085,7 +657,6 @@ spacing space =
1085657 ++ " are not though"
1086658 )
1087659 (allAreSpaced == [])
1088− ]
1089660 }
1090661 ]
1091662
@@ -1108,33 +679,30 @@ alignLeft =
1108679 Testable.LabeledTest
1109680 { label = "alignLeft"
1110681 , attr = Element.alignLeft
1111− , id = Testable.NoId
1112682 , test =
1113− \found ->
1114− [ if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
1115− Testable.true "alignLeft doesn't apply to elements that are onLeft or onRight" True
683+ \found _ ->
684+ if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
685+ Expect.true "alignLeft doesn't apply to elements that are onLeft or onRight" True
1116686
1117− else if
1118− List.member found.parentLayout
687+ else if
688+ List.member found.location
1119689 [ Testable.IsNearby Testable.InFront
1120690 , Testable.IsNearby Testable.Behind
1121691 , Testable.IsNearby Testable.Above
1122692 , Testable.IsNearby Testable.Below
1123693 ]
1124− then
694+ then
1125695 expectRoundedEquality
1126− { found = found.self.bbox.left
1127− , expected = found.parent.bbox.left
1128− }
696+ found.self.bbox.left
697+ found.parent.bbox.left
1129698
1130− else if List.length found.siblings == 0 then
699+ else if List.length found.siblings == 0 then
1131700 expectRoundedEquality
1132− { found = found.self.bbox.left
1133− , expected = found.parent.bbox.left + found.parent.bbox.padding.left
1134− }
701+ found.self.bbox.left
702+ (found.parent.bbox.left + found.parent.bbox.padding.left)
1135703
1136− else
1137− case found.parentLayout of
704+ else
705+ case found.location of
1138706 Testable.InRow ->
1139707 let
1140708 siblingsOnLeft =
@@ -1149,16 +717,13 @@ alignLeft =
1149717 |> List.sum
1150718 in
1151719 expectRoundedEquality
1152− { found = found.self.bbox.left
1153− , expected = found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings)
1154− }
720+ found.self.bbox.left
721+ (found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings))
1155722
1156723 _ ->
1157724 expectRoundedEquality
1158− { found = found.self.bbox.left
1159− , expected = found.parent.bbox.left + found.parent.bbox.padding.left
1160− }
1161− ]
725+ found.self.bbox.left
726+ (found.parent.bbox.left + found.parent.bbox.padding.left)
1162727 }
1163728
1164729
@@ -1168,9 +733,8 @@ centerX =
1168733 Testable.LabeledTest
1169734 { label = "centerX"
1170735 , attr = Element.centerX
1171− , id = Testable.NoId
1172736 , test =
1173− \found ->
737+ \found _ ->
1174738 let
1175739 selfCenter : Float
1176740 selfCenter =
@@ -1180,18 +744,16 @@ centerX =
1180744 parentCenter =
1181745 found.parent.bbox.left + (found.parent.bbox.width / 2)
1182746 in
1183− if List.member found.parentLayout [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
1184− [ Testable.true "centerX doesn't apply to elements that are onLeft or onRight" True ]
747+ if List.member found.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
748+ Expect.true "centerX doesn't apply to elements that are onLeft or onRight" True
1185749
1186750 else if List.length found.siblings == 0 then
1187− [ expectRoundedEquality
1188− { found = selfCenter
1189− , expected = parentCenter
1190− }
1191− ]
751+ expectRoundedEquality
752+ selfCenter
753+ parentCenter
1192754
1193755 else
1194− case found.parentLayout of
756+ case found.location of
1195757 Testable.InRow ->
1196758 let
1197759 siblingsOnLeft =
@@ -1221,18 +783,12 @@ centerX =
1221783 / 2
1222784 )
1223785 in
1224− [ expectRoundedEquality
1225− { found = selfCenter
1226− , expected = expectedCenter
1227− }
1228− ]
786+ expectRoundedEquality
787+ selfCenter
788+ expectedCenter
1229789
1230790 _ ->
1231− [ expectRoundedEquality
1232− { found = selfCenter
1233− , expected = parentCenter
1234− }
1235− ]
791+ expectRoundedEquality selfCenter parentCenter
1236792 }
1237793
1238794
@@ -1242,35 +798,30 @@ alignRight =
1242798 Testable.LabeledTest
1243799 { label = "alignRight"
1244800 , attr = Element.alignRight
1245− , id = Testable.NoId
1246801 , test =
1247− \found ->
1248− if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
1249− [ Testable.true "alignRight doesn't apply to elements that are onLeft or onRight" True ]
802+ \found _ ->
803+ if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
804+ Expect.true "alignRight doesn't apply to elements that are onLeft or onRight" True
1250805
1251806 else if
1252− List.member found.parentLayout
807+ List.member found.location
1253808 [ Testable.IsNearby Testable.InFront
1254809 , Testable.IsNearby Testable.Behind
1255810 , Testable.IsNearby Testable.Above
1256811 , Testable.IsNearby Testable.Below
1257812 ]
1258813 then
1259− [ expectRoundedEquality
1260− { found = found.self.bbox.right
1261− , expected = found.parent.bbox.right
1262− }
1263− ]
814+ expectRoundedEquality
815+ found.self.bbox.right
816+ found.parent.bbox.right
1264817
1265818 else if List.length found.siblings == 0 then
1266− [ expectRoundedEquality
1267− { found = found.self.bbox.right
1268− , expected = found.parent.bbox.right + found.parent.bbox.padding.right
1269− }
1270− ]
819+ expectRoundedEquality
820+ found.self.bbox.right
821+ (found.parent.bbox.right + found.parent.bbox.padding.right)
1271822
1272823 else
1273− case found.parentLayout of
824+ case found.location of
1274825 Testable.InRow ->
1275826 let
1276827 siblingsOnRight =
@@ -1284,18 +835,14 @@ alignRight =
1284835 |> List.map (.width << .bbox)
1285836 |> List.sum
1286837 in
1287− [ expectRoundedEquality
1288− { found = found.self.bbox.right
1289− , expected = found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings)
1290− }
1291− ]
838+ expectRoundedEquality
839+ found.self.bbox.right
840+ (found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings))
1292841
1293842 _ ->
1294− [ expectRoundedEquality
1295− { found = found.self.bbox.right
1296− , expected = found.parent.bbox.right + found.parent.bbox.padding.right
1297− }
1298− ]
843+ expectRoundedEquality
844+ found.self.bbox.right
845+ (found.parent.bbox.right + found.parent.bbox.padding.right)
1299846 }
1300847
1301848
@@ -1305,35 +852,30 @@ alignTop =
1305852 Testable.LabeledTest
1306853 { label = "alignTop"
1307854 , attr = Element.alignTop
1308− , id = Testable.NoId
1309855 , test =
1310− \found ->
1311− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
1312− [ Testable.true "alignTop doesn't apply to elements that are above or below" True ]
856+ \found _ ->
857+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
858+ Expect.true "alignTop doesn't apply to elements that are above or below" True
1313859
1314860 else if
1315− List.member found.parentLayout
861+ List.member found.location
1316862 [ Testable.IsNearby Testable.InFront
1317863 , Testable.IsNearby Testable.Behind
1318864 , Testable.IsNearby Testable.OnRight
1319865 , Testable.IsNearby Testable.OnLeft
1320866 ]
1321867 then
1322− [ expectRoundedEquality
1323− { found = found.self.bbox.top
1324− , expected = found.parent.bbox.top
1325− }
1326− ]
868+ expectRoundedEquality
869+ found.self.bbox.top
870+ found.parent.bbox.top
1327871
1328872 else if List.length found.siblings == 0 then
1329− [ expectRoundedEquality
1330− { found = found.self.bbox.top
1331− , expected = found.parent.bbox.top + found.parent.bbox.padding.top
1332− }
1333− ]
873+ expectRoundedEquality
874+ found.self.bbox.top
875+ (found.parent.bbox.top + found.parent.bbox.padding.top)
1334876
1335877 else
1336− case found.parentLayout of
878+ case found.location of
1337879 Testable.InColumn ->
1338880 let
1339881 siblingsAbove =
@@ -1347,18 +889,14 @@ alignTop =
1347889 |> List.map (.height << .bbox)
1348890 |> List.sum
1349891 in
1350− [ expectRoundedEquality
1351− { found = found.self.bbox.top
1352− , expected = found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings)
1353− }
1354− ]
892+ expectRoundedEquality
893+ found.self.bbox.top
894+ (found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings))
1355895
1356896 _ ->
1357− [ expectRoundedEquality
1358− { found = found.self.bbox.top
1359− , expected = found.parent.bbox.top
1360− }
1361− ]
897+ expectRoundedEquality
898+ found.self.bbox.top
899+ found.parent.bbox.top
1362900 }
1363901
1364902
@@ -1368,35 +906,30 @@ alignBottom =
1368906 Testable.LabeledTest
1369907 { label = "alignBottom"
1370908 , attr = Element.alignBottom
1371− , id = Testable.NoId
1372909 , test =
1373− \found ->
1374− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
1375− [ Testable.true "alignBottom doesn't apply to elements that are above or below" True ]
910+ \found _ ->
911+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
912+ Expect.true "alignBottom doesn't apply to elements that are above or below" True
1376913
1377914 else if
1378− List.member found.parentLayout
915+ List.member found.location
1379916 [ Testable.IsNearby Testable.InFront
1380917 , Testable.IsNearby Testable.Behind
1381918 , Testable.IsNearby Testable.OnRight
1382919 , Testable.IsNearby Testable.OnLeft
1383920 ]
1384921 then
1385− [ expectRoundedEquality
1386− { found = found.self.bbox.bottom
1387− , expected = found.parent.bbox.bottom
1388− }
1389− ]
922+ expectRoundedEquality
923+ found.self.bbox.bottom
924+ found.parent.bbox.bottom
1390925
1391926 else if List.length found.siblings == 0 then
1392− [ expectRoundedEquality
1393− { found = found.self.bbox.bottom
1394− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom
1395− }
1396− ]
927+ expectRoundedEquality
928+ found.self.bbox.bottom
929+ (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)
1397930
1398931 else
1399− case found.parentLayout of
932+ case found.location of
1400933 Testable.InColumn ->
1401934 let
1402935 siblingsBelow =
@@ -1410,31 +943,20 @@ alignBottom =
1410943 |> List.map (.height << .bbox)
1411944 |> List.sum
1412945 in
1413− [ expectRoundedEquality
1414− { found = found.self.bbox.bottom
1415− , expected = found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings)
1416− }
1417− ]
946+ expectRoundedEquality
947+ found.self.bbox.bottom
948+ (found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings))
1418949
1419950 _ ->
1420− [ expectRoundedEquality
1421− { found = found.self.bbox.bottom
1422− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom
1423− }
1424− ]
951+ expectRoundedEquality
952+ found.self.bbox.bottom
953+ (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)
1425954 }
1426955
1427956
1428−expectRoundedEquality : { expected : Float, found : Float } -> Testable.LayoutExpectation
1429−expectRoundedEquality { expected, found } =
1430− Testable.true
1431− ("expected " ++ floatToString expected ++ ", found " ++ floatToString found)
1432− (abs (expected - found) < 1)
1433−
1434−
1435−floatToString : Float -> String
1436−floatToString x =
1437− String.fromFloat (toFloat (round (x * 100)) / 100)
957+expectRoundedEquality x y =
958+ Expect.true ("within 1 of each other " ++ String.fromFloat x ++ ":" ++ String.fromFloat y)
959+ (abs (x - y) < 1)
1438960
1439961
1440962{-| -}
@@ -1443,9 +965,8 @@ centerY =
1443965 Testable.LabeledTest
1444966 { label = "centerY"
1445967 , attr = Element.centerY
1446− , id = Testable.NoId
1447968 , test =
1448− \found ->
969+ \found _ ->
1449970 let
1450971 selfCenter =
1451972 found.self.bbox.top + (found.self.bbox.height / 2)
@@ -1453,18 +974,16 @@ centerY =
1453974 parentCenter =
1454975 found.parent.bbox.top + (found.parent.bbox.height / 2)
1455976 in
1456− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
1457− [ Testable.true "centerY doesn't apply to elements that are above or below" True ]
977+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
978+ Expect.true "centerY doesn't apply to elements that are above or below" True
1458979
1459980 else if List.length found.siblings == 0 then
1460− [ expectRoundedEquality
1461− { found = selfCenter
1462− , expected = parentCenter
1463− }
1464− ]
981+ expectRoundedEquality
982+ selfCenter
983+ parentCenter
1465984
1466985 else
1467− case found.parentLayout of
986+ case found.location of
1468987 Testable.InColumn ->
1469988 let
1470989 siblingsOnTop =
@@ -1494,18 +1013,12 @@ centerY =
14941013 / 2
14951014 )
14961015 in
1497− [ expectRoundedEquality
1498− { found = selfCenter
1499− , expected = expectedCenter
1500− }
1501− ]
1016+ expectRoundedEquality
1017+ selfCenter
1018+ expectedCenter
15021019
15031020 _ ->
1504− [ expectRoundedEquality
1505− { found = selfCenter
1506− , expected = parentCenter
1507− }
1508− ]
1021+ expectRoundedEquality selfCenter parentCenter
15091022 }
15101023
15111024
@@ -1517,12 +1030,8 @@ above element =
15171030 , element = element
15181031 , label = "above"
15191032 , test =
1520− \found ->
1521− [ expectRoundedEquality
1522− { found = found.self.bbox.bottom
1523− , expected = found.parent.bbox.top
1524− }
1525− ]
1033+ \found _ ->
1034+ expectRoundedEquality found.self.bbox.bottom found.parent.bbox.top
15261035 }
15271036
15281037
@@ -1534,12 +1043,8 @@ below element =
15341043 , element = element
15351044 , label = "below"
15361045 , test =
1537− \found ->
1538− [ expectRoundedEquality
1539− { found = found.self.bbox.top
1540− , expected = found.parent.bbox.bottom
1541− }
1542− ]
1046+ \found _ ->
1047+ expectRoundedEquality found.self.bbox.top found.parent.bbox.bottom
15431048 }
15441049
15451050
@@ -1551,12 +1056,8 @@ onRight element =
15511056 , element = element
15521057 , label = "onRight"
15531058 , test =
1554− \found ->
1555− [ expectRoundedEquality
1556− { found = found.self.bbox.left
1557− , expected = found.parent.bbox.right
1558− }
1559− ]
1059+ \found _ ->
1060+ expectRoundedEquality found.self.bbox.left found.parent.bbox.right
15601061 }
15611062
15621063
@@ -1568,12 +1069,8 @@ onLeft element =
15681069 , element = element
15691070 , label = "onLeft"
15701071 , test =
1571− \found ->
1572− [ expectRoundedEquality
1573− { found = found.self.bbox.right
1574− , expected = found.parent.bbox.left
1575− }
1576− ]
1072+ \found _ ->
1073+ expectRoundedEquality found.self.bbox.right found.parent.bbox.left
15771074 }
15781075
15791076
@@ -1589,12 +1086,11 @@ inFront element =
15891086 , element = element
15901087 , label = "inFront"
15911088 , test =
1592− \found ->
1593− [ withinHelper found ]
1089+ withinHelper
15941090 }
15951091
15961092
1597−withinHelper found =
1093+withinHelper found _ =
15981094 let
15991095 horizontalCheck =
16001096 if found.self.bbox.width > found.parent.bbox.width then
@@ -1618,7 +1114,7 @@ withinHelper found =
16181114 , compare found.self.bbox.bottom (<=) found.parent.bbox.bottom
16191115 ]
16201116 in
1621− Testable.true "within the confines of the parent"
1117+ Expect.true "within the confines of the parent"
16221118 (List.all ((==) True)
16231119 (List.concat
16241120 [ horizontalCheck
@@ -1636,88 +1132,5 @@ behindContent element =
16361132 , element = element
16371133 , label = "behindContent"
16381134 , test =
1639− \found ->
1640− [ withinHelper found ]
1135+ withinHelper
16411136 }
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+4−5
@@ -5,24 +5,23 @@ module Testable.Element.Background exposing (color)
55import Dict
66import Element exposing (Color)
77import Element.Background as Background
8+import Expect
89import Testable
910
1011
1112color : Color -> Testable.Attr msg
1213color clr =
1314 Testable.LabeledTest
14− { label = "background color"
15+ { label = "background color-" ++ Testable.formatColor clr
1516 , attr = Background.color clr
16− , id = Testable.NoId
1717 , test =
18− \context ->
18+ \context _ ->
1919 let
2020 selfBackgroundColor =
2121 context.self.style
2222 |> Dict.get "background-color"
2323 |> Maybe.withDefault "notfound"
2424 in
25− [ Testable.true ("expected " ++ (Testable.formatColor clr ++ ", found " ++ selfBackgroundColor))
25+ Expect.true ("Expected color: " ++ (Testable.formatColor clr ++ " vs found:" ++ selfBackgroundColor))
2626 (Testable.compareFormattedColor clr selfBackgroundColor)
27− ]
2827 }
tests-rendering/src/Testable/Element/Font.elm+6−14
@@ -1,35 +1,29 @@
1−module Testable.Element.Font exposing (bold, color, size)
1+module Testable.Element.Font exposing (color)
22
33{-| -}
44
55import Dict
66import Element exposing (Color)
77import Element.Font as Font
8+import Expect
89import Testable
910
1011
11−bold : Testable.Attr msg
12−bold =
13− Testable.Attr Font.bold
14−
15−
1612color : Color -> Testable.Attr msg
1713color clr =
1814 Testable.LabeledTest
1915 { label = "font color-" ++ Testable.formatColor clr
2016 , attr = Font.color clr
21− , id = Testable.NoId
2217 , test =
23− \context ->
18+ \context _ ->
2419 let
2520 selfFontColor =
2621 context.self.style
2722 |> Dict.get "color"
2823 |> Maybe.withDefault "notfound"
2924 in
30− [ Testable.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfFontColor))
25+ Expect.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfFontColor))
3126 (Testable.compareFormattedColor clr selfFontColor)
32− ]
3327 }
3428
3529
@@ -38,9 +32,8 @@ size i =
3832 Testable.LabeledTest
3933 { label = "font size-" ++ String.fromInt i
4034 , attr = Font.size i
41− , id = Testable.NoId
4235 , test =
43− \context ->
36+ \context _ ->
4437 let
4538 selfFontSize =
4639 context.self.style
@@ -50,7 +43,6 @@ size i =
5043 formattedInt =
5144 String.fromInt i
5245 in
53− [ Testable.true ("Size Match - " ++ (formattedInt ++ " vs " ++ selfFontSize))
46+ Expect.true ("Size Match - " ++ (formattedInt ++ " vs " ++ selfFontSize))
5447 (formattedInt == selfFontSize)
55− ]
5648 }
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+221−358
@@ -1,55 +1,35 @@
1−port module Testable.Runner exposing
2− ( Msg
3− , Testable
4− , TestableProgram
5− , program
6− , rename
7− , show
8− , testable
9− )
1+port module Testable.Runner exposing (Msg, TestableProgram, program, show)
102
113{-| -}
124
135import Browser
6+import Char
147import Dict exposing (Dict)
158import Element
169import Element.Background as Background
1710import Element.Border as Border
18−import Element.Events as Events
1911import Element.Font as Font
2012import Html exposing (Html)
21−import Html.Attributes
13+import Parser exposing ((|.), (|=))
2214import Process
15+import Random
16+import Set
2317import Task
18+import Test.Runner
19+import Test.Runner.Failure as Failure
2420import Testable
2521import Time
2622
2723
2824show : Testable.Element msg -> Html msg
2925show =
30− Testable.toHtml
26+ Testable.render
3127
3228
3329type alias TestableProgram =
3430 Program () (Model Msg) Msg
3531
3632
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−
5333palette =
5434 { white = Element.rgb 1 1 1
5535 , red = Element.rgb 1 0 0
@@ -59,7 +39,7 @@ palette =
5939 }
6040
6141
62−program : List Testable -> TestableProgram
42+program : List ( String, Testable.Element Msg ) -> TestableProgram
6343program tests =
6444 let
6545 ( current, upcoming ) =
@@ -70,17 +50,15 @@ program tests =
7050 cur :: remaining ->
7151 ( Just cur, remaining )
7252 in
73− Browser.element
53+ Browser.document
7454 { init =
7555 always
7656 ( { current = current
7757 , upcoming = upcoming
7858 , finished = []
79− , selected = 0
80− , highlightDomId = Nothing
8159 }
8260 , Task.perform (always Analyze)
83− (Process.sleep 64
61+ (Process.sleep 32
8462 |> Task.andThen
8563 (always Time.now)
8664 )
@@ -102,54 +80,56 @@ type alias Model msg =
10280 { current : Maybe ( String, Testable.Element msg )
10381 , upcoming : List ( String, Testable.Element msg )
10482 , finished : List (WithResults (Testable.Element msg))
105− , selected : Int
106− , highlightDomId : Maybe String
10783 }
10884
10985
11086type alias WithResults thing =
111− { index : Int
112− , element : thing
87+ { element : thing
11388 , label : String
11489 , results :
115− List Testable.LayoutTest
90+ List
91+ ( String
92+ , Maybe
93+ { given : Maybe String
94+ , description : String
95+ , reason : Failure.Reason
96+ }
97+ )
11698 }
11799
118100
119−encodeForReport :
101+prepareResults :
120102 List (WithResults (Testable.Element msg))
121103 ->
122104 List
123105 { label : String
124106 , results :
125107 List
126− { description : String
127− , passing : Bool
128− , todo : Bool
129− }
108+ ( String
109+ , Maybe
110+ { given : Maybe String
111+ , description : String
112+ }
113+ )
130114 }
131−encodeForReport withResults =
115+prepareResults withResults =
132116 let
133− prepareExpectation layoutTest exp =
134− case exp of
135− Testable.Todo description ->
136− { description = description
137− , passing = False
138− , todo = True
139− }
140−
141− Testable.Expect details ->
142− { description = details.description
143− , passing = details.result
144− , todo = False
145− }
117+ prepareNode ( x, maybeResult ) =
118+ ( x
119+ , case maybeResult of
120+ Nothing ->
121+ Nothing
146122
147− prepareNode layoutTest =
148− List.map (prepareExpectation layoutTest) layoutTest.expectations
123+ Just res ->
124+ Just
125+ { given = res.given
126+ , description = res.description
127+ }
128+ )
149129
150130 prepare { label, results } =
151131 { label = label
152− , results = List.concatMap prepareNode results
132+ , results = List.map prepareNode results
153133 }
154134 in
155135 List.map prepare withResults
@@ -158,27 +138,29 @@ encodeForReport withResults =
158138type Msg
159139 = NoOp
160140 | Analyze
161− | Select Int
162− | HighlightDomID (Maybe String)
163141 | RefreshBoundingBox
164142 (List
165143 { id : String
166144 , bbox : Testable.BoundingBox
167− , style : List ( String, String )
168145 , isVisible : Bool
169− , textMetrics : List Testable.TextMetrics
146+ , style : List ( String, String )
170147 }
171148 )
172149
173150
174−runTest : Int -> Dict String Testable.Found -> String -> Testable.Element msg -> WithResults (Testable.Element msg)
175−runTest index boxes label element =
151+runTest : Dict String Testable.Found -> String -> Testable.Element msg -> WithResults (Testable.Element msg)
152+runTest boxes label element =
176153 let
154+ tests =
155+ Testable.toTest label boxes element
156+
157+ seed =
158+ Random.initialSeed 227852860
159+
177160 results =
178− Testable.runTests boxes element
161+ Testable.runTests seed tests
179162 in
180− { index = index
181− , element = element
163+ { element = element
182164 , label = label
183165 , results = results
184166 }
@@ -190,16 +172,6 @@ update msg model =
190172 NoOp ->
191173 ( model, Cmd.none )
192174
193− HighlightDomID newId ->
194− ( { model | highlightDomId = newId }
195− , Cmd.none
196− )
197−
198− Select index ->
199− ( { model | selected = index }
200− , Cmd.none
201− )
202−
203175 RefreshBoundingBox boxes ->
204176 case model.current of
205177 Nothing ->
@@ -214,7 +186,6 @@ update msg model =
214186 , { style = Dict.fromList box.style
215187 , bbox = box.bbox
216188 , isVisible = box.isVisible
217− , textMetrics = box.textMetrics
218189 }
219190 )
220191
@@ -224,7 +195,7 @@ update msg model =
224195 |> Dict.fromList
225196
226197 currentResults =
227− runTest (List.length model.finished) foundData label current
198+ runTest foundData label current
228199 in
229200 case model.upcoming of
230201 [] ->
@@ -232,7 +203,7 @@ update msg model =
232203 | current = Nothing
233204 , finished = model.finished ++ [ currentResults ]
234205 }
235− , report (encodeForReport (currentResults :: model.finished))
206+ , report (prepareResults (currentResults :: model.finished))
236207 )
237208
238209 newCurrent :: remaining ->
@@ -242,7 +213,7 @@ update msg model =
242213 , upcoming = remaining
243214 }
244215 , Task.perform (always Analyze)
245− (Process.sleep 64
216+ (Process.sleep 32
246217 |> Task.andThen
247218 (always Time.now)
248219 )
@@ -261,313 +232,204 @@ update msg model =
261232 )
262233
263234
264−view : Model Msg -> Html.Html Msg
235+view : Model Msg -> Browser.Document Msg
265236view model =
266237 case model.current of
267238 Nothing ->
268239 if List.isEmpty model.upcoming then
269− let
270− selected =
271− getByIndex model.selected model.finished
272− in
273− Element.layout
274− [ Font.size 16
275− , 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
240+ { title = "tests finished"
241+ , body =
242+ [ case model.finished of
243+ [] ->
244+ Element.layout [] <|
245+ Element.column
246+ [ Element.spacing 20
247+ , Element.padding 20
248+ , Element.width (Element.px 800)
249+
250+ -- , Background.color Color.grey
251+ ]
252+ [ Element.none ]
253+
254+ finished :: remaining ->
255+ if False then
256+ viewResultsInline finished
257+
258+ else
259+ Element.layout [] <|
260+ Element.column
261+ [ Element.spacing 20
262+ , Element.padding 20
263+ , Element.width (Element.px 800)
300264 ]
301− (Element.text "test case")
302− )
303− ]
304− (case selected of
305− Nothing ->
306− Element.text "nothing selected"
307−
308− Just sel ->
309− Testable.toElement sel.element
310− )
311− )
312− , Element.column
313− [ Element.spacing 20
314− , Element.padding 20
315− , Element.width Element.fill
316− , Element.height Element.fill
317− , Element.scrollbarY
318− ]
319− (model.finished
320− |> List.sortBy hasFailure
321− |> List.map (viewResult model.selected)
322− )
323− ]
265+ (List.map viewResult (finished :: remaining))
266+ ]
267+ }
324268
325269 else
326− Html.text ""
270+ { title = "tests finished"
271+ , body = []
272+ }
327273
328274 Just ( label, current ) ->
329− Testable.toHtml current
330−
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−
345−
346−viewElementHighlight model =
347− case model.highlightDomId of
348− Nothing ->
349− Html.text ""
350−
351− Just highlightDomId ->
352− let
353− elementHighlight =
354− highlightDomId ++ " { outline: solid black; }"
355−
356− testId =
357− highlightDomId
358− |> String.dropLeft 1
359− |> String.append "#tests-"
360−
361− testHighlight =
362− testId ++ " { outline: dashed black; }"
363−
364− styleSheet =
365− String.join "\n"
366− [ elementHighlight
367− , testHighlight
368− ]
369− in
370− Html.node "style"
371− []
372− [ Html.text styleSheet
373− ]
374−
375−
376−hasFailure : WithResults (Testable.Element Msg) -> Int
377−hasFailure myTest =
378− if
379− List.any
380− (not << isPassing)
381− myTest.results
382− then
383− 0
384−
385− else
386− 1
387−
388−
389−isExpectationPassing result =
390− case result of
391− Testable.Todo label ->
392− 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− ]
275+ { title = "running"
276+ , body =
277+ [ Testable.render current ]
278+ }
417279
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− ]
443280
281+viewResultsInline : WithResults (Testable.Element Msg) -> Html Msg
282+viewResultsInline testable =
283+ Html.div
284+ []
285+ [ viewResultsAnnotationStylesheet testable.results
286+ , Testable.render testable.element
287+ ]
444288
445−expandDetails group =
446− case group.members of
447− [] ->
448− { id = group.id
449− , elementType = Testable.EmptyType
450− , members = group.members
451− }
452289
453− top :: _ ->
454− { id = group.id
455− , elementType = top.elementType
456− , members = group.members
457− }
290+{-| Our ID is part of our label. This could be fixed farther down the chain, but I think it'd be pretty involved.
458291
292+So, now we can just parse the id out of the label.
459293
460−groupBy fn list =
461− groupWhile (\one two -> fn one == fn two) list
462− |> List.map
463− (\( fst, remaining ) ->
464− { id = fn fst
465− , members = fst :: remaining
466− }
294+-}
295+parseId str =
296+ str
297+ |> Parser.run
298+ (Parser.succeed identity
299+ |. Parser.chompWhile (\c -> c /= '#')
300+ |= Parser.variable
301+ { start = \c -> c == '#'
302+ , inner = \c -> Char.isAlphaNum c || c == '-'
303+ , reserved = Set.empty
304+ }
467305 )
306+ |> Result.toMaybe
468307
469308
470−groupWhile : (a -> a -> Bool) -> List a -> List ( a, List a )
471−groupWhile isSameGroup items =
472− List.foldr
473− (\x acc ->
474− case acc of
475− [] ->
476− [ ( x, [] ) ]
309+viewResultsAnnotationStylesheet results =
310+ let
311+ toStyleClass ( label, maybeFailure ) =
312+ case maybeFailure of
313+ Nothing ->
314+ ""
477315
478− ( y, restOfGroup ) :: groups ->
479− if isSameGroup x y then
480− ( x, y :: restOfGroup ) :: groups
481−
482− else
483− ( x, [] ) :: acc
484− )
485− []
486− items
316+ Just failure ->
317+ case parseId label of
318+ Nothing ->
319+ Debug.log "NO ID FOUND" label
487320
321+ Just id ->
322+ id ++ " { background-color:red; outline: dashed; };"
488323
489−viewLayoutTestGroup group =
490− let
491− testId =
492− group.id
493− |> String.dropLeft 1
494− |> String.append "tests-"
324+ styleSheet =
325+ results
326+ |> List.map toStyleClass
327+ |> String.join ""
495328 in
496− Element.column
497− [ Element.spacing 8
498− , Element.htmlAttribute (Html.Attributes.id testId)
499− , Events.onMouseEnter (HighlightDomID (Just group.id))
500− , Events.onMouseLeave (HighlightDomID Nothing)
501− , Element.htmlAttribute (Html.Attributes.style "user-select" "none")
502− ]
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)
506− ]
507− , Element.column
508− [ Element.spacing 8
509− , Element.paddingXY 32 0
510− ]
511− (List.map viewLayoutTest group.members)
329+ Html.node "style"
330+ []
331+ [ Html.text styleSheet
512332 ]
513333
514334
515−type alias Grouped thing =
516− { id : String
517− , members : List thing
518− }
519−
520−
521−viewLayoutTest layoutTest =
335+viewResult : WithResults (Testable.Element Msg) -> Element.Element Msg
336+viewResult testable =
337+ let
338+ isPassing result =
339+ case Tuple.second result of
340+ Nothing ->
341+ True
342+
343+ Just _ ->
344+ False
345+
346+ ( passing, failing ) =
347+ List.partition isPassing testable.results
348+
349+ viewSingle result =
350+ case result of
351+ ( label, Nothing ) ->
352+ Element.el
353+ [ Background.color palette.green
354+ , Font.color palette.black
355+ , Element.paddingXY 20 10
356+ , Element.alignLeft
357+ , Border.rounded 3
358+ ]
359+ <|
360+ Element.text ("Success! - " ++ label)
361+
362+ ( label, Just ({ given, description } as reason) ) ->
363+ Element.column
364+ [ Background.color palette.red
365+ , Font.color palette.black
366+ , Element.paddingXY 20 10
367+ , Element.alignLeft
368+ , Element.width Element.shrink
369+
370+ -- , Element.spacing 25
371+ , Border.rounded 3
372+ ]
373+ [ Element.el [ Element.width Element.fill ] <| Element.text label
374+ , Element.el [ Element.width Element.fill ] <| Element.text (viewReason reason)
375+ ]
376+ in
522377 Element.column
523− [ Element.spacing 8
378+ [ Border.width 1
379+ , Border.color palette.lightGrey
380+ , Element.padding 20
381+ , Element.height Element.shrink
382+ , Element.alignLeft
383+ , Element.spacing 16
524384 ]
525− [ Element.row [ Element.spacing 8 ]
526− [ Element.el [ Font.bold ] (Element.text layoutTest.label)
527−
528− -- , Element.el [ Font.color palette.lightGrey ] (Element.text layoutTest.elementDomId)
385+ [ Element.el [ Font.bold, Font.size 64 ] (Element.text testable.label)
386+ , Element.column [ Element.alignLeft, Element.spacing 20 ]
387+ (failing
388+ |> List.map viewSingle
389+ )
390+ , Element.el
391+ [ Element.alignLeft
392+ , Element.spacing 20
393+ , Background.color palette.green
394+ , Font.color palette.black
395+ , Element.paddingXY 20 10
396+ , Element.alignLeft
397+ , Border.rounded 3
529398 ]
530− , Element.column [ Element.spacing 8 ]
531− (List.map viewLayoutExpectation layoutTest.expectations)
399+ (Element.text (String.fromInt (List.length passing) ++ " tests passing!"))
532400 ]
533401
534402
535−viewLayoutExpectation expectation =
536− case expectation of
537− Testable.Todo label ->
538− Element.row [ Element.spacing 4 ]
539− [ todo, Element.text label ]
403+viewReason { description, reason } =
404+ case reason of
405+ Failure.Custom ->
406+ description
540407
541− Testable.Expect details ->
542− if details.result then
543− Element.row [ Element.spacing 4 ]
544− [ pass, Element.text details.description ]
408+ Failure.Equality one two ->
409+ description ++ " " ++ one ++ " " ++ two
545410
546− else
547− Element.row [ Element.spacing 4 ]
548− [ fail, Element.text details.description ]
549−
550−
551−badge color text =
552− Element.el
553− [ Background.color color
554− , Font.color palette.black
555− , Element.paddingXY 4 8
556− , Border.rounded 2
557− ]
558− (Element.text text)
411+ Failure.Comparison one two ->
412+ description ++ " " ++ one ++ " " ++ two
559413
414+ Failure.ListDiff expected actual ->
415+ "expected\n"
416+ ++ String.join " \n" expected
417+ ++ "actual\n"
418+ ++ String.join " \n" actual
560419
561−todo =
562− badge palette.lightGrey "todo"
563−
564−
565−pass =
566− badge palette.green "pass"
420+ Failure.CollectionDiff { expected, actual, extra, missing } ->
421+ String.join "\n"
422+ [ formatKeyValue "expected" expected
423+ , formatKeyValue "actual" actual
424+ , formatKeyValue "extra" (String.join ", " extra)
425+ , formatKeyValue "missing" (String.join ", " missing)
426+ ]
567427
428+ Failure.TODO ->
429+ description
568430
569−fail =
570− badge palette.red "fail"
431+ Failure.Invalid _ ->
432+ description
571433
572434
573435formatKeyValue : String -> String -> String
@@ -580,10 +442,12 @@ port report :
580442 { label : String
581443 , results :
582444 List
583− { description : String
584− , passing : Bool
585− , todo : Bool
586− }
445+ ( String
446+ , Maybe
447+ { given : Maybe String
448+ , description : String
449+ }
450+ )
587451 }
588452 -> Cmd msg
589453
@@ -600,7 +464,6 @@ port styles :
600464 , bbox : Testable.BoundingBox
601465 , style : List ( String, String )
602466 , isVisible : Bool
603− , textMetrics : List Testable.TextMetrics
604467 }
605468 -> msg
606469 )
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
88import Testable.Element exposing (..)
99import Testable.Element.Background as Background
1010import Testable.Element.Font as Font
11−import Testable.Generator
1211import Testable.Runner
1312import Tests.Palette as Palette exposing (..)
1413
@@ -58,39 +57,365 @@ p attrs =
5857
5958
6059{-| -}
61−view : List ( String, Testable.Element msg )
60+main : Html.Html msg
61+main =
62+ Testable.Runner.show view
63+
64+
65+{-| -}
66+view : Testable.Element msg
6267view =
63− List.concat
64− [ [ Tuple.pair "Parent inFront above child inFront" layeredVisibility
65− , Tuple.pair "Sibling onLeft above sibling inFront" overlappingChildren
66− , Tuple.pair "el with all nearbys and alignments" master
67− , Tuple.pair "paragraph with all nearbys and alignments" masterParagraph
68− ]
69− , Testable.Generator.generate "Nearbys"
70− (\element nearby ->
71− element
72− [ nearby (box [])
73− , width (px 200)
74− , height (px 200)
75− , Background.color red
68+ let
69+ transparentBox attrs =
70+ el
71+ ([ Font.color white
72+ , width (px 50)
73+ , height (px 50)
74+ , Background.color white
75+ ]
76+ ++ attrs
77+ )
78+ (text "hi")
79+
80+ -- single location name box =
81+ -- row [ height (px 100), width fill, spacing 50 ]
82+ -- [ box
83+ -- [ location
84+ -- (el
85+ -- [ width (px 20)
86+ -- , height (px 20)
87+ -- , Background.color darkCharcoal
88+ -- ]
89+ -- none
90+ -- )
91+ -- ]
92+ -- , box
93+ -- [ location
94+ -- (el
95+ -- [ width (px 20)
96+ -- , height (px 20)
97+ -- , alignLeft
98+ -- , Background.color darkCharcoal
99+ -- ]
100+ -- none
101+ -- )
102+ -- ]
103+ -- ]
104+ little name attrs =
105+ el
106+ ([ label name
107+ , width (px 5)
108+ , height (px 5)
109+ , Background.color darkCharcoal
110+ ]
111+ ++ attrs
112+ )
113+ none
114+
115+ nearby location name render =
116+ column [ spacing 32, label "column" ]
117+ [ el [ padding 20, Background.color green, Font.color white ] (text name)
118+ , row [ height (px 100), width fill, spacing 50 ]
119+ [ render
120+ [ location
121+ (el
122+ [ label name
123+ , width (px 20)
124+ , height (px 20)
125+ , Background.color darkCharcoal
126+ ]
127+ none
128+ )
129+ ]
130+ , render
131+ [ location
132+ (el
133+ [ label name
134+ , width (px 20)
135+ , height (px 20)
136+ , alignLeft
137+ , Background.color darkCharcoal
138+ ]
139+ none
140+ )
141+ ]
142+ , render
143+ [ location
144+ (el
145+ [ label name
146+ , width (px 20)
147+ , height (px 20)
148+ , centerX
149+ , Background.color darkCharcoal
150+ ]
151+ none
152+ )
153+ ]
154+ , render
155+ [ location
156+ (el
157+ [ label name
158+ , width (px 20)
159+ , height (px 20)
160+ , alignRight
161+ , Background.color darkCharcoal
162+ ]
163+ none
164+ )
165+ ]
166+ , render
167+ [ location
168+ (el
169+ [ label name
170+ , width (px 20)
171+ , height (px 20)
172+ , alignTop
173+ , Background.color darkCharcoal
174+ ]
175+ none
176+ )
177+ ]
178+ , render
179+ [ location
180+ (el
181+ [ label name
182+ , width (px 20)
183+ , height (px 20)
184+ , centerY
185+ , Background.color darkCharcoal
186+ ]
187+ none
188+ )
189+ ]
190+ , render
191+ [ location
192+ (el
193+ [ label name
194+ , width (px 20)
195+ , height (px 20)
196+ , alignBottom
197+ , Background.color darkCharcoal
198+ ]
199+ none
200+ )
201+ ]
202+ ]
203+ , text "widths/heights"
204+ , row [ height (px 100), width fill, spacing 50, label "Row" ]
205+ [ render
206+ [ location
207+ (el
208+ [ label name
209+ , width fill
210+ , height fill
211+ , Background.color darkCharcoal
212+ ]
213+ none
214+ )
215+ ]
216+ , render
217+ [ location
218+ (el
219+ [ label name
220+ , width (px 20)
221+ , height fill
222+ , Background.color darkCharcoal
223+ ]
224+ none
225+ )
226+ ]
227+ , render
228+ [ label "render"
229+ , location
230+ (el
231+ [ label name
232+ , width fill
233+ , height (px 20)
234+ , Background.color darkCharcoal
235+ ]
236+ none
237+ )
238+ ]
239+ , render
240+ [ location
241+ (el
242+ [ label name
243+ , width (px 20)
244+ , height shrink
245+ , Background.color darkCharcoal
246+ , Font.color white
247+ ]
248+ (text "h-shrink")
249+ )
250+ ]
251+ , render
252+ [ location
253+ (el
254+ [ label name
255+ , width shrink
256+ , height (px 20)
257+ , Background.color darkCharcoal
258+ , Font.color white
259+ ]
260+ (text "w-shrink")
261+ )
262+ ]
76263 ]
77− none
78− )
79− |> Testable.Generator.with Testable.Generator.allElements
80− |> Testable.Generator.with Testable.Generator.nearbys
81− , Testable.Generator.generate "Nearbys with alignment"
82− (\element nearby align ->
83− element
84− [ nearby (box [ align ])
85− , width (px 200)
86− , height (px 200)
87− , Background.color red
264+ , text "on paragraph"
265+ , row [ width fill, spacing 50, label "Row" ]
266+ [ p
267+ [ location
268+ (el
269+ [ label name
270+ , width (px 20)
271+ , height (px 20)
272+ , Background.color darkCharcoal
273+ ]
274+ none
275+ )
276+ ]
277+ , p
278+ [ location
279+ (el
280+ [ label name
281+ , width (px 20)
282+ , height (px 20)
283+ , alignLeft
284+ , Background.color darkCharcoal
285+ ]
286+ none
287+ )
288+ ]
289+ , p
290+ [ location
291+ (el
292+ [ label name
293+ , width (px 20)
294+ , height (px 20)
295+ , centerX
296+ , Background.color darkCharcoal
297+ ]
298+ none
299+ )
300+ ]
301+ , p
302+ [ location
303+ (el
304+ [ label name
305+ , width (px 20)
306+ , height (px 20)
307+ , alignRight
308+ , Background.color darkCharcoal
309+ ]
310+ none
311+ )
312+ ]
313+ , p
314+ [ location
315+ (el
316+ [ label name
317+ , width (px 20)
318+ , height (px 20)
319+ , alignTop
320+ , Background.color darkCharcoal
321+ ]
322+ none
323+ )
324+ ]
325+ , p
326+ [ location
327+ (el
328+ [ label name
329+ , width (px 20)
330+ , height (px 20)
331+ , centerY
332+ , Background.color darkCharcoal
333+ ]
334+ none
335+ )
336+ ]
337+ , p
338+ [ location
339+ (el
340+ [ label name
341+ , width (px 20)
342+ , height (px 20)
343+ , alignBottom
344+ , Background.color darkCharcoal
345+ ]
346+ none
347+ )
348+ ]
88349 ]
89− none
90− )
91− |> Testable.Generator.with Testable.Generator.allElements
92− |> Testable.Generator.with Testable.Generator.nearbys
93− |> Testable.Generator.with Testable.Generator.alignments
350+ ]
351+
352+ master =
353+ el [ padding 20 ] <|
354+ box
355+ [ above (little "above-left" [ alignLeft ])
356+ , above (little "above-center" [ centerX ])
357+ , above (little "above-right" [ alignRight ])
358+ , below (little "below-left" [ alignLeft ])
359+ , below (little "below-center" [ centerX ])
360+ , below (little "below-right" [ alignRight ])
361+ , onRight (little "onRight-left" [ alignTop ])
362+ , onRight (little "onRight-center" [ centerY ])
363+ , onRight (little "onRight-right" [ alignBottom ])
364+ , onLeft (little "onLeft-left" [ alignTop ])
365+ , onLeft (little "onLeft-center" [ centerY ])
366+ , onLeft (little "onLeft-right" [ alignBottom ])
367+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])
368+ , inFront (little "infront-center-top" [ alignTop, centerX ])
369+ , inFront (little "infront-right-top" [ alignTop, alignRight ])
370+ , inFront (little "infront-left-center" [ centerY, alignLeft ])
371+ , inFront (little "infront-center-center" [ centerY, centerX ])
372+ , inFront (little "infront-right-center" [ centerY, alignRight ])
373+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
374+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
375+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
376+ ]
377+
378+ masterParagraph =
379+ el [ padding 20 ] <|
380+ p
381+ [ above (little "above-left" [ alignLeft ])
382+ , above (little "above-center" [ centerX ])
383+ , above (little "above-right" [ alignRight ])
384+ , below (little "below-left" [ alignLeft ])
385+ , below (little "below-center" [ centerX ])
386+ , below (little "below-right" [ alignRight ])
387+ , onRight (little "onRight-left" [ alignTop ])
388+ , onRight (little "onRight-center" [ centerY ])
389+ , onRight (little "onRight-right" [ alignBottom ])
390+ , onLeft (little "onLeft-left" [ alignTop ])
391+ , onLeft (little "onLeft-center" [ centerY ])
392+ , onLeft (little "onLeft-right" [ alignBottom ])
393+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])
394+ , inFront (little "infront-center-top" [ alignTop, centerX ])
395+ , inFront (little "infront-right-top" [ alignTop, alignRight ])
396+ , inFront (little "infront-left-center" [ centerY, alignLeft ])
397+ , inFront (little "infront-center-center" [ centerY, centerX ])
398+ , inFront (little "infront-right-center" [ centerY, alignRight ])
399+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
400+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
401+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
402+ ]
403+ in
404+ column
405+ [ centerX, label "Nearby Elements", spacing 100 ]
406+ [ layeredVisibility
407+ , overlappingChildren
408+
409+ -- Note: visibility checks like the above
410+ -- need to be at the top so they're in the viewport
411+ , master
412+ , masterParagraph
413+ , nearby above "above" box
414+ , nearby below "below" box
415+ , nearby inFront "inFront" box
416+ , nearby onRight "onRight" box
417+ , nearby onLeft "onLeft" box
418+ , nearby behindContent "behindContent" transparentBox
94419 ]
95420
96421
@@ -111,69 +436,3 @@ overlappingChildren =
111436 , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]
112437 (justBox 40 darkGrey [])
113438 ]
114−
115−
116−little name attrs =
117− el
118− ([ label name
119− , width (px 5)
120− , height (px 5)
121− , Background.color darkCharcoal
122− ]
123− ++ attrs
124− )
125− none
126−
127−
128−master =
129− el [ padding 20 ] <|
130− box
131− [ above (little "above-left" [ alignLeft ])
132− , above (little "above-center" [ centerX ])
133− , above (little "above-right" [ alignRight ])
134− , below (little "below-left" [ alignLeft ])
135− , below (little "below-center" [ centerX ])
136− , below (little "below-right" [ alignRight ])
137− , onRight (little "onRight-left" [ alignTop ])
138− , onRight (little "onRight-center" [ centerY ])
139− , onRight (little "onRight-right" [ alignBottom ])
140− , onLeft (little "onLeft-left" [ alignTop ])
141− , onLeft (little "onLeft-center" [ centerY ])
142− , onLeft (little "onLeft-right" [ alignBottom ])
143− , inFront (little "infront-left-top" [ alignTop, alignLeft ])
144− , inFront (little "infront-center-top" [ alignTop, centerX ])
145− , inFront (little "infront-right-top" [ alignTop, alignRight ])
146− , inFront (little "infront-left-center" [ centerY, alignLeft ])
147− , inFront (little "infront-center-center" [ centerY, centerX ])
148− , inFront (little "infront-right-center" [ centerY, alignRight ])
149− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
150− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
151− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
152− ]
153−
154−
155−masterParagraph =
156− el [ padding 20 ] <|
157− p
158− [ above (little "above-left" [ alignLeft ])
159− , above (little "above-center" [ centerX ])
160− , above (little "above-right" [ alignRight ])
161− , below (little "below-left" [ alignLeft ])
162− , below (little "below-center" [ centerX ])
163− , below (little "below-right" [ alignRight ])
164− , onRight (little "onRight-left" [ alignTop ])
165− , onRight (little "onRight-center" [ centerY ])
166− , onRight (little "onRight-right" [ alignBottom ])
167− , onLeft (little "onLeft-left" [ alignTop ])
168− , onLeft (little "onLeft-center" [ centerY ])
169− , onLeft (little "onLeft-right" [ alignBottom ])
170− , inFront (little "infront-left-top" [ alignTop, alignLeft ])
171− , inFront (little "infront-center-top" [ alignTop, centerX ])
172− , inFront (little "infront-right-top" [ alignTop, alignRight ])
173− , inFront (little "infront-left-center" [ centerY, alignLeft ])
174− , inFront (little "infront-center-center" [ centerY, centerX ])
175− , inFront (little "infront-right-center" [ centerY, alignRight ])
176− , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
177− , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
178− , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
179− ]
tests-rendering/src/Tests/RowAlignment.elmnew file+212
@@ -0,0 +1,212 @@
1+module Tests.RowAlignment exposing (..)
2+
3+import Generator
4+import Html
5+import Testable
6+import Testable.Element as Element exposing (..)
7+import Testable.Element.Background as Background
8+import Testable.Element.Font as Font
9+import Testable.Runner
10+import Tests.Palette as Palette exposing (..)
11+
12+
13+{-| -}
14+main : Html.Html msg
15+main =
16+ Testable.Runner.show view
17+
18+
19+box attrs =
20+ el
21+ ([ width (px 50)
22+ , height (px 50)
23+ , Background.color blue
24+ ]
25+ ++ attrs
26+ )
27+ none
28+
29+
30+view =
31+ let
32+ rowContainer attrs children =
33+ row
34+ ([ spacing 20
35+ , height (px 100)
36+ , Background.color lightGrey
37+ ]
38+ ++ attrs
39+ )
40+ children
41+ in
42+ column [ width (px 500), spacing 20 ]
43+ [ el [] (text "Alignment Within a Row")
44+ , column [ spacing 20 ] <|
45+ Generator.sizes <|
46+ \resizeable ->
47+ rowContainer
48+ [ label "single child" ]
49+ [ resizeable [] none ]
50+ , column [ spacing 20 ] <|
51+ Generator.sizes <|
52+ \resizeable ->
53+ rowContainer
54+ [ label "single child" ]
55+ [ resizeable [ centerX ] none ]
56+ , column [ spacing 20 ] <|
57+ Generator.sizes <|
58+ \resizeable ->
59+ rowContainer [ label "single child" ]
60+ [ resizeable [ alignRight ] none ]
61+ , column [ spacing 20 ] <|
62+ Generator.sizes <|
63+ \resizeable ->
64+ rowContainer []
65+ [ resizeable [] none
66+ , resizeable [] none
67+ , resizeable [] none
68+ ]
69+ , column [ spacing 20 ] <|
70+ Generator.sizes <|
71+ \resizeable ->
72+ rowContainer []
73+ [ resizeable [] none
74+ , resizeable [] none
75+ , resizeable [ alignRight, label "Right Child in Row" ] none
76+ ]
77+ , column [ spacing 20 ] <|
78+ Generator.sizes <|
79+ \resizeable ->
80+ rowContainer
81+ []
82+ [ resizeable [] none
83+ , resizeable [ alignRight, label "Middle Child in Row" ] none
84+ , resizeable [] none
85+ ]
86+ , column [ spacing 20 ] <|
87+ Generator.sizes <|
88+ \resizeable ->
89+ rowContainer []
90+ [ resizeable [ alignRight, label "Left Child in Row" ] none
91+ , resizeable [] none
92+ , resizeable [] none
93+ ]
94+ , text "center X"
95+ , column [ spacing 20 ] <|
96+ Generator.sizes <|
97+ \resizeable ->
98+ rowContainer []
99+ [ resizeable [ centerX, label "Left Child in Row" ] none
100+ , resizeable [] none
101+ , resizeable [] none
102+ ]
103+ , column [ spacing 20 ] <|
104+ Generator.sizes <|
105+ \resizeable ->
106+ rowContainer []
107+ [ resizeable [] none
108+ , resizeable [ centerX, label "Middle Child in Row" ] none
109+ , resizeable [] none
110+ ]
111+ , column [ spacing 20 ] <|
112+ Generator.sizes <|
113+ \resizeable ->
114+ rowContainer []
115+ [ resizeable [] none
116+ , resizeable [] none
117+ , resizeable [ centerX, label "Right Child in Row" ] none
118+ ]
119+ , column [ spacing 20 ] <|
120+ Generator.sizes <|
121+ \resizeable ->
122+ rowContainer []
123+ [ resizeable [] none
124+ , resizeable [] none
125+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
126+ , resizeable [] none
127+ ]
128+ , column [ spacing 20 ] <|
129+ Generator.sizes <|
130+ \resizeable ->
131+ rowContainer []
132+ [ resizeable [] none
133+ , resizeable [] none
134+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
135+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
136+ , resizeable [] none
137+ ]
138+ , column [ spacing 20 ] <|
139+ Generator.sizes <|
140+ \resizeable ->
141+ rowContainer []
142+ [ resizeable [] none
143+ , resizeable [] none
144+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
145+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
146+ , resizeable [ centerX, label "Middle-Right Child in Row" ] none
147+ , resizeable [] none
148+ ]
149+ , text "left x right"
150+ , column [ spacing 20 ] <|
151+ Generator.sizes <|
152+ \resizeable ->
153+ rowContainer []
154+ [ resizeable [ alignLeft, label "Left Child in Row" ] none
155+ , resizeable [] none
156+ , resizeable [ alignRight, label "Right Child in Row" ] none
157+ ]
158+ , text "left center right"
159+ , column [ spacing 20 ] <|
160+ Generator.sizes <|
161+ \resizeable ->
162+ rowContainer []
163+ [ resizeable [ alignLeft, label "Left Child in Row" ] none
164+ , resizeable [ centerX, label "Middle Child in Row" ] none
165+ , resizeable [ alignRight, label "Right Child in Row" ] none
166+ ]
167+ , text "vertical alignment"
168+ , column [ spacing 20 ] <|
169+ Generator.sizes <|
170+ \resizeable ->
171+ rowContainer []
172+ [ resizeable [ alignTop, label "Left Child in Row" ] none
173+ , resizeable [ centerY, label "Middle Child in Row" ] none
174+ , resizeable [ alignBottom, label "Right Child in Row" ] none
175+ ]
176+ , text "x and y alignments"
177+ , column [ spacing 20 ] <|
178+ Generator.sizes <|
179+ \resizeable ->
180+ rowContainer []
181+ [ resizeable [ alignLeft, alignTop, label "Left Child" ] none
182+ , resizeable [ centerX, centerY, label "Middle Child" ] none
183+ , resizeable [ alignRight, alignBottom, label "Right Child" ] none
184+ ]
185+ , text "align Top and X alignments "
186+ , column [ spacing 20 ] <|
187+ Generator.sizes <|
188+ \resizeable ->
189+ rowContainer []
190+ [ resizeable [ alignLeft, alignTop, label "Left Child" ] none
191+ , resizeable [ centerX, alignTop, label "Middle Child" ] none
192+ , resizeable [ alignRight, alignTop, label "Right Child" ] none
193+ ]
194+ , text "align Bottom and X alignments "
195+ , column [ spacing 20 ] <|
196+ Generator.sizes <|
197+ \resizeable ->
198+ rowContainer []
199+ [ resizeable [ alignLeft, alignBottom, label "Left Child" ] none
200+ , resizeable [ centerX, alignBottom, label "Middle Child" ] none
201+ , resizeable [ alignRight, alignBottom, label "Right Child" ] none
202+ ]
203+ , text "centerY and X alignments "
204+ , column [ spacing 20 ] <|
205+ Generator.sizes <|
206+ \resizeable ->
207+ rowContainer []
208+ [ resizeable [ alignLeft, centerY, label "Left Child" ] none
209+ , resizeable [ centerX, centerY, label "Middle Child" ] none
210+ , resizeable [ alignRight, centerY, label "Right Child" ] none
211+ ]
212+ ]
tests-rendering/src/Tests/RowSpacing.elmnew file+69
@@ -0,0 +1,69 @@
1+module Tests.RowSpacing exposing (..)
2+
3+import Html
4+import Testable
5+import Testable.Element as Element exposing (..)
6+import Testable.Element.Background as Background
7+import Testable.Element.Font as Font
8+import Testable.Runner
9+import Tests.Palette as Palette exposing (..)
10+
11+
12+{-| -}
13+main : Html.Html msg
14+main =
15+ Testable.Runner.show view
16+
17+
18+box attrs =
19+ el
20+ ([ width (px 50)
21+ , height (px 50)
22+ , Background.color blue
23+ ]
24+ ++ attrs
25+ )
26+ none
27+
28+
29+tinyBox attrs =
30+ el
31+ ([ width (px 20)
32+ , height (px 20)
33+
34+ -- , centerY
35+ , Background.color darkCharcoal
36+ ]
37+ ++ attrs
38+ )
39+ none
40+
41+
42+container =
43+ el [ width (px 100), height (px 100) ]
44+
45+
46+view =
47+ let
48+ colContainer attrs children =
49+ row ([ spacing 20, width (px 500), height (px 120) ] ++ attrs) children
50+ in
51+ column
52+ []
53+ [ el [] (text "Spacing within a row")
54+ , column []
55+ [ box []
56+ , colContainer []
57+ [ box [] ]
58+ , colContainer []
59+ [ box []
60+ , box []
61+ , box []
62+ ]
63+ , colContainer [ below (tinyBox []) ]
64+ [ box []
65+ , box []
66+ , box []
67+ ]
68+ ]
69+ ]
tests-rendering/src/Tests/Run.elm+20−5
@@ -1,14 +1,29 @@
11module Tests.Run exposing (main)
22
3−{-| _NOTE_ this is auto-generated! Notouchy!
4−-}
3+{-| -}
54
6−import ElInFixedHeightColumn
75import 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
814
915
1016main : Testable.Runner.TestableProgram
1117main =
12− Testable.Runner.program
13− [ Testable.Runner.rename " El In Fixed Height Column" ElInFixedHeightColumn.view
18+ Testable.Runner.program
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
1429 ]
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.InFrontSize.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>