master..a3202e2 · typeable/elm-ui

git.iko.soy/typeable/elm-ui

README.md−4

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

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

69−## Notes

70−

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

72−

73## Contributing

69## Contributing

75Want to help out fixing bugs or reporting issues?

71Want to help out fixing bugs or reporting issues?

elm.json+1−1

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

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

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

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

6− "version": "1.1.8",

6+ "version": "1.1.5",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

examples/Basic.elm+1−1

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

1−module Basic exposing (..)

1+module Main exposing (..)

3{-| -}

examples/Form.elm+4−12

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

1−module Form exposing (..)

1+module Main exposing (..)

3{-| -}

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

80 [ Font.size 20

81 ]

82 <|

83− Element.column

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

84− [ width (px 800)

85− , height shrink

86− , centerY

87− , centerX

88− , spacing 36

89− , padding 10

90− ]

91 [ el

84 [ el

92 [ Region.heading 1

85 [ Region.heading 1

93 , alignLeft

86 , alignLeft

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

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

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

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

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

126 }

119 }

127− , Input.currentPassword [ spacing 12 ]

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

128 { text = model.password

121 { text = model.password

129 , placeholder = Nothing

122 , placeholder = Nothing

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

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

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

200 , Border.color darkBlue

193 , Border.color darkBlue

201 , paddingXY 32 16

194 , paddingXY 32 16

202 , Border.rounded 3

195 , Border.rounded 3

203−

204− -- , width fill

196+ , width fill

205 ]

197 ]

206 { onPress = Nothing

198 { onPress = Nothing

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

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

examples/Table.elm+1−1

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

1−module Table exposing (..)

1+module Main exposing (..)

3{-| -}

examples/elm.json+22−19

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

2− "type": "application",

2+ "type": "application",

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

3+ "source-directories": [

4+ ".",

5+ "../src/"

6+ ],

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

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

5− "dependencies": {

8+ "dependencies": {

6− "direct": {

9+ "direct": {

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

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

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

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

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

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

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

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

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

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

15+ },

16+ "indirect": {

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

18+ "elm/url": "1.0.0"

19+ }

12 },

20 },

13− "indirect": {

21+ "test-dependencies": {

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

22+ "direct": {},

15− "elm/url": "1.0.0"

23+ "indirect": {}

16 }

24 }

17− },

18− "test-dependencies": {

19− "direct": {},

20− "indirect": {}

21− }

22−}

25+}

notes/discussion/ColorWithoutAlpha.API.mddeleted−135

@@ -1,135 +0,0 @@

1−# API sketch for separating out alpha from Color

2−

3−**Motivation**

4−

5−If we separate out alpha from the core color type, we can

6−

7−1. Have a unified `Color` type that works in all contexts, including in webGL situations where transparency may be handled differently, or not at all.

8−

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?

11−

12−3. With a totally opaque color type, we can calculate contrast for accessibility evaluation easily. An alpha channel means we'd have to emulate browser mixing to do that, which I'm not sure is consistent.

13−

14−Ultimately I want the position of `elm-ui` to be something like the following:

15−

16−1. `rgb`(both value based and hex) is more of an interop format than a color space you'd actually want to modify things in. Think, when have you ever thought "oh, just bump the red channel down a bit and you'll be good"?

17−

18− - As an interop format, it means it's what you're going to be copying from tools or receiving from a designer.

19− - These tools generally have the ability to mix things properly.

20− - By mixing things concretely, designers have more control over their ultimate design.

21−

22−2. Transparency in most of these cases is still necessary or at the least convenient. It's not too difficult to treat that separately than the identity of a color value.

23−

24−3. Ultimately we want to encourage people to use a colorspace like [HSLuv](https://package.elm-lang.org/packages/kuon/elm-hsluv/latest/). Basically any of the colorspaces that are based in [CIEXYZ colorspace](https://en.wikipedia.org/wiki/CIE_1931_color_space). They're much easier to use. - May not really seem related to alpha channels, but the idea is that doing things like `lightening` a color is much easier in these other colorspaces.

25−

26−## Element.Font

27−

28− Font.color : Color -> Attribute msg

29−

30− -- Tempted to drop this one.

31− -- People could still have transparent text using `Element.opacity`

32− -- if they really want it

33− Font.opacity : Float -> Attribute msg

34−

35− Font.shadow :

36− { offset : (Float, Float)

37− , blur : Float

38− , color : Color

39− , opacity : Float

40− } -> Attribute msg

41−

42−## Element.Background

43−

44− Background.color : Color -> Attribute

45−

46− -- background opacity is commonly used when we have some text

47− -- over an image background.

48− Background.opacity : Float -> Attribute

49−

50−For gradients, we can have opacity as a separate set of steps.

51−This actually makes it _easier_ to do something like a rainbow that linearly fades away. We don't have to figure out the exact opacity that the 5th color has.

52−

53− Background.gradient :

54− { angle : Float

55− , colors : List Color

56− , opacity : List Float

57− }

58−

59−Do you ever have a gradient with more than two alpha steps?

60−Maybe you'd actually like to adjust the falloff curve instead of have it be linear?

61−Maybe there's an even better way to represent this?

62−

63− Will eventually want to cover radial gradients, but a similar approach to the above is likely easy.

64−

65−Took a look at [background blend modes](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode), which can be used to dynamically color images, like the [header image here](https://professional-rentals.com/).

66−

67−The blend modes are influenced by background or element opacity.

68−

69−In that way, we could have something like

70−

71− Background.blend 0.5 color

72−

73−Which would set a color mode and set the background opacity. I'd need to play around with it, but seems kinda cool!

74−

75−## Element.Border

76−

77−Sometimes a transparent border is used as a placeholder, and then we change a color on `mouseOver`. This is to avoid layout movement in the resulting animation.

78−

79− Border.color : Color -> Attribute

80−

81− Border.opacity : Float -> Attribute

82−

83− Border.shadow :

84− { offset : (Float, Float)

85− , size : Float

86− , blur : Float

87− , color : Color

88− , opacity : Float

89− }

90−

91− Border.manyShadows :

92− List

93− { offset : (Float, Float)

94− , blur : Float

95− , color : Color

96− , opacity : Float

97− } -> Attribute msg

98−

99− Border.innerShadow

100− { offset : ( Float, Float )

101− , size : Float

102− , blur : Float

103− , color : Color

104− , opacity : Float

105− }

106−

107−# Discussion and Usecases

108−

109−The main question about binding alpha with color is:

110−

111− Is the identity of this color an identity about the color and it's ability to mix. Knowing that it's ability to mix in this case is not great.

112−

113−Or would you want to set these things explicitly and independently of each other?

114−

115−## Tinting and shading (i.e. lightening and darkening)

116−

117−_Note_ - not sure what package would house these functions.

118−

119−We usually get in the habit of using alpha for an ad-hoc lightener/darkener.

120−This can easily be replicated with functions that actually operate on colors in elm.

121−

122− Color.lighten 0.3 color

123−

124−With the idea that this function should use the luminance from CIELUV instead of lightness from hsl.

125−

126−## Mixing two colors

127−

128−We also use alpha as an ad hoc way to mix two colors (i.e. [turn a font subtley green on a green background](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886#9cdf).

129−

130− el

131− [ Background.color bg

132− -- explicitly mix the two!

133− , Font.color (Color.mix 0.2 white bg)

134− ]

135− (text "Howdy")

notes/discussion/ColorWithoutAlpha.mddeleted−67

@@ -1,67 +0,0 @@

1−# A Design for Color without Alpha

2−

3−Color is hard!

4−

5−I've spent a decade and a half in web development and only now feel like I have some sort of handle on it.

6−

7−What I've learned basically comes down to the fact that the two color spaces we're used to dealing with (`rgb` and `hsl`), are not actually that great for thinking about color. Which is unfortunate.

8−

9−So, what can we use instead?

10−

11−Research on color perception in the 1920's led to the development of the [CIEXYZ colorspace](https://en.wikipedia.org/wiki/CIE_1931_color_space), which describes color in a way that is much closer to how humans perceive color. Essentially they were able to model constants in their equations that literally represent some of the built-in values we have as humans to perceive color.

12−

13−How crazy is that?

14−

15−(Skipping over the fact that there is variation in how people perceive color.)

16−

17−There are a number of color spaces that are based on this initial research, including CIELAB(generally recommended for print), and CIELUV(generally recommended for light). They are essentailly different ways to talk about the same color space. Sorta like polar coordinates(r,θ) and cartesian coordiantes (x,y) can both represent a point.

18−

19−The `L` in the above acronyms represents `Luminance`.

20−

21−This is one of the really cool parts. Two colors that have the same `Luminance`, will be equally "bright" to the human eye.

22−

23−You might be thinking "well, what about the `lightness` channel in `HSL`, huh?". Turns out it's not really based on anything!

24−

25−Here are two hsl colors with the same lightness:

26−![](http://lea.verou.me/wp-content/uploads/2020/04/image-4.png)

27−

28−Do they look like the same "brightness"?

29−

30−Unfortunately the L in HSL stands for Lies and we've been misled all along.

31−

32−[This whole article on color spaces is worth a read if you got the time](http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)

33−

34−

35−Ok, so, luminance is really cool.

36−

37−With a real `Luminance` factor you can

38− 1. Generate palettes of colors that work together in a consistent manner.

39− 2. Automatically know the difference in luminance between two colors. Guess what that is. It's a contrast calculation! Like for accessibility! How nice would that be if it was X - Y as opposed to some crazy math?

40− 3. Get an intuition for how colors will interact with each other.

41− 4. Generate gradients that aren't unexpectedly broken. (I have some examples of this, I'll dig them up later)

42− 5. Animate colors consistently. Animating in rgb or hsl will cause color animation to look awful in different ways.

43−

44−It really is a better world.

45−

46−Ok, so how do we get there and what does this mean for elm-ui?

47−

48−

49−# Elm UI stuff

50−

51−The above knowledge is hard won. Many people are not aware that there are better colorspaces than rgb and hsl.

52−

53−Color is hard. In many cases, it will remain hard until people get a nice introduction to something based on CIEXYZ.

54−

55−In elm, [we have a package for HSLuv](

56−https://package.elm-lang.org/packages/kuon/elm-hsluv/latest/), which you can use right now. It's great.

57−

58−However! We have one confouding factor, which is that we're used to bundling an `alpha` value with our colors.

59−

60−The same math that makes rgb and hsl less than great is used to blend colors via alpha.

61−

62−By bundling alpha with color, we're encouranging people to blend colors in an ad-hoc way when we could be providing them avenues to easily do it the right way. We have a whole programming language, we're not confined to only CSS anymore.

63−

64−However! Frontend development also involves talking to designers. Designers usually provide rgb, hsl, or a hex version of rgb.

65−

66−I now sorta view these as *interop formats*.

67−

package-lock.json+31−19

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

734 }

735 },

736 "jszip": {

737− "version": "3.4.0",

737+ "version": "3.2.2",

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

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

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

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

740 "requires": {

741 "lie": "~3.3.0",

742 "pako": "~1.0.2",

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

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

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

1004 },

1005+ "sax": {

1006+ "version": "1.2.4",

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

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

1009+ },

1005 "selenium-webdriver": {

1010 "selenium-webdriver": {

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

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

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

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

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

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

1009 "requires": {

1014 "requires": {

1010− "jszip": "^3.2.2",

1015+ "jszip": "^3.1.5",

1011− "rimraf": "^2.7.1",

1016+ "rimraf": "^2.6.3",

1012− "tmp": "0.0.30"

1017+ "tmp": "0.0.30",

1013− },

1018+ "xml2js": "^0.4.19"

1014− "dependencies": {

1015− "rimraf": {

1016− "version": "2.7.1",

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

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

1019− "requires": {

1020− "glob": "^7.1.3"

1021− }

1022− }

1023 }

1019 }

1024 },

1020 },

1025 "semver": {

1021 "semver": {

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

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

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

1222 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="

1218 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="

1223 },

1219 },

1220+ "xml2js": {

1221+ "version": "0.4.19",

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

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

1224+ "requires": {

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

1226+ "xmlbuilder": "~9.0.1"

1227+ },

1228+ "dependencies": {

1229+ "xmlbuilder": {

1230+ "version": "9.0.7",

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

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

1233+ }

1234+ }

1235+ },

1224 "xmlbuilder": {

1236 "xmlbuilder": {

1225 "version": "13.0.2",

1237 "version": "13.0.2",

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

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

package.json+4−5

@@ -5,13 +5,12 @@

5 "main": "index.js",

6 "scripts": {

7 "test": "elm-test",

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

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

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

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

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

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

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

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

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

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

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

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

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

15 },

14 },

16 "repository": {

15 "repository": {

17 "type": "git",

16 "type": "git",

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

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

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

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

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

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

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

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

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

33 }

32 }

34}

33}

src/Element.elm+37−79

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

645 newPadding =

646 case padded of

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

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

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

649− let

650− newTop =

651− t - (toFloat y / 2)

652−

653− newRight =

654− r - (toFloat x / 2)

655−

656− newBottom =

657− b - (toFloat y / 2)

658−

659− newLeft =

660− l - (toFloat x / 2)

661− in

662 Just <|

649 Just <|

663− Internal.StyleClass Flag.padding

650+ paddingEach

664− (Internal.PaddingStyle

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

665− (Internal.paddingNameFloat

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

666− newTop

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

667− newRight

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

668− newBottom

655+ }

669− newLeft

670− )

671− newTop

672− newRight

673− newBottom

674− newLeft

675− )

676

656

677 else

657 else

678 Nothing

658 Nothing

@@ -1008,15 +988,14 @@ tableHelper attrs config =

1008

988

1009{-| A paragraph will layout all children as wrapped, inline elements.

989{-| A paragraph will layout all children as wrapped, inline elements.

1010

990

1011− import Element exposing (el, paragraph, text)

991+ import Element

1012 import Element.Font as Font

992 import Element.Font as Font

1013

993

1014− view =

1015− paragraph []

994+ Element.paragraph []

1016− [ text "lots of text ...."

995+ [ text "lots of text ...."

1017− , el [ Font.bold ] (text "this is bold")

996+ , el [ Font.bold ] (text "this is bold")

1018− , text "lots of text ...."

997+ , text "lots of text ...."

1019− ]

998+ ]

1020

999

1021This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.

1000This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.

1022

1001

@@ -1024,18 +1003,17 @@ Also, if a child element has `alignLeft` or `alignRight`, then it will be moved

1024

1003

1025This makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).

1004This makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).

1026

1005

1027− import Element exposing (alignLeft, el, padding, paragraph, text)

1006+ import Element

1028 import Element.Font as Font

1007 import Element.Font as Font

1029

1008

1030− view =

1031− paragraph []

1009+ Element.paragraph []

1032− [ el

1010+ [ el

1033− [ alignLeft

1011+ [ alignLeft

1034− , padding 5

1012+ , padding 5

1035− ]

1036− (text "S")

1037− , text "o much text ...."

1038 ]

1013 ]

1014+ (text "S")

1015+ , text "o much text ...."

1016+ ]

1039

1017

1040Which will look something like

1018Which will look something like

1041

1019

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

1203

1181

1204

1182

1205{-| A link to download a file.

1183{-| A link to download a file.

1184+

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

1186+

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

1188+

1206-}

1189-}

1207download :

1190download :

1208 List (Attribute msg)

1191 List (Attribute msg)

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

1358{-| -}

1341{-| -}

1359padding : Int -> Attribute msg

1342padding : Int -> Attribute msg

1360padding x =

1343padding x =

1361− let

1362− f =

1363− toFloat x

1364− in

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

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

1366

1345

1367

1346

1368{-| Set horizontal and vertical padding.

1347{-| Set horizontal and vertical padding.

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

1370paddingXY : Int -> Int -> Attribute msg

1349paddingXY : Int -> Int -> Attribute msg

1371paddingXY x y =

1350paddingXY x y =

1372 if x == y then

1351 if x == y then

1373− let

1374− f =

1375− toFloat x

1376− in

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

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

1378

1353

1379 else

1354 else

1380− let

1381− xFloat =

1382− toFloat x

1383−

1384− yFloat =

1385− toFloat y

1386− in

1387 Internal.StyleClass Flag.padding

1355 Internal.StyleClass Flag.padding

1388 (Internal.PaddingStyle

1356 (Internal.PaddingStyle

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

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

1390− yFloat

1358+ y

1391− xFloat

1359+ x

1392− yFloat

1360+ y

1393− xFloat

1361+ x

1394 )

1362 )

1395

1363

1396

1364

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

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

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

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

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

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

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

1414− let

1415− topFloat =

1416− toFloat top

1417− in

1418− Internal.StyleClass Flag.padding

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

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

1420− topFloat

1421− topFloat

1422− topFloat

1423− topFloat

1424− )

1425

1383

1426 else

1384 else

1427 Internal.StyleClass Flag.padding

1385 Internal.StyleClass Flag.padding

1428 (Internal.PaddingStyle

1386 (Internal.PaddingStyle

1429 (Internal.paddingName top right bottom left)

1387 (Internal.paddingName top right bottom left)

1430− (toFloat top)

1388+ top

1431− (toFloat right)

1389+ right

1432− (toFloat bottom)

1390+ bottom

1433− (toFloat left)

1391+ left

1434 )

1392 )

1435

1393

1436

1394

src/Element/Input.elm+40−78

@@ -133,11 +133,6 @@ Instead of implicit submission behavior, [try making an `onEnter` event handler

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

134

135

136−# File Inputs

137−

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

139−

140−

141# Disabling Inputs

136# Disabling Inputs

142

137

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

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

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

330 , label = text "My Button"

325 , label = text "My Button"

331 }

326 }

332

327

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

334−

335-}

328-}

336button :

329button :

337 List (Attribute msg)

330 List (Attribute msg)

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

369

362

370 Just msg ->

363 Just msg ->

371 Events.onClick msg

364 Events.onClick msg

372− :: onKeyLookup

365+ :: onEnter msg

373− (\code ->

374− if code == enter then

375− Just msg

376−

377− else if code == space then

378− Just msg

379−

380− else

381− Nothing

382− )

383 :: attrs

366 :: attrs

384 )

367 )

385 )

368 )

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

457 ]

440 ]

458 ++ attrs

441 ++ attrs

459 in

442 in

460− applyLabel

443+ applyLabel attributes

444+ label

445+ (Internal.element

446+ Internal.asEl

447+ Internal.div

448+ [ Internal.Attr <|

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

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

462− :: Internal.Attr

450+ , Internal.Attr <|

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

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

464 if checked then

452 if checked then

465 "true"

453 "true"

466

454

467 else

455 else

468 "false"

456 "false"

469− )

470− :: hiddenLabelAttribute label

457+ , hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

458+ , Element.centerY

478 , Element.height Element.fill

459 , Element.height Element.fill

479 , Element.width Element.shrink

460 , Element.width Element.shrink

480 ]

461 ]

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

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

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

714 thumbShadowStyle

695 thumbShadowStyle

715 )

696 )

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

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

717 , Internal.Attr

698 , Internal.Attr

718 (Html.Events.onInput

699 (Html.Events.onInput

719 (\str ->

700 (\str ->

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

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

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

780 ++ [ Element.behindContent <|

761 ++ [ Element.behindContent <|

781 if vertical then

762 if vertical then

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

763+ viewVerticalThumb factor thumbAttributes trackWidth

783

764

784 else

765 else

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

766+ viewHorizontalThumb factor thumbAttributes trackHeight

786 ]

767 ]

787 )

768 )

788 Element.none

769 Element.none

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

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

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

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

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

884 Just

865 Just

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

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

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

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

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

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

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

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

889 }

870 }

890

871

891 _ ->

872 _ ->

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

1328 Element.htmlAttribute

1309 Element.htmlAttribute

1329 (Html.Attributes.style

1310 (Html.Attributes.style

1330 "height"

1311 "height"

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

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

1332 )

1313 )

1333

1314

1334 newLineHeight =

1315 newLineHeight =

1335 Element.htmlAttribute

1316 Element.htmlAttribute

1336 (Html.Attributes.style

1317 (Html.Attributes.style

1337 "line-height"

1318 "line-height"

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

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

1339 )

1320 )

1340

1321

1341− newTop =

1342− t - min t b

1343−

1344− newBottom =

1345− b - min t b

1346−

1347 reducedVerticalPadding =

1322 reducedVerticalPadding =

1348− Internal.StyleClass Flag.padding

1323+ Element.paddingEach

1349− (Internal.PaddingStyle

1324+ { top = t - min t b

1350− (Internal.paddingNameFloat

1325+ , right = r

1351− newTop

1326+ , bottom = b - min t b

1352− r

1327+ , left = l

1353− newBottom

1328+ }

1354− l

1355− )

1356− newTop

1357− r

1358− newBottom

1359− l

1360− )

1361 in

1329 in

1362 { els

1330 { els

1363 | parent = reducedVerticalPadding :: els.parent

1331 | parent = reducedVerticalPadding :: els.parent

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

1565

1533

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

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

1567

1535

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

1569−

1570-}

1536-}

1571multiline :

1537multiline :

1572 List (Attribute msg)

1538 List (Attribute msg)

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

1628 Internal.element

1594 Internal.element

1629 Internal.asColumn

1595 Internal.asColumn

1630 (Internal.NodeName "label")

1596 (Internal.NodeName "label")

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

1597+ attrs

1632 (Internal.Unkeyed [ labelElement, input ])

1598 (Internal.Unkeyed [ labelElement, input ])

1633

1599

1634 Below ->

1600 Below ->

1635 Internal.element

1601 Internal.element

1636 Internal.asColumn

1602 Internal.asColumn

1637 (Internal.NodeName "label")

1603 (Internal.NodeName "label")

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

1604+ attrs

1639 (Internal.Unkeyed [ input, labelElement ])

1605 (Internal.Unkeyed [ input, labelElement ])

1640

1606

1641 OnRight ->

1607 OnRight ->

1642 Internal.element

1608 Internal.element

1643 Internal.asRow

1609 Internal.asRow

1644 (Internal.NodeName "label")

1610 (Internal.NodeName "label")

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

1611+ attrs

1646 (Internal.Unkeyed [ input, labelElement ])

1612 (Internal.Unkeyed [ input, labelElement ])

1647

1613

1648 OnLeft ->

1614 OnLeft ->

1649 Internal.element

1615 Internal.element

1650 Internal.asRow

1616 Internal.asRow

1651 (Internal.NodeName "label")

1617 (Internal.NodeName "label")

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

1618+ attrs

1653 (Internal.Unkeyed [ labelElement, input ])

1619 (Internal.Unkeyed [ labelElement, input ])

1654

1620

1655

1621

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

2105 Json.field "key" Json.string

2071 Json.field "key" Json.string

2106 |> Json.andThen decode

2072 |> Json.andThen decode

2107 in

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

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

2111− Html.Events.preventDefaultOn "keydown"

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

2113

2075

2114

2076

2115{-| -}

2077{-| -}

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

2205defaultCheckbox checked =

2167defaultCheckbox checked =

2206 Element.el

2168 Element.el

2207 [ Internal.htmlClass "focusable"

2169 [ Internal.htmlClass "focusable"

2208− , Element.width

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

2209− (Element.px 14)

2210 , Element.height (Element.px 14)

2171 , Element.height (Element.px 14)

2211 , Font.color white

2172 , Font.color white

2212 , Element.centerY

2173 , Element.centerY

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

2242

2203

2243 else

2204 else

2244 1

2205 1

2245− , Element.inFront

2206+ ]

2207+ (if checked then

2246− (Element.el

2208+ Element.el

2247 [ Border.color white

2209 [ Border.color white

2248 , Element.height (Element.px 6)

2210 , Element.height (Element.px 6)

2249 , Element.width (Element.px 9)

2211 , Element.width (Element.px 9)

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

2251 , Element.centerX

2213 , Element.centerX

2252 , Element.centerY

2214 , Element.centerY

2253 , Element.moveUp 1

2215 , Element.moveUp 1

2254− , Element.transparent (not checked)

2255 , Border.widthEach

2216 , Border.widthEach

2256 { top = 0

2217 { top = 0

2257 , left = 2

2218 , left = 2

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

2260 }

2221 }

2261 ]

2222 ]

2262 Element.none

2223 Element.none

2263− )

2224+

2264− ]

2225+ else

2265− Element.none

2226+ Element.none

2227+ )

src/Element/Region.elm+1−5

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

101 Internal.Describe LivePolite

102

103

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

105−

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

107−

108−-}

104+{-| -}

109description : String -> Attribute msg

105description : String -> Attribute msg

110description =

106description =

111 Internal.Describe << Internal.Label

107 Internal.Describe << Internal.Label

src/Internal/Model.elm+32−30

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

79 , onlyStyles

80 , optionsToRecord

81 , paddingName

82− , paddingNameFloat

83 , pageClass

82 , pageClass

84 , paragraphClass

83 , paragraphClass

85 , reduceRecursive

84 , reduceRecursive

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

174 | Colored String String Color

173 | Colored String String Color

175 | SpacingStyle String Int Int

174 | SpacingStyle String Int Int

176 | BorderWidth String Int Int Int Int

175 | BorderWidth String Int Int Int Int

177− | PaddingStyle String Float Float Float Float

176+ | PaddingStyle String Int Int Int Int

178 | GridTemplateStyle

177 | GridTemplateStyle

179 { spacing : ( Length, Length )

178 { spacing : ( Length, Length )

180 , columns : List Length

179 , columns : List Length

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

1478 Single

1477 Single

1479 cls

1478 cls

1480 "min-height"

1479 "min-height"

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

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

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

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

1484

1481

1485 ( newFlag, newAttrs, newStyle ) =

1482 ( newFlag, newAttrs, newStyle ) =

1486 renderHeight len

1483 renderHeight len

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

1948

1945

1949

1946

1950type Padding

1947type Padding

1951− = Padding String Float Float Float Float

1948+ = Padding String Int Int Int Int

1952

1949

1953

1950

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

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

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

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

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

2245 ]

2242 ]

2246 )

2243 )

2247− , Style

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

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

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

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

2251− )

2252 (List.filterMap identity

2245 (List.filterMap identity

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

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

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

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

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

2649 renderedProps =

2642 renderedProps =

2650 List.foldl (renderProps False) "" props

2643 List.foldl (renderProps False) "" props

2651 in

2644 in

2645+ [ selector

2646+ ++ "-fs:focus {"

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

2647+ ++ renderedProps

2648+ ++ "\n}"

2649+ , "."

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

2650+ ++ classes.any

2651+ ++ ":focus ~ "

2652+ ++ selector

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

2654 ++ renderedProps

2655 ++ "\n}"

2656+ , "."

2657+ ++ classes.any

2658+ ++ ":focus "

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

2659+ ++ selector

2660+ ++ "-fs {"

2657 ++ renderedProps

2661 ++ renderedProps

2658 ++ "\n}"

2662 ++ "\n}"

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

2663+ , selector

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

2665+ ++ renderedProps

2666+ ++ "\n}"

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

2668+ ++ "."

2669+ ++ classes.any

2670+ ++ " "

2671+ ++ selector

2672+ ++ "-fs {"

2660 ++ renderedProps

2673 ++ renderedProps

2661 ++ "\n}"

2674 ++ "\n}"

2662 ]

2675 ]

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

2863 maybePseudo

2876 maybePseudo

2864 class

2877 class

2865 [ Property "padding"

2878 [ Property "padding"

2866− (String.fromFloat top

2879+ (String.fromInt top

2867 ++ "px "

2880 ++ "px "

2868− ++ String.fromFloat right

2881+ ++ String.fromInt right

2869 ++ "px "

2882 ++ "px "

2870− ++ String.fromFloat bottom

2883+ ++ String.fromInt bottom

2871 ++ "px "

2884 ++ "px "

2872− ++ String.fromFloat left

2885+ ++ String.fromInt left

2873 ++ "px"

2886 ++ "px"

2874 )

2887 )

2875 ]

2888 ]

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

3199 ++ String.fromInt left

3212 ++ String.fromInt left

3200

3213

3201

3214

3202−paddingNameFloat top right bottom left =

3203− "pad-"

3204− ++ floatClass top

3205− ++ "-"

3206− ++ floatClass right

3207− ++ "-"

3208− ++ floatClass bottom

3209− ++ "-"

3210− ++ floatClass left

3211−

3212−

3213getStyleName : Style -> String

3215getStyleName : Style -> String

3214getStyleName style =

3216getStyleName style =

3215 case style of

3217 case style of

src/Internal/Style.elm+16−63

@@ -10,7 +10,6 @@ type Class

10type Rule

11 = Prop String String

12 | Child String (List Rule)

13− | AllChildren String (List Rule)

14 | Supports ( String, String ) (List ( String, String ))

13 | Supports ( String, String ) (List ( String, String ))

15 | Descriptor String (List Rule)

14 | Descriptor String (List Rule)

16 | Adjacent String (List Rule)

15 | Adjacent String (List Rule)

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

257 , inputMultilineParent = "imlp"

256 , inputMultilineParent = "imlp"

258 , inputMultilineFiller = "imlf"

257 , inputMultilineFiller = "imlf"

259 , inputMultilineWrapper = "implw"

258 , inputMultilineWrapper = "implw"

260− , inputLabel = "lbl"

261

259

262 -- link

260 -- link

263 , link = "lnk"

261 , link = "lnk"

@@ -562,15 +560,6 @@ renderRules (Intermediate parent) rulesToRender =

562 :: rendered.others

560 :: rendered.others

563 }

561 }

564

562

565− AllChildren child childRules ->

566− { rendered

567− | others =

568− renderRules

569− (emptyIntermediate (parent.selector ++ " " ++ child) "")

570− childRules

571− :: rendered.others

572− }

573−

574 Descriptor descriptor descriptorRules ->

563 Descriptor descriptor descriptorRules ->

575 { rendered

564 { rendered

576 | others =

565 | others =

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

961 ]

950 ]

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

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

963 [ Prop "display" "block"

952 [ Prop "display" "block"

964− , Descriptor (dot classes.heightFill)

965− [ Child "img"

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

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

968− ]

969− ]

970− , Descriptor (dot classes.widthFill)

971− [ Child "img"

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

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

974− ]

975− ]

976 ]

953 ]

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

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

978 [ Prop "outline" "none"

955 [ Prop "outline" "none"

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

995 , Child (dot classes.inFront)

972 , Child (dot classes.inFront)

996 [ Descriptor (dot classes.nearby)

973 [ Descriptor (dot classes.nearby)

997 [ Prop "position" "fixed"

974 [ Prop "position" "fixed"

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

999 ]

975 ]

1000 ]

976 ]

1001 ]

977 ]

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

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

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

1245 [ Prop "line-height" "1.05"

1221 [ Prop "line-height" "1.05"

1246 , Prop "background" "transparent"

1222 , Prop "background" "transparent"

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

1248 ]

1223 ]

1249 , Descriptor (dot classes.single)

1224 , Descriptor (dot classes.single)

1250 elDescription

1225 elDescription

@@ -1371,28 +1346,18 @@ baseSheet =

1371 , Descriptor (dot classes.spaceEvenly)

1346 , Descriptor (dot classes.spaceEvenly)

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

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

1373 ]

1348 ]

1374− , Descriptor (dot classes.inputLabel)

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

1376− ]

1377 ]

1349 ]

1378 , Descriptor (dot classes.column)

1350 , Descriptor (dot classes.column)

1379 [ Prop "display" "flex"

1351 [ Prop "display" "flex"

1380 , Prop "flex-direction" "column"

1352 , Prop "flex-direction" "column"

1381 , Child (dot classes.any)

1353 , Child (dot classes.any)

1382− -- *Note* - While rows have flex-basis 0%,

1383− -- which allows for the children of a row to default to their content size

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

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

1386− -- instead of the expected content size.

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

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

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

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

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

1354+ [ Prop "flex-basis" "0%"

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

1393 , Descriptor (dot classes.heightExact)

1355 , Descriptor (dot classes.heightExact)

1394 [ Prop "flex-basis" "auto"

1356 [ Prop "flex-basis" "auto"

1395 ]

1357 ]

1358+ , Descriptor (dot classes.column)

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

1360+ ]

1396 ]

1361 ]

1397 , Child (dot classes.heightFill)

1362 , Child (dot classes.heightFill)

1398 [ Prop "flex-grow" "100000"

1363 [ Prop "flex-grow" "100000"

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

1596 )

1561 )

1597 ]

1562 ]

1598 , Descriptor (dot classes.inputMultiline)

1563 , Descriptor (dot classes.inputMultiline)

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

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

1600 , Prop "height" "100%"

1565 , Prop "height" "100%"

1601 , Prop "width" "100%"

1566 , Prop "width" "100%"

1602 , Prop "background-color" "transparent"

1567 , Prop "background-color" "transparent"

@@ -1616,47 +1581,29 @@ baseSheet =

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

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

1617 ]

1582 ]

1618 , Descriptor (dot classes.inputMultilineParent)

1583 , Descriptor (dot classes.inputMultilineParent)

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

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

1620 , Prop "cursor" "text"

1585 , Prop "cursor" "text"

1621 , Child (dot classes.inputMultilineFiller)

1586 , Child (dot classes.inputMultilineFiller)

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

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

1623 , Prop "color" "transparent"

1588 , Prop "color" "transparent"

1624 ]

1589 ]

1625 ]

1590 ]

1626 , Descriptor (dot classes.paragraph)

1591 , Descriptor (dot classes.paragraph)

1627 [ Prop "display" "block"

1592 [ Prop "display" "block"

1628 , Prop "white-space" "normal"

1593 , Prop "white-space" "normal"

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

1630 , Descriptor (dot classes.hasBehind)

1594 , Descriptor (dot classes.hasBehind)

1631 [ Prop "z-index" "0"

1595 [ Prop "z-index" "0"

1632 , Child (dot classes.behind)

1596 , Child (dot classes.behind)

1633 [ Prop "z-index" "-1"

1597 [ Prop "z-index" "-1"

1634 ]

1598 ]

1635 ]

1599 ]

1636− , AllChildren (dot classes.text)

1600+ , Child (dot classes.text)

1637 [ Prop "display" "inline"

1601 [ Prop "display" "inline"

1638 , Prop "white-space" "normal"

1602 , Prop "white-space" "normal"

1639 ]

1603 ]

1640− , AllChildren (dot classes.paragraph)

1641− [ Prop "display" "inline"

1642− , Descriptor "::after"

1643− [ Prop "content" "none"

1644− ]

1645− , Descriptor "::before"

1646− [ Prop "content" "none"

1647− ]

1648− ]

1649− , AllChildren (dot classes.single)

1604+ , Child (dot classes.single)

1650 [ Prop "display" "inline"

1605 [ Prop "display" "inline"

1651 , Prop "white-space" "normal"

1606 , Prop "white-space" "normal"

1652−

1653− -- Inline block allows the width of the item to be set

1654− -- but DOES NOT like wrapping text in a standard, normal, sane way.

1655− -- We're sorta counting that if an exact width has been set,

1656− -- people aren't expecting proper text wrapping for this element

1657− , Descriptor (dot classes.widthExact)

1658− [ Prop "display" "inline-block"

1659− ]

1660 , Descriptor (dot classes.inFront)

1607 , Descriptor (dot classes.inFront)

1661 [ Prop "display" "flex"

1608 [ Prop "display" "flex"

1662 ]

1609 ]

@@ -1679,9 +1626,15 @@ baseSheet =

1679 [ Prop "display" "inline"

1626 [ Prop "display" "inline"

1680 , Prop "white-space" "normal"

1627 , Prop "white-space" "normal"

1681 ]

1628 ]

1629+ , Child (dot classes.single)

1630+ [ Child (dot classes.text)

1631+ [ Prop "display" "inline"

1632+ , Prop "white-space" "normal"

1633+ ]

1634+ ]

1682 ]

1635 ]

1683 , Child (dot classes.row)

1636 , Child (dot classes.row)

1684− [ Prop "display" "inline"

1637+ [ Prop "display" "inline-flex"

1685 ]

1638 ]

1686 , Child (dot classes.column)

1639 , Child (dot classes.column)

1687 [ Prop "display" "inline-flex"

1640 [ Prop "display" "inline-flex"

tests-rendering/automation/build.jsdeleted−90

@@ -1,90 +0,0 @@

1−const fs = require("fs");

2−const path = require("path");

3−const compileToString = require("node-elm-compiler").compileToString;

4−

5−// {

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

7−// target: "./tmp/test.html",

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

9−// replace:

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

11−// }

12−

13−async function compile_and_embed(config) {

14− const elm_entry_module = fs.readFileSync(

15− path.join(config.elmOptions.cwd, config.elm),

16− "utf8"

17− );

18−

19− const module_name = elm_entry_module

20− .split(/[\r\n]+/)[0]

21− .match(/module ([A-Za-z0-9\.]+)/i)[1];

22−

23− // we embed the compiled js to avoid having to start a server to read the app.

24− await compileToString([config.elm], config.elmOptions).then(function (

25− compiled_elm_code

26− ) {

27− // console.log(compiled_elm_code);

28− const compiled = fs

29− .readFileSync(config.template, "utf8")

30− .replace(/~~_compiled_elm_code_~~/, () => compiled_elm_code)

31− .replace(/~~_module_name_~~/, () => module_name);

32−

33− fs.writeFileSync(config.target, compiled);

34− });

35−}

36−

37−async function compile_to_string(config) {

38− const elm_entry_module = fs.readFileSync(

39− path.join(config.elmOptions.cwd, config.elm),

40− "utf8"

41− );

42−

43− const module_name = elm_entry_module

44− .split(/[\r\n]+/)[0]

45− .match(/module ([A-Za-z0-9\.]+)/i)[1];

46−

47− const compiled = await compileToString([config.elm], config.elmOptions).then(

48− function (compiled_elm_code) {

49− return fs

50− .readFileSync(config.template, "utf8")

51− .replace(/~~_module_name_~~/g, () => module_name)

52− .replace(/~~_compiled_elm_code_~~/g, () => compiled_elm_code);

53− }

54− );

55− return compiled;

56−}

57−

58−async function get_module_name(config) {

59− const elm_entry_module = fs.readFileSync(

60− path.join(config.cwd, config.elm),

61− "utf8"

62− );

63−

64− const module_name = elm_entry_module

65− .split(/[\r\n]+/)[0]

66− .match(/module ([A-Za-z0-9\.]+)/i)[1];

67− return module_name;

68−}

69−

70−async function create_runner(config) {

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

72−

73− let module_name = elm_entry_module

74− .split(/[\r\n]+/)[0]

75− .match(/module ([A-Za-z0-9\.]+)/i)[1];

76−

77− const module_name_sentence = module_name.replace(/([A-Z])/g, " $1");

78−

79− const runner = fs

80− .readFileSync(config.template, "utf8")

81− .replace(/~~_module_name_~~/g, () => module_name)

82− .replace(/~~_module_name_sentence_~~/g, () => module_name_sentence);

83− fs.writeFileSync(config.target, runner);

84−}

85−

86−exports.compile_and_embed = compile_and_embed;

87−

88−exports.create_runner = create_runner;

89−

90−exports.compile_to_string = compile_to_string;

tests-rendering/automation/run.js+25−18

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

1+const compileToString = require("node-elm-compiler").compileToString;

1const { Builder, By, Key, until } = require("selenium-webdriver");

2const { Builder, By, Key, until } = require("selenium-webdriver");

2const chrome = require("selenium-webdriver/chrome");

3const chrome = require("selenium-webdriver/chrome");

3const firefox = require("selenium-webdriver/firefox");

4const firefox = require("selenium-webdriver/firefox");

@@ -6,7 +7,6 @@ const program = require("commander");

6const path = require("path");

7const path = require("path");

7const chalk = require("chalk");

8const chalk = require("chalk");

8const childProcess = require("child_process");

9const childProcess = require("child_process");

9−const compile_and_embed = require("./build.js").compile_and_embed;

11program

12 .option("-s, --sauce", "run tests on sauce labs")

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

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

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

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

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

21 .parse(process.argv);

20 .parse(process.argv);

23// 'Windows 10'

22// 'Windows 10'

@@ -103,6 +102,17 @@ function prepare_all_envs(config) {

103 return envs;

102 return envs;

104}

103}

105

104

105+async function compile_and_embed(config) {

106+ var template = fs.readFileSync(config.template);

107+ // we embed the compiled js to avoid having to start a server to read the app.

108+ await compileToString(config.elm, config.elmOptions).then(function (

109+ compiled_elm_code

110+ ) {

111+ const compiled = eval(`\`${template}\``);

112+ fs.writeFileSync(config.target, compiled);

113+ });

114+}

115+

106function prepare_sauce_driver(env) {

116function prepare_sauce_driver(env) {

107 const username = process.env.SAUCE_USERNAME;

117 const username = process.env.SAUCE_USERNAME;

108 const accessKey = process.env.SAUCE_ACCESS_KEY;

118 const accessKey = process.env.SAUCE_ACCESS_KEY;

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

127}

137}

128

138

129async function prepare_local_driver(env) {

139async function prepare_local_driver(env) {

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

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

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

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

132−

133− if (program.headless) {

134− firefoxOptions.headless();

135− chromeOptions.headless();

136− }

137

142

138 let driver = await new Builder()

143 let driver = await new Builder()

139 .forBrowser(env.browser)

144 .forBrowser(env.browser)

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

169 await compile_and_embed({

174 await compile_and_embed({

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

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

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

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

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

177+ elm: ["src/Tests/Run.elm"],

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

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

174 });

179 });

175 console.log("Done compiling");

180 console.log("Done compiling");

@@ -260,29 +265,31 @@ function renderEnvName(env) {

260 return `${env.platform}, ${env.browser} ${env.browserVersion}`;

265 return `${env.platform}, ${env.browser} ${env.browserVersion}`;

261}

266}

262

267

263−function print_results(label, tests) {

268+function print_results(label, results) {

264 var total_passed = 0;

269 var total_passed = 0;

265 var total_failed = 0;

270 var total_failed = 0;

266 var i;

271 var i;

267 if (program.verbose) {

272 if (program.verbose) {

268 console.log(label);

273 console.log(label);

269 }

274 }

270− for (i = 0; i < tests.length; i++) {

275+ for (i = 0; i < results.length; i++) {

271 var passed = 0;

276 var passed = 0;

272 var failed = 0;

277 var failed = 0;

273− for (j = 0; j < tests[i].results.length; j++) {

278+ for (j = 0; j < results[i].results.length; j++) {

274− if (tests[i].results[j].passing) {

279+ if (results[i].results[j][1] == null) {

275 passed = passed + 1;

280 passed = passed + 1;

276 } else {

281 } else {

277 if (failed == 0) {

282 if (failed == 0) {

278 if (!program.verbose) {

283 if (!program.verbose) {

279 console.log(label);

284 console.log(label);

280 }

285 }

281− console.log(tests[i].label);

286+ console.log(results[i].label);

282 }

287 }

283 failed = failed + 1;

288 failed = failed + 1;

284− console.log(" " + chalk.red("fail") + " ->");

289+ console.log(

290+ " " + chalk.red("fail") + " -> " + results[i].results[j][0]

291+ );

285− console.log(" " + tests[i].results[j].description);

292+ console.log(" " + results[i].results[j][1].description);

286 }

293 }

287 }

294 }

288 total_passed = total_passed + passed;

295 total_passed = total_passed + passed;

@@ -293,7 +300,7 @@ function print_results(label, tests) {

293 console.log(chalk.red(` ${failed} tests failed`));

300 console.log(chalk.red(` ${failed} tests failed`));

294 console.log();

301 console.log();

295 } else if (program.verbose) {

302 } 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`));

297 }

304 }

298 }

305 }

299 if (total_failed == 0) {

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

2<html>

3− <head>

3+ <head>

4− <meta charset="UTF-8" />

4+ <meta charset="UTF-8">

5− <title>Elm UI Rendering Test</title>

5+ <title>Rendering Benchmark Viewer</title>

6− <script>

6+ <script>

7− ~~_compiled_elm_code_~~

7+ ${compiled_elm_code}

8− </script>

8+ </script>

9− <script>

9+ </head>

10− // Helpers

10+ <style>

11− // Calculations for canvas

11+ </style>

12− var PIXEL_RATIO = (function () {

12+ <body id="root"></body>

13− var ctx = document.createElement("canvas").getContext("2d"),

13+

14− dpr = window.devicePixelRatio || 1,

14+ <script type="text/javascript">

15− bsr =

15+

16− ctx.webkitBackingStorePixelRatio ||

16+ var app = Elm.Tests.Run.init();

17− ctx.mozBackingStorePixelRatio ||

17+

18− ctx.msBackingStorePixelRatio ||

18+ var test_results = "waiting.."

19− ctx.oBackingStorePixelRatio ||

19+

20− ctx.backingStorePixelRatio ||

20+ app.ports.report.subscribe(function (results) {

21− 1;

21+ test_results = results;

22−

23− return dpr / bsr;

24− })();

25−

26− function createHiDPICanvas(w, h, id, ratio) {

27− if (!ratio) {

28− ratio = PIXEL_RATIO;

29− }

22+ })

30− let can = document.getElementById(id);

23+

31− can.width = w * ratio;

24+ app.ports.analyze.subscribe(function (ids) {

32− can.height = h * ratio;

25+ // ids : List String

33− can.style.width = w + "px";

26+ var idsLength = ids.length;

34− can.style.height = h + "px";

27+ var results = [];

35− can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);

28+ for (var i = 0; i < idsLength; i++) {

36− return can;

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

37− }

45+ });

38−

46+

39− function isVisible(id, bbox) {

47+ function isVisible(id, bbox) {

40− var current = document.getElementById(id);

48+ var current = document.getElementById(id);

41− var result = 0;

49+ var result = 0;

42− if (current == document.elementFromPoint(bbox["left"], bbox["top"])) {

50+ if (current == document.elementFromPoint(bbox['left'], bbox['top'])) {

43− result++;

51+ result++;

44− }

52+ }

45− if (

46− current == document.elementFromPoint(bbox["left"], bbox["bottom"] - 1)

53+ if (current == document.elementFromPoint(bbox['left'], bbox['bottom'] - 1)) {

47− ) {

48− result++;

54+ result++;

49− }

55+ }

50− if (

51− current == document.elementFromPoint(bbox["right"] - 1, bbox["top"])

56+ if (current == document.elementFromPoint(bbox['right'] - 1, bbox['top'])) {

52− ) {

53− result++;

57+ result++;

54− }

58+ }

55− if (

56− current ==

57− document.elementFromPoint(bbox["right"] - 1, bbox["bottom"] - 1)

59+ if (current == document.elementFromPoint(bbox['right'] - 1, bbox['bottom'] - 1)) {

58− ) {

59− result++;

60+ result++;

61+ }

62+

63+

64+ if (result == 4) {

65+ return true;

66+ } else {

67+ return false

68+ }

60 }

69 }

62− if (result == 4) {

71+ function getStyle(element) {

63− return true;

72+ var props = []

64− } else {

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

65− return false;

79+ return props;

66 }

80 }

67− }

81+

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

82+ function getBoundingBox(element) {

81− var bbox = element.getBoundingClientRect();

83+ var bbox = element.getBoundingClientRect();

82− var style = window.getComputedStyle(element, null);

84+ var style = window.getComputedStyle(element, null);

83−

85+

84− var padding = {

86+ var padding = {

85− top: parseFloat(style.getPropertyValue("padding-top")),

87+ 'top': parseFloat(style.getPropertyValue('padding-top'))

86− bottom: parseFloat(style.getPropertyValue("padding-bottom")),

88+ , 'bottom': parseFloat(style.getPropertyValue('padding-bottom'))

87− left: parseFloat(style.getPropertyValue("padding-left")),

89+ , 'left': parseFloat(style.getPropertyValue('padding-left'))

88− right: parseFloat(style.getPropertyValue("padding-right")),

90+ , 'right': parseFloat(style.getPropertyValue('padding-right'))

89− };

91+ };

90−

92+

91− return {

93+ return {

92− top: bbox.top,

94+ 'top': bbox.top

93− bottom: bbox.bottom,

95+ , 'bottom': bbox.bottom

94− left: bbox.left,

96+ , 'left': bbox.left

95− right: bbox.right,

97+ , 'right': bbox.right

96− width: bbox.width,

98+ , 'width': bbox.width

97− height: bbox.height,

99+ , 'height': bbox.height

98− padding: padding,

100+ , '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− }

101+ }

126 }

102 }

127− return childrenTextMetrics;

103+

128− }

129 </script>

104 </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.

23-}

25−import Element exposing (..)

25+import Testable.Element exposing (..)

26−import Element.Font as Font

26+import Testable.Element.Font as Font

27−import Element.Input as Input

27+import Testable.Element.Input as Input

30main =

tests-rendering/cases/open/InFrontSize.elm+2−2

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

1−module InFrontSize exposing (view)

1+module InFrontSize exposing (main)

3{-|

@@ -16,7 +16,7 @@ import Testable.Element.Background as Background

16import Testable.Element.Border as Border

19−view =

19+main =

20 layout []

21 (el

22 [ width (px 100)

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

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

1−module LabelledInputAlignRight exposing (view)

2−

3−import Testable.Element exposing (..)

4−import Testable.Element.Input as Input

5−

6−

7−view =

8− layout [] <|

9− column [ width fill ]

10− [ Input.text

11− [ width (px 200)

12− , alignRight

13− ]

14− { onChange = always False

15− , text = ""

16− , placeholder = Nothing

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

18− }

19− , Input.text

20− [ width (px 200)

21− , alignRight

22− ]

23− { onChange = always False

24− , text = ""

25− , placeholder = Nothing

26− , label = Input.labelHidden "label"

27− }

28− ]

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

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

1−module NearbyElementBordersOverlap exposing (view)

2−

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

4−

5−

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

7−

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

9−

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

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

12−from the main element.

13−

14−-}

15−

16−import Testable.Element exposing (..)

17−import Testable.Element.Border as Border

18−

19−

20−blue =

21− rgb 0 0 1

22−

23−

24−green =

25− rgb 0 1 0

26−

27−

28−grey =

29− rgb 0.5 0.5 0.5

30−

31−

32−view =

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

34− el

35− [ centerX

36− , centerY

37− , Border.width 10

38− , Border.color green

39− , padding 50

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

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

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

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

44− ]

45− <|

46− text "Centre"

tests-rendering/cases/open/Scrollbar2.elm+1−1

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

1−module Scrollbar2 exposing (main, myElement, sidebar)

1+module Main exposing (main, myElement, sidebar)

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

4import Element.Background as Background

tests-rendering/cases/open/Scrollbars.elm+1−1

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

1−module Scrollbars exposing (main)

1+module Main exposing (main)

3import Element exposing (..)

4import Element.Background as Background

tests-rendering/cases/open/StackedScrollingColumnsHeight.elmdeleted−42

@@ -1,42 +0,0 @@

1−module StackedScrollingColumnsHeight exposing (..)

2−

3−{-|

4−

5−

6−# Column height can be set incorrectly for two stacked columns with scrollbarY

7−

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

9−

10−Both red and green columns should always have equal height.

11−

12−Currently, the height is set incorrectly if only one column has enough content to scroll.

13−

14−Both columns are correctly set to the same height only if neither has enough content

15−to scroll or if both have enough content to scroll.

16−

17−-}

18−

19−import Testable.Element exposing (..)

20−import Testable.Element.Background as Background

21−

22−

23−view =

24− layout [ height fill ] <|

25− column [ height fill ]

26− [ column

27− [ height fill

28− , scrollbarY

29− , Background.color (rgb 0 255 0)

30− ]

31− <|

32− List.map (\_ -> text "Hello") <|

33− List.range 1 20

34− , column

35− [ height fill

36− , scrollbarY

37− , Background.color (rgb 255 0 0)

38− ]

39− <|

40− List.map (\_ -> text "Hello") <|

41− List.range 1 3

42− ]

tests-rendering/cases/open/WeirdCentering.elm+23−27

@@ -1,35 +1,31 @@

1−module WeirdCentering exposing (view)

1+module Main exposing (main)

3−import Testable.Element exposing (..)

3+import Browser

4−import Testable.Element.Background as Background

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

7−view =

11+main : Html msg

12+main =

8− layout [] <|

13+ Element.layout [] <|

9− column []

14+ Element.column []

10− [ text "Example with centerX:"

15+ [ Element.text "Example with centerX:"

11− , row

16+ , Element.row

12− [ width fill ]

17+ [ Element.width Element.fill ]

13− [ row

14− [ centerX

15− , Background.color <| rgb 0 1 0

18+ [ Element.row [ Element.centerX, Background.color <| Element.rgb255 0 200 0 ]

16− ]

19+ [ Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]

17− [ paragraph

20+ , Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]

18− [ width shrink

19− ]

20− [ text "Hello world" ]

21− , paragraph

22− [ width shrink

23− ]

24− [ text "Hello world" ]

25 ]

21 ]

26 ]

22 ]

27− , text "Example without centerX:"

23+ , Element.text "Example without centerX:"

28− , row

24+ , Element.row

29− [ width fill ]

25+ [ Element.width Element.fill ]

30− [ row [ Background.color <| rgb 0 1 0 ]

26+ [ Element.row [ Background.color <| Element.rgb255 0 200 0 ]

31− [ paragraph [ width shrink ] [ text "Hello world" ]

27+ [ Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]

32− , paragraph [ width shrink ] [ text "Hello world" ]

28+ , Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]

33 ]

29 ]

34 ]

30 ]

35 ]

31 ]

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

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

1−module DoNotCollapseBelow0 exposing (main)

2−

3−{-|

4−

5−

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

7−

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

9−text is rendered on the first.

10−

11−Versions

12−

13−OS: macOS Mojave 10.14.5

14−Browser: Safari

15−Browser Version: 12.1.1 (14607.2.6.1.1)

16−Elm Version: 0.19

17−Elm UI Version: 1.1.5

18−

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

20−

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

22−

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

24−

25−-}

26−

27−import Browser

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

29−import Html exposing (Html)

30−

31−

32−view : () -> Html ()

33−view () =

34− layout [ height fill ] <|

35− column

36− [ height fill ]

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

38− , text "Text below the el above"

39− ]

40−

41−

42−main : Program () () ()

43−main =

44− Browser.sandbox

45− { init = ()

46− , view = view

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

48− }

tests-rendering/cases/resolved/Layout/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 @@

2− "type": "application",

2+ "type": "application",

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

3+ "source-directories": [

4+ "src",

5+ "../src"

6+ ],

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

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

5− "dependencies": {

8+ "dependencies": {

6− "direct": {

9+ "direct": {

7− "elm/browser": "1.0.2",

10+ "elm/browser": "1.0.2",

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

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

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

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

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

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

11− "elm/parser": "1.1.0",

14+ "elm/parser": "1.1.0",

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

15+ "elm/random": "1.0.0",

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

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

14− "elm/virtual-dom": "1.0.2",

17+ "elm/virtual-dom": "1.0.2",

15− "elm-explorations/test": "1.1.0"

18+ "elm-explorations/test": "1.1.0"

19+ },

20+ "indirect": {

21+ "elm/url": "1.0.0"

22+ }

16 },

23 },

24+ "test-dependencies": {

25+ "direct": {},

17− "indirect": {

26+ "indirect": {}

18− "elm/url": "1.0.0"

19 }

27 }

20− },

21− "test-dependencies": {

22− "direct": {},

23− "indirect": {}

24− }

25}

28}

tests-rendering/make.shnew file+2

@@ -0,0 +1,2 @@

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

1module Testable exposing

2 ( Attr(..)

3− , AttributeId(..)

4 , BoundingBox

3 , BoundingBox

5 , Element(..)

4 , Element(..)

6− , ElementType(..)

7 , Found

5 , Found

8 , LayoutContext(..)

6 , LayoutContext(..)

9− , LayoutExpectation(..)

10− , LayoutTest

11 , Location(..)

7 , Location(..)

12 , Style

8 , Style

13 , Surroundings

9 , Surroundings

14− , TextMetrics

10+ , addAttribute

11+ , applyLabels

15 , compareFormattedColor

12 , compareFormattedColor

16− , elementTypeToString

13+ , createAttributeTest

17− , equal

14+ , createTest

18 , formatColor

15 , formatColor

19 , formatColorWithAlpha

16 , formatColorWithAlpha

17+ , getElementId

20 , getIds

18 , getIds

21 , getSpacing

19 , getSpacing

22− , getSpacingFromAttributes

20+ , idAttr

23− , lessThanOrEqual

21+ , levelToString

24− , rounded

22+ , render

23+ , renderAttribute

24+ , renderElement

25 , runTests

26− , textHeight

26+ , toTest

27− , toElement

28− , toHtml

29− , todo

30− , true

31 )

27 )

33{-| -}

29{-| -}

35import Dict exposing (Dict)

31import Dict exposing (Dict)

36import Element exposing (Color)

32import Element exposing (Color)

33+import Expect

37import Html exposing (Html)

34import Html exposing (Html)

38import Html.Attributes

35import Html.Attributes

39import Internal.Model as Internal

36import Internal.Model as Internal

37+import Random

40import Test exposing (Test)

38import Test exposing (Test)

39+import Test.Runner

40+import Test.Runner.Failure

43type Element msg

44 = El (List (Attr msg)) (Element msg)

45− | Link String (List (Attr msg)) (Element msg)

46 | Row (List (Attr msg)) (List (Element msg))

45 | Row (List (Attr msg)) (List (Element msg))

47 | Column (List (Attr msg)) (List (Element msg))

46 | Column (List (Attr msg)) (List (Element msg))

48 | TextColumn (List (Attr msg)) (List (Element msg))

47 | TextColumn (List (Attr msg)) (List (Element msg))

@@ -51,104 +50,22 @@ type Element msg

51 | Empty

50 | Empty

54−type ElementType

55− = ElType

56− | RowType

57− | ColumnType

58− | TextColumnType

59− | ParagraphType

60− | TextType

61− | EmptyType

62−

63−

64−elementTypeToString : ElementType -> String

65−elementTypeToString elem =

66− case elem of

67− ElType ->

68− "El"

69−

70− RowType ->

71− "Row"

72−

73− ColumnType ->

74− "Column"

75−

76− TextColumnType ->

77− "TextColumn"

78−

79− ParagraphType ->

80− "Paragraph"

81−

82− TextType ->

83− "Text"

84−

85− EmptyType ->

86− "Empty"

87−

88−

89−toElementType : Element msg -> ElementType

90−toElementType elem =

91− case elem of

92− El _ _ ->

93− ElType

94−

95− Link _ _ _ ->

96− ElType

97−

98− Row _ _ ->

99− RowType

100−

101− Column _ _ ->

102− ColumnType

103−

104− TextColumn _ _ ->

105− TextColumnType

106−

107− Paragraph _ _ ->

108− ParagraphType

109−

110− Text _ ->

111− TextType

112−

113− Empty ->

114− EmptyType

115−

116−

117−{-| We have an attribute id in order to remove tests when an overriding attribtue is assigned.

118−

119−Basically, we want to implictly test for height/width shrink.

120−

121−But we want to skip this test if width/height is already set.

122−

123−This allows us to do that by comparing identities.

124−

125−-}

126−type AttributeId

127− = NoId

128− | IsWidth

129− | IsHeight

130−

131−

132type Attr msg

53type Attr msg

133 = Attr (Element.Attribute msg)

54 = Attr (Element.Attribute msg)

134− | AttrTest

55+ | AttrTest (Surroundings -> Test)

135− { test : Surroundings msg -> List LayoutExpectation

136− , label : String

137− , id : AttributeId

138− }

139 | Batch (List (Attr msg))

56 | Batch (List (Attr msg))

140 | Spacing Int

57 | Spacing Int

141 | Nearby

58 | Nearby

142 { location : Location

59 { location : Location

143 , element : Element msg

60 , element : Element msg

144− , test : Surroundings msg -> List LayoutExpectation

61+ , test : Surroundings -> () -> Expect.Expectation

145 , label : String

62 , label : String

146 }

63 }

64+ | Label String

147 | LabeledTest

65 | LabeledTest

148− { test : Surroundings msg -> List LayoutExpectation

66+ { test : Surroundings -> () -> Expect.Expectation

149 , label : String

67 , label : String

150 , attr : Element.Attribute msg

68 , attr : Element.Attribute msg

151− , id : AttributeId

152 }

69 }

153

154

@@ -166,20 +83,16 @@ type LayoutContext

166 | InRow

83 | InRow

167 | InEl

84 | InEl

168 | InColumn

85 | InColumn

169− | InParagraph

170− | InTextCol

171− | AtRoot

172

173

174−type alias Surroundings msg =

88+type alias Surroundings =

175 { siblings : List Found

89 { siblings : List Found

176 , parent : Found

90 , parent : Found

177 , children : List Found

91 , children : List Found

178 , self : Found

92 , self : Found

179− , selfElement : Element msg

180

181 -- These values are needed to perform some types of tests.

94 -- These values are needed to perform some types of tests.

182− , parentLayout : LayoutContext

95+ , location : LayoutContext

183 , parentSpacing : Int

96 , parentSpacing : Int

184 }

97 }

185

@@ -188,36 +101,9 @@ type alias Found =

188 { bbox : BoundingBox

101 { bbox : BoundingBox

189 , style : Style

102 , style : Style

190 , isVisible : Bool

103 , isVisible : Bool

191− , textMetrics : List TextMetrics

192 }

104 }

193

105

194

106

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−

221{-| -}

107{-| -}

222type alias Style =

108type alias Style =

223 Dict String String

109 Dict String String

@@ -239,67 +125,6 @@ type alias BoundingBox =

239 }

125 }

240

126

241

127

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−

303

128

304{- Retrieve Ids -}

129{- Retrieve Ids -}

305

130

@@ -335,9 +160,6 @@ getElementId level el =

335 El attrs child ->

160 El attrs child ->

336 id :: getElementId (0 :: level) child ++ attributeIDs attrs

161 id :: getElementId (0 :: level) child ++ attributeIDs attrs

337

162

338− Link _ attrs child ->

339− id :: getElementId (0 :: level) child ++ attributeIDs attrs

340−

341 Row attrs children ->

163 Row attrs children ->

342 id :: childrenIDs children ++ attributeIDs attrs

164 id :: childrenIDs children ++ attributeIDs attrs

343

165

@@ -361,19 +183,9 @@ getElementId level el =

361{- Render as Html -}

183{- Render as Html -}

362

184

363

185

364−toElement : Element msg -> Element.Element msg

365−toElement el =

366− renderElement [ 0, 0 ] el

367−

368−

369−toHtml : Element msg -> Html msg

186+render : Element msg -> Html msg

370−toHtml el =

187+render el =

371− Element.layout

188+ Element.layout [ idAttr "0" ] <|

372− [ idAttr "0"

373− , Element.width (Element.px 1000)

374− , Element.height (Element.px 1000)

375− ]

376− <|

377 renderElement [ 0, 0 ] el

189 renderElement [ 0, 0 ] el

378

190

379

191

@@ -402,13 +214,6 @@ renderElement level el =

402 (id :: makeAttributes attrs)

214 (id :: makeAttributes attrs)

403 (renderElement (0 :: level) child)

215 (renderElement (0 :: level) child)

404

216

405− Link url attrs child ->

406− Element.link

407− (id :: makeAttributes attrs)

408− { url = url

409− , label = renderElement (0 :: level) child

410− }

411−

412 Row attrs children ->

217 Row attrs children ->

413 Element.row

218 Element.row

414 (id :: makeAttributes attrs)

219 (id :: makeAttributes attrs)

@@ -448,6 +253,9 @@ renderAttribute level attrIndex attr =

448 Spacing _ ->

253 Spacing _ ->

449 []

254 []

450

255

256+ Label _ ->

257+ []

258+

451 Nearby { location, element } ->

259 Nearby { location, element } ->

452 case location of

260 case location of

453 Above ->

261 Above ->

@@ -480,36 +288,30 @@ renderAttribute level attrIndex attr =

480{- Convert to Test -}

288{- Convert to Test -}

481

289

482

290

483−runTests : Dict String Found -> Element msg -> List LayoutTest

291+toTest : String -> Dict String Found -> Element msg -> Test

484−runTests harvested el =

292+toTest label harvested el =

485 let

293 let

486 maybeFound =

294 maybeFound =

487 Dict.get "se-0" harvested

295 Dict.get "se-0" harvested

488 in

296 in

489 case maybeFound of

297 case maybeFound of

490 Nothing ->

298 Nothing ->

491− [ { elementDomId = "se-0"

299+ Test.describe label

492− , elementType = EmptyType

300+ [ Test.test "Find Root" <|

493− , label = "Finding root element"

301+ \_ -> Expect.fail "unable to find root"

494− , expectations =

495− [ Expect

496− { description = "Locating root element for rendering tests"

497− , result = False

498− }

499− ]

500− }

501− ]

302+ ]

502

303

503 Just root ->

304 Just root ->

305+ Test.describe label <|

504− createTest

306+ createTest

505− { siblings = []

307+ { siblings = []

506− , parent = root

308+ , parent = root

507− , cache = harvested

309+ , cache = harvested

508− , parentSpacing = 0

310+ , parentSpacing = 0

509− , level = [ 0, 0 ]

311+ , level = [ 0, 0 ]

510− , element = el

312+ , element = el

511− , location = AtRoot

313+ , location = InEl

512− }

314+ }

513

315

514

316

515levelToString : List Int -> String

317levelToString : List Int -> String

@@ -529,7 +331,7 @@ createTest :

529 , location : LayoutContext

331 , location : LayoutContext

530 , parentSpacing : Int

332 , parentSpacing : Int

531 }

333 }

532− -> List LayoutTest

334+ -> List Test

533createTest { siblings, parent, cache, level, element, location, parentSpacing } =

335createTest { siblings, parent, cache, level, element, location, parentSpacing } =

534 let

336 let

535 spacing =

337 spacing =

@@ -539,7 +341,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

539 id =

341 id =

540 levelToString level

342 levelToString level

541

343

542− testChildren : Found -> List (Element msg) -> List LayoutTest

344+ testChildren : Found -> List (Element msg) -> List Test

543 testChildren found children =

345 testChildren found children =

544 let

346 let

545 childrenFound =

347 childrenFound =

@@ -567,13 +369,13 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

567 { a

369 { a

568 | index : Int

370 | index : Int

569 , previous : List Found

371 , previous : List Found

570− , tests : List LayoutTest

372+ , tests : List Test

571 , upcoming : List Found

373 , upcoming : List Found

572 }

374 }

573 ->

375 ->

574 { index : Int

376 { index : Int

575 , previous : List Found

377 , previous : List Found

576− , tests : List LayoutTest

378+ , tests : List Test

577 , upcoming : List Found

379 , upcoming : List Found

578 }

380 }

579 applyChildTest found child childTest =

381 applyChildTest found child childTest =

@@ -600,9 +402,6 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

600 El _ _ ->

402 El _ _ ->

601 InEl

403 InEl

602

404

603− Link _ _ _ ->

604− InEl

605−

606 Row _ _ ->

405 Row _ _ ->

607 InRow

406 InRow

608

407

@@ -610,10 +409,10 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

610 InColumn

409 InColumn

611

410

612 TextColumn _ _ ->

411 TextColumn _ _ ->

613− InTextCol

412+ InColumn

614

413

615 Paragraph _ _ ->

414 Paragraph _ _ ->

616− InParagraph

415+ InRow

617

416

618 Text _ ->

417 Text _ ->

619 InEl

418 InEl

@@ -640,7 +439,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

640 rest

439 rest

641 }

440 }

642

441

643− tests : Found -> List (Attr msg) -> List (Element msg) -> List LayoutTest

442+ tests : Found -> List (Attr msg) -> List (Element msg) -> List Test

644 tests self attributes children =

443 tests self attributes children =

645 let

444 let

646 findBBox elem ( i, gathered ) =

445 findBBox elem ( i, gathered ) =

@@ -680,6 +479,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

680

479

681 attributeTests =

480 attributeTests =

682 attributes

481 attributes

482+ |> applyLabels

683 |> List.indexedMap

483 |> List.indexedMap

684 -- Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test

484 -- Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test

685 (\i attr ->

485 (\i attr ->

@@ -690,9 +490,8 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

690 { siblings = siblings

490 { siblings = siblings

691 , parent = parent

491 , parent = parent

692 , self = self

492 , self = self

693− , selfElement = element

694 , children = childrenFoundData

493 , children = childrenFoundData

695− , parentLayout = location

494+ , location = location

696 , parentSpacing = parentSpacing

495 , parentSpacing = parentSpacing

697 }

496 }

698 attr

497 attr

@@ -712,26 +511,13 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

712 []

511 []

713

512

714 _ ->

513 _ ->

715− [ { elementDomId = id

514+ [ Test.test ("Unable to find " ++ id) (always <| Expect.fail "failed id lookup") ]

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

726

515

727 Just self ->

516 Just self ->

728 case element of

517 case element of

729 El attrs child ->

518 El attrs child ->

730 tests self attrs [ child ]

519 tests self attrs [ child ]

731

520

732− Link _ attrs child ->

733− tests self attrs [ child ]

734−

735 Row attrs children ->

521 Row attrs children ->

736 tests self attrs children

522 tests self attrs children

737

523

@@ -751,33 +537,59 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

751 []

537 []

752

538

753

539

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+

754−createAttributeTest :

575+createAttributeTest : Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test

755− Found

756− -> Dict String Found

757− -> List Int

758− -> Int

759− -> Surroundings msg

760− -> Attr msg

761− -> List LayoutTest

762createAttributeTest parent cache level attrIndex surroundings attr =

576createAttributeTest parent cache level attrIndex surroundings attr =

763 let

577 let

764− domId =

578+ indexLabel =

765− "#" ++ levelToString level

579+ levelToString (attrIndex :: level)

766 in

580 in

767 case attr of

581 case attr of

768 Attr _ ->

582 Attr _ ->

769 []

583 []

770

584

585+ Label _ ->

586+ []

587+

771 Spacing _ ->

588 Spacing _ ->

772 []

589 []

773

590

774− AttrTest details ->

591+ AttrTest test ->

775− [ { elementDomId = domId

776− , elementType =

777− toElementType surroundings.selfElement

778− , label = details.label

779− , expectations = details.test surroundings

592+ [ test surroundings

780− }

781 ]

593 ]

782

594

783 Nearby nearby ->

595 Nearby nearby ->

@@ -788,29 +600,16 @@ createAttributeTest parent cache level attrIndex surroundings attr =

788 , parentSpacing = 0

600 , parentSpacing = 0

789 , level = attrIndex :: -1 :: level

601 , level = attrIndex :: -1 :: level

790 , location = IsNearby nearby.location

602 , location = IsNearby nearby.location

791− , element =

603+ , element = addAttribute (AttrTest (\context -> Test.test (nearby.label ++ " #" ++ indexLabel) (nearby.test context))) nearby.element

792− addAttribute

793− (AttrTest

794− { label = nearby.label

795− , test =

796− nearby.test

797− , id = NoId

798− }

799− )

800− nearby.element

801 }

604 }

802

605

803 Batch batch ->

606 Batch batch ->

804 batch

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

806 |> List.concat

609 |> List.concat

807

610

808 LabeledTest { label, test } ->

611 LabeledTest { label, test } ->

809− [ { elementDomId = domId

810− , elementType = toElementType surroundings.selfElement

811− , label = label

812− , expectations = test surroundings

612+ [ Test.test (label ++ " #" ++ indexLabel) (test surroundings)

813− }

814 ]

613 ]

815

614

816

615

@@ -820,9 +619,6 @@ addAttribute attr el =

820 El attrs child ->

619 El attrs child ->

821 El (attr :: attrs) child

620 El (attr :: attrs) child

822

621

823− Link url attrs child ->

824− Link url (attr :: attrs) child

825−

826 Row attrs children ->

622 Row attrs children ->

827 Row (attr :: attrs) children

623 Row (attr :: attrs) children

828

624

@@ -842,6 +638,48 @@ addAttribute attr el =

842 Text str

638 Text str

843

639

844

640

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+

845compareFormattedColor : Color -> String -> Bool

683compareFormattedColor : Color -> String -> Bool

846compareFormattedColor color expected =

684compareFormattedColor color expected =

847 formatColor color == expected || formatColorWithAlpha color == expected

685 formatColor color == expected || formatColorWithAlpha color == expected

@@ -878,21 +716,6 @@ formatColor (Internal.Rgba red green blue alpha) =

878 ++ ")"

716 ++ ")"

879

717

880

718

881−getSpacingFromAttributes attrs =

882− case attrs of

883− [] ->

884− 0

885−

886− (Spacing i) :: remain ->

887− i

888−

889− (Batch batched) :: remain ->

890− getSpacingFromAttributes (batched ++ remain)

891−

892− _ :: remain ->

893− getSpacingFromAttributes remain

894−

895−

896getSpacing : Element msg -> Maybe Int

719getSpacing : Element msg -> Maybe Int

897getSpacing el =

720getSpacing el =

898 let

721 let

@@ -918,9 +741,6 @@ getSpacing el =

918 El attrs _ ->

741 El attrs _ ->

919 filterAttrs attrs

742 filterAttrs attrs

920

743

921− Link _ attrs _ ->

922− filterAttrs attrs

923−

924 Row attrs _ ->

744 Row attrs _ ->

925 filterAttrs attrs

745 filterAttrs attrs

926

746

tests-rendering/src/Testable/Element.elm+245−832

@@ -10,7 +10,6 @@ module Testable.Element exposing

10 , below

11 , centerX

12 , centerY

13− , clip

14 , column

13 , column

15 , el

14 , el

16 , expectRoundedEquality

15 , expectRoundedEquality

@@ -21,12 +20,9 @@ module Testable.Element exposing

21 , isVisible

20 , isVisible

22 , label

21 , label

23 , layout

22 , layout

24− , link

25 , maximum

23 , maximum

26 , minimum

24 , minimum

27 , moveDown

25 , moveDown

28− , moveLeft

29− , moveRight

30 , moveUp

26 , moveUp

31 , none

27 , none

32 , onLeft

28 , onLeft

@@ -38,14 +34,10 @@ module Testable.Element exposing

38 , rgb

34 , rgb

39 , rgba

35 , rgba

40 , row

36 , row

41− , scrollbarX

42− , scrollbarY

43− , scrollbars

44 , shrink

37 , shrink

45 , spacing

38 , spacing

46 , text

39 , text

47 , textColumn

40 , textColumn

48− , toProgram

49 , transparent

41 , transparent

50 , width

42 , width

51 )

43 )

@@ -64,21 +56,17 @@ In order to run the test:

65import Dict

57import Dict

66import Element

58import Element

59+import Expect

67import Html.Attributes

60import Html.Attributes

68import Testable

61import Testable

69import Testable.Runner

62import Testable.Runner

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

80layout attrs elem =

66layout attrs elem =

81− Testable.Runner.testable "Test" elem

67+ Testable.Runner.program

68+ [ ( "Open Case", elem )

69+ ]

84text : String -> Testable.Element msg

72text : String -> Testable.Element msg

@@ -87,18 +75,18 @@ text =

89el : List (Testable.Attr msg) -> Testable.Element msg -> Testable.Element msg

77el : List (Testable.Attr msg) -> Testable.Element msg -> Testable.Element msg

90−el attrs =

78+el =

91− Testable.El (implicitWidthHeightShrink attrs)

79+ Testable.El

94row : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

82row : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

95−row attrs =

83+row =

96− Testable.Row (implicitWidthHeightShrink attrs)

84+ Testable.Row

99column : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

87column : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

100−column attrs =

88+column =

101− Testable.Column (implicitWidthHeightShrink attrs)

89+ Testable.Column

102

103

104none : Testable.Element msg

92none : Testable.Element msg

@@ -107,66 +95,13 @@ none =

107

108

109paragraph : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

97paragraph : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

110−paragraph attrs =

98+paragraph =

111− let

112− withImplicits =

113− implicitTest (widthHelper Nothing Nothing (Fill 1))

114− :: implicitTest (heightHelper Nothing Nothing Shrink)

115− :: attrs

116− in

117− Testable.Paragraph (skipOverridden withImplicits)

99+ Testable.Paragraph

118

100

119

101

120textColumn : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

102textColumn : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg

121−textColumn attrs =

103+textColumn =

122− let

123− withImplicits =

124− implicitTest (widthHelper (Just 500) (Just 750) (Fill 1))

125− :: implicitTest (heightHelper Nothing Nothing Shrink)

126− :: attrs

127− in

128− Testable.TextColumn (skipOverridden withImplicits)

104+ Testable.TextColumn

129−

130−

131−link :

132− List (Testable.Attr msg)

133− ->

134− { url : String

135− , label : Testable.Element msg

136− }

137− -> Testable.Element msg

138−link attrs details =

139− Testable.Link details.url

140− (implicitWidthHeightShrink attrs)

141− details.label

142−

143−

144−clip =

145− Testable.Attr Element.clip

146−

147−

148−{-| -}

149−scrollbars : Testable.Attr msg

150−scrollbars =

151− Testable.Attr Element.scrollbars

152−

153−

154−{-| -}

155−scrollbarY : Testable.Attr msg

156−scrollbarY =

157− Testable.Attr Element.scrollbarY

158−

159−

160−{-| -}

161−scrollbarX : Testable.Attr msg

162−scrollbarX =

163− Testable.Attr Element.scrollbarX

164−

165−

166−{-| Old labeling mechanism that i removed to hastily

167−-}

168−label str =

169− Testable.Batch []

170

105

171

106

172moveUp x =

107moveUp x =

@@ -177,14 +112,6 @@ moveDown x =

177 Testable.Attr (Element.moveDown x)

112 Testable.Attr (Element.moveDown x)

178

113

179

114

180−moveRight x =

181− Testable.Attr (Element.moveRight x)

182−

183−

184−moveLeft x =

185− Testable.Attr (Element.moveLeft x)

186−

187−

188type Length

115type Length

189 = Px Int

116 = Px Int

190 | Fill Int

117 | Fill Int

@@ -229,6 +156,11 @@ fillPortion =

229 Fill

156 Fill

230

157

231

158

159+label : String -> Testable.Attr msg

160+label =

161+ Testable.Label

162+

163+

232transparent : Bool -> Testable.Attr msg

164transparent : Bool -> Testable.Attr msg

233transparent on =

165transparent on =

234 Testable.LabeledTest

166 Testable.LabeledTest

@@ -239,9 +171,8 @@ transparent on =

239 else

171 else

240 "opaque"

172 "opaque"

241 , attr = Element.transparent on

173 , attr = Element.transparent on

242− , id = Testable.NoId

243 , test =

174 , test =

244− \context ->

175+ \context _ ->

245 let

176 let

246 selfTransparency =

177 selfTransparency =

247 context.self.style

178 context.self.style

@@ -255,19 +186,19 @@ transparent on =

255 else

186 else

256 "1"

187 "1"

257 in

188 in

258− [ Testable.equal value selfTransparency ]

189+ Expect.equal value selfTransparency

259 }

190 }

260

191

261

192

262{-| -}

193{-| -}

263isVisible : Testable.Attr msg

194isVisible : Testable.Attr msg

264isVisible =

195isVisible =

265− Testable.AttrTest

196+ Testable.LabeledTest

266 { label = "is-visible"

197 { label = "is-visible"

267− , id = Testable.NoId

198+ , attr = Element.htmlAttribute (Html.Attributes.style "not" "applicable")

268 , test =

199 , test =

269− \context ->

200+ \context _ ->

270− [ Testable.equal context.self.isVisible True ]

201+ Expect.equal context.self.isVisible True

271 }

202 }

272

203

273

204

@@ -277,16 +208,15 @@ alpha a =

277 Testable.LabeledTest

208 Testable.LabeledTest

278 { label = "alpha-" ++ String.fromFloat a

209 { label = "alpha-" ++ String.fromFloat a

279 , attr = Element.alpha a

210 , attr = Element.alpha a

280− , id = Testable.NoId

281 , test =

211 , test =

282− \context ->

212+ \context _ ->

283 let

213 let

284 selfTransparency =

214 selfTransparency =

285 context.self.style

215 context.self.style

286 |> Dict.get "opacity"

216 |> Dict.get "opacity"

287 |> Maybe.withDefault "notfound"

217 |> Maybe.withDefault "notfound"

288 in

218 in

289− [ Testable.equal (String.fromFloat a) selfTransparency ]

219+ Expect.equal (String.fromFloat a) selfTransparency

290 }

220 }

291

221

292

222

@@ -296,10 +226,9 @@ padding pad =

296 Testable.LabeledTest

226 Testable.LabeledTest

297 { label = "padding " ++ String.fromInt pad

227 { label = "padding " ++ String.fromInt pad

298 , attr = Element.padding pad

228 , attr = Element.padding pad

299− , id = Testable.NoId

300 , test =

229 , test =

301− \found ->

230+ \found _ ->

302− [ Testable.true ("Padding " ++ String.fromInt pad ++ " is present")

231+ Expect.true ("Padding " ++ String.fromInt pad ++ " is present")

303 (List.all ((==) pad)

232 (List.all ((==) pad)

304 [ floor found.self.bbox.padding.left

233 [ floor found.self.bbox.padding.left

305 , floor found.self.bbox.padding.right

234 , floor found.self.bbox.padding.right

@@ -307,7 +236,6 @@ padding pad =

307 , floor found.self.bbox.padding.bottom

236 , floor found.self.bbox.padding.bottom

308 ]

237 ]

309 )

238 )

310− ]

311 }

239 }

312

240

313

241

@@ -317,10 +245,9 @@ paddingXY x y =

317 Testable.LabeledTest

245 Testable.LabeledTest

318 { label = "paddingXY " ++ String.fromInt x ++ ", " ++ String.fromInt y

246 { label = "paddingXY " ++ String.fromInt x ++ ", " ++ String.fromInt y

319 , attr = Element.paddingXY x y

247 , attr = Element.paddingXY x y

320− , id = Testable.NoId

321 , test =

248 , test =

322− \found ->

249+ \found _ ->

323− [ Testable.true ("PaddingXY (" ++ String.fromInt x ++ ", " ++ String.fromInt y ++ ") is present")

250+ Expect.true ("PaddingXY (" ++ String.fromInt x ++ ", " ++ String.fromInt y ++ ") is present")

324 (List.all ((==) x)

251 (List.all ((==) x)

325 [ floor found.self.bbox.padding.left

252 [ floor found.self.bbox.padding.left

326 , floor found.self.bbox.padding.right

253 , floor found.self.bbox.padding.right

@@ -330,15 +257,9 @@ paddingXY x y =

330 , floor found.self.bbox.padding.bottom

257 , floor found.self.bbox.padding.bottom

331 ]

258 ]

332 )

259 )

333− ]

334 }

260 }

335

261

336

262

337−listIf ls =

338− List.filter Tuple.first ls

339− |> List.map Tuple.second

340−

341−

342widthHelper maybeMin maybeMax len =

263widthHelper maybeMin maybeMax len =

343 let

264 let

344 addMin l =

265 addMin l =

@@ -398,7 +319,6 @@ widthHelper maybeMin maybeMax len =

398 -- Pixel values should ignore min and max?

319 -- Pixel values should ignore min and max?

399 Testable.LabeledTest

320 Testable.LabeledTest

400 { label = "width " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel

321 { label = "width " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel

401− , id = Testable.IsWidth

402 , attr =

322 , attr =

403 Element.width

323 Element.width

404 (Element.px val

324 (Element.px val

@@ -406,24 +326,18 @@ widthHelper maybeMin maybeMax len =

406 |> addMax

326 |> addMax

407 )

327 )

408 , test =

328 , test =

409− \found ->

329+ \found _ ->

410− [ expectRoundedEquality

330+ Expect.all

411− { expected = toFloat val

331+ [ \_ ->

412− , found = found.self.bbox.width

332+ Expect.true "exact width is exact" (floor found.self.bbox.width == val)

413− }

414− , Testable.true "min/max is upheld" (minMaxTest (floor found.self.bbox.width))

333+ , \_ -> Expect.true "min/max is upheld" (minMaxTest (floor found.self.bbox.width))

415− ]

334+ ]

335+ ()

416 }

336 }

417

337

418 Fill portion ->

338 Fill portion ->

419 Testable.LabeledTest

339 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

340+ { label = "width fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel

426− , id = Testable.IsWidth

427 , attr =

341 , attr =

428 Element.width

342 Element.width

429 (Element.fillPortion portion

343 (Element.fillPortion portion

@@ -431,102 +345,41 @@ widthHelper maybeMin maybeMax len =

431 |> addMax

345 |> addMax

432 )

346 )

433 , test =

347 , test =

434− \context ->

348+ \context _ ->

435− if List.member context.parentLayout [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then

349+ if List.member context.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then

436− [ Testable.true "width fill doesn't apply to onright/onleft elements" True ]

350+ Expect.true "width fill doesn't apply to onright/onleft elements" True

437

351

438 else

352 else

439 let

353 let

440 parentAvailableWidth =

354 parentAvailableWidth =

441 context.parent.bbox.width - (context.self.bbox.padding.left + context.self.bbox.padding.right)

355 context.parent.bbox.width - (context.self.bbox.padding.left + context.self.bbox.padding.right)

442 in

356 in

443− List.concat

444− [ case context.parentLayout of

357+ case context.location of

445− Testable.IsNearby _ ->

358+ Testable.IsNearby _ ->

446− [ Testable.true "Nearby Element has fill width"

359+ Expect.true "Nearby Element has fill width"

447− ((floor context.parent.bbox.width == floor context.self.bbox.width)

360+ ((floor context.parent.bbox.width == floor context.self.bbox.width)

448− || minMaxTest (floor context.self.bbox.width)

361+ || minMaxTest (floor context.self.bbox.width)

449− )

362+ )

450− ]

363+

451−

452− Testable.InColumn ->

364+ Testable.InColumn ->

453− [ Testable.true "Element within column has fill width"

365+ Expect.true "Element within column has fill width"

454− ((floor parentAvailableWidth == floor context.self.bbox.width)

366+ ((floor parentAvailableWidth == floor context.self.bbox.width)

455− || minMaxTest (floor context.self.bbox.width)

367+ || minMaxTest (floor context.self.bbox.width)

456− )

368+ )

457− ]

369+

458−

459− Testable.InEl ->

370+ Testable.InEl ->

460− [ Testable.true "Element within element has fill width" <|

371+ Expect.true "Element within element has fill width" <|

461− (floor parentAvailableWidth == floor context.self.bbox.width)

372+ (floor parentAvailableWidth == floor context.self.bbox.width)

462− || minMaxTest (floor context.self.bbox.width)

373+ || minMaxTest (floor context.self.bbox.width)

463− ]

374+

464−

465− _ ->

375+ _ ->

466− let

376+ let

467− spacePerPortion =

377+ spacePerPortion =

468− parentAvailableWidth / toFloat (List.length context.siblings + 1)

378+ parentAvailableWidth / toFloat (List.length context.siblings + 1)

469− in

379+ in

470− [ Testable.true "element has fill width" <|

380+ Expect.true "element has fill width" <|

471− (floor spacePerPortion == floor context.self.bbox.width)

381+ (floor spacePerPortion == floor context.self.bbox.width)

472− || minMaxTest (floor context.self.bbox.width)

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

530 }

383 }

531

384

532 Shrink ->

385 Shrink ->

@@ -538,211 +391,33 @@ widthHelper maybeMin maybeMax len =

538 |> addMin

391 |> addMin

539 |> addMax

392 |> addMax

540 )

393 )

541− , id = Testable.IsWidth

542 , test =

394 , test =

543− \context ->

395+ \context _ ->

544− case context.selfElement of

545− Testable.El _ _ ->

546− let

396+ let

547− childWidth child =

397+ childWidth child =

398+ -- TODO: add margin values to widths

548− child.bbox.width

399+ child.bbox.width

549−

400+

550− totalChildren =

401+ totalChildren =

551− context.children

402+ context.children

552− |> List.map childWidth

403+ |> List.map childWidth

553− |> List.append (List.map .width context.self.textMetrics)

554− |> List.sum

404+ |> List.sum

555−

405+

556− horizontalPadding =

406+ horizontalPadding =

557− context.self.bbox.padding.left + context.self.bbox.padding.right

407+ context.self.bbox.padding.left + context.self.bbox.padding.right

558− in

408+

559− listIf

409+ spacingValue =

560− [ ( (context.parentLayout /= Testable.InParagraph)

410+ toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)

561− && (context.parentLayout /= Testable.InTextCol)

411+ in

562− , Testable.rounded "equals children"

412+ if totalChildren == 0 then

563− { expected = totalChildren + horizontalPadding

413+ -- TODO: The issue is that we have a hard time measuring `text` elements

564− , found = context.self.bbox.width

414+ -- So if a element has a text child, then it's width isn't going to show up in the system.

565− }

566− )

567− , ( context.parentLayout /= Testable.AtRoot

568− , Testable.lessThanOrEqual "not larger than parent"

569− context.self.bbox.width

415+ expectRoundedEquality context.self.bbox.width context.self.bbox.width

570− context.parent.bbox.width

571− )

572− ]

573

416

574− Testable.Link _ _ _ ->

417+ else

575− let

418+ -- This fails if this element is actually a column

576− childWidth child =

419+ -- So we need to capture what this element is in order to do this calculation.

577− child.bbox.width

420+ expectRoundedEquality (totalChildren + horizontalPadding + spacingValue) context.self.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− []

746 }

421 }

747

422

748

423

@@ -811,16 +486,17 @@ heightHelper maybeMin maybeMax len =

811 |> addMin

486 |> addMin

812 |> addMax

487 |> addMax

813 )

488 )

814− , id = Testable.IsHeight

815 , test =

489 , test =

816− \found ->

490+ \found _ ->

817− [ expectRoundedEquality

491+ Expect.all

818− { expected = toFloat val

492+ [ \_ ->

819− , found = found.self.bbox.height

493+ Expect.true ("exact height is exact: " ++ String.fromInt (floor found.self.bbox.height) ++ "," ++ String.fromInt val)

820− }

494+ (floor found.self.bbox.height == val)

821− , Testable.true "min/max holds true"

495+ , \_ ->

822− (minMaxTest (floor found.self.bbox.height))

496+ Expect.true "min/max holds true"

823− ]

497+ (minMaxTest (floor found.self.bbox.height))

498+ ]

499+ ()

824 }

500 }

825

501

826 Fill portion ->

502 Fill portion ->

@@ -832,32 +508,31 @@ heightHelper maybeMin maybeMax len =

832 |> addMin

508 |> addMin

833 |> addMax

509 |> addMax

834 )

510 )

835− , id = Testable.IsHeight

836 , test =

511 , test =

837− \context ->

512+ \context _ ->

838− [ if List.member context.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

513+ if List.member context.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

839− Testable.true "height fill doesn't apply to above/below elements" True

514+ Expect.true "height fill doesn't apply to above/below elements" True

840

515

841− else

516+ else

842 let

517 let

843 parentAvailableHeight =

518 parentAvailableHeight =

844 context.parent.bbox.height - (context.self.bbox.padding.top + context.self.bbox.padding.bottom)

519 context.parent.bbox.height - (context.self.bbox.padding.top + context.self.bbox.padding.bottom)

845 in

520 in

846− case context.parentLayout of

521+ case context.location of

847 Testable.IsNearby _ ->

522 Testable.IsNearby _ ->

848− Testable.true "Nearby Element has fill height"

523+ Expect.true "Nearby Element has fill height"

849 ((floor context.parent.bbox.height == floor context.self.bbox.height)

524 ((floor context.parent.bbox.height == floor context.self.bbox.height)

850 || minMaxTest (floor context.self.bbox.height)

525 || minMaxTest (floor context.self.bbox.height)

851 )

526 )

852

527

853 Testable.InColumn ->

528 Testable.InColumn ->

854− Testable.true "Element within column has fill height"

529+ Expect.true "Element within column has fill height"

855 ((floor parentAvailableHeight == floor context.self.bbox.height)

530 ((floor parentAvailableHeight == floor context.self.bbox.height)

856 || minMaxTest (floor context.self.bbox.height)

531 || minMaxTest (floor context.self.bbox.height)

857 )

532 )

858

533

859 Testable.InEl ->

534 Testable.InEl ->

860− Testable.true "Element within el has fill height" <|

535+ Expect.true "Element within el has fill height" <|

861 (floor parentAvailableHeight == floor context.self.bbox.height)

536 (floor parentAvailableHeight == floor context.self.bbox.height)

862 || minMaxTest (floor context.self.bbox.height)

537 || minMaxTest (floor context.self.bbox.height)

863

538

@@ -866,10 +541,9 @@ heightHelper maybeMin maybeMax len =

866 spacePerPortion =

541 spacePerPortion =

867 parentAvailableHeight / toFloat (List.length context.siblings + 1)

542 parentAvailableHeight / toFloat (List.length context.siblings + 1)

868 in

543 in

869− Testable.true "el has fill height" <|

544+ Expect.true "el has fill height" <|

870 (floor spacePerPortion == floor context.self.bbox.height)

545 (floor spacePerPortion == floor context.self.bbox.height)

871 || minMaxTest (floor context.self.bbox.height)

546 || minMaxTest (floor context.self.bbox.height)

872− ]

873 }

547 }

874

548

875 Shrink ->

549 Shrink ->

@@ -881,134 +555,33 @@ heightHelper maybeMin maybeMax len =

881 |> addMin

555 |> addMin

882 |> addMax

556 |> addMax

883 )

557 )

884− , id = Testable.IsHeight

885 , test =

558 , test =

886− \context ->

559+ \context _ ->

887− case context.selfElement of

560+ let

888− Testable.El _ _ ->

561+ childWidth child =

889− let

562+ -- TODO: add margin values to heights

890− childHeight child =

563+ child.bbox.height

891− child.bbox.height

564+

892− in

565+ totalChildren =

893− if List.isEmpty context.children then

566+ context.children

894− -- context.self.textMetrics

567+ |> List.map childWidth

895− -- |> List.map Testable.textHeight

568+ |> List.sum

896− -- |> List.sum

569+

897− -- TODO: apparently the font metrics we have are for the literal characters rendered

570+ verticalPadding =

898− -- not for the font itself.

571+ context.self.bbox.padding.top + context.self.bbox.padding.bottom

899− [ Testable.todo "calculate height from actual text metrics"

572+

900− ]

573+ spacingValue =

901−

574+ toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)

902− else

575+ in

903− [ expectRoundedEquality

576+ if totalChildren == 0 then

904− { expected =

577+ -- TODO: The issue is that we have a hard time measuring `text` elements

905− context.children

578+ -- So if a element has a text child, then it's height isn't going to show up in the system.

906− |> List.map childHeight

579+ expectRoundedEquality context.self.bbox.height context.self.bbox.height

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

971

580

972− Testable.Column colAttrs _ ->

581+ else

973− let

582+ -- This fails if this element is actually a column

974− childHeight child =

583+ -- So we need to capture what this element is in order to do this calculation.

975− child.bbox.height

584+ expectRoundedEquality (totalChildren + verticalPadding + spacingValue) context.self.bbox.height

976−

977− totalChildren =

978− context.children

979− |> List.map childHeight

980− |> List.append (List.map Testable.textHeight context.self.textMetrics)

981− |> List.sum

982−

983− verticalPadding =

984− context.self.bbox.padding.top + context.self.bbox.padding.bottom

985−

986− spacingAmount =

987− Testable.getSpacingFromAttributes colAttrs

988−

989− totalSpacing =

990− toFloat spacingAmount * (toFloat (List.length context.children) - 1)

991− in

992− [ expectRoundedEquality

993− { expected = totalChildren + verticalPadding + totalSpacing

994− , found = context.self.bbox.height

995− }

996− , Testable.lessThanOrEqual "not larger than parent"

997− context.self.bbox.height

998− context.parent.bbox.height

999− ]

1000−

1001− Testable.TextColumn _ _ ->

1002− []

1003−

1004− Testable.Paragraph _ _ ->

1005− []

1006−

1007− Testable.Text _ ->

1008− []

1009−

1010− Testable.Empty ->

1011− []

1012 }

585 }

1013

586

1014

587

@@ -1029,9 +602,8 @@ spacing space =

1029 , Testable.LabeledTest

602 , Testable.LabeledTest

1030 { label = "spacing: " ++ String.fromInt space

603 { label = "spacing: " ++ String.fromInt space

1031 , attr = Element.spacing space

604 , attr = Element.spacing space

1032− , id = Testable.NoId

1033 , test =

605 , test =

1034− \found ->

606+ \found _ ->

1035 let

607 let

1036 findDistance child total =

608 findDistance child total =

1037 List.concatMap

609 List.concatMap

@@ -1077,7 +649,7 @@ spacing space =

1077 []

649 []

1078 distances

650 distances

1079 in

651 in

1080− [ Testable.true

652+ Expect.true

1081 ("All children are at least "

653 ("All children are at least "

1082 ++ String.fromInt space

654 ++ String.fromInt space

1083 ++ " pixels apart."

655 ++ " pixels apart."

@@ -1085,7 +657,6 @@ spacing space =

1085 ++ " are not though"

657 ++ " are not though"

1086 )

658 )

1087 (allAreSpaced == [])

659 (allAreSpaced == [])

1088− ]

1089 }

660 }

1090 ]

661 ]

1091

662

@@ -1108,33 +679,30 @@ alignLeft =

1108 Testable.LabeledTest

679 Testable.LabeledTest

1109 { label = "alignLeft"

680 { label = "alignLeft"

1110 , attr = Element.alignLeft

681 , attr = Element.alignLeft

1111− , id = Testable.NoId

1112 , test =

682 , test =

1113− \found ->

683+ \found _ ->

1114− [ if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

684+ if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

1115− Testable.true "alignLeft doesn't apply to elements that are onLeft or onRight" True

685+ Expect.true "alignLeft doesn't apply to elements that are onLeft or onRight" True

1116

686

1117− else if

687+ else if

1118− List.member found.parentLayout

688+ List.member found.location

1119 [ Testable.IsNearby Testable.InFront

689 [ Testable.IsNearby Testable.InFront

1120 , Testable.IsNearby Testable.Behind

690 , Testable.IsNearby Testable.Behind

1121 , Testable.IsNearby Testable.Above

691 , Testable.IsNearby Testable.Above

1122 , Testable.IsNearby Testable.Below

692 , Testable.IsNearby Testable.Below

1123 ]

693 ]

1124− then

694+ then

1125 expectRoundedEquality

695 expectRoundedEquality

1126− { found = found.self.bbox.left

696+ found.self.bbox.left

1127− , expected = found.parent.bbox.left

697+ found.parent.bbox.left

1128− }

1129

698

1130− else if List.length found.siblings == 0 then

699+ else if List.length found.siblings == 0 then

1131 expectRoundedEquality

700 expectRoundedEquality

1132− { found = found.self.bbox.left

701+ found.self.bbox.left

1133− , expected = found.parent.bbox.left + found.parent.bbox.padding.left

702+ (found.parent.bbox.left + found.parent.bbox.padding.left)

1134− }

1135

703

1136− else

704+ else

1137− case found.parentLayout of

705+ case found.location of

1138 Testable.InRow ->

706 Testable.InRow ->

1139 let

707 let

1140 siblingsOnLeft =

708 siblingsOnLeft =

@@ -1149,16 +717,13 @@ alignLeft =

1149 |> List.sum

717 |> List.sum

1150 in

718 in

1151 expectRoundedEquality

719 expectRoundedEquality

1152− { found = found.self.bbox.left

720+ found.self.bbox.left

1153− , expected = found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings)

721+ (found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings))

1154− }

1155

722

1156 _ ->

723 _ ->

1157 expectRoundedEquality

724 expectRoundedEquality

1158− { found = found.self.bbox.left

725+ found.self.bbox.left

1159− , expected = found.parent.bbox.left + found.parent.bbox.padding.left

726+ (found.parent.bbox.left + found.parent.bbox.padding.left)

1160− }

1161− ]

1162 }

727 }

1163

728

1164

729

@@ -1168,9 +733,8 @@ centerX =

1168 Testable.LabeledTest

733 Testable.LabeledTest

1169 { label = "centerX"

734 { label = "centerX"

1170 , attr = Element.centerX

735 , attr = Element.centerX

1171− , id = Testable.NoId

1172 , test =

736 , test =

1173− \found ->

737+ \found _ ->

1174 let

738 let

1175 selfCenter : Float

739 selfCenter : Float

1176 selfCenter =

740 selfCenter =

@@ -1180,18 +744,16 @@ centerX =

1180 parentCenter =

744 parentCenter =

1181 found.parent.bbox.left + (found.parent.bbox.width / 2)

745 found.parent.bbox.left + (found.parent.bbox.width / 2)

1182 in

746 in

1183− if List.member found.parentLayout [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then

747+ if List.member found.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then

1184− [ Testable.true "centerX doesn't apply to elements that are onLeft or onRight" True ]

748+ Expect.true "centerX doesn't apply to elements that are onLeft or onRight" True

1185

749

1186 else if List.length found.siblings == 0 then

750 else if List.length found.siblings == 0 then

1187− [ expectRoundedEquality

751+ expectRoundedEquality

1188− { found = selfCenter

752+ selfCenter

1189− , expected = parentCenter

753+ parentCenter

1190− }

1191− ]

1192

754

1193 else

755 else

1194− case found.parentLayout of

756+ case found.location of

1195 Testable.InRow ->

757 Testable.InRow ->

1196 let

758 let

1197 siblingsOnLeft =

759 siblingsOnLeft =

@@ -1221,18 +783,12 @@ centerX =

1221 / 2

783 / 2

1222 )

784 )

1223 in

785 in

1224− [ expectRoundedEquality

786+ expectRoundedEquality

1225− { found = selfCenter

787+ selfCenter

1226− , expected = expectedCenter

788+ expectedCenter

1227− }

1228− ]

1229

789

1230 _ ->

790 _ ->

1231− [ expectRoundedEquality

791+ expectRoundedEquality selfCenter parentCenter

1232− { found = selfCenter

1233− , expected = parentCenter

1234− }

1235− ]

1236 }

792 }

1237

793

1238

794

@@ -1242,35 +798,30 @@ alignRight =

1242 Testable.LabeledTest

798 Testable.LabeledTest

1243 { label = "alignRight"

799 { label = "alignRight"

1244 , attr = Element.alignRight

800 , attr = Element.alignRight

1245− , id = Testable.NoId

1246 , test =

801 , test =

1247− \found ->

802+ \found _ ->

1248− if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

803+ if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

1249− [ Testable.true "alignRight doesn't apply to elements that are onLeft or onRight" True ]

804+ Expect.true "alignRight doesn't apply to elements that are onLeft or onRight" True

1250

805

1251 else if

806 else if

1252− List.member found.parentLayout

807+ List.member found.location

1253 [ Testable.IsNearby Testable.InFront

808 [ Testable.IsNearby Testable.InFront

1254 , Testable.IsNearby Testable.Behind

809 , Testable.IsNearby Testable.Behind

1255 , Testable.IsNearby Testable.Above

810 , Testable.IsNearby Testable.Above

1256 , Testable.IsNearby Testable.Below

811 , Testable.IsNearby Testable.Below

1257 ]

812 ]

1258 then

813 then

1259− [ expectRoundedEquality

814+ expectRoundedEquality

1260− { found = found.self.bbox.right

815+ found.self.bbox.right

1261− , expected = found.parent.bbox.right

816+ found.parent.bbox.right

1262− }

1263− ]

1264

817

1265 else if List.length found.siblings == 0 then

818 else if List.length found.siblings == 0 then

1266− [ expectRoundedEquality

819+ expectRoundedEquality

1267− { found = found.self.bbox.right

820+ found.self.bbox.right

1268− , expected = found.parent.bbox.right + found.parent.bbox.padding.right

821+ (found.parent.bbox.right + found.parent.bbox.padding.right)

1269− }

1270− ]

1271

822

1272 else

823 else

1273− case found.parentLayout of

824+ case found.location of

1274 Testable.InRow ->

825 Testable.InRow ->

1275 let

826 let

1276 siblingsOnRight =

827 siblingsOnRight =

@@ -1284,18 +835,14 @@ alignRight =

1284 |> List.map (.width << .bbox)

835 |> List.map (.width << .bbox)

1285 |> List.sum

836 |> List.sum

1286 in

837 in

1287− [ expectRoundedEquality

838+ expectRoundedEquality

1288− { found = found.self.bbox.right

839+ found.self.bbox.right

1289− , expected = found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings)

840+ (found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings))

1290− }

1291− ]

1292

841

1293 _ ->

842 _ ->

1294− [ expectRoundedEquality

843+ expectRoundedEquality

1295− { found = found.self.bbox.right

844+ found.self.bbox.right

1296− , expected = found.parent.bbox.right + found.parent.bbox.padding.right

845+ (found.parent.bbox.right + found.parent.bbox.padding.right)

1297− }

1298− ]

1299 }

846 }

1300

847

1301

848

@@ -1305,35 +852,30 @@ alignTop =

1305 Testable.LabeledTest

852 Testable.LabeledTest

1306 { label = "alignTop"

853 { label = "alignTop"

1307 , attr = Element.alignTop

854 , attr = Element.alignTop

1308− , id = Testable.NoId

1309 , test =

855 , test =

1310− \found ->

856+ \found _ ->

1311− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

857+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

1312− [ Testable.true "alignTop doesn't apply to elements that are above or below" True ]

858+ Expect.true "alignTop doesn't apply to elements that are above or below" True

1313

859

1314 else if

860 else if

1315− List.member found.parentLayout

861+ List.member found.location

1316 [ Testable.IsNearby Testable.InFront

862 [ Testable.IsNearby Testable.InFront

1317 , Testable.IsNearby Testable.Behind

863 , Testable.IsNearby Testable.Behind

1318 , Testable.IsNearby Testable.OnRight

864 , Testable.IsNearby Testable.OnRight

1319 , Testable.IsNearby Testable.OnLeft

865 , Testable.IsNearby Testable.OnLeft

1320 ]

866 ]

1321 then

867 then

1322− [ expectRoundedEquality

868+ expectRoundedEquality

1323− { found = found.self.bbox.top

869+ found.self.bbox.top

1324− , expected = found.parent.bbox.top

870+ found.parent.bbox.top

1325− }

1326− ]

1327

871

1328 else if List.length found.siblings == 0 then

872 else if List.length found.siblings == 0 then

1329− [ expectRoundedEquality

873+ expectRoundedEquality

1330− { found = found.self.bbox.top

874+ found.self.bbox.top

1331− , expected = found.parent.bbox.top + found.parent.bbox.padding.top

875+ (found.parent.bbox.top + found.parent.bbox.padding.top)

1332− }

1333− ]

1334

876

1335 else

877 else

1336− case found.parentLayout of

878+ case found.location of

1337 Testable.InColumn ->

879 Testable.InColumn ->

1338 let

880 let

1339 siblingsAbove =

881 siblingsAbove =

@@ -1347,18 +889,14 @@ alignTop =

1347 |> List.map (.height << .bbox)

889 |> List.map (.height << .bbox)

1348 |> List.sum

890 |> List.sum

1349 in

891 in

1350− [ expectRoundedEquality

892+ expectRoundedEquality

1351− { found = found.self.bbox.top

893+ found.self.bbox.top

1352− , expected = found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings)

894+ (found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings))

1353− }

1354− ]

1355

895

1356 _ ->

896 _ ->

1357− [ expectRoundedEquality

897+ expectRoundedEquality

1358− { found = found.self.bbox.top

898+ found.self.bbox.top

1359− , expected = found.parent.bbox.top

899+ found.parent.bbox.top

1360− }

1361− ]

1362 }

900 }

1363

901

1364

902

@@ -1368,35 +906,30 @@ alignBottom =

1368 Testable.LabeledTest

906 Testable.LabeledTest

1369 { label = "alignBottom"

907 { label = "alignBottom"

1370 , attr = Element.alignBottom

908 , attr = Element.alignBottom

1371− , id = Testable.NoId

1372 , test =

909 , test =

1373− \found ->

910+ \found _ ->

1374− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

911+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

1375− [ Testable.true "alignBottom doesn't apply to elements that are above or below" True ]

912+ Expect.true "alignBottom doesn't apply to elements that are above or below" True

1376

913

1377 else if

914 else if

1378− List.member found.parentLayout

915+ List.member found.location

1379 [ Testable.IsNearby Testable.InFront

916 [ Testable.IsNearby Testable.InFront

1380 , Testable.IsNearby Testable.Behind

917 , Testable.IsNearby Testable.Behind

1381 , Testable.IsNearby Testable.OnRight

918 , Testable.IsNearby Testable.OnRight

1382 , Testable.IsNearby Testable.OnLeft

919 , Testable.IsNearby Testable.OnLeft

1383 ]

920 ]

1384 then

921 then

1385− [ expectRoundedEquality

922+ expectRoundedEquality

1386− { found = found.self.bbox.bottom

923+ found.self.bbox.bottom

1387− , expected = found.parent.bbox.bottom

924+ found.parent.bbox.bottom

1388− }

1389− ]

1390

925

1391 else if List.length found.siblings == 0 then

926 else if List.length found.siblings == 0 then

1392− [ expectRoundedEquality

927+ expectRoundedEquality

1393− { found = found.self.bbox.bottom

928+ found.self.bbox.bottom

1394− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom

929+ (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)

1395− }

1396− ]

1397

930

1398 else

931 else

1399− case found.parentLayout of

932+ case found.location of

1400 Testable.InColumn ->

933 Testable.InColumn ->

1401 let

934 let

1402 siblingsBelow =

935 siblingsBelow =

@@ -1410,31 +943,20 @@ alignBottom =

1410 |> List.map (.height << .bbox)

943 |> List.map (.height << .bbox)

1411 |> List.sum

944 |> List.sum

1412 in

945 in

1413− [ expectRoundedEquality

946+ expectRoundedEquality

1414− { found = found.self.bbox.bottom

947+ found.self.bbox.bottom

1415− , expected = found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings)

948+ (found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings))

1416− }

1417− ]

1418

949

1419 _ ->

950 _ ->

1420− [ expectRoundedEquality

951+ expectRoundedEquality

1421− { found = found.self.bbox.bottom

952+ found.self.bbox.bottom

1422− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom

953+ (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)

1423− }

1424− ]

1425 }

954 }

1426

955

1427

956

1428−expectRoundedEquality : { expected : Float, found : Float } -> Testable.LayoutExpectation

957+expectRoundedEquality x y =

1429−expectRoundedEquality { expected, found } =

958+ Expect.true ("within 1 of each other " ++ String.fromFloat x ++ ":" ++ String.fromFloat y)

1430− Testable.true

959+ (abs (x - y) < 1)

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)

1438

960

1439

961

1440{-| -}

962{-| -}

@@ -1443,9 +965,8 @@ centerY =

1443 Testable.LabeledTest

965 Testable.LabeledTest

1444 { label = "centerY"

966 { label = "centerY"

1445 , attr = Element.centerY

967 , attr = Element.centerY

1446− , id = Testable.NoId

1447 , test =

968 , test =

1448− \found ->

969+ \found _ ->

1449 let

970 let

1450 selfCenter =

971 selfCenter =

1451 found.self.bbox.top + (found.self.bbox.height / 2)

972 found.self.bbox.top + (found.self.bbox.height / 2)

@@ -1453,18 +974,16 @@ centerY =

1453 parentCenter =

974 parentCenter =

1454 found.parent.bbox.top + (found.parent.bbox.height / 2)

975 found.parent.bbox.top + (found.parent.bbox.height / 2)

1455 in

976 in

1456− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

977+ if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

1457− [ Testable.true "centerY doesn't apply to elements that are above or below" True ]

978+ Expect.true "centerY doesn't apply to elements that are above or below" True

1458

979

1459 else if List.length found.siblings == 0 then

980 else if List.length found.siblings == 0 then

1460− [ expectRoundedEquality

981+ expectRoundedEquality

1461− { found = selfCenter

982+ selfCenter

1462− , expected = parentCenter

983+ parentCenter

1463− }

1464− ]

1465

984

1466 else

985 else

1467− case found.parentLayout of

986+ case found.location of

1468 Testable.InColumn ->

987 Testable.InColumn ->

1469 let

988 let

1470 siblingsOnTop =

989 siblingsOnTop =

@@ -1494,18 +1013,12 @@ centerY =

1494 / 2

1013 / 2

1495 )

1014 )

1496 in

1015 in

1497− [ expectRoundedEquality

1016+ expectRoundedEquality

1498− { found = selfCenter

1017+ selfCenter

1499− , expected = expectedCenter

1018+ expectedCenter

1500− }

1501− ]

1502

1019

1503 _ ->

1020 _ ->

1504− [ expectRoundedEquality

1021+ expectRoundedEquality selfCenter parentCenter

1505− { found = selfCenter

1506− , expected = parentCenter

1507− }

1508− ]

1509 }

1022 }

1510

1023

1511

1024

@@ -1517,12 +1030,8 @@ above element =

1517 , element = element

1030 , element = element

1518 , label = "above"

1031 , label = "above"

1519 , test =

1032 , test =

1520− \found ->

1033+ \found _ ->

1521− [ expectRoundedEquality

1034+ expectRoundedEquality found.self.bbox.bottom found.parent.bbox.top

1522− { found = found.self.bbox.bottom

1523− , expected = found.parent.bbox.top

1524− }

1525− ]

1526 }

1035 }

1527

1036

1528

1037

@@ -1534,12 +1043,8 @@ below element =

1534 , element = element

1043 , element = element

1535 , label = "below"

1044 , label = "below"

1536 , test =

1045 , test =

1537− \found ->

1046+ \found _ ->

1538− [ expectRoundedEquality

1047+ expectRoundedEquality found.self.bbox.top found.parent.bbox.bottom

1539− { found = found.self.bbox.top

1540− , expected = found.parent.bbox.bottom

1541− }

1542− ]

1543 }

1048 }

1544

1049

1545

1050

@@ -1551,12 +1056,8 @@ onRight element =

1551 , element = element

1056 , element = element

1552 , label = "onRight"

1057 , label = "onRight"

1553 , test =

1058 , test =

1554− \found ->

1059+ \found _ ->

1555− [ expectRoundedEquality

1060+ expectRoundedEquality found.self.bbox.left found.parent.bbox.right

1556− { found = found.self.bbox.left

1557− , expected = found.parent.bbox.right

1558− }

1559− ]

1560 }

1061 }

1561

1062

1562

1063

@@ -1568,12 +1069,8 @@ onLeft element =

1568 , element = element

1069 , element = element

1569 , label = "onLeft"

1070 , label = "onLeft"

1570 , test =

1071 , test =

1571− \found ->

1072+ \found _ ->

1572− [ expectRoundedEquality

1073+ expectRoundedEquality found.self.bbox.right found.parent.bbox.left

1573− { found = found.self.bbox.right

1574− , expected = found.parent.bbox.left

1575− }

1576− ]

1577 }

1074 }

1578

1075

1579

1076

@@ -1589,12 +1086,11 @@ inFront element =

1589 , element = element

1086 , element = element

1590 , label = "inFront"

1087 , label = "inFront"

1591 , test =

1088 , test =

1592− \found ->

1089+ withinHelper

1593− [ withinHelper found ]

1594 }

1090 }

1595

1091

1596

1092

1597−withinHelper found =

1093+withinHelper found _ =

1598 let

1094 let

1599 horizontalCheck =

1095 horizontalCheck =

1600 if found.self.bbox.width > found.parent.bbox.width then

1096 if found.self.bbox.width > found.parent.bbox.width then

@@ -1618,7 +1114,7 @@ withinHelper found =

1618 , compare found.self.bbox.bottom (<=) found.parent.bbox.bottom

1114 , compare found.self.bbox.bottom (<=) found.parent.bbox.bottom

1619 ]

1115 ]

1620 in

1116 in

1621− Testable.true "within the confines of the parent"

1117+ Expect.true "within the confines of the parent"

1622 (List.all ((==) True)

1118 (List.all ((==) True)

1623 (List.concat

1119 (List.concat

1624 [ horizontalCheck

1120 [ horizontalCheck

@@ -1636,88 +1132,5 @@ behindContent element =

1636 , element = element

1132 , element = element

1637 , label = "behindContent"

1133 , label = "behindContent"

1638 , test =

1134 , test =

1639− \found ->

1135+ withinHelper

1640− [ withinHelper found ]

1641 }

1136 }

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)

5import Dict

6import Element exposing (Color)

7import Element.Background as Background

8+import Expect

8import Testable

9import Testable

11color : Color -> Testable.Attr msg

12color : Color -> Testable.Attr msg

12color clr =

13color clr =

13 Testable.LabeledTest

14 Testable.LabeledTest

14− { label = "background color"

15+ { label = "background color-" ++ Testable.formatColor clr

15 , attr = Background.color clr

16 , attr = Background.color clr

16− , id = Testable.NoId

17 , test =

18− \context ->

18+ \context _ ->

19 let

20 selfBackgroundColor =

21 context.self.style

22 |> Dict.get "background-color"

23 |> Maybe.withDefault "notfound"

24 in

25− [ Testable.true ("expected " ++ (Testable.formatColor clr ++ ", found " ++ selfBackgroundColor))

25+ Expect.true ("Expected color: " ++ (Testable.formatColor clr ++ " vs found:" ++ selfBackgroundColor))

26 (Testable.compareFormattedColor clr selfBackgroundColor)

27− ]

28 }

27 }

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)

3{-| -}

5import Dict

6import Element exposing (Color)

7import Element.Font as Font

8+import Expect

8import Testable

9import Testable

11−bold : Testable.Attr msg

12−bold =

13− Testable.Attr Font.bold

14−

15−

16color : Color -> Testable.Attr msg

12color : Color -> Testable.Attr msg

17color clr =

13color clr =

18 Testable.LabeledTest

14 Testable.LabeledTest

19 { label = "font color-" ++ Testable.formatColor clr

15 { label = "font color-" ++ Testable.formatColor clr

20 , attr = Font.color clr

16 , attr = Font.color clr

21− , id = Testable.NoId

22 , test =

17 , test =

23− \context ->

18+ \context _ ->

24 let

19 let

25 selfFontColor =

20 selfFontColor =

26 context.self.style

21 context.self.style

27 |> Dict.get "color"

22 |> Dict.get "color"

28 |> Maybe.withDefault "notfound"

23 |> Maybe.withDefault "notfound"

29 in

24 in

30− [ Testable.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfFontColor))

25+ Expect.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfFontColor))

31 (Testable.compareFormattedColor clr selfFontColor)

26 (Testable.compareFormattedColor clr selfFontColor)

32− ]

33 }

27 }

@@ -38,9 +32,8 @@ size i =

38 Testable.LabeledTest

32 Testable.LabeledTest

39 { label = "font size-" ++ String.fromInt i

33 { label = "font size-" ++ String.fromInt i

40 , attr = Font.size i

34 , attr = Font.size i

41− , id = Testable.NoId

42 , test =

35 , test =

43− \context ->

36+ \context _ ->

44 let

37 let

45 selfFontSize =

38 selfFontSize =

46 context.self.style

39 context.self.style

@@ -50,7 +43,6 @@ size i =

50 formattedInt =

43 formattedInt =

51 String.fromInt i

44 String.fromInt i

52 in

45 in

53− [ Testable.true ("Size Match - " ++ (formattedInt ++ " vs " ++ selfFontSize))

46+ Expect.true ("Size Match - " ++ (formattedInt ++ " vs " ++ selfFontSize))

54 (formattedInt == selfFontSize)

47 (formattedInt == selfFontSize)

55− ]

56 }

48 }

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

1+port module Testable.Runner exposing (Msg, TestableProgram, program, show)

2− ( Msg

3− , Testable

4− , TestableProgram

5− , program

6− , rename

7− , show

8− , testable

9− )

11{-| -}

3{-| -}

13import Browser

5import Browser

6+import Char

14import Dict exposing (Dict)

7import Dict exposing (Dict)

15import Element

8import Element

16import Element.Background as Background

9import Element.Background as Background

17import Element.Border as Border

10import Element.Border as Border

18−import Element.Events as Events

19import Element.Font as Font

11import Element.Font as Font

20import Html exposing (Html)

12import Html exposing (Html)

21−import Html.Attributes

13+import Parser exposing ((|.), (|=))

22import Process

14import Process

15+import Random

16+import Set

23import Task

17import Task

18+import Test.Runner

19+import Test.Runner.Failure as Failure

24import Testable

20import Testable

25import Time

21import Time

28show : Testable.Element msg -> Html msg

24show : Testable.Element msg -> Html msg

29show =

25show =

30− Testable.toHtml

26+ Testable.render

33type alias TestableProgram =

29type alias TestableProgram =

34 Program () (Model Msg) Msg

30 Program () (Model Msg) Msg

37−{-| This should be a real type, but I'm too busy atm.

38−-}

39−type alias Testable =

40− ( String, Testable.Element Msg )

41−

42−

43−rename : String -> Testable -> Testable

44−rename newName ( _, el ) =

45− ( newName, el )

46−

47−

48−testable : String -> Testable.Element Msg -> Testable

49−testable =

50− Tuple.pair

51−

52−

53palette =

33palette =

54 { white = Element.rgb 1 1 1

34 { white = Element.rgb 1 1 1

55 , red = Element.rgb 1 0 0

35 , red = Element.rgb 1 0 0

@@ -59,7 +39,7 @@ palette =

59 }

39 }

62−program : List Testable -> TestableProgram

42+program : List ( String, Testable.Element Msg ) -> TestableProgram

63program tests =

43program tests =

64 let

44 let

65 ( current, upcoming ) =

45 ( current, upcoming ) =

@@ -70,17 +50,15 @@ program tests =

70 cur :: remaining ->

50 cur :: remaining ->

71 ( Just cur, remaining )

51 ( Just cur, remaining )

72 in

52 in

73− Browser.element

53+ Browser.document

74 { init =

54 { init =

75 always

55 always

76 ( { current = current

56 ( { current = current

77 , upcoming = upcoming

57 , upcoming = upcoming

78 , finished = []

58 , finished = []

79− , selected = 0

80− , highlightDomId = Nothing

81 }

59 }

82 , Task.perform (always Analyze)

60 , Task.perform (always Analyze)

83− (Process.sleep 64

61+ (Process.sleep 32

84 |> Task.andThen

62 |> Task.andThen

85 (always Time.now)

63 (always Time.now)

86 )

64 )

@@ -102,54 +80,56 @@ type alias Model msg =

102 { current : Maybe ( String, Testable.Element msg )

80 { current : Maybe ( String, Testable.Element msg )

103 , upcoming : List ( String, Testable.Element msg )

81 , upcoming : List ( String, Testable.Element msg )

104 , finished : List (WithResults (Testable.Element msg))

82 , finished : List (WithResults (Testable.Element msg))

105− , selected : Int

106− , highlightDomId : Maybe String

107 }

83 }

108

109

110type alias WithResults thing =

86type alias WithResults thing =

111− { index : Int

87+ { element : thing

112− , element : thing

113 , label : String

88 , label : String

114 , results :

89 , results :

115− List Testable.LayoutTest

90+ List

91+ ( String

92+ , Maybe

93+ { given : Maybe String

94+ , description : String

95+ , reason : Failure.Reason

96+ }

97+ )

116 }

98 }

117

118

100

119−encodeForReport :

101+prepareResults :

120 List (WithResults (Testable.Element msg))

102 List (WithResults (Testable.Element msg))

121 ->

103 ->

122 List

104 List

123 { label : String

105 { label : String

124 , results :

106 , results :

125 List

107 List

126− { description : String

108+ ( String

127− , passing : Bool

109+ , Maybe

128− , todo : Bool

110+ { given : Maybe String

129− }

111+ , description : String

112+ }

113+ )

130 }

114 }

131−encodeForReport withResults =

115+prepareResults withResults =

132 let

116 let

133− prepareExpectation layoutTest exp =

117+ prepareNode ( x, maybeResult ) =

134− case exp of

118+ ( x

135− Testable.Todo description ->

119+ , case maybeResult of

136− { description = description

120+ Nothing ->

137− , passing = False

121+ Nothing

138− , todo = True

139− }

140−

141− Testable.Expect details ->

142− { description = details.description

143− , passing = details.result

144− , todo = False

145− }

146

122

147− prepareNode layoutTest =

123+ Just res ->

148− List.map (prepareExpectation layoutTest) layoutTest.expectations

124+ Just

125+ { given = res.given

126+ , description = res.description

127+ }

128+ )

149

129

150 prepare { label, results } =

130 prepare { label, results } =

151 { label = label

131 { label = label

152− , results = List.concatMap prepareNode results

132+ , results = List.map prepareNode results

153 }

133 }

154 in

134 in

155 List.map prepare withResults

135 List.map prepare withResults

@@ -158,27 +138,29 @@ encodeForReport withResults =

158type Msg

138type Msg

159 = NoOp

139 = NoOp

160 | Analyze

140 | Analyze

161− | Select Int

162− | HighlightDomID (Maybe String)

163 | RefreshBoundingBox

141 | RefreshBoundingBox

164 (List

142 (List

165 { id : String

143 { id : String

166 , bbox : Testable.BoundingBox

144 , bbox : Testable.BoundingBox

167− , style : List ( String, String )

168 , isVisible : Bool

145 , isVisible : Bool

169− , textMetrics : List Testable.TextMetrics

146+ , style : List ( String, String )

170 }

147 }

171 )

148 )

172

149

173

150

174−runTest : Int -> Dict String Testable.Found -> String -> Testable.Element msg -> WithResults (Testable.Element msg)

151+runTest : Dict String Testable.Found -> String -> Testable.Element msg -> WithResults (Testable.Element msg)

175−runTest index boxes label element =

152+runTest boxes label element =

176 let

153 let

154+ tests =

155+ Testable.toTest label boxes element

156+

157+ seed =

158+ Random.initialSeed 227852860

159+

177 results =

160 results =

178− Testable.runTests boxes element

161+ Testable.runTests seed tests

179 in

162 in

180− { index = index

163+ { element = element

181− , element = element

182 , label = label

164 , label = label

183 , results = results

165 , results = results

184 }

166 }

@@ -190,16 +172,6 @@ update msg model =

190 NoOp ->

172 NoOp ->

191 ( model, Cmd.none )

173 ( model, Cmd.none )

192

174

193− HighlightDomID newId ->

194− ( { model | highlightDomId = newId }

195− , Cmd.none

196− )

197−

198− Select index ->

199− ( { model | selected = index }

200− , Cmd.none

201− )

202−

203 RefreshBoundingBox boxes ->

175 RefreshBoundingBox boxes ->

204 case model.current of

176 case model.current of

205 Nothing ->

177 Nothing ->

@@ -214,7 +186,6 @@ update msg model =

214 , { style = Dict.fromList box.style

186 , { style = Dict.fromList box.style

215 , bbox = box.bbox

187 , bbox = box.bbox

216 , isVisible = box.isVisible

188 , isVisible = box.isVisible

217− , textMetrics = box.textMetrics

218 }

189 }

219 )

190 )

220

191

@@ -224,7 +195,7 @@ update msg model =

224 |> Dict.fromList

195 |> Dict.fromList

225

196

226 currentResults =

197 currentResults =

227− runTest (List.length model.finished) foundData label current

198+ runTest foundData label current

228 in

199 in

229 case model.upcoming of

200 case model.upcoming of

230 [] ->

201 [] ->

@@ -232,7 +203,7 @@ update msg model =

232 | current = Nothing

203 | current = Nothing

233 , finished = model.finished ++ [ currentResults ]

204 , finished = model.finished ++ [ currentResults ]

234 }

205 }

235− , report (encodeForReport (currentResults :: model.finished))

206+ , report (prepareResults (currentResults :: model.finished))

236 )

207 )

237

208

238 newCurrent :: remaining ->

209 newCurrent :: remaining ->

@@ -242,7 +213,7 @@ update msg model =

242 , upcoming = remaining

213 , upcoming = remaining

243 }

214 }

244 , Task.perform (always Analyze)

215 , Task.perform (always Analyze)

245− (Process.sleep 64

216+ (Process.sleep 32

246 |> Task.andThen

217 |> Task.andThen

247 (always Time.now)

218 (always Time.now)

248 )

219 )

@@ -261,313 +232,204 @@ update msg model =

261 )

232 )

262

233

263

234

264−view : Model Msg -> Html.Html Msg

235+view : Model Msg -> Browser.Document Msg

265view model =

236view model =

266 case model.current of

237 case model.current of

267 Nothing ->

238 Nothing ->

268 if List.isEmpty model.upcoming then

239 if List.isEmpty model.upcoming then

269− let

240+ { title = "tests finished"

270− selected =

241+ , body =

271− getByIndex model.selected model.finished

242+ [ case model.finished of

272− in

243+ [] ->

273− Element.layout

244+ Element.layout [] <|

274− [ Font.size 16

245+ Element.column

275− , Element.inFront (Element.html (viewElementHighlight model))

246+ [ Element.spacing 20

276− , Element.height Element.fill

247+ , Element.padding 20

277− ]

248+ , Element.width (Element.px 800)

278− <|

249+

279− Element.row [ Element.width Element.fill, Element.height Element.fill ]

250+ -- , Background.color Color.grey

280− [ Element.el

251+ ]

281− [ Element.width

252+ [ Element.none ]

282− (Element.fill

253+

283− |> Element.maximum 900

254+ finished :: remaining ->

284− )

255+ if False then

285− , Element.alignTop

256+ viewResultsInline finished

286− , Element.height Element.fill

257+

287− , Element.scrollbars

258+ else

288− ]

259+ Element.layout [] <|

289− (Element.el

260+ Element.column

290− [ Element.centerX

261+ [ Element.spacing 20

291− , Element.padding 100

262+ , Element.padding 20

292− , Border.dashed

263+ , Element.width (Element.px 800)

293− , Border.width 2

294− , Border.color palette.lightGrey

295− , Font.size 20

296− , Element.inFront

297− (Element.el

298− [ Font.size 14

299− , Font.color palette.lightGrey

300 ]

264 ]

301− (Element.text "test case")

265+ (List.map viewResult (finished :: remaining))

302− )

266+ ]

303− ]

267+ }

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

324

268

325 else

269 else

326− Html.text ""

270+ { title = "tests finished"

271+ , body = []

272+ }

327

273

328 Just ( label, current ) ->

274 Just ( label, current ) ->

329− Testable.toHtml current

275+ { title = "running"

330−

276+ , body =

331−

277+ [ Testable.render current ]

332−getByIndex i ls =

278+ }

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

417

279

418− else

419− let

420− ( passing, failing ) =

421− List.partition isPassing myTest.results

422− in

423− Element.column

424− [ Element.alignLeft

425− , Element.spacing 16

426− , Element.pointer

427− , Events.onClick (Select myTest.index)

428− ]

429− [ Element.row [ Element.spacing 16 ]

430− [ Element.el [ Font.size 16 ] (Element.text myTest.label)

431− , Element.text (String.fromInt (List.length passing) ++ " passing")

432− , let

433− failingCount =

434− List.length failing

435− in

436− if failingCount == 0 then

437− Element.none

438−

439− else

440− Element.text (String.fromInt (List.length failing) ++ " failing")

441− ]

442− ]

443

280

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

444

288

445−expandDetails group =

446− case group.members of

447− [] ->

448− { id = group.id

449− , elementType = Testable.EmptyType

450− , members = group.members

451− }

452

289

453− top :: _ ->

290+{-| Our ID is part of our label. This could be fixed farther down the chain, but I think it'd be pretty involved.

454− { id = group.id

455− , elementType = top.elementType

456− , members = group.members

457− }

458

291

292+So, now we can just parse the id out of the label.

459

293

460−groupBy fn list =

294+-}

461− groupWhile (\one two -> fn one == fn two) list

295+parseId str =

462− |> List.map

296+ str

463− (\( fst, remaining ) ->

297+ |> Parser.run

464− { id = fn fst

298+ (Parser.succeed identity

465− , members = fst :: remaining

299+ |. Parser.chompWhile (\c -> c /= '#')

466− }

300+ |= Parser.variable

301+ { start = \c -> c == '#'

302+ , inner = \c -> Char.isAlphaNum c || c == '-'

303+ , reserved = Set.empty

304+ }

467 )

305 )

306+ |> Result.toMaybe

468

307

469

308

470−groupWhile : (a -> a -> Bool) -> List a -> List ( a, List a )

309+viewResultsAnnotationStylesheet results =

471−groupWhile isSameGroup items =

310+ let

472− List.foldr

311+ toStyleClass ( label, maybeFailure ) =

473− (\x acc ->

312+ case maybeFailure of

474− case acc of

313+ Nothing ->

475− [] ->

314+ ""

476− [ ( x, [] ) ]

477

315

478− ( y, restOfGroup ) :: groups ->

316+ Just failure ->

479− if isSameGroup x y then

317+ case parseId label of

480− ( x, y :: restOfGroup ) :: groups

318+ Nothing ->

481−

319+ Debug.log "NO ID FOUND" label

482− else

483− ( x, [] ) :: acc

484− )

485− []

486− items

487

320

321+ Just id ->

322+ id ++ " { background-color:red; outline: dashed; };"

488

323

489−viewLayoutTestGroup group =

324+ styleSheet =

490− let

325+ results

491− testId =

326+ |> List.map toStyleClass

492− group.id

327+ |> String.join ""

493− |> String.dropLeft 1

494− |> String.append "tests-"

495 in

328 in

496− Element.column

329+ Html.node "style"

497− [ Element.spacing 8

330+ []

498− , Element.htmlAttribute (Html.Attributes.id testId)

331+ [ Html.text styleSheet

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)

512 ]

332 ]

513

333

514

334

515−type alias Grouped thing =

335+viewResult : WithResults (Testable.Element Msg) -> Element.Element Msg

516− { id : String

336+viewResult testable =

517− , members : List thing

337+ let

518− }

338+ isPassing result =

519−

339+ case Tuple.second result of

520−

340+ Nothing ->

521−viewLayoutTest layoutTest =

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

522 Element.column

377 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

524 ]

384 ]

525− [ Element.row [ Element.spacing 8 ]

385+ [ Element.el [ Font.bold, Font.size 64 ] (Element.text testable.label)

526− [ Element.el [ Font.bold ] (Element.text layoutTest.label)

386+ , Element.column [ Element.alignLeft, Element.spacing 20 ]

527−

387+ (failing

528− -- , Element.el [ Font.color palette.lightGrey ] (Element.text layoutTest.elementDomId)

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

529 ]

398 ]

530− , Element.column [ Element.spacing 8 ]

399+ (Element.text (String.fromInt (List.length passing) ++ " tests passing!"))

531− (List.map viewLayoutExpectation layoutTest.expectations)

532 ]

400 ]

533

401

534

402

535−viewLayoutExpectation expectation =

403+viewReason { description, reason } =

536− case expectation of

404+ case reason of

537− Testable.Todo label ->

405+ Failure.Custom ->

538− Element.row [ Element.spacing 4 ]

406+ description

539− [ todo, Element.text label ]

540

407

541− Testable.Expect details ->

408+ Failure.Equality one two ->

542− if details.result then

409+ description ++ " " ++ one ++ " " ++ two

543− Element.row [ Element.spacing 4 ]

544− [ pass, Element.text details.description ]

545

410

546− else

411+ Failure.Comparison one two ->

547− Element.row [ Element.spacing 4 ]

412+ description ++ " " ++ one ++ " " ++ two

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)

559

413

414+ Failure.ListDiff expected actual ->

415+ "expected\n"

416+ ++ String.join " \n" expected

417+ ++ "actual\n"

418+ ++ String.join " \n" actual

560

419

561−todo =

420+ Failure.CollectionDiff { expected, actual, extra, missing } ->

562− badge palette.lightGrey "todo"

421+ String.join "\n"

563−

422+ [ formatKeyValue "expected" expected

564−

423+ , formatKeyValue "actual" actual

565−pass =

424+ , formatKeyValue "extra" (String.join ", " extra)

566− badge palette.green "pass"

425+ , formatKeyValue "missing" (String.join ", " missing)

426+ ]

567

427

428+ Failure.TODO ->

429+ description

568

430

569−fail =

431+ Failure.Invalid _ ->

570− badge palette.red "fail"

432+ description

571

433

572

434

573formatKeyValue : String -> String -> String

435formatKeyValue : String -> String -> String

@@ -580,10 +442,12 @@ port report :

580 { label : String

442 { label : String

581 , results :

443 , results :

582 List

444 List

583− { description : String

445+ ( String

584− , passing : Bool

446+ , Maybe

585− , todo : Bool

447+ { given : Maybe String

586− }

448+ , description : String

449+ }

450+ )

587 }

451 }

588 -> Cmd msg

452 -> Cmd msg

589

453

@@ -600,7 +464,6 @@ port styles :

600 , bbox : Testable.BoundingBox

464 , bbox : Testable.BoundingBox

601 , style : List ( String, String )

465 , style : List ( String, String )

602 , isVisible : Bool

466 , isVisible : Bool

603− , textMetrics : List Testable.TextMetrics

604 }

467 }

605 -> msg

468 -> msg

606 )

469 )

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)

3+{-| -}

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

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

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

3+import Generator

4+import Html

5+import Testable

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

7+import Testable.Element.Background as Background

8+import Testable.Element.Font as Font

9+import Testable.Runner

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

11+

12+

13+{-| -}

14+main : Html.Html msg

15+main =

16+ Testable.Runner.show view

17+

18+

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

20+box attrs =

21+ el

22+ ([ width (px 50)

23+ , height (px 50)

24+ , Background.color blue

25+ ]

26+ ++ attrs

27+ )

28+ none

29+

30+

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

32+container =

33+ el

34+ [ width (px 200)

35+ , height (px 200)

36+ , Background.color lightGrey

37+ ]

38+

39+

40+view : Testable.Element msg

41+view =

42+ column []

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

44+ , container <|

45+ box []

46+ , text "alignLeft, centerX, alignRight"

47+ , column [ spacing 20 ] <|

48+ Generator.sizes

49+ (\resizeable ->

50+ row [ spacing 20 ]

51+ [ container <|

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

53+ , container <|

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

55+ , container <|

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

57+ ]

58+ )

59+ , text "top, centerY, bottom"

60+ , column [ spacing 20 ] <|

61+ Generator.sizes

62+ (\resizeable ->

63+ row [ spacing 20 ]

64+ [ container <|

65+ resizeable [ alignTop ] none

66+ , container <|

67+ resizeable [ centerY ] none

68+ , container <|

69+ resizeable [ alignBottom ] none

70+ ]

71+ )

72+ , text "align top ++ alignments"

73+ , column [ spacing 20 ] <|

74+ Generator.sizes

75+ (\resizeable ->

76+ row [ spacing 20 ]

77+ [ container <|

78+ resizeable [ alignTop, alignLeft ] none

79+ , container <|

80+ resizeable [ alignTop, centerX ] none

81+ , container <|

82+ resizeable [ alignTop, alignRight ] none

83+ ]

84+ )

85+ , text "centerY ++ alignments"

86+ , column [ spacing 20 ] <|

87+ Generator.sizes

88+ (\resizeable ->

89+ row [ spacing 20 ]

90+ [ container <|

91+ resizeable [ centerY, alignLeft ] none

92+ , container <|

93+ resizeable [ centerY, centerX ] none

94+ , container <|

95+ resizeable [ centerY, alignRight ] none

96+ ]

97+ )

98+ , text "alignBottom ++ alignments"

99+ , column [ spacing 20 ] <|

100+ Generator.sizes

101+ (\resizeable ->

102+ row [ spacing 20 ]

103+ [ container <|

104+ resizeable [ alignBottom, alignLeft ] none

105+ , container <|

106+ resizeable [ alignBottom, centerX ] none

107+ , container <|

108+ resizeable [ alignBottom, alignRight ] none

109+ ]

110+ )

111+ ]

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

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

8import Testable.Element exposing (..)

9import Testable.Element.Background as Background

10import Testable.Element.Font as Font

11−import Testable.Generator

12import Testable.Runner

11import Testable.Runner

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

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

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

60{-| -}

59{-| -}

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

62view =

67view =

63− List.concat

68+ let

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

69+ transparentBox attrs =

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

70+ el

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

71+ ([ Font.color white

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

72+ , width (px 50)

68− ]

73+ , height (px 50)

69− , Testable.Generator.generate "Nearbys"

74+ , Background.color white

70− (\element nearby ->

75+ ]

71− element

76+ ++ attrs

72− [ nearby (box [])

77+ )

73− , width (px 200)

78+ (text "hi")

74− , height (px 200)

79+

75− , Background.color red

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

76 ]

263 ]

77− none

264+ , text "on paragraph"

78− )

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

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

266+ [ p

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

267+ [ location

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

268+ (el

82− (\element nearby align ->

269+ [ label name

83− element

270+ , width (px 20)

84− [ nearby (box [ align ])

271+ , height (px 20)

85− , width (px 200)

272+ , Background.color darkCharcoal

86− , height (px 200)

273+ ]

87− , Background.color red

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

88 ]

349 ]

89− none

350+ ]

90− )

351+

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

352+ master =

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

353+ el [ padding 20 ] <|

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

354+ box

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

376+ ]

377+

378+ masterParagraph =

379+ el [ padding 20 ] <|

380+ p

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

402+ ]

403+ in

404+ column

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

406+ [ layeredVisibility

407+ , overlappingChildren

408+

409+ -- Note: visibility checks like the above

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

411+ , master

412+ , masterParagraph

413+ , nearby above "above" box

414+ , nearby below "below" box

415+ , nearby inFront "inFront" box

416+ , nearby onRight "onRight" box

417+ , nearby onLeft "onLeft" box

418+ , nearby behindContent "behindContent" transparentBox

94 ]

419 ]

420

421

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

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

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

112 (justBox 40 darkGrey [])

437 (justBox 40 darkGrey [])

113 ]

438 ]

114−

115−

116−little name attrs =

117− el

118− ([ label name

119− , width (px 5)

120− , height (px 5)

121− , Background.color darkCharcoal

122− ]

123− ++ attrs

124− )

125− none

126−

127−

128−master =

129− el [ padding 20 ] <|

130− box

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

152− ]

153−

154−

155−masterParagraph =

156− el [ padding 20 ] <|

157− p

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

179− ]

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

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

1+module Tests.RowAlignment exposing (..)

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

3+import Html

4+import Testable

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

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

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

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+tinyBox attrs =

30+ el

31+ ([ width (px 20)

32+ , height (px 20)

33+

34+ -- , centerY

35+ , Background.color darkCharcoal

36+ ]

37+ ++ attrs

38+ )

39+ none

40+

41+

42+container =

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

44+

45+

46+view =

47+ let

48+ colContainer attrs children =

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

50+ in

51+ column

52+ []

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

54+ , column []

55+ [ box []

56+ , colContainer []

57+ [ box [] ]

58+ , colContainer []

59+ [ box []

60+ , box []

61+ , box []

62+ ]

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

64+ [ box []

65+ , box []

66+ , box []

67+ ]

68+ ]

69+ ]

tests-rendering/src/Tests/Run.elm+20−5

@@ -1,14 +1,29 @@

1module Tests.Run exposing (main)

3−{-| _NOTE_ this is auto-generated! Notouchy!

3+{-| -}

4−-}

6−import ElInFixedHeightColumn

7import Testable.Runner

5import Testable.Runner

6+import Tests.Basic

7+import Tests.ColumnAlignment

8+import Tests.ColumnSpacing

9+import Tests.ElementAlignment

10+import Tests.Nearby

11+import Tests.RowAlignment

12+import Tests.RowSpacing

13+import Tests.Transparency

10main : Testable.Runner.TestableProgram

16main : Testable.Runner.TestableProgram

11main =

17main =

12− Testable.Runner.program

18+ Testable.Runner.program

13− [ Testable.Runner.rename " El In Fixed Height Column" ElInFixedHeightColumn.view

19+ [ Tuple.pair "Basic Element" Tests.Basic.view

20+ , Tuple.pair "Nearby" Tests.Nearby.view

21+ , Tuple.pair "Element Alignment" Tests.ElementAlignment.view

22+ , Tuple.pair "Transparency" Tests.Transparency.view

23+ , Tuple.pair "Column Alignment" Tests.ColumnAlignment.view

24+

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

26+ , Tuple.pair "Row Alignment" Tests.RowAlignment.view

27+ , Tuple.pair "Column Spacing" Tests.ColumnSpacing.view

28+ , Tuple.pair "Row Spacing" Tests.RowSpacing.view

14 ]

29 ]

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

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

1−module Tests.Spacing exposing (view)

2−

3−{-| Test that spacing works

4−-}

5−

6−import Testable

7−import Testable.Element exposing (..)

8−import Testable.Element.Background as Background

9−import Testable.Element.Font as Font

10−import Testable.Generator

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

12−

13−

14−{-| -}

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

16−view =

17− List.concat

18− [ Testable.Generator.generate "Spacing"

19− (\layout element ->

20− layout

21− [ width (px 800)

22− , height (px 800)

23− , Background.color lightGrey

24− , spacing 20

25− ]

26− (element

27− [ width (px 200)

28− , height (px 200)

29− , Background.color red

30− ]

31− none

32− )

33− )

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

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

36− ]

tests-rendering/src/Tests/TextWrapping.elmdeleted−51

@@ -1,51 +0,0 @@

1−module Tests.TextWrapping exposing (main, view)

2−

3−import Html

4−import Testable

5−import Testable.Element exposing (..)

6−import Testable.Element.Background as Background

7−import Testable.Element.Font as Font

8−import Testable.Generator

9−import Testable.Runner

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

11−

12−

13−box attrs =

14− el

15− ([ width (px 50)

16− , height (px 50)

17− , Background.color blue

18− ]

19− ++ attrs

20− )

21− none

22−

23−

24−{-| -}

25−main : Html.Html msg

26−main =

27− Testable.Runner.show view

28−

29−

30−view =

31− el [] <|

32− paragraph []

33− [ Testable.Generator.box

34− ]

35−

36−

37−

38−-- column [ spacing 16 ]

39−-- [ paragraph []

40−-- [ el [] (text Testable.Generator.short)

41−-- ]

42−-- -- , paragraph []

43−-- -- [ text Testable.Generator.lorem

44−-- -- , text Testable.Generator.lorem

45−-- -- ]

46−-- -- , paragraph []

47−-- -- [ text Testable.Generator.lorem

48−-- -- , paragraph []

49−-- -- [ text Testable.Generator.lorem ]

50−-- -- ]

51−-- ]

tests-rendering/view/view.htmlnew file+104

@@ -0,0 +1,104 @@

1+<!DOCTYPE html>

2+<html>

3+ <head>

4+ <meta charset="UTF-8" />

5+ <title>Rendering Benchmark Viewer</title>

6+ <script type="text/javascript" src="./elm.js"></script>

7+ </head>

8+ <style></style>

9+ <body id="root"></body>

10+

11+ <script type="text/javascript">

12+ var app = Elm.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>