master..dee2fda · typeable/elm-ui

.github/ISSUE_TEMPLATE/bug-unexpected-behavior-report.md+2−2

since splitsnapshots

unifiedsplit

@@ -6,9 +6,9 @@ about: Capture any unexpected behavior or bugs you've found with this library

6

7**Welcome!**

8

9−If you can, please put together a [Short, Self Contained, Correct, Example](http://sscce.org/) of what you're encountering. It really helps if the example is as succinct as possible.

9+If you can, please put together an [Short, Self Contained, Correct, Example](http://sscce.org/) of what you're encountering. It really helps if the example is as succinct as possible.

10

11−Here's a basic template in [ellie](https://www.ellie-app.com/3fhCyrxjLw3a1) to get you started!

11+Here's a basic template in [ellie](https://ellie-app.com/3fhCyrxjLw3a1) to get you started!

12

13**Expected behavior**

14A clear and concise description of what you expected to happen.

.github/workflows/docs-preview.ymldeleted−36

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

1−# This is a basic workflow to help you get started with Actions

2−

3−name: Documentation

4−

5−# Controls when the action will run. Triggers the workflow on push or pull request

6−# events but only for the master branch

7−on:

8− push:

9− branches: [ master ]

10− pull_request:

11− branches: [ master ]

12−

13−# A workflow run is made up of one or more jobs that can run sequentially or in parallel

14−jobs:

15− # This workflow contains a single job called "build"

16− build:

17− # The type of runner that the job will run on

18− runs-on: ubuntu-latest

19−

20−

21− # Steps represent a sequence of tasks that will be executed as part of the job

22− steps:

23− # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it

24− - uses: actions/checkout@v2

25−

26− - name: Setup node

27− uses: actions/setup-node@v1

28− with:

29− node-version: 10

30−

31− - name: Install

32− run: npm install

33−

34− # Runs a single command using the runners shell

35− - name: Run a one-line script

36− run: npm run test-doc-preview

.github/workflows/label-issues-from-body.ymldeleted−14

@@ -1,14 +0,0 @@

1−name: "Label issue from body keyword"

2−on:

3− issues:

4− types: [opened, edited]

5−

6−jobs:

7− test:

8− runs-on: ubuntu-latest

9− steps:

10− - uses: Naturalclar/issue-action@v1.0.0

11− with:

12− keywords: '["https://ellie-app.com/"]'

13− labels: '["has-ellie"]'

14− github-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/label-issues-from-comments.ymldeleted−59

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

1−name: "Label issue from comment keyword"

2−on:

3− issue_comment:

4− types: [created, edited]

5−

6−jobs:

7− test:

8− runs-on: ubuntu-latest

9− steps:

10− - uses: Amwam/issue-comment-action@v1.3.1

11− with:

12− keywords: '["#bug"]'

13− labels: '["bug"]'

14− github-token: "${{ secrets.GITHUB_TOKEN }}"

15− - uses: Amwam/issue-comment-action@v1.3.1

16− with:

17− keywords: '["#feature-suggestion"]'

18− labels: '["feature-suggestion"]'

19− github-token: "${{ secrets.GITHUB_TOKEN }}"

20− - uses: Amwam/issue-comment-action@v1.3.1

21− with:

22− keywords: '["#has-ellie", "https://ellie-app.com/"]'

23− labels: '["has-ellie"]'

24− github-token: "${{ secrets.GITHUB_TOKEN }}"

25− - uses: Amwam/issue-comment-action@v1.3.1

26− with:

27− keywords: '["#no-ellie"]'

28− labels: '["no-ellie"]'

29− github-token: "${{ secrets.GITHUB_TOKEN }}"

30− - uses: Amwam/issue-comment-action@v1.3.1

31− with:

32− keywords: '["#has-test"]'

33− labels: '["has-test"]'

34− github-token: "${{ secrets.GITHUB_TOKEN }}"

35− - uses: Amwam/issue-comment-action@v1.3.1

36− with:

37− keywords: '["#pain-point"]'

38− labels: '["pain-point"]'

39− github-token: "${{ secrets.GITHUB_TOKEN }}"

40− - uses: Amwam/issue-comment-action@v1.3.1

41− with:

42− keywords: '["#test-incorrectly-passing"]'

43− labels: '["test-incorrectly-passing"]'

44− github-token: "${{ secrets.GITHUB_TOKEN }}"

45− - uses: Amwam/issue-comment-action@v1.3.1

46− with:

47− keywords: '["#test-not-compiling"]'

48− labels: '["test-not-compiling"]'

49− github-token: "${{ secrets.GITHUB_TOKEN }}"

50− - uses: Amwam/issue-comment-action@v1.3.1

51− with:

52− keywords: '["#test-failing"]'

53− labels: '["test-failing"]'

54− github-token: "${{ secrets.GITHUB_TOKEN }}"

55− - uses: Amwam/issue-comment-action@v1.3.1

56− with:

57− keywords: '["#unexpected"]'

58− labels: '["unexpected"]'

59− github-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/tests.ymldeleted−43

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

1−name: Test Suite

2−

3−on:

4− push:

5− branches: [ master ]

6− pull_request:

7− branches: [ master ]

8−

9−

10−jobs:

11− testing:

12− runs-on: ubuntu-latest

13−

14− steps:

15− - uses: actions/checkout@v2

16−

17− - name: Setup node

18− uses: actions/setup-node@v1

19− with:

20− node-version: 10

21−

22− - uses: actions/cache@v1

23− with:

24− path: ~/.npm

25− key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

26− restore-keys: |

27− ${{ runner.os }}-node-

28−

29− - name: Install

30− run: npm ci

31−

32− - name: Elm test suite

33− run: npm run test

34−

35− - uses: webfactory/ssh-agent@v0.2.0

36− with:

37− ssh-private-key: ${{ secrets.ELM_UI_TESTING_SSH_PRIVATE_KEY }}

38−

39− - name: Rendering test suite on saucelabs

40− run: npm run test-render-sauce-automated -- --build=2.0.0 --name=development

41− env:

42− SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}

43− SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}

.gitignore+1−12

@@ -14,15 +14,4 @@ elm.js

14

15examples/temporary/

16

17−.vscode

17+.vscode

18−

19−

20−sauce.env

21−

22−__pycache__

23−node_modules

24−benchmarks/tmp

25−benchmarks/results

26−tests/tmp

27−

28−tmp

notes/CHANGES-FROM-STYLE-ELEMENTS.md → CHANGES-FROM-STYLE-ELEMENTS.mdrenamed+4−1

@@ -1,7 +1,10 @@

1# Compared to Style Elements

2

3+

3This was a MAJOR rewrite of Style Elements.

4This was a MAJOR rewrite of Style Elements.

4

5

6+

7+

5* **Major Performance improvement** - Style Elements v5 is much faster than v4 due to a better rendering strategy and generating very minimal html. The rewritten architecture also allows me to explore a few other optimizations, so things may get even faster than they are now.

8* **Major Performance improvement** - Style Elements v5 is much faster than v4 due to a better rendering strategy and generating very minimal html. The rewritten architecture also allows me to explore a few other optimizations, so things may get even faster than they are now.

6

9

7* **Lazy is here!** - It works with no weird caveats.

10* **Lazy is here!** - It works with no weird caveats.

@@ -116,7 +119,7 @@ Also of note, is that if something is `center`, then it will truly be in the cen

116

119

117- `Font.weight` has been removed in favor of `Font.extraBold`, `Font.regular`, `Font.light`, etc. All weights from 100 - 900 are represented.

120- `Font.weight` has been removed in favor of `Font.extraBold`, `Font.regular`, `Font.light`, etc. All weights from 100 - 900 are represented.

118- `Background.image` and `Background.fittedImage` will place a centered background image, instead of anchoring at the top left.

121- `Background.image` and `Background.fittedImage` will place a centered background image, instead of anchoring at the top left.

119−- `fill |> minimum 20 |> maximum 200` is now present for `minWidth`, `maxWidth`, `minHeight` and `maxHeight` behavior. It works like fill, but with an optional top and lower bound.

122+- `fillBetween { min : Maybe Int, max : Maybe Int}` is now present for `min/max height/width` behavior. It works like fill, but with an optional top and lower bound.

120- `transparent` - Set an element as transparent. It will take up space, but otherwise be transparent and unclickable.

123- `transparent` - Set an element as transparent. It will take up space, but otherwise be transparent and unclickable.

121- `alpha` can now be set for an element.

124- `alpha` can now be set for an element.

122- `attribute` has been renamed `htmlAttribute` to better convey what it's used for.

125- `attribute` has been renamed `htmlAttribute` to better convey what it's used for.

CONTRIBUTING.mddeleted−25

@@ -1,25 +0,0 @@

1−# Contributing to Elm UI

2−

3−Welcome!

4−

5−First, if you have a question about how to do something with the library, join `#elm-ui` on the [Elm Slack](https://elmlang.herokuapp.com/)! There are usually a number of people who are willing to help out, myself included.

6−

7−That's the place to ask questions, try there first.

8−

9−A few notes about my design process for `elm-ui`.

10−

11−I don't usually accept PRs that add features. Mainly this is because there is a bunch of design thought and research that needs to be done before a feature can be added.

12−

13−So, here are some other ways you can help if you so desire!

14−

15−# Bugs and Unexpected Things

16−

17−If you run into unexpected behavior, I definitely want to hear about it. Put together a [Short, Self Contained, Correct, Example](http://sscce.org/) of what you're encountering. It really helps if the example is as succinct as possible.

18−

19−Here's a basic template in [ellie](https://ellie-app.com/3fhCyrxjLw3a1) to get you started!

20−

21−# Research

22−

23−One of the more challenging parts of the project like this is gathering information.

24−

25−If you know of good resources about accessibility, internationalization, design, or [any of the topics listed in the research folder](https://github.com/mdgriffith/elm-ui/tree/master/notes/research), send them my way either via PR to those documents or on slack.

CSS-LOOKUP.md+1−1

@@ -15,4 +15,4 @@ CSS | Style Elements | Description

15`margin` | __N/A__ Instead, check out `padding` and `spacing` | `margin` in CSS was designed to fight with `padding`. This library was designed to minimize override logic and properties that fight with each other in order to create a layout language that is predictable and easy to think about. The result is that in style elements, there's generally only *one place* where an effect can happen.

16`:hover`, `:focus`, `:active` | `mouseOver`, `focused`, `mouseDown` | Only certain styles are allowed to be in a pseudo state. They have the type `Attr decorative msg`, which means they can be either an `Attribute` or a `Decoration`.

17`<form>` | __N/a__ | __Elm__ already has a mechanism for submiting data to a server, namely the `Http` package. There has been some mention that the `form` element might be beneficial accessibility-wise, which I'm definitely open to hearing about!

18−`onSubmit` | __N/A__ | Similar to `<form>`, there is no `onSubmit` behavior. Likely if you're attempting to capture some of the keybaord related behavior of `onSubmit`, you're likely better just crafting a keyboard event handler in the first place!

18+`onSubmit` | __N/A__ | Similar to `<form>`, there is no `onSubmit` behavior. Likely if you're attempting to capture some of the keybaord related behavior of `onSubmit`, you're likely better just crafting a keyboard even handler in the first place!

LICENSE+1−1

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

2All rights reserved.

3

4Redistribution and use in source and binary forms, with or without

NOTES.mdnew file+10

@@ -0,0 +1,10 @@

1+# Rendering Order

2+

3+Nearby elements such as `below`, `above`, `behindContent`, and `inFront` are rendered after the other children of the `Element.

4+

5+This is so:

6+

7+- `inFront` doesn't need a special `z-index` to work. This can increase performance because too many `z-index` overrides means shipping more layers to the gpu.

8+- Nearby elements higher up in the DOM hierarchy will be on top of elements lower in the hierarchy. `inFront` on a higher element should be on top of `inFront` elements on a lower element.

9+- Allows nearby elements to be affected by `focused` for `Input`, because they can be reached by a sibling selector. `.focuesed:focus ~ .focusable-style {}`

10+

README.md+2−18

@@ -1,8 +1,3 @@

1−![](https://github.com/mdgriffith/elm-ui/workflows/Test%20Suite/badge.svg)

2−

3−

4−Check out the talk that goes with the library, [Building a Better Design Toolkit](https://www.youtube.com/watch?v=Ie-gqwSHQr0&t=2s)

5−

6# A New Language for Layout and Interface

1# A New Language for Layout and Interface

7

2

8CSS and HTML are actually quite difficult to use when you're trying to do the layout and styling of a web page.

3CSS and HTML are actually quite difficult to use when you're trying to do the layout and styling of a web page.

@@ -19,11 +14,9 @@ This means:

19* **Layout and style are explicit and easy to modify.** CSS and HTML as tools for a layout language are hard to modify because there's no central place that represents your layout. You're generally forced to bounce back and forth between multiple definitions in multiple files in order to adjust layout, even though it's probably the most common thing you'll do.

14* **Layout and style are explicit and easy to modify.** CSS and HTML as tools for a layout language are hard to modify because there's no central place that represents your layout. You're generally forced to bounce back and forth between multiple definitions in multiple files in order to adjust layout, even though it's probably the most common thing you'll do.

20

15

21

16

22−[Try this live example on Ellie!](https://ellie-app.com/7Cw4VCyr3RGa1)

17+[Try this live example on Ellie!](https://ellie-app.com/3f2n4J5RnT3a1)

23

18

24```elm

19```elm

25−module Main exposing (..)

26−

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

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

28import Element.Background as Background

21import Element.Background as Background

29import Element.Border as Border

22import Element.Border as Border

@@ -54,24 +47,15 @@ myElement =

54 (text "stylish!")

47 (text "stylish!")

55```

48```

56

49

57−# Join the Elm UI Slack!

58

50

59−First, if you have a question about how to do something with the library, join `#elm-ui` on the [Elm Slack](https://elmlang.herokuapp.com/)! There are usually a number of people who are willing to help out, myself included.

51+

60

52

61## History

53## History

62

54

63The work is based off of a rewrite of the [Style Elements](https://github.com/mdgriffith/style-elements) library. A lot of that work was originally released under the [Stylish Elephants](https://github.com/mdgriffith/stylish-elephants) project.

55The work is based off of a rewrite of the [Style Elements](https://github.com/mdgriffith/style-elements) library. A lot of that work was originally released under the [Stylish Elephants](https://github.com/mdgriffith/stylish-elephants) project.

64

56

65−## Community Cookbook

66−

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

68

57

69−## Notes

70

58

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

72

59

73−## Contributing

74

60

75−Want to help out fixing bugs or reporting issues?

76

61

77−Please add issues you find, and if you want to verify code you want to contribute, please read how to run the tests [here](https://github.com/mdgriffith/elm-ui/blob/master/notes/RUNNING_TESTS.md).

benchmarks/elm.jsondeleted−34

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

1−{

2− "type": "application",

3− "source-directories": [

4− "src",

5− "../src"

6− ],

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

8− "dependencies": {

9− "direct": {

10− "avh4/elm-color": "1.0.0",

11− "elm/browser": "1.0.1",

12− "elm/core": "1.0.2",

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

14− "elm/json": "1.1.3",

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

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

17− "terezka/line-charts": "2.0.0"

18− },

19− "indirect": {

20− "debois/elm-dom": "1.3.0",

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

22− "elm/svg": "1.0.1",

23− "elm/url": "1.0.0",

24− "justinmimbs/date": "3.1.2",

25− "justinmimbs/time-extra": "1.1.0",

26− "myrho/elm-round": "1.0.4",

27− "ryannhg/date-format": "2.3.0"

28− }

29− },

30− "test-dependencies": {

31− "direct": {},

32− "indirect": {}

33− }

34−}

benchmarks/micro/Suite.elmdeleted−330

@@ -1,330 +0,0 @@

1−module Suite exposing (main)

2−

3−import Benchmark exposing (Benchmark)

4−import Benchmark.Runner exposing (BenchmarkProgram, program)

5−import Dict

6−import Element exposing (..)

7−import Element.Background as Background

8−import Element.Font as Font

9−import Html

10−import Html.Attributes

11−import Internal.Flag as Flag

12−import Internal.Model as Internal

13−import Json.Encode

14−import Set

15−

16−

17−dict : Benchmark

18−dict =

19− let

20− dest =

21− Dict.singleton "a" 1

22− in

23− Benchmark.describe "dictionary"

24− [ Benchmark.benchmark "get" (\_ -> Dict.get "a" dest)

25− , Benchmark.benchmark "insert" (\_ -> Dict.insert "b" 2 dest)

26− ]

27−

28−

29−main : BenchmarkProgram

30−main =

31− program <|

32− Benchmark.describe "sample"

33− [ --dict

34− -- , deduplications

35− -- renderPipeline

36− gatheringAttributes

37−

38− -- flagOperations

39− ]

40−

41−

42−flagOperations =

43− Benchmark.describe "Flag Operations"

44− [ Benchmark.benchmark "check if present" <|

45− \_ ->

46− Flag.present Flag.height Flag.none

47− , Benchmark.benchmark "add to flagt" <|

48− \_ ->

49− Flag.add Flag.height Flag.none

50− ]

51−

52−

53−gatheringAttributes =

54− Benchmark.describe "Gathering Attributes"

55− [ Benchmark.benchmark "existing - gatherAttrRecursive" <|

56− \_ ->

57− Internal.gatherAttrRecursive

58− (Internal.contextClasses Internal.AsEl)

59− Internal.Generic

60− Flag.none

61− Internal.Untransformed

62− []

63− []

64− Internal.NoNearbyChildren

65− [ Element.width Element.shrink

66− , Element.height Element.shrink

67− ]

68− , Benchmark.benchmark "Simple list filterMap" <|

69− \_ ->

70− List.filterMap

71− identity

72− [ Just "thing"

73− , Just "other width"

74− ]

75− , Benchmark.benchmark "Simple list map" <|

76− \_ ->

77− List.map

78− identity

79− [ Just "thing"

80− , Just "other width"

81− ]

82− , Benchmark.benchmark "Foldl base speed" <|

83− \_ ->

84− List.foldl

85− (::)

86− [ Just "thing"

87− , Just "other width"

88− ]

89− , Benchmark.benchmark "Recursive" <|

90− \_ ->

91− recurse

92− (::)

93− [ Just "thing"

94− , Just "other width"

95− ]

96− , Benchmark.benchmark "foldl - new record each iteration" <|

97− \_ ->

98− List.foldl flipFoldl

99− { attributes = "class"

100− , styles = []

101− , node = "Node"

102− , children = Nothing

103− , has = Flag.none

104− }

105− -- we reverse first because we have to for the attr api.

106− (List.reverse

107− [ Just "thing"

108− , Just "other width"

109− ]

110− )

111− , Benchmark.benchmark "foldl - update" <|

112− \_ ->

113− List.foldl flipFoldlUpdate

114− { attributes = "class"

115− , styles = []

116− , node = "Node"

117− , children = Nothing

118− , has = Flag.none

119− }

120− -- we reverse first because we have to for the attr api.

121− (List.reverse

122− [ Just "thing"

123− , Just "other width"

124− ]

125− )

126− , Benchmark.benchmark "String Concatenation" <|

127− \_ ->

128− "This"

129− ++ "this"

130− ++ "this"

131− ++ "this"

132− ++ "this"

133− ++ "this"

134− ++ "this"

135− ++ "this"

136− , Benchmark.benchmark "List String Concatenation" <|

137− \_ ->

138− String.concat

139− [ "This"

140− , "this"

141− , "this"

142− , "this"

143− , "this"

144− , "this"

145− , "this"

146− , "this"

147− ]

148− ]

149−

150−

151−flipFoldl result found =

152− { attributes = "class" ++ found.attributes

153− , styles = Just 1 :: found.styles

154− , node = found.node

155− , children = Nothing

156− , has = Flag.add Flag.height found.has

157− }

158−

159−

160−flipFoldlUpdate result found =

161− { found

162− | attributes = "class" ++ found.attributes

163− , styles = Just 1 :: found.styles

164− , has = Flag.add Flag.height found.has

165− }

166−

167−

168−recurse fn ls =

169− case ls of

170− [] ->

171− []

172−

173− fst :: remain ->

174− fn fst (recurse fn remain)

175−

176−

177−deduplications =

178− Benchmark.describe "deduplications"

179− [ Benchmark.benchmark "fold - dedup, String concat"

180− (\_ ->

181− String.join ":" (foldDedup largeList)

182− )

183− , Benchmark.benchmark "fold - dedup"

184− (\_ ->

185− foldDedup largeList

186− )

187− , Benchmark.benchmark "fold - dedup - Int"

188− (\_ ->

189− foldDedup largeListInt

190− )

191− , Benchmark.benchmark "Json encode"

192− (\_ ->

193− Json.Encode.object largeListJson

194− )

195− ]

196−

197−

198−foldDedup list =

199− let

200− dedup ( name, val ) ( cache, ls ) =

201− if Set.member name cache then

202− ( cache, ls )

203−

204− else

205− ( Set.insert name cache, val :: ls )

206− in

207− List.foldl dedup ( Set.empty, [] ) list

208− |> Tuple.second

209−

210−

211−largeListInt =

212− List.range 1 10000

213− |> List.map

214− (\i ->

215− let

216− wrappingI =

217− modBy 50 i

218− in

219− ( wrappingI, "elem-" ++ String.fromInt wrappingI )

220− )

221−

222−

223−largeList =

224− List.range 1 10000

225− |> List.map

226− (\i ->

227− let

228− wrappingI =

229− modBy 50 i

230− in

231− ( "elem-" ++ String.fromInt wrappingI, "elem-" ++ String.fromInt wrappingI )

232− )

233−

234−

235−largeListJson =

236− List.range 1 10000

237− |> List.map

238− (\i ->

239− let

240− wrappingI =

241− modBy 50 i

242− in

243− ( "elem-" ++ String.fromInt wrappingI, Json.Encode.string ("elem-" ++ String.fromInt wrappingI) )

244− )

245−

246−

247−renderPipeline =

248− [ Benchmark.benchmark "build 2000 elements"

249− (\_ ->

250− elements 0 twoThousand

251− )

252− , Benchmark.benchmark "build 2000 html"

253− (\_ ->

254− html 0 twoThousand

255− )

256− ]

257−

258−

259−twoThousand =

260− List.range 0 2000

261−

262−

263−elements i count =

264− Element.layout []

265− (Element.column [ spacing 8, centerX ]

266− (List.map (viewEl i) count)

267− )

268−

269−

270−viewEl selectedIndex index =

271− el

272− [ Background.color

273− (if selectedIndex == index then

274− pink

275−

276− else

277− white

278− )

279− , Font.color

280− (if selectedIndex /= index then

281− pink

282−

283− else

284− white

285− )

286− , padding 24

287− , width (px 500)

288− , height (px 70)

289− ]

290− (if selectedIndex == index then

291− text "selected"

292−

293− else

294− text "Hello!"

295− )

296−

297−

298−white =

299− rgb 1 1 1

300−

301−

302−pink =

303− rgb255 240 0 245

304−

305−

306−html i count =

307− Html.div []

308− [ Html.div []

309− (List.map (viewHtmlElement i) count)

310− ]

311−

312−

313−viewHtmlElement selectedIndex index =

314− Html.div

315− [ Html.Attributes.class

316− (if selectedIndex == index then

317− "white"

318−

319− else

320− "pink"

321− )

322− ]

323− [ Html.div []

324− [ if selectedIndex == index then

325− Html.text "selected"

326−

327− else

328− Html.text "Hello!"

329− ]

330− ]

benchmarks/micro/elm.jsondeleted−30

@@ -1,30 +0,0 @@

1−{

2− "type": "application",

3− "source-directories": [

4− ".",

5− "../../src"

6− ],

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

8− "dependencies": {

9− "direct": {

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

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

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

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

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

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

16− "elm-explorations/benchmark": "1.0.1"

17− },

18− "indirect": {

19− "BrianHicks/elm-trend": "2.1.2",

20− "Skinney/murmur3": "2.0.8",

21− "elm/regex": "1.0.0",

22− "elm/url": "1.0.0",

23− "mdgriffith/style-elements": "5.0.1"

24− }

25− },

26− "test-dependencies": {

27− "direct": {},

28− "indirect": {}

29− }

30−}

benchmarks/runtime/benchPage.jsdeleted−146

@@ -1,146 +0,0 @@

1−const path = require('path');

2−

3−async function benchPage(page, file) {

4− const client = await page.target().createCDPSession();

5− await client.send('Performance.enable');

6− // await page.tracing.start({ path: 'trace.json' });

7− await page.goto('file://' + path.resolve(file))

8−

9− await page.waitFor(5000);

10− // await page.tracing.stop();

11− const metrics = await client.send('Performance.getMetrics');

12−

13− const startMetrics = await page.metrics()

14− await page.evaluate(() => { window.elmRefresh() })

15− await page.waitFor(1500);

16− const endMetrics = await page.metrics()

17−

18− await page.evaluate(() => { window.elmStartAnim() })

19− await sleep(5000)

20− await page.evaluate(() => { window.elmStopAnim() })

21− await page.waitFor(2000);

22− const finalMetrics = await page.metrics()

23− const frames = await page.evaluate(x => {

24− return Promise.resolve(window.metrics);

25− }, {});

26− return {

27− name: frames.name,

28− link: 'file://' + path.resolve(file),

29− perf: extract(metrics),

30− afterRefresh: {

31− RecalcStyleDuration: endMetrics.RecalcStyleDuration - startMetrics.RecalcStyleDuration,

32− LayoutDuration: endMetrics.LayoutDuration - startMetrics.LayoutDuration,

33− ScriptDuration: endMetrics.ScriptDuration - startMetrics.ScriptDuration,

34− JSHeapUsedSize: endMetrics.JSHeapUsedSize - startMetrics.JSHeapUsedSize

35− },

36− afterAnimation: {

37− RecalcStyleDuration: finalMetrics.RecalcStyleDuration - endMetrics.RecalcStyleDuration,

38− LayoutDuration: finalMetrics.LayoutDuration - endMetrics.LayoutDuration,

39− ScriptDuration: finalMetrics.ScriptDuration - endMetrics.ScriptDuration,

40− JSHeapUsedSize: finalMetrics.JSHeapUsedSize - endMetrics.JSHeapUsedSize

41− },

42− frames: summarize(frames.frames),

43− }

44−}

45−

46−function summarize(frames) {

47− return {

48− count: frames.length,

49− median: median(frames),

50− mode: mode(frames),

51− avg: average(frames),

52− fps: 1000 / median(frames),

53− min: minimum(frames),

54− max: maximum(frames)

55− }

56−}

57−

58−const keep = ["Timestamp", "Nodes", "LayoutDuration", "RecalcStyleDuration", "ScriptDuration", "JSHeapUsedSize", "FirstMeaningfulPaint", "DomContentLoaded", "NavigationStart"]

59−

60−

61−function extract(metrics) {

62− var ext = {}

63− metrics.metrics.forEach((item) => {

64− if (keep.indexOf(item.name) >= 0) {

65− ext[item.name] = item.value

66− }

67− })

68− ext.TimeToFirstPaintMS = 1000 * (ext.FirstMeaningfulPaint - ext.DomContentLoaded)

69− return ext

70−}

71−

72−function mode(array) {

73− if (array.length == 0)

74− return null;

75− var modeMap = {};

76− var maxEl = array[0], maxCount = 1;

77− for (var i = 0; i < array.length; i++) {

78− var el = array[i];

79− if (modeMap[el] == null)

80− modeMap[el] = 1;

81− else

82− modeMap[el]++;

83− if (modeMap[el] > maxCount) {

84− maxEl = el;

85− maxCount = modeMap[el];

86− }

87− }

88− return maxEl;

89−}

90−

91−function minimum(values) {

92− var m = null

93− for (var i = 0; i < values.length; i++) {

94− if (m == null) {

95− m = values[i]

96− } else if (values[i] < m) {

97− m = values[i]

98− }

99− }

100− return m

101−}

102−

103−

104−function maximum(values) {

105− var m = null

106− for (var i = 0; i < values.length; i++) {

107− if (m == null) {

108− m = values[i]

109− } else if (values[i] > m) {

110− m = values[i]

111− }

112− }

113− return m

114−}

115−

116−

117−function average(values) {

118− var total = 0;

119− for (var i = 0; i < values.length; i++) {

120− total += values[i];

121− }

122− return total / values.length;

123−}

124−

125−function median(values) {

126− if (values.length === 0) return 0;

127−

128− values.sort(function (a, b) {

129− return a - b;

130− });

131−

132− var half = Math.floor(values.length / 2);

133−

134− if (values.length % 2)

135− return values[half];

136−

137− return (values[half - 1] + values[half]) / 2.0;

138−}

139−

140−

141−function sleep(ms) {

142− return new Promise(resolve => {

143− setTimeout(resolve, ms)

144− })

145−}

146−module.exports = benchPage;

benchmarks/runtime/index.jsdeleted−176

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

1−const puppeteer = require('puppeteer');

2−const benchPage = require('./benchPage');

3−const chalk = require('chalk');

4−var compileToString = require("node-elm-compiler").compileToString;

5−const fs = require('fs');

6−

7−

8−

9−

10−

11−function write_entrypoint(item) {

12−

13− const entrypoint = `module Main exposing (main)

14−import ${item.module}

15−import Benchmark.Render

16−

17−main = Benchmark.Render.toProgram ${item.module}.${item.value}

18−`

19− fs.writeFileSync('./benchmarks/tmp/Main.elm', entrypoint);

20−}

21−

22−async function compile_and_embed(config) {

23− var template = fs.readFileSync(config.template)

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

25− await compileToString(config.elm, config.elmOptions).then(function (compiled_elm_code) {

26− const compiled = eval(`\`${template}\``)

27− fs.writeFileSync(config.target, compiled)

28− });

29−}

30−

31−

32−function regroupResults(results) {

33− var regrouped = {}

34−

35− for (var i = 0; i < results.length; i++) {

36− if (results[i].group) {

37−

38− var reorged = {

39− name: results[i].name

40− , link: results[i].link

41− , count: results[i].count

42− , fps: results[i].frames.fps

43− , timeToFirstPaintMS: results[i].perf.TimeToFirstPaintMS

44− , nodes: results[i].perf.Nodes

45− , coldRender: {

46− layoutSeconds: results[i].perf.LayoutDuration

47− , recalcStyleSeconds: results[i].perf.RecalcStyleDuration

48− , scriptDurationSeconds: results[i].perf.ScriptDuration

49−

50− }

51− , warmRender: {

52− layoutSeconds: results[i].afterRefresh.LayoutDuration

53− , recalcStyleSeconds: results[i].afterRefresh.RecalcStyleDuration

54− , scriptDurationSeconds: results[i].afterRefresh.ScriptDuration

55−

56− }

57− , extendedRender: {

58− layoutSeconds: results[i].afterAnimation.LayoutDuration

59− , recalcStyleSeconds: results[i].afterAnimation.RecalcStyleDuration

60− , scriptDurationSeconds: results[i].afterAnimation.ScriptDuration

61−

62− }

63−

64− }

65− if (results[i].group in regrouped) {

66− regrouped[results[i].group].results.push(reorged)

67− } else {

68− regrouped[results[i].group] = { results: [reorged], name: results[i].group }

69− }

70− }

71− }

72− return Object.values(regrouped)

73−}

74−

75−

76−var contain = [{ module: "Contain", group: "html", count: 1024, value: "viewHtml8192" }

77− , { module: "Contain", group: "contain", count: 128, value: "viewHtmlContain8192" }]

78−

79−

80−async function writeResults(allResults, resultsDir, name) {

81−

82− if (!fs.existsSync(resultsDir)) {

83− fs.mkdirSync(resultsDir);

84− }

85− var results = JSON.stringify(allResults)

86− var template = fs.readFileSync("./benchmarks/runtime/template/viewResults.html")

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

88− await compileToString(["./src/View/Results.elm"], { optimize: true, cwd: "./benchmarks" }).then(function (compiled_elm_code) {

89− const compiled = eval(`\`${template}\``)

90− fs.writeFileSync(`./${resultsDir}/${name}/index.html`, compiled)

91− });

92−

93− // fs.writeFileSync(`./${resultsDir}/1.1.1-candidate-optimized.json`, results)

94−}

95−

96−

97−(async () => {

98− const browser = await puppeteer.launch();

99−

100−

101− var instances = [

102− { module: "ManyElements", group: "elmUI", count: 1024, value: "elmUI1024" }

103− , { module: "ManyElements", group: "elmUI", count: 128, value: "elmUI128" }

104− , { module: "ManyElements", group: "elmUI", count: 2048, value: "elmUI2048" }

105− , { module: "ManyElements", group: "elmUI", count: 24, value: "elmUI24" }

106− , { module: "ManyElements", group: "elmUI", count: 4096, value: "elmUI4096" }

107− , { module: "ManyElements", group: "elmUI", count: 8192, value: "elmUI8192" }

108− , { module: "ManyElements", group: "elmUIVCSS", count: 1024, value: "elmUIVCSS1024" }

109− , { module: "ManyElements", group: "elmUIVCSS", count: 2048, value: "elmUIVCSS2048" }

110− , { module: "ManyElements", group: "elmUIVCSS", count: 24, value: "elmUIVCSS24" }

111− , { module: "ManyElements", group: "elmUIVCSS", count: 4096, value: "elmUIVCSS4096" }

112− , { module: "ManyElements", group: "elmUIVCSS", count: 8192, value: "elmUIVCSS8192" }

113− , { module: "ManyElements", group: "viewHtml", count: 1024, value: "viewHtml1024" }

114− , { module: "ManyElements", group: "viewHtml", count: 2048, value: "viewHtml2048" }

115− , { module: "ManyElements", group: "viewHtml", count: 24, value: "viewHtml24" }

116− , { module: "ManyElements", group: "viewHtml", count: 4096, value: "viewHtml4096" }

117− , { module: "ManyElements", group: "viewHtml", count: 8192, value: "viewHtml8192" }

118− , { module: "ManyElements", group: "viewInline", count: 1024, value: "viewInline1024" }

119− , { module: "ManyElements", group: "viewInline", count: 2048, value: "viewInline2048" }

120− , { module: "ManyElements", group: "viewInline", count: 24, value: "viewInline24" }

121− , { module: "ManyElements", group: "viewInline", count: 4096, value: "viewInline4096" }

122− , { module: "ManyElements", group: "viewInline", count: 8192, value: "viewInline8192" }

123− ]

124−

125−

126− var dir = "tmp"

127− if (!fs.existsSync(dir)) {

128− fs.mkdirSync(dir);

129− }

130−

131− var dir = "./benchmarks/tmp"

132− if (!fs.existsSync(dir)) {

133− fs.mkdirSync(dir);

134− }

135−

136− var allResults = []

137− const resultsDir = "benchmarks/results"

138− const resultName = "1.2-cand"

139−

140− if (!fs.existsSync(`./${resultsDir}/${resultName}/instances/`)) {

141− fs.mkdirSync(`./${resultsDir}/${resultName}/instances/`, { recursive: true });

142− }

143−

144− console.log(`Beginning benchmark for ${resultName} →`)

145−

146− for (var i = 0; i < instances.length; i++) {

147− var item = instances[i]

148− write_entrypoint(item)

149− const test_file = `${resultsDir}/${resultName}/instances/${item.value}.html`

150− var template = fs.readFileSync("./benchmarks/runtime/template/run.html")

151− var cssom = fs.readFileSync("./experiments/virtual-css/cssom.js")

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

153− await compileToString(["tmp/Main.elm"], { optimize: true, cwd: "./benchmarks" }).then(function (compiled_elm_code) {

154− const compiled = eval(`\`${template}\``)

155− fs.writeFileSync(test_file, compiled)

156− });

157−

158− const page = await browser.newPage();

159− const results = await benchPage(page, test_file);

160− results.group = item.group

161− results.count = item.count

162− await page.close()

163− // console.log(results)

164− console.log(" Benchmark of " + chalk.green(`${item.module}.${item.value}`) + " complete")

165− allResults.push(results)

166− }

167− await browser.close();

168−

169− allResults = regroupResults(allResults)

170−

171− writeResults(allResults, resultsDir, resultName)

172− console.log()

173− console.log("Benchmark complete")

174− console.log(" → " + chalk.green(`${resultsDir}/${resultName}/index.html`))

175−

176−})();

benchmarks/runtime/template/run.htmldeleted−57

@@ -1,57 +0,0 @@

1−<!DOCTYPE HTML>

2−<html>

3−<head>

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

5− <title>Main</title>

6− <script>

7− ${cssom}

8− </script>

9− <script>

10− ${compiled_elm_code}

11− </script>

12− <style>

13− .box {

14− width: 400px;

15− height: 50px;

16− border: solid thick;

17− }

18− .pink {

19− background-color: pink;

20− }

21− .white {

22− background-color: white;

23− }

24− .contain {

25− contain: strict;

26− }

27− </style>

28−</head>

29−

30−<body>

31− <div id="elm"></div>

32− <script>

33− var app = Elm.Main.init({

34− node: document.getElementById('elm')

35− });

36−

37− window.metrics = []

38− app.ports.elmToWorld.subscribe(function(fromElm){

39− window.metrics = fromElm

40− })

41−

42− function elmRefresh(){

43− app.ports.worldToElm.send({tag: "Refresh"})

44− }

45− function elmStartAnim(){

46− app.ports.worldToElm.send({tag: "StartAnim"})

47− }

48− function elmStopAnim(){

49− app.ports.worldToElm.send({tag: "StopAnim"})

50− }

51− window.elmRefresh = elmRefresh;

52− window.elmStartAnim = elmStartAnim;

53− window.elmStopAnim = elmStopAnim;

54−

55− </script>

56−</body>

57−</html>

benchmarks/runtime/template/viewResults.htmldeleted−24

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

1−<!DOCTYPE HTML>

2−<html>

3−<head>

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

5− <title>Results</title>

6− <script>

7− ${compiled_elm_code}

8− </script>

9−</head>

10−

11−<body>

12− <div id="elm"></div>

13− <script>

14− const results = ${results}

15−

16− var app = Elm.View.Results.init({

17− node: document.getElementById('elm')

18− });

19−

20− app.ports.worldToElm.send(results)

21−

22− </script>

23−</body>

24−</html>

benchmarks/src/Baseline.elmdeleted−31

@@ -1,31 +0,0 @@

1−module Baseline exposing (bench)

2−

3−{-| -}

4−

5−import Benchmark.Render

6−import Html

7−

8−

9−type Msg

10− = Refresh

11− | Tick Float

12−

13−

14−bench : Benchmark.Render.Benchmark Int Msg

15−bench =

16− { name = "Baseline"

17− , init = 0

18− , view =

19− \i ->

20− Html.text (String.fromInt i)

21− , update =

22− \msg model ->

23− case msg of

24− Refresh ->

25− model + 1

26−

27− Tick i ->

28− model + 1

29− , tick = Tick

30− , refresh = Refresh

31− }

benchmarks/src/Benchmark/Render.elmdeleted−148

@@ -1,148 +0,0 @@

1−port module Benchmark.Render exposing (Benchmark, toProgram)

2−

3−{-| This is the rendering harness. The actual cases are in `src`.

4−-}

5−

6−import Browser

7−import Browser.Events

8−import Html exposing (Html)

9−import Html.Attributes as Attr

10−import Html.Events as Events

11−import Json.Decode as Decode

12−import Json.Encode as Encode

13−import Time

14−

15−

16−type alias Benchmark model msg =

17− { name : String

18− , init : model

19− , view : model -> Html Msg

20− , update : msg -> model -> model

21− , tick : Float -> msg

22− , refresh : msg

23− }

24−

25−

26−type alias Model model =

27− { model : model

28− , animating : Bool

29− , frames : List Float

30− }

31−

32−

33−type Msg

34− = Tick Float

35− | Refresh

36− | Received Encode.Value

37− | StartAnim

38− | StopAnim

39−

40−

41−toProgram : Benchmark model msg -> Program () (Model model) Msg

42−toProgram render =

43− Browser.document

44− { init =

45− \() ->

46− ( { model = render.init

47− , animating = False

48− , frames = []

49− }

50− , Cmd.none

51− )

52− , view =

53− \model ->

54− { title = render.name

55− , body =

56− [ Html.div

57− [ Attr.style "display" "flex"

58− , Attr.style "flex-direction" "row"

59− ]

60− [ Html.button [ Events.onClick Refresh ] [ Html.text "Refresh" ]

61− , Html.button [ Events.onClick StartAnim ] [ Html.text "StartAnim" ]

62− , Html.button [ Events.onClick StopAnim ] [ Html.text "StopAnim" ]

63− ]

64− , render.view model.model

65− ]

66− }

67− , update =

68− update render

69− , subscriptions =

70− \model ->

71− Sub.batch

72− [ worldToElm Received

73− , if model.animating then

74− Browser.Events.onAnimationFrameDelta Tick

75−

76− else

77− Sub.none

78− ]

79− }

80−

81−

82−update : Benchmark model msg -> Msg -> Model model -> ( Model model, Cmd Msg )

83−update render msg model =

84− case msg of

85− StartAnim ->

86− ( { model | animating = True }

87− , Cmd.none

88− )

89−

90− StopAnim ->

91− ( { model | animating = False }

92− , elmToWorld (encodeMetrics render.name model.frames)

93− )

94−

95− Refresh ->

96− ( { model | model = render.update render.refresh model.model }

97− , Cmd.none

98− )

99−

100− Tick time ->

101− ( { model

102− | model = render.update (render.tick time) model.model

103− , frames = time :: model.frames

104− }

105− , Cmd.none

106− )

107−

108− Received json ->

109− case Decode.decodeValue outsideMsg json of

110− Err err ->

111− ( model, Cmd.none )

112−

113− Ok newMsg ->

114− update render newMsg model

115−

116−

117−outsideMsg =

118− Decode.field "tag" Decode.string

119− |> Decode.andThen

120− (\tag ->

121− case tag of

122− "Refresh" ->

123− Decode.succeed Refresh

124−

125− "StartAnim" ->

126− Decode.succeed StartAnim

127−

128− "StopAnim" ->

129− Decode.succeed StopAnim

130−

131− _ ->

132− Decode.fail "Unknown incoming msg"

133− )

134−

135−

136−encodeMetrics name frames =

137− Encode.object

138− [ ( "name", Encode.string name )

139− , ( "frames"

140− , Encode.list Encode.float frames

141− )

142− ]

143−

144−

145−port worldToElm : (Encode.Value -> msg) -> Sub msg

146−

147−

148−port elmToWorld : Encode.Value -> Cmd msg

benchmarks/src/Contain.elmdeleted−159

@@ -1,159 +0,0 @@

1−module Contain exposing

2− ( viewHtml8192

3− , viewHtmlContain8192

4− )

5−

6−{-| -}

7−

8−import Benchmark.Render

9−import Element exposing (..)

10−import Element.Background as Background

11−import Element.Font as Font

12−import Element.Keyed

13−import Html

14−import Html.Attributes

15−import Internal.Model as Internal

16−

17−

18−type alias Model =

19− { index : Int

20− , numberOfElements : Int

21− , elements : List Int

22− }

23−

24−

25−type Msg

26− = Refresh

27− | Tick Float

28−

29−

30−viewHtml8192 : Benchmark.Render.Benchmark Model Msg

31−viewHtml8192 =

32− viewHtml "viewHtml8192" 8192

33−

34−

35−viewHtmlContain8192 : Benchmark.Render.Benchmark Model Msg

36−viewHtmlContain8192 =

37− viewHtmlContain "viewHtmlContain8192" 8192

38−

39−

40−white =

41− rgb 1 1 1

42−

43−

44−pink =

45− rgb255 240 0 245

46−

47−

48−{-| -}

49−viewHtml : String -> Int -> Benchmark.Render.Benchmark Model Msg

50−viewHtml name count =

51− { name = name

52− , init =

53− { index = 0

54− , numberOfElements = count

55− , elements = List.range 0 (count - 1)

56− }

57− , view =

58− \model ->

59− Html.div []

60− [ Html.div []

61− (List.map (viewHtmlElement model.index) model.elements)

62− ]

63− , update =

64− \msg model ->

65− case msg of

66− Refresh ->

67− if model.index > model.numberOfElements then

68− { model | index = 0 }

69−

70− else

71− { model | index = model.index + 1 }

72−

73− Tick i ->

74− if model.index > model.numberOfElements then

75− { model | index = 0 }

76−

77− else

78− { model | index = model.index + 1 }

79− , tick = Tick

80− , refresh = Refresh

81− }

82−

83−

84−viewHtmlElement selectedIndex index =

85− Html.div

86− [ Html.Attributes.class "box"

87− , Html.Attributes.class

88− (if selectedIndex == index then

89− "white"

90−

91− else

92− "pink"

93− )

94− ]

95− [ Html.div []

96− [ if selectedIndex == index then

97− Html.text "selected"

98−

99− else

100− Html.text "Hello!"

101− ]

102− ]

103−

104−

105−{-| -}

106−viewHtmlContain : String -> Int -> Benchmark.Render.Benchmark Model Msg

107−viewHtmlContain name count =

108− { name = name

109− , init =

110− { index = 0

111− , numberOfElements = count

112− , elements = List.range 0 (count - 1)

113− }

114− , view =

115− \model ->

116− Html.div []

117− [ Html.div []

118− (List.map (viewHtmlElementContain model.index) model.elements)

119− ]

120− , update =

121− \msg model ->

122− case msg of

123− Refresh ->

124− if model.index > model.numberOfElements then

125− { model | index = 0 }

126−

127− else

128− { model | index = model.index + 1 }

129−

130− Tick i ->

131− if model.index > model.numberOfElements then

132− { model | index = 0 }

133−

134− else

135− { model | index = model.index + 1 }

136− , tick = Tick

137− , refresh = Refresh

138− }

139−

140−

141−viewHtmlElementContain selectedIndex index =

142− Html.div

143− [ Html.Attributes.class "box contain"

144− , Html.Attributes.class

145− (if selectedIndex == index then

146− "white"

147−

148− else

149− "pink"

150− )

151− ]

152− [ Html.div []

153− [ if selectedIndex == index then

154− Html.text "selected"

155−

156− else

157− Html.text "Hello!"

158− ]

159− ]

benchmarks/src/ManyElements.elmdeleted−516

@@ -1,516 +0,0 @@

1−module ManyElements exposing

2− ( elmUI1024

3− , elmUI128

4− , elmUI2048

5− , elmUI24

6− , elmUI256

7− , elmUI4096

8− , elmUI512

9− , elmUI64

10− , elmUI8192

11− , elmUIVCSS1024

12− , elmUIVCSS128

13− , elmUIVCSS2048

14− , elmUIVCSS24

15− , elmUIVCSS256

16− , elmUIVCSS4096

17− , elmUIVCSS512

18− , elmUIVCSS64

19− , elmUIVCSS8192

20− , viewHtml1024

21− , viewHtml128

22− , viewHtml2048

23− , viewHtml24

24− , viewHtml256

25− , viewHtml4096

26− , viewHtml512

27− , viewHtml64

28− , viewHtml8192

29− , viewInline1024

30− , viewInline128

31− , viewInline2048

32− , viewInline24

33− , viewInline256

34− , viewInline4096

35− , viewInline512

36− , viewInline64

37− , viewInline8192

38− )

39−

40−{-| -}

41−

42−import Benchmark.Render

43−import Element exposing (..)

44−import Element.Background as Background

45−import Element.Font as Font

46−import Element.Keyed

47−import Html

48−import Html.Attributes

49−import Internal.Model as Internal

50−

51−

52−

53−{- START BENCHMARKS -}

54−

55−

56−elmUI24 : Benchmark.Render.Benchmark Model Msg

57−elmUI24 =

58− elmUI "elmUI24" 24

59−

60−

61−elmUI64 : Benchmark.Render.Benchmark Model Msg

62−elmUI64 =

63− elmUI "elmUI64" 64

64−

65−

66−elmUI128 : Benchmark.Render.Benchmark Model Msg

67−elmUI128 =

68− elmUI "elmUI128" 128

69−

70−

71−elmUI256 : Benchmark.Render.Benchmark Model Msg

72−elmUI256 =

73− elmUI "elmUI256" 256

74−

75−

76−elmUI512 : Benchmark.Render.Benchmark Model Msg

77−elmUI512 =

78− elmUI "elmUI512" 512

79−

80−

81−elmUI1024 : Benchmark.Render.Benchmark Model Msg

82−elmUI1024 =

83− elmUI "elmUI1024" 1024

84−

85−

86−elmUI2048 : Benchmark.Render.Benchmark Model Msg

87−elmUI2048 =

88− elmUI "elmUI2048" 2048

89−

90−

91−elmUI4096 : Benchmark.Render.Benchmark Model Msg

92−elmUI4096 =

93− elmUI "elmUI4096" 4096

94−

95−

96−elmUI8192 : Benchmark.Render.Benchmark Model Msg

97−elmUI8192 =

98− elmUI "elmUI8192" 8192

99−

100−

101−

102−{- Elm UI VirtualCSS -}

103−

104−

105−elmUIVCSS24 : Benchmark.Render.Benchmark Model Msg

106−elmUIVCSS24 =

107− elmUIVCSS "elmUIVCSS24" 24

108−

109−

110−elmUIVCSS64 : Benchmark.Render.Benchmark Model Msg

111−elmUIVCSS64 =

112− elmUIVCSS "elmUIVCSS64" 64

113−

114−

115−elmUIVCSS128 : Benchmark.Render.Benchmark Model Msg

116−elmUIVCSS128 =

117− elmUIVCSS "elmUIVCSS128" 128

118−

119−

120−elmUIVCSS256 : Benchmark.Render.Benchmark Model Msg

121−elmUIVCSS256 =

122− elmUIVCSS "elmUIVCSS256" 256

123−

124−

125−elmUIVCSS512 : Benchmark.Render.Benchmark Model Msg

126−elmUIVCSS512 =

127− elmUIVCSS "elmUIVCSS512" 512

128−

129−

130−elmUIVCSS1024 : Benchmark.Render.Benchmark Model Msg

131−elmUIVCSS1024 =

132− elmUIVCSS "elmUIVCSS1024" 1024

133−

134−

135−elmUIVCSS2048 : Benchmark.Render.Benchmark Model Msg

136−elmUIVCSS2048 =

137− elmUIVCSS "elmUIVCSS2048" 2048

138−

139−

140−elmUIVCSS4096 : Benchmark.Render.Benchmark Model Msg

141−elmUIVCSS4096 =

142− elmUIVCSS "elmUIVCSS4096" 4096

143−

144−

145−elmUIVCSS8192 : Benchmark.Render.Benchmark Model Msg

146−elmUIVCSS8192 =

147− elmUIVCSS "elmUIVCSS8192" 8192

148−

149−

150−

151−{- Normal Html -}

152−

153−

154−viewHtml24 : Benchmark.Render.Benchmark Model Msg

155−viewHtml24 =

156− viewHtml "viewHtml24" 24

157−

158−

159−viewHtml64 : Benchmark.Render.Benchmark Model Msg

160−viewHtml64 =

161− viewHtml "viewHtml64" 64

162−

163−

164−viewHtml128 : Benchmark.Render.Benchmark Model Msg

165−viewHtml128 =

166− viewHtml "viewHtml128" 128

167−

168−

169−viewHtml256 : Benchmark.Render.Benchmark Model Msg

170−viewHtml256 =

171− viewHtml "viewHtml256" 256

172−

173−

174−viewHtml512 : Benchmark.Render.Benchmark Model Msg

175−viewHtml512 =

176− viewHtml "viewHtml512" 512

177−

178−

179−viewHtml1024 : Benchmark.Render.Benchmark Model Msg

180−viewHtml1024 =

181− viewHtml "viewHtml1024" 1024

182−

183−

184−viewHtml2048 : Benchmark.Render.Benchmark Model Msg

185−viewHtml2048 =

186− viewHtml "viewHtml2048" 2048

187−

188−

189−viewHtml4096 : Benchmark.Render.Benchmark Model Msg

190−viewHtml4096 =

191− viewHtml "viewHtml4096" 4096

192−

193−

194−viewHtml8192 : Benchmark.Render.Benchmark Model Msg

195−viewHtml8192 =

196− viewHtml "viewHtml8192" 8192

197−

198−

199−

200−{- Inline Html -}

201−

202−

203−viewInline24 : Benchmark.Render.Benchmark Model Msg

204−viewInline24 =

205− viewInline "viewInline24" 24

206−

207−

208−viewInline64 : Benchmark.Render.Benchmark Model Msg

209−viewInline64 =

210− viewInline "viewInline64" 64

211−

212−

213−viewInline128 : Benchmark.Render.Benchmark Model Msg

214−viewInline128 =

215− viewInline "viewInline128" 128

216−

217−

218−viewInline256 : Benchmark.Render.Benchmark Model Msg

219−viewInline256 =

220− viewInline "viewInline256" 256

221−

222−

223−viewInline512 : Benchmark.Render.Benchmark Model Msg

224−viewInline512 =

225− viewInline "viewInline512" 512

226−

227−

228−viewInline1024 : Benchmark.Render.Benchmark Model Msg

229−viewInline1024 =

230− viewInline "viewInline1024" 1024

231−

232−

233−viewInline2048 : Benchmark.Render.Benchmark Model Msg

234−viewInline2048 =

235− viewInline "viewInline2048" 2048

236−

237−

238−viewInline4096 : Benchmark.Render.Benchmark Model Msg

239−viewInline4096 =

240− viewInline "viewInline4096" 4096

241−

242−

243−viewInline8192 : Benchmark.Render.Benchmark Model Msg

244−viewInline8192 =

245− viewInline "viewInline8192" 8192

246−

247−

248−

249−{- END BENCHMARKS -}

250−

251−

252−type alias Model =

253− { index : Int

254− , numberOfElements : Int

255− , elements : List Int

256− }

257−

258−

259−type Msg

260− = Refresh

261− | Tick Float

262−

263−

264−{-| -}

265−elmUIVCSS : String -> Int -> Benchmark.Render.Benchmark Model Msg

266−elmUIVCSS name count =

267− { name = name

268− , init =

269− { index = 0

270− , numberOfElements = count

271− , elements = List.range 0 (count - 1)

272− }

273− , view =

274− \model ->

275− Element.layoutWith

276− { options =

277− [ Internal.RenderModeOption

278− Internal.WithVirtualCss

279− ]

280− }

281− []

282− (Element.column [ spacing 8, centerX ]

283− (List.map (viewEl model.index) model.elements)

284− )

285− , update =

286− \msg model ->

287− case msg of

288− Refresh ->

289− if model.index > model.numberOfElements then

290− { model | index = 0 }

291−

292− else

293− { model | index = model.index + 1 }

294−

295− Tick i ->

296− if model.index > model.numberOfElements then

297− { model | index = 0 }

298−

299− else

300− { model | index = model.index + 1 }

301− , tick = Tick

302− , refresh = Refresh

303− }

304−

305−

306−{-| -}

307−elmUI : String -> Int -> Benchmark.Render.Benchmark Model Msg

308−elmUI name count =

309− { name = name

310− , init =

311− { index = 0

312− , numberOfElements = count

313− , elements = List.range 0 (count - 1)

314− }

315− , view =

316− \model ->

317− Element.layout []

318− (Element.column [ spacing 8, centerX ]

319− (List.map (viewEl model.index) model.elements)

320− )

321− , update =

322− \msg model ->

323− case msg of

324− Refresh ->

325− if model.index > model.numberOfElements then

326− { model | index = 0 }

327−

328− else

329− { model | index = model.index + 1 }

330−

331− Tick i ->

332− if model.index > model.numberOfElements then

333− { model | index = 0 }

334−

335− else

336− { model | index = model.index + 1 }

337− , tick = Tick

338− , refresh = Refresh

339− }

340−

341−

342−viewEl selectedIndex index =

343− el

344− [ Background.color

345− (if selectedIndex == index then

346− pink

347−

348− else

349− white

350− )

351− , Font.color

352− (if selectedIndex /= index then

353− pink

354−

355− else

356− white

357− )

358− , padding 24

359− , width (px 500)

360− , height (px 70)

361− ]

362− (if selectedIndex == index then

363− text "selected"

364−

365− else

366− text "Hello!"

367− )

368−

369−

370−white =

371− rgb 1 1 1

372−

373−

374−pink =

375− rgb255 240 0 245

376−

377−

378−pinkish i =

379− rgb255 (wrap255 (i + 240)) 0 245

380−

381−

382−wrap255 i =

383− if i > 255 then

384− 0

385−

386− else if i < 0 then

387− 0

388−

389− else

390− i

391−

392−

393−{-| -}

394−viewHtml : String -> Int -> Benchmark.Render.Benchmark Model Msg

395−viewHtml name count =

396− { name = name

397− , init =

398− { index = 0

399− , numberOfElements = count

400− , elements = List.range 0 (count - 1)

401− }

402− , view =

403− \model ->

404− Html.div []

405− [ Html.div []

406− (List.map (viewHtmlElement model.index) model.elements)

407− ]

408− , update =

409− \msg model ->

410− case msg of

411− Refresh ->

412− if model.index > model.numberOfElements then

413− { model | index = 0 }

414−

415− else

416− { model | index = model.index + 1 }

417−

418− Tick i ->

419− if model.index > model.numberOfElements then

420− { model | index = 0 }

421−

422− else

423− { model | index = model.index + 1 }

424− , tick = Tick

425− , refresh = Refresh

426− }

427−

428−

429−viewHtmlElement selectedIndex index =

430− Html.div

431− [ Html.Attributes.class

432− (if selectedIndex == index then

433− "white"

434−

435− else

436− "pink"

437− )

438− ]

439− [ Html.div []

440− [ if selectedIndex == index then

441− Html.text "selected"

442−

443− else

444− Html.text "Hello!"

445− ]

446− ]

447−

448−

449−{-| -}

450−viewInline : String -> Int -> Benchmark.Render.Benchmark Model Msg

451−viewInline name count =

452− { name = name

453− , init =

454− { index = 0

455− , numberOfElements = count

456− , elements = List.range 0 (count - 1)

457− }

458− , view =

459− \model ->

460− Html.div []

461− [ Html.div []

462− (List.map (viewInlineHtmlElement model.index) model.elements)

463− ]

464− , update =

465− \msg model ->

466− case msg of

467− Refresh ->

468− if model.index > model.numberOfElements then

469− { model | index = 0 }

470−

471− else

472− { model | index = model.index + 1 }

473−

474− Tick i ->

475− if model.index > model.numberOfElements then

476− { model | index = 0 }

477−

478− else

479− { model | index = model.index + 1 }

480− , tick = Tick

481− , refresh = Refresh

482− }

483−

484−

485−viewInlineHtmlElement selectedIndex index =

486− Html.div

487− (if selectedIndex == index then

488− [ Html.Attributes.style "background-color" (renderColor (wrap255 (index + 240)) 0 245)

489− , Html.Attributes.style "color" "white"

490− , Html.Attributes.style "padding" "24"

491− ]

492−

493− else

494− [ Html.Attributes.style "background-color" "white"

495− , Html.Attributes.style "color" (renderColor (wrap255 (index + 240)) 0 245)

496− , Html.Attributes.style "padding" "24"

497− ]

498− )

499− [ Html.div []

500− [ if selectedIndex == index then

501− Html.text "selected"

502−

503− else

504− Html.text "Hello!"

505− ]

506− ]

507−

508−

509−renderColor r g b =

510− "rgb("

511− ++ String.fromInt r

512− ++ ","

513− ++ String.fromInt g

514− ++ ","

515− ++ String.fromInt b

516− ++ ")"

benchmarks/src/View/Results.elmdeleted−379

@@ -1,379 +0,0 @@

1−port module View.Results exposing (main)

2−

3−import Browser

4−import Color

5−import Html

6−import Html.Attributes as Attr exposing (class)

7−import LineChart as LineChart

8−import LineChart.Area as Area

9−import LineChart.Axis as Axis

10−import LineChart.Axis.Intersection as Intersection

11−import LineChart.Axis.Line as AxisLine

12−import LineChart.Axis.Range as Range

13−import LineChart.Axis.Ticks as Ticks

14−import LineChart.Axis.Title as Title

15−import LineChart.Colors as Colors

16−import LineChart.Container as Container

17−import LineChart.Dots as Dots

18−import LineChart.Events as Events

19−import LineChart.Grid as Grid

20−import LineChart.Interpolation as Interpolation

21−import LineChart.Junk as Junk exposing (..)

22−import LineChart.Legends as Legends

23−import LineChart.Line as Line

24−

25−

26−row children =

27− Html.div

28− [ Attr.style "display" "flex"

29− , Attr.style "flex-direction" "row"

30− ]

31− children

32−

33−

34−column children =

35− Html.div

36− [ Attr.style "display" "flex"

37− , Attr.style "flex-direction" "column"

38− ]

39− children

40−

41−

42−main =

43− Browser.document

44− { init =

45− \() ->

46− ( { data = [] }

47− , Cmd.none

48− )

49− , view =

50− \model ->

51− { title = "Results"

52− , body =

53− [ Html.div

54− [ class "container" ]

55− [ column

56− [ Html.h2 [] [ Html.text "Benchmarked Pages" ]

57− , row (List.map viewLinks model.data)

58− ]

59− , row

60− [ -- viewNodes model.data

61− viewFps model.data

62− , viewTimeToPaint model.data

63− ]

64− , row

65− [ column

66− (List.map

67− (\data ->

68− viewRenderBreakdown

69− { get = .coldRender

70− , getCount = .count

71− , name = data.name

72− , flavor = "Cold render"

73− , range = ( 0, 1.2 )

74− }

75− (List.sortBy .count data.results)

76− )

77− model.data

78− )

79− , column

80− (List.map

81− (\data ->

82− viewRenderBreakdown

83− { get = .warmRender

84− , getCount = .count

85− , name = data.name

86− , flavor = "Warm render"

87− , range = ( 0, 1.2 )

88− }

89− (List.sortBy .count data.results)

90− )

91− model.data

92− )

93− , column

94− (List.map

95− (\data ->

96− viewRenderBreakdown

97− { get = .extendedRender

98− , getCount = .count

99− , name = data.name

100− , flavor = "Long Animation"

101− , range = ( 0, 5 )

102− }

103− (List.sortBy .count data.results)

104− )

105− model.data

106− )

107− ]

108− ]

109− ]

110− }

111− , update =

112− update

113− , subscriptions =

114− \model ->

115− Sub.batch

116− [ worldToElm Received

117− ]

118− }

119−

120−

121−type Msg

122− = Received (List Data)

123−

124−

125−update : Msg -> Model -> ( Model, Cmd Msg )

126−update msg model =

127− case msg of

128− Received data ->

129− ( { data = data }, Cmd.none )

130−

131−

132−viewLinks data =

133− column

134− (Html.h1 [] [ Html.text data.name ]

135− :: (data.results

136− |> List.sortBy .link

137− |> List.map viewSingleLink

138− )

139− )

140−

141−

142−viewSingleLink result =

143− Html.a

144− [ Attr.href result.link

145− , Attr.style "padding-right" "30px"

146− ]

147− [ Html.text result.name ]

148−

149−

150−

151−-- DATA

152−

153−

154−port worldToElm : (List Data -> msg) -> Sub msg

155−

156−

157−type alias Model =

158− { data : List Data }

159−

160−

161−type alias Data =

162− { name : String

163− , results : List Render

164− }

165−

166−

167−type alias Render =

168− { name : String

169− , count : Float

170− , fps : Float

171− , timeToFirstPaintMS : Float

172− , nodes : Float

173− , link : String

174− , coldRender :

175− Breakdown

176− , warmRender :

177− Breakdown

178− , extendedRender :

179− Breakdown

180− }

181−

182−

183−type alias Breakdown =

184− { layoutSeconds : Float

185− , recalcStyleSeconds : Float

186− , scriptDurationSeconds : Float

187− }

188−

189−

190−

191−-- Different Views

192−

193−

194−getColor i =

195− case i of

196− 0 ->

197− Colors.green

198−

199− 1 ->

200− Colors.blue

201−

202− 2 ->

203− Colors.pink

204−

205− _ ->

206− Colors.gold

207−

208−

209−getShape i =

210− Dots.triangle

211−

212−

213−graphWidth =

214− 800

215−

216−

217−graphHeight =

218− 500

219−

220−

221−container =

222− Container.styled "line-chart-1"

223− [ ( "font-family", "monospace" )

224− , ( "flex-shrink", "0" )

225− ]

226−

227−

228−viewFps : List Data -> Html.Html msg

229−viewFps datums =

230− LineChart.viewCustom

231− { y = Axis.default graphHeight "FPS" .fps

232− , x = Axis.default graphWidth "Base Count" .count

233− , container = container

234− , interpolation =

235− -- Try out these different configs!

236− -- Interpolation.linear

237− Interpolation.monotone

238−

239− -- Interpolation.stepped

240− , intersection = Intersection.default

241− , legends = Legends.default

242− , events = Events.default

243− , junk = Junk.default

244− , grid = Grid.default

245− , area = Area.default

246− , line = Line.default

247− , dots = Dots.default

248− }

249− (List.indexedMap viewResult datums)

250−

251−

252−viewResult i data =

253− LineChart.line (getColor i) (getShape i) data.name (List.sortBy .count data.results)

254−

255−

256−viewTimeToPaint : List Data -> Html.Html msg

257−viewTimeToPaint datums =

258− LineChart.viewCustom

259− { y = Axis.default graphHeight "First Paint" (max 0 << .timeToFirstPaintMS)

260− , x = Axis.default graphWidth "Base Count" .count

261− , container = container

262− , interpolation =

263− -- Try out these different configs!

264− -- Interpolation.linear

265− Interpolation.monotone

266−

267− -- Interpolation.stepped

268− , intersection = Intersection.default

269− , legends = Legends.default

270− , events = Events.default

271− , junk = Junk.default

272− , grid = Grid.default

273− , area = Area.default

274− , line = Line.default

275− , dots = Dots.default

276− }

277− (List.indexedMap viewResult datums)

278−

279−

280−viewNodes : List Data -> Html.Html msg

281−viewNodes datums =

282− LineChart.viewCustom

283− { y = Axis.default graphHeight "Nodes" .nodes

284− , x = Axis.default graphWidth "Base Count" .count

285− , container = container

286− , interpolation =

287− -- Try out these different configs!

288− -- Interpolation.linear

289− Interpolation.monotone

290−

291− -- Interpolation.stepped

292− , intersection = Intersection.default

293− , legends = Legends.default

294− , events = Events.default

295− , junk = Junk.default

296− , grid = Grid.default

297− , area = Area.default

298− , line = Line.default

299− , dots = Dots.default

300− }

301− (List.indexedMap viewResult datums)

302−

303−

304−viewRenderBreakdown :

305− { get : Render -> Breakdown

306− , getCount : Render -> Float

307− , name : String

308− , flavor : String

309− , range : ( Float, Float )

310− }

311− -> List Render

312− -> Html.Html msg

313−viewRenderBreakdown { get, getCount, name, flavor, range } results =

314− Html.div []

315− [ Html.h2 [] [ Html.text (name ++ ", " ++ flavor) ]

316− , LineChart.viewCustom

317− { y =

318− Axis.custom

319− { title = Title.default (name ++ "(s)")

320− , variable = Just << .seconds

321− , pixels = graphHeight

322− , range = Range.window (Tuple.first range) (Tuple.second range)

323− , axisLine = AxisLine.full Colors.black

324− , ticks = Ticks.default

325− }

326− , x = Axis.default graphWidth "Base Count" .count

327− , container = container

328− , interpolation =

329− -- Try out these different configs!

330− -- Interpolation.linear

331− Interpolation.monotone

332−

333− -- Interpolation.stepped

334− , intersection = Intersection.default

335− , legends = Legends.default

336− , events = Events.default

337− , junk = Junk.default

338− , grid = Grid.default

339− , area = Area.stacked 0.5

340− , line = Line.default

341− , dots = Dots.default

342− }

343− [ LineChart.line (getColor 0)

344− (getShape 0)

345− "Layout"

346− (List.map

347− (\x ->

348− { seconds = .layoutSeconds (get x)

349− , count = getCount x

350− }

351− )

352− results

353− )

354− , LineChart.line (getColor 1)

355− (getShape 1)

356− "RecalcStyle"

357− (List.map

358− (\x ->

359− { seconds =

360− .recalcStyleSeconds (get x)

361− , count = getCount x

362− }

363− )

364− results

365− )

366− , LineChart.line (getColor 2)

367− (getShape 2)

368− "Script"

369− (List.map

370− (\x ->

371− { seconds =

372− .scriptDurationSeconds (get x)

373− , count = getCount x

374− }

375− )

376− results

377− )

378− ]

379− ]

elm.json+3−5

@@ -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.0.0",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

@@ -22,7 +22,5 @@

22 "elm/json": "1.0.0 <= v < 2.0.0",

23 "elm/virtual-dom": "1.0.0 <= v < 2.0.0"

24 },

25− "test-dependencies": {

25+ "test-dependencies": {}

26− "elm-explorations/test": "1.2.2 <= v < 2.0.0"

27− }

28−}

26+}

examples/Basic.elm+1−1

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

1−module Basic exposing (..)

1+module Main exposing (..)

2

3{-| -}

4

examples/Form.elm+4−12

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

1−module Form exposing (..)

1+module Main exposing (..)

2

3{-| -}

4

@@ -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 (..)

2

3{-| -}

4

examples/elm.json+22−19

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

1{

2− "type": "application",

2+ "type": "application",

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

3+ "source-directories": [

4+ ".",

5+ "../src/"

6+ ],

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

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

5− "dependencies": {

8+ "dependencies": {

6− "direct": {

9+ "direct": {

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

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

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

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

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

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

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

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

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

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

15+ },

16+ "indirect": {

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

18+ "elm/url": "1.0.0"

19+ }

12 },

20 },

13− "indirect": {

21+ "test-dependencies": {

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

22+ "direct": {},

15− "elm/url": "1.0.0"

23+ "indirect": {}

16 }

24 }

17− },

18− "test-dependencies": {

19− "direct": {},

20− "indirect": {}

21− }

22−}

25+}

experiments/font-adjustment-updated/FontAdjustment.elmdeleted−545

@@ -1,545 +0,0 @@

1−module Main exposing (main)

2−

3−{-| Line Height as its specified through CSS doesn't make a whole lot of sense typographically.

4−

5−We also run into issues with sizing a font. The font size generally refers to the full type size (from the top of ascendors to the bottom of descenders)

6−

7−However, sometimes we might want to size things from the top of the Capital to the baseline.

8−

9−Or from the top of the x-height to the baseline.

10−

11−The main place this shows up is for dropped capitals, and for text on buttons.

12−

13−-}

14−

15−import Browser

16−import Element exposing (..)

17−import Element.Background as Background

18−import Element.Border as Border

19−import Element.Font as Font

20−import Element.Input as Input

21−import Element.Lazy

22−import Html

23−import Html.Attributes

24−

25−

26−type alias FontAdjustment =

27− { lineHeight : Float

28− , capital : Line

29− , lowercase : Line

30− , baseline : Line

31− , descender : Line

32− }

33−

34−

35−type alias Line =

36− Float

37−

38−

39−type Msg

40− = UpdateAdjustment FontAdjustment

41−

42−

43−edges =

44− { top = 0

45− , right = 0

46− , bottom = 0

47− , left = 0

48− }

49−

50−

51−garamond =

52− let

53− default =

54− { capital = 1.09

55− , lowercase = 0.81

56− , baseline = 0.385

57− , descender = 0.095

58− , lineHeight = 1.5

59− }

60− in

61− { adjustment =

62− default

63− , converted =

64− convertAdjustment default

65− , font =

66− { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"

67− , name = "EB Garamond"

68− , variants = []

69− , adjustment =

70− { capital = default.capital

71− , lowercase = default.lowercase

72− , baseline = default.baseline

73− , descender = default.descender

74− }

75− }

76− }

77−

78−

79−catamaran =

80− let

81− default =

82− { capital = 1.15

83− , lowercase = 0.96

84− , baseline = 0.465

85− , descender = 0.245

86− , lineHeight = 1.5

87− }

88− in

89− { adjustment =

90− default

91− , converted =

92− convertAdjustment default

93− , font =

94− { url = Just "https://fonts.googleapis.com/css?family=Catamaran"

95− , name = "Catamaran"

96− , variants = []

97− , adjustment =

98− { capital = default.capital

99− , lowercase = default.lowercase

100− , baseline = default.baseline

101− , descender = default.descender

102− }

103− }

104− }

105−

106−

107−poiret =

108− let

109− default =

110− { capital = 1.12

111− , lowercase = 0.82

112− , baseline = 0.365

113− , descender = 0.18

114− , lineHeight = 1.5

115− }

116− in

117− { adjustment =

118− default

119− , converted =

120− convertAdjustment default

121− , font =

122− { url = Just "https://fonts.googleapis.com/css?family=Poiret+One"

123− , name = "Poiret One"

124− , variants = []

125− , adjustment =

126− { capital = default.capital

127− , lowercase = default.lowercase

128− , baseline = default.baseline

129− , descender = default.descender

130− }

131− }

132− }

133−

134−

135−roboto =

136− let

137− default =

138− { capital = 1.115

139− , lowercase = 0.93

140− , baseline = 0.4

141− , descender = 0.19

142− , lineHeight = 1.5

143− }

144− in

145− { adjustment =

146− default

147− , converted =

148− convertAdjustment default

149− , font =

150− { url = Just "https://fonts.googleapis.com/css?family=Roboto"

151− , name = "Roboto"

152− , adjustment =

153− { capital = default.capital

154− , lowercase = default.lowercase

155− , baseline = default.baseline

156− , descender = default.descender

157− }

158− , variants = []

159− }

160− }

161−

162−

163−init =

164− -- catamaran

165− garamond

166−

167−

168−

169−-- poiret

170−-- roboto

171−

172−

173−update msg model =

174− case msg of

175− UpdateAdjustment adj ->

176− let

177− font =

178− model.font

179− in

180− { model

181− | adjustment = adj

182− , converted = convertAdjustment adj

183− , font =

184− { font

185− | adjustment =

186− { capital = adj.capital

187− , lowercase = adj.lowercase

188− , baseline = adj.baseline

189− , descender = adj.descender

190− }

191− }

192− }

193−

194−

195−main =

196− Browser.sandbox

197− { init = init

198− , update = update

199− , view = view

200− }

201−

202−

203−view model =

204− Element.layout

205− [ above (html (Html.node "style" [] [ Html.text """

206−.lh-15 .t {

207− line-height: 1.5;

208−}

209−

210−.lh-norm .t {

211− line-height: normal;

212−}

213−

214− """ ]))

215− , Background.color (rgba 1 1 1 1)

216− , padding 100

217− , Font.color (rgba 0 0 0 1)

218− , Font.family

219− [ -- Font.external

220− -- { url = "https://fonts.googleapis.com/css?family=EB+Garamond"

221− -- , name = "EB Garamond"

222− -- }

223− -- Font.external

224− -- { url = "https://fonts.googleapis.com/css?family=Catamaran"

225− -- , name = "Catamaran"

226− -- }

227− Font.with

228− model.font

229− , Font.sansSerif

230− ]

231− ]

232− <|

233− column [ width fill, height fill, spacing 128 ]

234− [ adjustor 120 model.adjustment

235− , adjusted 120 model.converted

236− ]

237−

238−

239−style name val =

240− htmlAttribute (Html.Attributes.style name val)

241−

242−

243−class name =

244− htmlAttribute (Html.Attributes.class name)

245−

246−

247−charcoal =

248− rgb 0.7 0.7 0.7

249−

250−

251−adjustor size adjustment =

252− let

253− labels =

254− [ viewAdjustment "Type Height" adjustment.capital size 180 adjustment.lineHeight (\capital -> { adjustment | capital = capital })

255− , viewAdjustment "Lowercase Height" adjustment.lowercase size 60 adjustment.lineHeight (\lowercase -> { adjustment | lowercase = lowercase })

256− , viewAdjustment "Baseline" adjustment.baseline size 120 adjustment.lineHeight (\baseline -> { adjustment | baseline = baseline })

257− , viewAdjustment "Descender" adjustment.descender size 0 adjustment.lineHeight (\descender -> { adjustment | descender = descender })

258− ]

259− in

260− el

261− ([ centerX

262− , centerY

263− , Background.color (rgb 0 0.8 0.9)

264− , class "lh-15"

265− , style "line-height" (String.fromFloat adjustment.lineHeight)

266− , onRight

267− (el

268− [ centerY

269− , width (px 40)

270−

271− -- , height (px (round (toFloat size * (1 / 1.5))))

272− , height (px size)

273− , Background.color (rgb 0.9 0.8 0)

274− ]

275− none

276− )

277− , Font.size size

278− ]

279− ++ labels

280− )

281− (text "Typography")

282−

283−

284−adjusted size adjustment =

285− column

286− [ spacing 48

287− , centerX

288− , centerY

289− ]

290− [ el

291− [ Font.size 32 ]

292− (text "New Adjustments in Els")

293− , row

294− [ Font.size 85

295− , padding 80

296− , spacing 48

297− ]

298− [ el

299− [ Font.size 95

300− , Font.full

301− , Background.color (rgb 0 0.8 0.9)

302− , above (el [ Font.size 24, moveUp 6 ] (text "full height"))

303− , onLeft <|

304− el

305− [ centerY

306− , width (px 40)

307− , height (px 95)

308− , Background.color (rgb 0.9 0.8 0)

309− ]

310− none

311− ]

312− (text "Typography")

313− , el

314− [ Font.sizeByCapital

315− , Font.size 85

316− , Background.color (rgb 0 0.8 0.9)

317− , above (el [ Font.size 24, moveUp 6 ] (text "corrected capital"))

318− , onLeft <|

319− el

320− [ centerY

321− , width (px 40)

322− , height (px 85)

323− , Background.color (rgb 0.9 0.8 0)

324− ]

325− none

326− ]

327− (text "Typography")

328− ]

329− , el [ Font.size 32 ] (text "Standard Defaults in CSS")

330− , row

331− [ spacing 32

332− , Font.size 120

333− ]

334− [ el

335− [ Background.color (rgb 0 0.8 0.9)

336− , style "line-height" "normal"

337− , class "lh-norm"

338− , above (el [ Font.size 12 ] (text "line-height: normal"))

339− ]

340− (text "Typography")

341− , el

342− [ Background.color (rgb 0 0.8 0.9)

343− , style "line-height" "1"

344− , above (el [ Font.size 12 ] (text "line-height: 1"))

345− ]

346− (text "Typography")

347− ]

348− , row [ spacing 120 ]

349− [ paragraph

350− [ Font.size 25

351− , spacing 5

352− , width (px 200)

353− , Background.color

354− (rgb 0 0.8 0.9)

355− , above (el [ Font.size 32, moveUp 32 ] (text "Normal Paragraphs"))

356− ]

357− [ el [ Font.size 55, alignLeft, Background.color (rgb 0.9 0.8 0) ] (text "L")

358− , text "orem Ipsum is simply dummy text of the printing and typesetting industry."

359− ]

360− , paragraph

361− [ Font.size 45

362− , spacing 10

363− , width (px 600)

364− , inFront

365− (el

366− [ width (px 100)

367− , height (px 5)

368− , moveDown 45

369− , alignRight

370− , Background.color (rgba 0.9 0.8 0.2 0.5)

371− ]

372− none

373− )

374− , inFront

375− (el

376− [ width (px 100)

377− , height (px 45)

378− , alignRight

379− , Background.color (rgba 0 0 0 0.5)

380− ]

381− none

382− )

383− , Background.color

384− (rgb 0 0.8 0.9)

385− , above

386− (el [ Font.size 32, moveUp 32 ] (text "Corrected Paragraphs"))

387− ]

388− [ el

389− [ Font.size 100

390− , alignLeft

391− , Background.color (rgb 0.9 0.8 0)

392− , Font.sizeByCapital

393− ]

394− (text "C")

395− , text "ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32."

396− ]

397− ]

398− ]

399−

400−

401−corrected converted label =

402− el

403− [ Background.color (rgb 0 0.8 0.9)

404− , style "display" "block"

405− , above (el [ Font.size 12, moveUp 6 ] (text label))

406− , style "line-height" (String.fromFloat converted.height)

407− , below

408− (column [ Font.size 12, spacing 5, moveDown 10 ]

409− [ text ("height: " ++ String.left 5 (String.fromFloat converted.height))

410− , text ("vertical: " ++ String.left 5 (String.fromFloat converted.vertical))

411− ]

412− )

413− ]

414− (el

415− [ style "display" "inline-block"

416− , style "line-height" (String.fromFloat converted.height)

417− , style "vertical-align" (String.fromFloat converted.vertical ++ "em")

418− ]

419− (text "Typography")

420− )

421−

422−

423−convertAdjustment adjustment =

424− let

425− base =

426− adjustment.lineHeight

427−

428− normalDescender =

429− (adjustment.lineHeight - 1)

430− / 2

431−

432− oldMiddle =

433− adjustment.lineHeight / 2

434−

435− newCapitalMiddle =

436− ((ascender - newBaseline) / 2) + newBaseline

437−

438− newFullMiddle =

439− ((ascender - descender) / 2) + descender

440−

441− lines =

442− [ adjustment.capital

443− , adjustment.baseline

444− , adjustment.descender

445− , adjustment.lowercase

446− ]

447−

448− ascender =

449− Maybe.withDefault adjustment.capital (List.maximum lines)

450−

451− descender =

452− Maybe.withDefault adjustment.descender (List.minimum lines)

453−

454− newBaseline =

455− lines

456− |> List.filter (\x -> x /= descender)

457− |> List.minimum

458− |> Maybe.withDefault adjustment.baseline

459−

460− capitalVertical =

461− (oldMiddle - newCapitalMiddle) * 2

462−

463− fullVertical =

464− (oldMiddle - newFullMiddle) * 2

465− in

466− { full =

467− { vertical = fullVertical

468− , height =

469− (ascender - descender)

470− - abs fullVertical

471− }

472− , capital =

473− { vertical = capitalVertical

474− , height = (ascender - newBaseline) - abs capitalVertical

475− }

476− }

477−

478−

479−viewAdjustment label adjustment size left lineHeight updateWith =

480− let

481− fullHeight =

482− toFloat size * 1.5

483− in

484− onLeft

485− (el

486− [ moveLeft left

487− , height (px (round (toFloat size * lineHeight)))

488− ]

489− <|

490− Input.slider

491− [ Font.size 24

492− , Element.behindContent

493− (Element.el

494− [ Element.width (Element.px 1)

495− , Element.height Element.fill

496− , Element.centerY

497− , Background.color charcoal

498− , Border.rounded 2

499− ]

500− Element.none

501− )

502− , height (px (round fullHeight))

503− , width (px 1)

504− , spacing 0

505− , Background.color charcoal

506− , below (el [ centerX ] (text (String.fromFloat adjustment)))

507− , onRight

508− (el

509− [ height (px 0)

510− , width (px 800)

511− , moveRight 10

512− , alignBottom

513− , moveUp (fullHeight * (adjustment / lineHeight))

514− , Border.color (rgb 0 0 0)

515− , Border.dashed

516− , Border.widthEach

517− { top = 1

518− , right = 0

519− , bottom = 0

520− , left = 0

521− }

522− ]

523− none

524− )

525− ]

526− { label = Input.labelHidden "font adjustment"

527− , max = lineHeight

528− , min = 0

529− , onChange =

530− \x ->

531− UpdateAdjustment

532− (updateWith x)

533− , step = Just 0.005

534− , thumb =

535− Input.thumb

536− [ Element.width (Element.px 16)

537− , Element.height (Element.px 16)

538− , Border.rounded 8

539− , Border.width 1

540− , Border.color (Element.rgb 0.5 0.5 0.5)

541− , Background.color (Element.rgb 1 1 1)

542− ]

543− , value = adjustment

544− }

545− )

experiments/font-adjustment-updated/elm.jsondeleted−25

@@ -1,25 +0,0 @@

1−{

2− "type": "application",

3− "source-directories": [

4− ".",

5− "../../src/"

6− ],

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

8− "dependencies": {

9− "direct": {

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

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

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

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

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

15− },

16− "indirect": {

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

18− "elm/url": "1.0.0"

19− }

20− },

21− "test-dependencies": {

22− "direct": {},

23− "indirect": {}

24− }

25−}

experiments/font-adjustment/FontAdjustment.elm+19−31

@@ -40,11 +40,7 @@ type Msg

40

41

42edges =

43− { top = 0

44− , right = 0

45− , bottom = 0

43+ { top = 0, right = 0, bottom = 0, left = 0 }

46− , left = 0

47− }

48

44

49

45

50default =

46default =

@@ -162,36 +158,26 @@ adjustor size adjustment =

162

158

163

159

164adjusted size adjustment =

160adjusted size adjustment =

165− column

161+ row

166− [ spacing 48

167− , centerX

162+ [ centerX

168 , centerY

163 , centerY

164+ , spacing 32

165+ , Font.size 120

169 ]

166 ]

170− [ row

167+ [ el

171− [ spacing 32

172− , Font.size 120

173− , above (text "hi")

174− ]

175− [ el

176− [ Background.color (rgb 0 0.8 0.9)

168+ [ Background.color (rgb 0 0.8 0.9)

177− , style "line-height" "normal"

169+ , style "line-height" "normal"

178− , above (el [ Font.size 12 ] (text "line-height: normal"))

170+ , above (el [ Font.size 12 ] (text "line-height: normal"))

179− ]

180− (text "Typography")

181− , el

182− [ Background.color (rgb 0 0.8 0.9)

183− , style "line-height" "1"

184− , above (el [ Font.size 12 ] (text "line-height: 1"))

185− ]

186− (text "Typography")

187 ]

171 ]

188− , row

172+ (text "Typography")

189− [ spacing 32

173+ , el

190− , Font.size 120

174+ [ Background.color (rgb 0 0.8 0.9)

191− ]

175+ , style "line-height" "1"

192− [ corrected adjustment.full "corrected"

176+ , above (el [ Font.size 12 ] (text "line-height: 1"))

193− , corrected adjustment.capital "corrected capital"

194 ]

177 ]

178+ (text "Typography")

179+ , corrected adjustment.full "corrected"

180+ , corrected adjustment.capital "corrected capital"

195 , paragraph [ Font.size 25, spacing 5, width (px 200) ]

181 , paragraph [ Font.size 25, spacing 5, width (px 200) ]

196 [ el [ Font.size 55, alignLeft ] (text "L")

182 [ el [ Font.size 55, alignLeft ] (text "L")

197 , text "orem Ipsum is simply dummy text of the printing and typesetting industry."

183 , text "orem Ipsum is simply dummy text of the printing and typesetting industry."

@@ -258,6 +244,8 @@ convertAdjustment adjustment =

258 |> List.minimum

244 |> List.minimum

259 |> Maybe.withDefault adjustment.baseline

245 |> Maybe.withDefault adjustment.baseline

260

246

247+

248+

261 capitalVertical =

249 capitalVertical =

262 (oldMiddle - newCapitalMiddle) * 2

250 (oldMiddle - newCapitalMiddle) * 2

263

251

experiments/virtual-css/Main.elmdeleted−46

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

1−module Main exposing (main)

2−

3−import Browser

4−import Element exposing (..)

5−import Element.Background as Background

6−import Element.Events as Events

7−import Element.Font as Font

8−import Html

9−import Internal.Model as Internal

10−

11−

12−main =

13− Browser.sandbox

14− { init = 0

15− , update = update

16− , view = view

17− }

18−

19−

20−update msg model =

21− case msg of

22− Click ->

23− model + 1

24−

25−

26−type Msg

27− = Click

28−

29−

30−view model =

31− Element.layoutWith

32− { options =

33− [ Internal.RenderModeOption

34− Internal.WithVirtualCss

35− ]

36− }

37− [ Events.onClick Click ]

38− (el

39− [ padding 10

40− , Background.color (rgb 0 0 0.8)

41− , Font.color (rgb 1 1 1)

42− , centerX

43− , centerY

44− ]

45− (text ("hello!" ++ String.fromInt model))

46− )

experiments/virtual-css/Makefiledeleted−1

@@ -1 +0,0 @@

1−elm-live Main.elm --open --start-page=test.html -- --output=elm.js

experiments/virtual-css/cssom.jsdeleted−47

@@ -1,47 +0,0 @@

1−(function () {

2− var ruleCache = new Set()

3−

4− function createStyleNode() {

5− const node = document.createElement('style')

6− // Without it, IE will have a broken source order specificity if we

7− // insert rules after we insert the style tag.

8− // It seems to kick-off the source order specificity algorithm.

9− node.textContent = '\n'

10− document.head.appendChild(node);

11− return node

12− }

13−

14− var staticSheet = createStyleNode();

15− var sheet = createStyleNode().sheet;

16−

17− function sync_static(newStyleString) {

18− staticSheet.textContent = newStyleString

19− }

20−

21− function sync(newStyles) {

22− Object.keys(newStyles).forEach((key) => {

23− if (!ruleCache.has(key)) {

24− const newRule = newStyles[key]

25− for (var i = 0; i < newRule.length; i++) {

26− sheet.insertRule(newRule[i])

27− }

28− ruleCache.add(key)

29− }

30− });

31− }

32−

33− class CssRulesNode extends HTMLElement {

34− set rules(rules) {

35− sync(rules);

36− }

37− }

38− customElements.define('elm-ui-rules', CssRulesNode);

39−

40− class CssStaticRulesNode extends HTMLElement {

41− set rules(rules) {

42− sync_static(rules);

43− }

44− }

45− customElements.define('elm-ui-static-rules', CssStaticRulesNode);

46−

47−}())

experiments/virtual-css/elm.jsondeleted−25

@@ -1,25 +0,0 @@

1−{

2− "type": "application",

3− "source-directories": [

4− ".",

5− "../../src/"

6− ],

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

8− "dependencies": {

9− "direct": {

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

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

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

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

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

15− },

16− "indirect": {

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

18− "elm/url": "1.0.0"

19− }

20− },

21− "test-dependencies": {

22− "direct": {},

23− "indirect": {}

24− }

25−}

experiments/virtual-css/test.htmldeleted−18

@@ -1,18 +0,0 @@

1−<!DOCTYPE HTML>

2−<html>

3−<head>

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

5− <title>Main</title>

6− <script src="cssom.js"></script>

7− <script src="elm.js"></script>

8−</head>

9−

10−<body>

11− <div id="elm"></div>

12− <script>

13− var app = Elm.Main.init({

14− node: document.getElementById('elm')

15− });

16− </script>

17−</body>

18−</html>

experiments/workspace/Basic.elmdeleted−233

@@ -1,233 +0,0 @@

1−module Main exposing (main)

2−

3−{-| -}

4−

5−import Element exposing (..)

6−import Element.Background as Background

7−import Element.Font as Font

8−

9−

10−box =

11− el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none

12−

13−

14−main =

15− Element.layout

16− [ Background.color (rgba 1 1 1 1)

17− , Font.color (rgba 1 1 1 1)

18− , Font.size 64

19− , Font.family

20− [ Font.external

21− { url = "https://fonts.googleapis.com/css?family=EB+Garamond"

22− , name = "EB Garamond"

23− }

24− , Font.sansSerif

25− ]

26− ]

27− <|

28− column

29− [ spacing 40

30− , Background.color (rgb 1 1 1)

31− , centerX

32− , inFront

33− (el

34− [ Background.color (rgb 1 0 0)

35− , width (px 20)

36− , height (px 20)

37− ]

38− (text "in front of everything")

39− )

40− , behindContent

41− (el

42− [ Background.color (rgb 0.5 0.7 0)

43− , Font.color (rgb 1 1 1)

44− , moveDown 30

45− ]

46− (text "hi there")

47− )

48− ]

49− [ el

50− [ Background.color (rgba 0 0.9 0.8 1)

51− , Font.color (rgb 0 0 0)

52− , behindContent

53− (el

54− [ Background.color (rgb 0.9 0.9 0)

55− , Font.color (rgb 1 1 1)

56− ]

57− (text "hi there")

58− )

59− , inFront

60− (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "in front of stuff, behind one"))

61−

62− -- , Font.sizeByCapital

63− -- , Font.variant Font.smallCaps

64− -- , Font.variant Font.ligatures

65− -- , Font.variant Font.diagonalFractions

66− ]

67− (text "Quality 1st Hello stylish friend! ofl 123456 1/3")

68− , row

69− [ Background.color (rgba 0 0.9 0.8 1)

70− , Font.color (rgb 0 0 0)

71− , spacing 87

72− , behindContent

73− (el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there"))

74− , inFront

75− (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))

76−

77− -- , Font.sizeByCapital

78− -- , Font.variant Font.smallCaps

79− -- , Font.variant Font.ligatures

80− -- , Font.variant Font.diagonalFractions

81− ]

82− [ text "Quality 1st Hello stylish friend! ofl 123456 1/3"

83− ]

84− , el

85− [ Background.color (rgb 0.1 0.1 0.1)

86− , width (px 200)

87− , height (px 200)

88−

89− -- , below

90− -- (el

91− -- [ Background.color (rgb 1 0 0)

92− -- , width (px 20)

93− -- , height (px 20)

94− -- , moveDown 30

95− -- ]

96− -- none

97− -- )

98− , below

99− (el

100− [ Background.color (rgb 0.1 0.1 0.6)

101− , width (px 150)

102− , height (px 150)

103−

104− -- , alignBottom

105− ]

106− none

107− )

108− ]

109− none

110− , el

111− [ Background.color (rgb 0.1 0.1 0.1)

112− , width (px 200)

113− , height (px 200)

114− , above

115− (el

116− [ Background.color (rgb 1 0 0)

117− , width (px 20)

118− , height (px 20)

119−

120− -- , moveUp 30

121− ]

122− none

123− )

124− , onRight

125− (el

126− [ Background.color (rgb 1 0 0)

127− , width (px 20)

128− , height fill

129−

130− -- , moveUp 30

131− ]

132− none

133− )

134−

135− -- , inFront

136− -- (el

137− -- [ Background.color (rgb 0.1 0.1 0.6)

138− -- , width (px 150)

139− -- , height (px 150)

140− -- ]

141− -- none

142− -- )

143− -- , above

144− -- (el

145− -- [ Background.color (rgb 1 0 0)

146− -- , width (px 20)

147− -- , height (px 20)

148− -- , moveUp 30

149− -- ]

150− -- none

151− -- )

152− ]

153− none

154− , el

155− [ Background.color (rgb 0.1 0.1 0.1)

156− , width (px 200)

157− , height (px 200)

158− , below

159− (el

160− [ Background.color (rgb 1 0 0)

161− , width fill

162− , height (px 20)

163− ]

164− none

165− )

166− , above

167− (el

168− [ Background.color (rgb 1 0 0)

169− , width fill

170− , height (px 20)

171− ]

172− none

173− )

174− , onLeft

175− (el

176− [ Background.color (rgb 1 0 0)

177− , width (px 20)

178− , height fill

179− ]

180− none

181− )

182− , onRight

183− (el

184− [ Background.color (rgb 1 0 0)

185− , width (px 20)

186− , height fill

187− ]

188− none

189− )

190− ]

191− none

192− , el

193− [ Background.color (rgb 0.1 0.1 0.1)

194− , width (px 200)

195− , height (px 200)

196− , inFront

197− (el

198− [ Background.color (rgb 1 0 0)

199− , width fill

200− , height fill

201− ]

202− none

203− )

204− ]

205− none

206− ]

207−

208−

209−

210−-- row

211−-- [ --width (px 420)

212−-- padding 0

213−-- , spacing 20

214−-- , Background.color (rgb 0.2 0.2 0.3)

215−-- ]

216−-- [ box

217−-- , box

218−-- , box

219−-- -- , box

220−-- -- , box

221−-- ]

222−-- wrappedRow

223−-- [ width (px 420)

224−-- , padding 10

225−-- , spacing 20

226−-- , Background.color (rgb 0.2 0.2 0.3)

227−-- ]

228−-- [ box

229−-- , box

230−-- , box

231−-- , box

232−-- , box

233−-- ]

experiments/workspace/Form.elmdeleted−234

@@ -1,234 +0,0 @@

1−module Main exposing (Form, Lunch(..), Msg(..), blue, darkBlue, grey, init, main, red, update, view, white)

2−

3−{-| -}

4−

5−import Browser

6−import Element exposing (..)

7−import Element.Background as Background

8−import Element.Border as Border

9−import Element.Font as Font

10−import Element.Input as Input

11−import Element.Region as Region

12−import Html.Attributes

13−

14−

15−white =

16− Element.rgb 1 1 1

17−

18−

19−grey =

20− Element.rgb 0.9 0.9 0.9

21−

22−

23−blue =

24− Element.rgb 0 0 0.8

25−

26−

27−red =

28− Element.rgb 0.8 0 0

29−

30−

31−darkBlue =

32− Element.rgb 0 0 0.9

33−

34−

35−main =

36− Browser.sandbox

37− { init = init

38− , view = view

39− , update = update

40− }

41−

42−

43−init =

44− { username = ""

45− , password = ""

46− , agreeTOS = False

47− , comment = "Extra hot sauce?\n\n\nYes pls"

48− , lunch = Gyro

49− , spiciness = 2

50− }

51−

52−

53−type alias Form =

54− { username : String

55− , password : String

56− , agreeTOS : Bool

57− , comment : String

58− , lunch : Lunch

59− , spiciness : Float

60− }

61−

62−

63−type Msg

64− = Update Form

65−

66−

67−update msg model =

68− case Debug.log "msg" msg of

69− Update new ->

70− new

71−

72−

73−id i =

74− htmlAttribute (Html.Attributes.id i)

75−

76−

77−type Lunch

78− = Burrito

79− | Taco

80− | Gyro

81−

82−

83−view model =

84− Element.layout

85− [ Font.size 20

86− ]

87− <|

88− Element.column

89− [ width (px 800)

90− , height shrink

91− , centerY

92− , centerX

93− , spacing 36

94− , padding 10

95− ]

96− [ el

97− [ Region.heading 1

98− , alignLeft

99− , Font.size 36

100− ]

101− (text "Welcome to the Stylish Elephants Lunch Emporium")

102− , Input.radio

103− [ spacing 12

104− , alpha 0.5

105− , id "radio-1"

106− ]

107− { selected = Just model.lunch

108− , onChange = \new -> Update { model | lunch = new }

109− , label =

110− -- Input.labelHidden "Just a label"

111− Input.labelAbove

112− [ Font.size 14

113− , paddingXY 0 12

114− ]

115− (text "What would you like for lunch?")

116− , options =

117− [ Input.option Gyro (text "Gyro")

118− , Input.option Burrito (text "Burrito")

119− , Input.option Taco (text "Taco")

120− ]

121− }

122− , Input.text

123− [ spacing 12

124− , id "text-1"

125− ]

126− { text = model.username

127− , placeholder =

128− Just

129− (Input.placeholder

130− [ focused

131− [ moveUp 30 ]

132− ]

133− (text "Placeholder Label")

134− )

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

136− , label =

137− Input.labelHidden "Just a label"

138−

139− -- Input.labelBelow

140− -- [ Font.size 14

141− -- , focused

142− -- [ moveUp 30 ]

143− -- ]

144− -- (text "Username")

145− }

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

147− { text = model.password

148− , placeholder = Nothing

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

150− , label = Input.labelAbove [ Font.size 14 ] (text "Password")

151− , show = False

152− }

153− , Input.multiline

154− [ height

155− (shrink

156− |> maximum 400

157− )

158− , spacing 12

159− , id "multiline-1"

160− ]

161− { text = model.comment

162− , placeholder = Just (Input.placeholder [] (text "Extra hot sauce?\n\n\nYes pls"))

163− , onChange = \new -> Update { model | comment = new }

164− , label =

165− -- Input.labelAbove [ Font.size 14 ] (text "Leave a comment!")

166− Input.labelHidden "Just a label"

167− , spellcheck = False

168− }

169− , Input.checkbox [ id "checkbox-1" ]

170− { checked = model.agreeTOS

171− , onChange = \new -> Update { model | agreeTOS = new }

172− , icon = Input.defaultCheckbox

173− , label =

174− -- Input.labelRight [] (text "Agree to Terms of Service")

175− Input.labelHidden "Just a label"

176− }

177− , Input.slider

178− [ Element.height (Element.px 30)

179− , Element.behindContent

180− (Element.el

181− [ Element.width Element.fill

182− , Element.height (Element.px 2)

183− , Element.centerY

184− , Background.color grey

185− , Border.rounded 2

186− ]

187− Element.none

188− )

189− ]

190− { onChange = \new -> Update { model | spiciness = new }

191− , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))

192− , min = 0

193− , max = 3.2

194− , step = Nothing

195− , value = model.spiciness

196− , thumb =

197− Input.defaultThumb

198− }

199− , --el [height (px 300), width (px 30)] <|

200− Input.slider

201− [ Element.width (Element.px 40)

202− , Element.height (Element.px 80)

203− , Element.behindContent

204− (Element.el

205− [ Element.height Element.fill

206− , Element.width (Element.px 2)

207− , Element.centerX

208− , Background.color grey

209− , Border.rounded 2

210− ]

211− Element.none

212− )

213− ]

214− { onChange = \new -> Update { model | spiciness = new }

215− , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))

216− , min = 0

217− , max = 3.2

218− , step = Nothing

219− , value = model.spiciness

220− , thumb =

221− Input.defaultThumb

222− }

223− , Input.button

224− [-- Background.color blue

225− -- , Font.color white

226− -- , Border.color darkBlue

227− -- , paddingXY 32 16

228− -- , Border.rounded 3

229− -- , width fill

230− ]

231− { onPress = Nothing

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

233− }

234− ]

experiments/workspace/Scrollbars.elmdeleted−204

@@ -1,204 +0,0 @@

1−module Main exposing (main)

2−

3−{-| -}

4−

5−import Element exposing (..)

6−import Element.Background as Background

7−import Element.Font as Font

8−

9−

10−box =

11− el [ height (px 30), width (px 200), Background.color (rgb 0 0.8 0.9) ] none

12−

13−

14−main =

15− Element.layout

16− [ Background.color (rgba 1 1 1 1)

17− , Font.color (rgba 1 1 1 1)

18− , Font.size 64

19−

20− -- , Font.italic

21− , Font.family

22− [ Font.external

23− { url = "https://fonts.googleapis.com/css?family=EB+Garamond"

24− , name = "EB Garamond"

25− }

26−

27− -- Font.with

28− -- { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"

29− -- , name = "EB Garamond"

30− -- , adjustment =

31− -- { capital = 1.09

32− -- , lowercase = 0.81

33− -- , baseline = 0.385

34− -- , descender = 0.095

35− -- }

36− -- , variants =

37− -- [ Font.swash 1

38− -- , Font.smallCaps

39− -- -- , Font.diagonalFractions

40− -- -- , Font.ordinal

41− -- -- , Font.ligatures

42− -- ]

43− -- }

44− -- Font.with

45− -- { url = Just "https://fonts.googleapis.com/css?family=Raleway"

46− -- , name = "Raleway"

47− -- , adjustment =

48− -- { capital = 1.09

49− -- , lowercase = 0.81

50− -- , baseline = 0.385

51− -- , descender = 0.095

52− -- }

53− -- , variants =

54− -- [ Font.swash 2

55− -- , Font.ordinal

56− -- , Font.ligatures

57− -- -- , Font.small

58− -- ]

59− -- }

60− , Font.sansSerif

61− ]

62− ]

63− <|

64− column

65− [ spacing 20

66− , Background.color (rgb 1 1 1)

67− , inFront

68− (el

69− [ Background.color (rgb 1 0 0)

70− , width (px 20)

71− , height (px 20)

72− ]

73− none

74− )

75− , behindContent

76− (el

77− [ Background.color (rgb 0.5 0.7 0)

78− , Font.color (rgb 1 1 1)

79− , moveDown 30

80− ]

81− (text "hi there")

82− )

83− ]

84− [ el

85− [ Background.color (rgba 0 0.9 0.8 1)

86− , Font.color (rgb 0 0 0)

87− , behindContent

88− (el

89− [ Background.color (rgb 0.9 0.9 0)

90− , Font.color (rgb 1 1 1)

91− ]

92− (text "hi there")

93− )

94− , inFront

95− (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))

96−

97− -- , Font.sizeByCapital

98− -- , Font.variant Font.smallCaps

99− -- , Font.variant Font.ligatures

100− -- , Font.variant Font.diagonalFractions

101− ]

102− (text "Quality 1st Hello stylish friend! ofl 123456 1/3")

103− , el

104− [ Background.color (rgba 0 0.9 0.8 1)

105− , Font.color (rgb 0 0 0)

106− , behindContent

107− (el [ Background.color (rgb 0.9 0.9 0), Font.color (rgb 1 1 1) ] (text "hi there"))

108− , inFront

109− (el [ Background.color (rgb 0.9 0.9 0.5) ] (text "yo"))

110−

111− -- , Font.sizeByCapital

112− -- , Font.variant Font.smallCaps

113− -- , Font.variant Font.ligatures

114− -- , Font.variant Font.diagonalFractions

115− ]

116− (text "Quality 1st Hello stylish friend! ofl 123456 1/3")

117− , el

118− [ Background.color (rgb 0.1 0.1 0.1)

119− , width (px 200)

120− , height (px 200)

121−

122− -- , below

123− -- (el

124− -- [ Background.color (rgb 1 0 0)

125− -- , width (px 20)

126− -- , height (px 20)

127− -- , moveDown 30

128− -- ]

129− -- none

130− -- )

131− , below

132− (el

133− [ Background.color (rgb 0.1 0.1 0.6)

134− , width (px 150)

135− , height (px 150)

136−

137− -- , alignBottom

138− ]

139− none

140− )

141− ]

142− none

143− , el

144− [ Background.color (rgb 0.1 0.1 0.1)

145− , width (px 200)

146− , height (px 200)

147− , onRight

148− (el

149− [ Background.color (rgb 1 0 0)

150− , width (px 20)

151− , height fill

152−

153− -- , moveUp 30

154− ]

155− none

156− )

157−

158− -- , inFront

159− -- (el

160− -- [ Background.color (rgb 0.1 0.1 0.6)

161− -- , width (px 150)

162− -- , height (px 150)

163− -- ]

164− -- none

165− -- )

166− -- , above

167− -- (el

168− -- [ Background.color (rgb 1 0 0)

169− -- , width (px 20)

170− -- , height (px 20)

171− -- , moveUp 30

172− -- ]

173− -- none

174− -- )

175− ]

176− none

177− ]

178−

179−

180−

181−-- row

182−-- [ --width (px 420)

183−-- padding 0

184−-- , spacing 20

185−-- , Background.color (rgb 0.2 0.2 0.3)

186−-- ]

187−-- [ box

188−-- , box

189−-- , box

190−-- -- , box

191−-- -- , box

192−-- ]

193−-- wrappedRow

194−-- [ width (px 420)

195−-- , padding 10

196−-- , spacing 20

197−-- , Background.color (rgb 0.2 0.2 0.3)

198−-- ]

199−-- [ box

200−-- , box

201−-- , box

202−-- , box

203−-- , box

204−-- ]

experiments/workspace/Table.elmdeleted−65

@@ -1,65 +0,0 @@

1−module Main exposing (..)

2−

3−{-| -}

4−

5−import Element exposing (..)

6−import Element.Background as Background

7−import Element.Font as Font

8−import Element.Input

9−import Element.Lazy

10−

11−

12−type alias Person =

13− { firstName : String

14− , lastName : String

15− }

16−

17−

18−persons : List Person

19−persons =

20− [ { firstName = "David"

21− , lastName = "Bowie"

22− }

23− , { firstName = "Florence"

24− , lastName = "Welch"

25− }

26− ]

27−

28−

29−main =

30− Element.layout

31− [ Background.color (rgba 0 0 0 1)

32− , Font.color (rgba 1 1 1 1)

33− , Font.italic

34− , Font.size 32

35− , Font.family

36− [ Font.external

37− { url = "https://fonts.googleapis.com/css?family=EB+Garamond"

38− , name = "EB Garamond"

39− }

40− , Font.sansSerif

41− ]

42− ]

43− <|

44− Element.table

45− [ Element.centerX

46− , Element.centerY

47− , Element.spacing 5

48− , Element.padding 10

49− ]

50− { data = persons

51− , columns =

52− [ { header = Element.text "First Name"

53− , width = px 200

54− , view =

55− \person ->

56− Element.text person.firstName

57− }

58− , { header = Element.text "Last Name"

59− , width = fill

60− , view =

61− \person ->

62− Element.text person.lastName

63− }

64− ]

65− }

notes/BENCHMARKS.mddeleted−20

@@ -1,20 +0,0 @@

1−# Render Benchmark

2−

3−```bash

4−# In root directory

5−yarn install

6−yarn bench

7−```

8−

9−We're interested in overall rendering performance. Right now that means measuring:

10−

11−1. Speed for first paint.

12−2. Rerender speed.

13−3. FPS for extended animations.

14−

15−## Some notes about results.

16−

17−- For the extended animation graph, you see it tops out at a certain point. That's when the rendering pipeline is maxed out and it's now going below 60fps.

18−

19−- The html and inline style cases are **not really** directly comparable to the `elm-ui` stuff because they're not buying you the same thing (which is really write-able, maintainable layouts.) However they're nice to see because they're the current limit of elm's rendering.

20−

notes/RUNNING_TESTS.mddeleted−65

@@ -1,65 +0,0 @@

1−# Elm UI Test Suite

2−

3−There are two types of tests for Elm UI. The normal kind, which are located in `tests/suite/`

4−

5−These can be run using [`elm-test`](https://github.com/elm-explorations/test) and can be run via

6−

7−```bash

8−# in the root elm-ui directory

9−yarn install # or npm install

10−yarn run test # or npm run test

11−```

12−

13−**Note** you need to be at the `elm-ui` root dir.

14−

15−# Layout Testing

16−

17−`elm-ui` also needs to ensure that all layouts work as expected on all browsers.

18−

19−In order to do this, we need a different testing environment.

20−

21−So, the tests in `elm-ui/tests-rendering/src/Tests` will render output, then harvest bounding boxes form the browser, and run the test on the resulting data.

22−

23−Run this locally via:

24−

25−```bash

26−npm install

27−npm run test-render

28−```

29−

30−**Note** if you run this, it runs by default in headless chrome, so you won't see a browser actually open. Ideally you'll just see something like this:

31−

32−```

33−Compiling tests

34−Done compiling

35−Running locally on Chrome...

36−Local Chrome -> All 18029 tests passed

37−```

38−

39−That's right. We have 18,029 tests. Woohoo!

40−

41−# Running on Sauce Labs

42−

43−In order to automate some of this stuff, this test can be run on Sauce Labs.

44−

45−If you have an account, you'll need to create a `elm-ui/sauce.env` file, which has the following fields:

46−

47−```

48−export SAUCE_ACCESS_KEY={your key}

49−export SAUCE_USERNAME={your username}

50−```

51−

52−You can then run.

53−

54−```bash

55−npm run test-render-sauce

56−```

57−

58−**Note**: The compiled `elm-ui` test needs to be made public somewhere in order for this to work. At the moment it's at my github.io account, though something more permanenet might be set up.

59−

60−

61−# Sauce Labs References

62−

63−https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/

64−https://wiki.saucelabs.com/display/DOCS/Sauce+Labs+Basics

65−https://github.com/saucelabs-sample-test-frameworks/Python-Pytest-Selenium

notes/classifying-issues.mddeleted−29

@@ -1,29 +0,0 @@

1−# Classifying Issues

2−

3−

4−One of the first things we want to do is to keep our issues categorized.

5−

6−If you add a comment to an issue that references a label, that label will be assigned to that issue! (e.g. `#has-ellie` will add the `has-ellie` label.)

7−

8−[Here's one that I categorized](https://github.com/mdgriffith/elm-ui/issues/201)

9−

10−[Labels are described here](https://github.com/mdgriffith/elm-ui/labels)

11−

12−- **Feature Suggestions** - `#feature-suggestion` - This issue describes a feature suggestion. Tagging it with `#feature-suggestion` is all that needs to happen.

13−

14−- **Pain Point** - `#pain-point` - This is an issue that descrbes a challenge someone is facing, but makes not direct suggestion about how it should be solved. Here's a good example, [unable to applly text overflow ellipses](https://github.com/mdgriffith/elm-ui/issues/112).

15−

16−- **Bug** - `#bug` - The issue that's being described is potentially a bug. It may not be totally obvious what the fix is.

17− - **Has Ellie** - `#has-ellie` - Every bug described should have an ellie showing the problem, even if it's sorta trivial.

18− - **No Ellie** - If it's a bug, but has been checked for ellies and has no ellie, flag it as `#no-ellie`.

19− - **Has Test** - `#has-test` - Once we have an ellie for the problem, we want a version of that code in the codebase so I can easily take a look.

20− - The thing to do is to open a PR that copies that ellie into the [`tests-rendering/cases/open`](https://github.com/mdgriffith/elm-ui/tree/master/tests-rendering/cases/open) directory. Give it a succinct, human name.

21− - Rename the `Element.*` imports as `Testable.Element.*`

22− - Add a link to the issue, the title of the issue, and the body of the issue to the module comment. [Here's an example](https://github.com/mdgriffith/elm-ui/tree/master/tests-rendering/cases/open/InFrontSize.elm)

23− - Test is compiling - Optionally you can see if the test is compiling by first `cd tests-rendering` and then running `elm-live cases/open/{The file}.elm --open --dir=view -- --output=view/elm.js --debug`

24− - If it does not compile, flag the issue as `#test-not-compiling`. Don't worry about fixing it unless it's really obvious what needs to happen.

25− - Check if the test passes. Do that by opening `tests-rendering/cases/view/view.html` after running the above compilation. If it says all passes, likely you should flag the issue as `#test-incorrectly-passing`.

26− - If it's failing, you can flag as `#test-failing`

27−

28−

29−

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−

notes/discussion/Internationalization.mddeleted−13

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

1−# Internationalization

2−

3−What are the concerns that `elm-ui` should handle in order to properly support internationalization in an app?

4−

5−# Right-to-Left and Left-to-Right Languages

6−

7−[This talk from Strange Loop is an amazing overview of the concerns for RtL and LtR languages.](https://www.youtube.com/watch?v=xpumLsaAWGw&t=3s) Turns out it can get super crazy!

8−

9−It's also interesting because one of the design decisions in `elm-ui` is to support concrete directions like `alignLeft` and `alignRight` instead of `align-conten: flex-start`.

10−

11−

12−

13−

notes/discussion/PaletteGroups.mddeleted−132

@@ -1,132 +0,0 @@

1−# Mini Palette Experiment

2−

3−`elm-ui` currently implements most things such as layout and style as attributes on a element. These are intended to be explicit so that visiting an element will give you all the information you need to understand how an element is shown.

4−

5−However, this can also mean that Elements gather a lot of attributes and in the effort of capturing a consistent design language you may find yourself repeating a lot of combinations of attributes.

6−

7−Previously a construct like `mix : List (Attribute msg) -> Attribute msg` has been proposed as a way to make things easier, however that opens up a large design space. Developers then have to make the difficult decision about what attributes to group together. That decision is It also would allow intermixing of event handlers with style and layout, which seems weird.

8−

9−As an alternative, we could have specific groupings of attributes that are allowed. Done right, this may solve the problem of the dev having to worry about proper groupings and push them towards thinking of their design as a cohesive whole.

10−

11−My intuition says that these groupings will fall along the lines of the current module organization. Here are the helper functions that come to mind. These would be in addition to everything we already have.

12−

13−

14−## Spacing Palette

15−

16−```elm

17−Element.spaceWith :

18− { padding :

19− { top : Int

20− , right : Int

21− , bottom : Int

22− , left : Int

23− }

24− , spacing :

25− { x : Int

26− , y : Int

27− }

28− } -> Attribute msg

29−```

30−

31−## Color Palette

32−

33−It might be a little weird to have a color grouping, but my gut says it probably makes sense.

34−

35−By binding background and text color together, we can know all of our background and text color combinations, making it easier to verify and specifiy a minimum contrast for accessibility.

36−

37−```elm

38−Element.colors :

39− { background : Color

40− , text : Color

41− , border : Color

42− } -> Attribute msg

43−```

44−

45−## Font Palette

46−

47−```elm

48−Element.Font.with :

49− { typeface : String

50− , fallback : List String

51− , scale : Scale

52− -- adjustments is a new thing that's coming that will allow more precise font sizing.

53− , adjustments : Maybe Font.Adjustment

54− -- These are variations like `slash zero`

55− , variations : List Font.Variation

56− } -> (Option, Attribute msg)

57−

58−type Scale

59− = Single Int

60− | Triple

61− { small : Int

62− , normal : Int

63− , large : Int

64− }

65− | Fluid (windowSize -> Scale)

66−

67−

68−

69−

70−-- Usage

71−

72−(titleFont, title) =

73− Font.with

74− { typeface = "EB Garamond"

75− , fallback =

76− [ "georgia"

77− , "serif"

78− ]

79− , scale =

80− Font.Triple

81− { small = 12

82− , normal = 16

83− , large = 32

84− }

85− , adjustments = Nothing

86− , variations = []

87− }

88−

89−

90−view =

91− Element.layoutWith { options = [ titleFont ] } <|

92− el

93− [ title.large

94− ]

95− (text "I am a large title font")

96−

97−

98−```

99−

100−## Border Model

101−

102−```elm

103−Element.Border.with :

104− { width : Int

105− , style : Border.Style

106− , rounded :

107− { topLeft : Int

108− , topRight : Int

109− , bottomLeft : Int

110− , bottomRight : Int

111− }

112− }

113−```

114−

115−

116−## Shadow Model

117−

118−This might mean breaking out shadows into their own module.

119−

120−```elm

121−Element.Shadow.stack : List Shadow -> Attribute msg

122−```

123−

124−

125−# General Questions

126−

127−So, here are the questions I have:

128−

129−- If you have a current codebase with `elm-ui`, would this simplify things at all? Is there a way you can quantify it(most elements I have would have half as many attributes)?

130−- Are there alternate groupings that you've come across?

131−

132−

notes/implementation/NEARBY.mddeleted−24

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

1−# Rendering Order

2−

3−Nearby elements such as `below`, `above`, and `inFront` are rendered after the other children of the `Element. `behindContent` is rendered before.

4−

5−This is so:

6−

7−- `inFront` doesn't need a special `z-index` to work. This can increase performance because too many `z-index` overrides means shipping more layers to the gpu.

8−- Nearby elements higher up in the DOM hierarchy will be on top of elements lower in the hierarchy. `inFront` on a higher element should be on top of `inFront` elements on a lower element.

9−- Allows nearby elements to be affected by `focused` for `Input`, because they can be reached by a sibling selector. `.focuesed:focus ~ .focusable-style {}`

10−

11−

12−

13−# Desired Behavior of Nearby Elements

14−

15−

16−

17−- `inFront` on an element will be in front of all children.

18− - if there's an `inFront` attached to a child, it will be beneath the parent's `inFront`

19−- `behindContent`, likewise, will always be between the background and the element's children.

20−- `onLeft`, `onRight`, `above`, and `below` will be in front of any element they overlap with.

21− - if an element has an `inFront` and it's neighbor has an `onLeft`, then the `onLeft` element will be on top of the `inFront`.

22−- if `onLeft`, `onRight`, `above`, and `below` on separate elements overlap, source order wins:

23− - in a row, the one attached to the element farthest to the right wins.

24− - in a column, the one attached to the element farthest down wins.

notes/research/Accessiblity.mddeleted−9

@@ -1,9 +0,0 @@

1−# Accessibility Resources

2−

3−What are good resources that cover effective techniques for accessibility?

4−

5−This can be talks, articles, papers, blogposts, whatever.

6−

7−Ideally the list here should include a link and a brief description of what's interesting about the resource.

8−

9−**TODO**

notes/research/Compatibility-Android.mddeleted−12

@@ -1,12 +0,0 @@

1−# Android Compatibity

2−

3−I'd love to know how easy or difficlt it would be to use `elm-ui`'s API to generate Android layouts.

4−

5−This document is here to track any research that people want to do into the subject. The idea would be to link to specific Android documentation and/or describe an approach for each concept.

6−

7−

8−Full API coverage would be wonderful, though to here's a good place to start.

9−

10−- Row/Column

11−- Nearby's

12−- Spacing/Padding

notes/research/Compatibility-iOS.mddeleted−12

@@ -1,12 +0,0 @@

1−# iOS API Compatibility

2−

3−I'd love to know how easy or difficlt it would be to use `elm-ui`'s API to generate iOS layouts.

4−

5−This document is here to track any research that people want to do into the subject. The idea would be to link to specific iOS documentation and/or describe an approach for each concept.

6−

7−

8−Full API coverage would be wonderful, though to here's a good place to start.

9−

10−- Row/Column

11−- Nearby's

12−- Spacing/Padding

notes/research/Internationalization.mddeleted−10

@@ -1,10 +0,0 @@

1−# Internationalization Resources

2−

3−What are good resources that cover effective internationalization techniques?

4−

5−This can be talks, articles, papers, blogposts, whatever.

6−

7−Ideally the list here should include a link and a brief description of what's interesting about the resource.

8−

9−- [How supporting Right-to-Left can expose your bad UX](https://www.youtube.com/watch?v=xpumLsaAWGw&t=3s) - A wonderful talk on Right-to-Left support and how it's not as obvious as it may seem.

10− - [dir property](https://www.w3.org/International/questions/qa-html-dir)

package-lock.jsondeleted−1235

@@ -1,1235 +0,0 @@

1−{

2− "name": "elm-ui-testing",

3− "version": "1.0.0",

4− "lockfileVersion": 1,

5− "requires": true,

6− "dependencies": {

7− "ajv": {

8− "version": "6.12.0",

9− "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",

10− "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",

11− "requires": {

12− "fast-deep-equal": "^3.1.1",

13− "fast-json-stable-stringify": "^2.0.0",

14− "json-schema-traverse": "^0.4.1",

15− "uri-js": "^4.2.2"

16− }

17− },

18− "ansi-styles": {

19− "version": "3.2.1",

20− "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",

21− "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",

22− "requires": {

23− "color-convert": "^1.9.0"

24− }

25− },

26− "anymatch": {

27− "version": "3.1.1",

28− "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",

29− "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",

30− "requires": {

31− "normalize-path": "^3.0.0",

32− "picomatch": "^2.0.4"

33− }

34− },

35− "asn1": {

36− "version": "0.2.4",

37− "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",

38− "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",

39− "requires": {

40− "safer-buffer": "~2.1.0"

41− }

42− },

43− "assert-plus": {

44− "version": "1.0.0",

45− "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",

46− "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="

47− },

48− "asynckit": {

49− "version": "0.4.0",

50− "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",

51− "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="

52− },

53− "aws-sign2": {

54− "version": "0.7.0",

55− "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",

56− "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="

57− },

58− "aws4": {

59− "version": "1.9.1",

60− "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",

61− "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="

62− },

63− "balanced-match": {

64− "version": "1.0.0",

65− "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",

66− "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="

67− },

68− "bcrypt-pbkdf": {

69− "version": "1.0.2",

70− "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",

71− "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",

72− "requires": {

73− "tweetnacl": "^0.14.3"

74− }

75− },

76− "binary": {

77− "version": "0.3.0",

78− "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",

79− "integrity": "sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=",

80− "requires": {

81− "buffers": "~0.1.1",

82− "chainsaw": "~0.1.0"

83− }

84− },

85− "binary-extensions": {

86− "version": "2.0.0",

87− "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",

88− "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow=="

89− },

90− "binwrap": {

91− "version": "0.2.2",

92− "resolved": "https://registry.npmjs.org/binwrap/-/binwrap-0.2.2.tgz",

93− "integrity": "sha512-Y+Wvypk3JhH5GPZAvlwJAWOVH/OsOhQMSj37vySuWHwQivoALplPxfBA8b973rFJI7OS+O+1YmmYXIiEXVMAcw==",

94− "requires": {

95− "mustache": "^3.0.1",

96− "request": "^2.88.0",

97− "request-promise": "^4.2.4",

98− "tar": "^4.4.10",

99− "unzip-stream": "^0.3.0"

100− }

101− },

102− "bluebird": {

103− "version": "3.7.2",

104− "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",

105− "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="

106− },

107− "brace-expansion": {

108− "version": "1.1.11",

109− "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

110− "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",

111− "requires": {

112− "balanced-match": "^1.0.0",

113− "concat-map": "0.0.1"

114− }

115− },

116− "braces": {

117− "version": "3.0.2",

118− "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",

119− "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",

120− "requires": {

121− "fill-range": "^7.0.1"

122− }

123− },

124− "buffers": {

125− "version": "0.1.1",

126− "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",

127− "integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s="

128− },

129− "caseless": {

130− "version": "0.12.0",

131− "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",

132− "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="

133− },

134− "chainsaw": {

135− "version": "0.1.0",

136− "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",

137− "integrity": "sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=",

138− "requires": {

139− "traverse": ">=0.3.0 <0.4"

140− }

141− },

142− "chalk": {

143− "version": "2.4.2",

144− "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",

145− "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",

146− "requires": {

147− "ansi-styles": "^3.2.1",

148− "escape-string-regexp": "^1.0.5",

149− "supports-color": "^5.3.0"

150− },

151− "dependencies": {

152− "has-flag": {

153− "version": "3.0.0",

154− "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",

155− "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="

156− },

157− "supports-color": {

158− "version": "5.5.0",

159− "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

160− "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",

161− "requires": {

162− "has-flag": "^3.0.0"

163− }

164− }

165− }

166− },

167− "chokidar": {

168− "version": "3.3.0",

169− "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.0.tgz",

170− "integrity": "sha512-dGmKLDdT3Gdl7fBUe8XK+gAtGmzy5Fn0XkkWQuYxGIgWVPPse2CxFA5mtrlD0TOHaHjEUqkWNyP1XdHoJES/4A==",

171− "requires": {

172− "anymatch": "~3.1.1",

173− "braces": "~3.0.2",

174− "fsevents": "~2.1.1",

175− "glob-parent": "~5.1.0",

176− "is-binary-path": "~2.1.0",

177− "is-glob": "~4.0.1",

178− "normalize-path": "~3.0.0",

179− "readdirp": "~3.2.0"

180− }

181− },

182− "chownr": {

183− "version": "1.1.4",

184− "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",

185− "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="

186− },

187− "color-convert": {

188− "version": "1.9.3",

189− "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",

190− "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",

191− "requires": {

192− "color-name": "1.1.3"

193− }

194− },

195− "color-name": {

196− "version": "1.1.3",

197− "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",

198− "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="

199− },

200− "combined-stream": {

201− "version": "1.0.8",

202− "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",

203− "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",

204− "requires": {

205− "delayed-stream": "~1.0.0"

206− }

207− },

208− "commander": {

209− "version": "2.20.0",

210− "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",

211− "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="

212− },

213− "concat-map": {

214− "version": "0.0.1",

215− "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",

216− "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="

217− },

218− "core-util-is": {

219− "version": "1.0.2",

220− "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",

221− "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="

222− },

223− "cross-spawn": {

224− "version": "6.0.5",

225− "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",

226− "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",

227− "requires": {

228− "nice-try": "^1.0.4",

229− "path-key": "^2.0.1",

230− "semver": "^5.5.0",

231− "shebang-command": "^1.2.0",

232− "which": "^1.2.9"

233− }

234− },

235− "dashdash": {

236− "version": "1.14.1",

237− "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",

238− "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",

239− "requires": {

240− "assert-plus": "^1.0.0"

241− }

242− },

243− "delayed-stream": {

244− "version": "1.0.0",

245− "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",

246− "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="

247− },

248− "ecc-jsbn": {

249− "version": "0.1.2",

250− "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",

251− "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",

252− "requires": {

253− "jsbn": "~0.1.0",

254− "safer-buffer": "^2.1.0"

255− }

256− },

257− "elm": {

258− "version": "0.19.1-3",

259− "resolved": "https://registry.npmjs.org/elm/-/elm-0.19.1-3.tgz",

260− "integrity": "sha512-6y36ewCcVmTOx8lj7cKJs3bhI5qMfoVEigePZ9PhEUNKpwjjML/pU2u2YSpHVAznuCcojoF6KIsrS1Ci7GtVaQ==",

261− "requires": {

262− "request": "^2.88.0"

263− }

264− },

265− "elm-test": {

266− "version": "0.19.1-revision2",

267− "resolved": "https://registry.npmjs.org/elm-test/-/elm-test-0.19.1-revision2.tgz",

268− "integrity": "sha512-zVs2mVeyIE+K9y7/8b333h5xRMDWAoqbBDm7ThLDhyTi7ICxeL3t5uOS4KZCrRk9+4sP6+voSbcBlgr46Q+GiQ==",

269− "requires": {

270− "chalk": "3.0.0",

271− "chokidar": "3.3.0",

272− "cross-spawn": "7.0.1",

273− "elmi-to-json": "1.3.0",

274− "find-parent-dir": "^0.3.0",

275− "firstline": "2.0.2",

276− "fs-extra": "8.1.0",

277− "glob": "7.1.6",

278− "lodash": "4.17.15",

279− "minimist": "^1.2.0",

280− "murmur-hash-js": "1.0.0",

281− "node-elm-compiler": "5.0.4",

282− "split": "1.0.1",

283− "supports-color": "7.1.0",

284− "temp": "0.9.1",

285− "which": "2.0.1",

286− "xmlbuilder": "^13.0.2"

287− },

288− "dependencies": {

289− "ansi-styles": {

290− "version": "4.2.1",

291− "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",

292− "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",

293− "requires": {

294− "@types/color-name": "^1.1.1",

295− "color-convert": "^2.0.1"

296− },

297− "dependencies": {

298− "@types/color-name": {

299− "version": "1.1.1",

300− "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",

301− "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="

302− }

303− }

304− },

305− "chalk": {

306− "version": "3.0.0",

307− "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",

308− "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",

309− "requires": {

310− "ansi-styles": "^4.1.0",

311− "supports-color": "^7.1.0"

312− }

313− },

314− "color-convert": {

315− "version": "2.0.1",

316− "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",

317− "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",

318− "requires": {

319− "color-name": "~1.1.4"

320− }

321− },

322− "color-name": {

323− "version": "1.1.4",

324− "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",

325− "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="

326− },

327− "cross-spawn": {

328− "version": "7.0.1",

329− "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",

330− "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",

331− "requires": {

332− "path-key": "^3.1.0",

333− "shebang-command": "^2.0.0",

334− "which": "^2.0.1"

335− },

336− "dependencies": {

337− "path-key": {

338− "version": "3.1.1",

339− "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",

340− "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="

341− },

342− "shebang-command": {

343− "version": "2.0.0",

344− "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

345− "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",

346− "requires": {

347− "shebang-regex": "^3.0.0"

348− }

349− }

350− }

351− },

352− "find-elm-dependencies": {

353− "version": "2.0.2",

354− "resolved": "https://registry.npmjs.org/find-elm-dependencies/-/find-elm-dependencies-2.0.2.tgz",

355− "integrity": "sha512-nM5UCbccD1G8CGK2GsM7ykG3ksOAl9E+34jiDfl07CAl2OPnLpBVWY2hlxEmIkSBfdJjSopEowWHrO0cI8RhxQ==",

356− "requires": {

357− "firstline": "1.2.0",

358− "lodash": "4.17.15"

359− },

360− "dependencies": {

361− "firstline": {

362− "version": "1.2.0",

363− "resolved": "https://registry.npmjs.org/firstline/-/firstline-1.2.0.tgz",

364− "integrity": "sha1-yfSIbn9/vwr8EtcZQdzgaxkq6gU="

365− }

366− }

367− },

368− "firstline": {

369− "version": "2.0.2",

370− "resolved": "https://registry.npmjs.org/firstline/-/firstline-2.0.2.tgz",

371− "integrity": "sha512-8KcmfI0jgSECnzdhucm0i7vrwef3BWwgjimW2YkRC5eSFwjb5DibVoA0YvgkYwwxuJi9c+7M7X3b3lX8o9B6wg=="

372− },

373− "lodash": {

374− "version": "4.17.15",

375− "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",

376− "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="

377− },

378− "node-elm-compiler": {

379− "version": "5.0.4",

380− "resolved": "https://registry.npmjs.org/node-elm-compiler/-/node-elm-compiler-5.0.4.tgz",

381− "integrity": "sha512-VQsT8QSierYGkHzRed+b4MnccQVF1+qPHunE8jBoU7jD6YpuRqCDPzEoC2zfyEJS80qVnlMZrqobLnyjzX9lJg==",

382− "requires": {

383− "cross-spawn": "6.0.5",

384− "find-elm-dependencies": "2.0.2",

385− "lodash": "4.17.15",

386− "temp": "^0.9.0"

387− },

388− "dependencies": {

389− "cross-spawn": {

390− "version": "6.0.5",

391− "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",

392− "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",

393− "requires": {

394− "nice-try": "^1.0.4",

395− "path-key": "^2.0.1",

396− "semver": "^5.5.0",

397− "shebang-command": "^1.2.0",

398− "which": "^1.2.9"

399− }

400− },

401− "nice-try": {

402− "version": "1.0.5",

403− "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

404− "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="

405− },

406− "path-key": {

407− "version": "2.0.1",

408− "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",

409− "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="

410− },

411− "semver": {

412− "version": "5.7.1",

413− "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",

414− "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="

415− },

416− "shebang-command": {

417− "version": "1.2.0",

418− "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

419− "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",

420− "requires": {

421− "shebang-regex": "^1.0.0"

422− }

423− },

424− "shebang-regex": {

425− "version": "1.0.0",

426− "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",

427− "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="

428− },

429− "which": {

430− "version": "1.3.1",

431− "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

432− "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",

433− "requires": {

434− "isexe": "^2.0.0"

435− }

436− }

437− }

438− },

439− "supports-color": {

440− "version": "7.1.0",

441− "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",

442− "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",

443− "requires": {

444− "has-flag": "^4.0.0"

445− }

446− },

447− "temp": {

448− "version": "0.9.1",

449− "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.1.tgz",

450− "integrity": "sha512-WMuOgiua1xb5R56lE0eH6ivpVmg/lq2OHm4+LtT/xtEtPQ+sz6N3bBM6WZ5FvO1lO4IKIOb43qnhoc4qxP5OeA==",

451− "requires": {

452− "rimraf": "~2.6.2"

453− }

454− },

455− "which": {

456− "version": "2.0.1",

457− "resolved": "https://registry.npmjs.org/which/-/which-2.0.1.tgz",

458− "integrity": "sha512-N7GBZOTswtB9lkQBZA4+zAXrjEIWAUOB93AvzUiudRzRxhUdLURQ7D/gAIMY1gatT/LTbmbcv8SiYazy3eYB7w==",

459− "requires": {

460− "isexe": "^2.0.0"

461− }

462− }

463− }

464− },

465− "elmi-to-json": {

466− "version": "1.3.0",

467− "resolved": "https://registry.npmjs.org/elmi-to-json/-/elmi-to-json-1.3.0.tgz",

468− "integrity": "sha512-6m1D5/Pb5pUrSOOBgRG3fE2mK19nhmLgZ16jj2KWTVIhT+0GIBuDI1iV0Fee27CZH790J7uMcdGWJ7fnVvpsKg==",

469− "requires": {

470− "binwrap": "0.2.2"

471− }

472− },

473− "escape-string-regexp": {

474− "version": "1.0.5",

475− "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",

476− "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="

477− },

478− "extend": {

479− "version": "3.0.2",

480− "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",

481− "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="

482− },

483− "extsprintf": {

484− "version": "1.3.0",

485− "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",

486− "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="

487− },

488− "fast-deep-equal": {

489− "version": "3.1.1",

490− "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",

491− "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="

492− },

493− "fast-json-stable-stringify": {

494− "version": "2.1.0",

495− "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",

496− "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="

497− },

498− "fill-range": {

499− "version": "7.0.1",

500− "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

501− "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",

502− "requires": {

503− "to-regex-range": "^5.0.1"

504− }

505− },

506− "find-elm-dependencies": {

507− "version": "2.0.2",

508− "resolved": "https://registry.npmjs.org/find-elm-dependencies/-/find-elm-dependencies-2.0.2.tgz",

509− "integrity": "sha512-nM5UCbccD1G8CGK2GsM7ykG3ksOAl9E+34jiDfl07CAl2OPnLpBVWY2hlxEmIkSBfdJjSopEowWHrO0cI8RhxQ==",

510− "requires": {

511− "firstline": "1.2.0",

512− "lodash": "4.17.15"

513− }

514− },

515− "find-parent-dir": {

516− "version": "0.3.0",

517− "resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.0.tgz",

518− "integrity": "sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ="

519− },

520− "firstline": {

521− "version": "1.2.0",

522− "resolved": "https://registry.npmjs.org/firstline/-/firstline-1.2.0.tgz",

523− "integrity": "sha1-yfSIbn9/vwr8EtcZQdzgaxkq6gU="

524− },

525− "forever-agent": {

526− "version": "0.6.1",

527− "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",

528− "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="

529− },

530− "form-data": {

531− "version": "2.3.3",

532− "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",

533− "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",

534− "requires": {

535− "asynckit": "^0.4.0",

536− "combined-stream": "^1.0.6",

537− "mime-types": "^2.1.12"

538− }

539− },

540− "fs-extra": {

541− "version": "8.1.0",

542− "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",

543− "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",

544− "requires": {

545− "graceful-fs": "^4.2.0",

546− "jsonfile": "^4.0.0",

547− "universalify": "^0.1.0"

548− }

549− },

550− "fs-minipass": {

551− "version": "1.2.7",

552− "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",

553− "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",

554− "requires": {

555− "minipass": "^2.6.0"

556− }

557− },

558− "fs.realpath": {

559− "version": "1.0.0",

560− "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

561− "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="

562− },

563− "fsevents": {

564− "version": "2.1.2",

565− "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",

566− "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",

567− "optional": true

568− },

569− "getpass": {

570− "version": "0.1.7",

571− "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",

572− "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",

573− "requires": {

574− "assert-plus": "^1.0.0"

575− }

576− },

577− "glob": {

578− "version": "7.1.6",

579− "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",

580− "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",

581− "requires": {

582− "fs.realpath": "^1.0.0",

583− "inflight": "^1.0.4",

584− "inherits": "2",

585− "minimatch": "^3.0.4",

586− "once": "^1.3.0",

587− "path-is-absolute": "^1.0.0"

588− }

589− },

590− "glob-parent": {

591− "version": "5.1.0",

592− "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",

593− "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",

594− "requires": {

595− "is-glob": "^4.0.1"

596− }

597− },

598− "graceful-fs": {

599− "version": "4.2.3",

600− "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",

601− "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="

602− },

603− "har-schema": {

604− "version": "2.0.0",

605− "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",

606− "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="

607− },

608− "har-validator": {

609− "version": "5.1.3",

610− "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",

611− "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",

612− "requires": {

613− "ajv": "^6.5.5",

614− "har-schema": "^2.0.0"

615− }

616− },

617− "has-flag": {

618− "version": "4.0.0",

619− "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",

620− "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="

621− },

622− "http-signature": {

623− "version": "1.2.0",

624− "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",

625− "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",

626− "requires": {

627− "assert-plus": "^1.0.0",

628− "jsprim": "^1.2.2",

629− "sshpk": "^1.7.0"

630− }

631− },

632− "immediate": {

633− "version": "3.0.6",

634− "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",

635− "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="

636− },

637− "inflight": {

638− "version": "1.0.6",

639− "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",

640− "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",

641− "requires": {

642− "once": "^1.3.0",

643− "wrappy": "1"

644− }

645− },

646− "inherits": {

647− "version": "2.0.4",

648− "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",

649− "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="

650− },

651− "is-binary-path": {

652− "version": "2.1.0",

653− "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",

654− "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",

655− "requires": {

656− "binary-extensions": "^2.0.0"

657− }

658− },

659− "is-extglob": {

660− "version": "2.1.1",

661− "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",

662− "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="

663− },

664− "is-glob": {

665− "version": "4.0.1",

666− "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",

667− "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",

668− "requires": {

669− "is-extglob": "^2.1.1"

670− }

671− },

672− "is-number": {

673− "version": "7.0.0",

674− "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",

675− "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="

676− },

677− "is-typedarray": {

678− "version": "1.0.0",

679− "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",

680− "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="

681− },

682− "isarray": {

683− "version": "1.0.0",

684− "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",

685− "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="

686− },

687− "isexe": {

688− "version": "2.0.0",

689− "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",

690− "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="

691− },

692− "isstream": {

693− "version": "0.1.2",

694− "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",

695− "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="

696− },

697− "jsbn": {

698− "version": "0.1.1",

699− "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",

700− "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="

701− },

702− "json-schema": {

703− "version": "0.2.3",

704− "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",

705− "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="

706− },

707− "json-schema-traverse": {

708− "version": "0.4.1",

709− "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",

710− "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="

711− },

712− "json-stringify-safe": {

713− "version": "5.0.1",

714− "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",

715− "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="

716− },

717− "jsonfile": {

718− "version": "4.0.0",

719− "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",

720− "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",

721− "requires": {

722− "graceful-fs": "^4.1.6"

723− }

724− },

725− "jsprim": {

726− "version": "1.4.1",

727− "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",

728− "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",

729− "requires": {

730− "assert-plus": "1.0.0",

731− "extsprintf": "1.3.0",

732− "json-schema": "0.2.3",

733− "verror": "1.10.0"

734− }

735− },

736− "jszip": {

737− "version": "3.4.0",

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

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

740− "requires": {

741− "lie": "~3.3.0",

742− "pako": "~1.0.2",

743− "readable-stream": "~2.3.6",

744− "set-immediate-shim": "~1.0.1"

745− }

746− },

747− "lie": {

748− "version": "3.3.0",

749− "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",

750− "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",

751− "requires": {

752− "immediate": "~3.0.5"

753− }

754− },

755− "lodash": {

756− "version": "4.17.15",

757− "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",

758− "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="

759− },

760− "mime-db": {

761− "version": "1.43.0",

762− "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",

763− "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ=="

764− },

765− "mime-types": {

766− "version": "2.1.26",

767− "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",

768− "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",

769− "requires": {

770− "mime-db": "1.43.0"

771− }

772− },

773− "minimatch": {

774− "version": "3.0.4",

775− "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",

776− "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",

777− "requires": {

778− "brace-expansion": "^1.1.7"

779− }

780− },

781− "minimist": {

782− "version": "1.2.4",

783− "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.4.tgz",

784− "integrity": "sha512-wTiNDqe4D2rbTJGZk1qcdZgFtY0/r+iuE6GDT7V0/+Gu5MLpIDm4+CssDECR79OJs/OxLPXMzdxy153b5Qy3hg=="

785− },

786− "minipass": {

787− "version": "2.9.0",

788− "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",

789− "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",

790− "requires": {

791− "safe-buffer": "^5.1.2",

792− "yallist": "^3.0.0"

793− }

794− },

795− "minizlib": {

796− "version": "1.3.3",

797− "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",

798− "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",

799− "requires": {

800− "minipass": "^2.9.0"

801− }

802− },

803− "mkdirp": {

804− "version": "0.5.5",

805− "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",

806− "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",

807− "requires": {

808− "minimist": "^1.2.5"

809− },

810− "dependencies": {

811− "minimist": {

812− "version": "1.2.5",

813− "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",

814− "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="

815− }

816− }

817− },

818− "murmur-hash-js": {

819− "version": "1.0.0",

820− "resolved": "https://registry.npmjs.org/murmur-hash-js/-/murmur-hash-js-1.0.0.tgz",

821− "integrity": "sha1-UEEEkmnJZjPIZjhpYLL0KJ515bA="

822− },

823− "mustache": {

824− "version": "3.2.1",

825− "resolved": "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz",

826− "integrity": "sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA=="

827− },

828− "nice-try": {

829− "version": "1.0.5",

830− "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

831− "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ=="

832− },

833− "node-elm-compiler": {

834− "version": "5.0.4",

835− "resolved": "https://registry.npmjs.org/node-elm-compiler/-/node-elm-compiler-5.0.4.tgz",

836− "integrity": "sha512-VQsT8QSierYGkHzRed+b4MnccQVF1+qPHunE8jBoU7jD6YpuRqCDPzEoC2zfyEJS80qVnlMZrqobLnyjzX9lJg==",

837− "requires": {

838− "cross-spawn": "6.0.5",

839− "find-elm-dependencies": "2.0.2",

840− "lodash": "4.17.15",

841− "temp": "^0.9.0"

842− }

843− },

844− "normalize-path": {

845− "version": "3.0.0",

846− "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",

847− "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="

848− },

849− "oauth-sign": {

850− "version": "0.9.0",

851− "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",

852− "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="

853− },

854− "once": {

855− "version": "1.4.0",

856− "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",

857− "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",

858− "requires": {

859− "wrappy": "1"

860− }

861− },

862− "os-tmpdir": {

863− "version": "1.0.2",

864− "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",

865− "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="

866− },

867− "pako": {

868− "version": "1.0.11",

869− "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",

870− "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="

871− },

872− "path-is-absolute": {

873− "version": "1.0.1",

874− "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",

875− "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="

876− },

877− "path-key": {

878− "version": "2.0.1",

879− "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",

880− "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="

881− },

882− "performance-now": {

883− "version": "2.1.0",

884− "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",

885− "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="

886− },

887− "picomatch": {

888− "version": "2.2.1",

889− "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",

890− "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA=="

891− },

892− "process-nextick-args": {

893− "version": "2.0.1",

894− "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",

895− "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="

896− },

897− "psl": {

898− "version": "1.7.0",

899− "resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz",

900− "integrity": "sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ=="

901− },

902− "punycode": {

903− "version": "2.1.1",

904− "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",

905− "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="

906− },

907− "qs": {

908− "version": "6.5.2",

909− "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",

910− "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="

911− },

912− "readable-stream": {

913− "version": "2.3.7",

914− "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",

915− "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",

916− "requires": {

917− "core-util-is": "~1.0.0",

918− "inherits": "~2.0.3",

919− "isarray": "~1.0.0",

920− "process-nextick-args": "~2.0.0",

921− "safe-buffer": "~5.1.1",

922− "string_decoder": "~1.1.1",

923− "util-deprecate": "~1.0.1"

924− },

925− "dependencies": {

926− "safe-buffer": {

927− "version": "5.1.2",

928− "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",

929− "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="

930− }

931− }

932− },

933− "readdirp": {

934− "version": "3.2.0",

935− "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.2.0.tgz",

936− "integrity": "sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==",

937− "requires": {

938− "picomatch": "^2.0.4"

939− }

940− },

941− "request": {

942− "version": "2.88.2",

943− "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",

944− "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",

945− "requires": {

946− "aws-sign2": "~0.7.0",

947− "aws4": "^1.8.0",

948− "caseless": "~0.12.0",

949− "combined-stream": "~1.0.6",

950− "extend": "~3.0.2",

951− "forever-agent": "~0.6.1",

952− "form-data": "~2.3.2",

953− "har-validator": "~5.1.3",

954− "http-signature": "~1.2.0",

955− "is-typedarray": "~1.0.0",

956− "isstream": "~0.1.2",

957− "json-stringify-safe": "~5.0.1",

958− "mime-types": "~2.1.19",

959− "oauth-sign": "~0.9.0",

960− "performance-now": "^2.1.0",

961− "qs": "~6.5.2",

962− "safe-buffer": "^5.1.2",

963− "tough-cookie": "~2.5.0",

964− "tunnel-agent": "^0.6.0",

965− "uuid": "^3.3.2"

966− }

967− },

968− "request-promise": {

969− "version": "4.2.5",

970− "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.2.5.tgz",

971− "integrity": "sha512-ZgnepCykFdmpq86fKGwqntyTiUrHycALuGggpyCZwMvGaZWgxW6yagT0FHkgo5LzYvOaCNvxYwWYIjevSH1EDg==",

972− "requires": {

973− "bluebird": "^3.5.0",

974− "request-promise-core": "1.1.3",

975− "stealthy-require": "^1.1.1",

976− "tough-cookie": "^2.3.3"

977− }

978− },

979− "request-promise-core": {

980− "version": "1.1.3",

981− "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.3.tgz",

982− "integrity": "sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==",

983− "requires": {

984− "lodash": "^4.17.15"

985− }

986− },

987− "rimraf": {

988− "version": "2.6.3",

989− "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",

990− "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",

991− "requires": {

992− "glob": "^7.1.3"

993− }

994− },

995− "safe-buffer": {

996− "version": "5.2.0",

997− "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",

998− "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="

999− },

1000− "safer-buffer": {

1001− "version": "2.1.2",

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

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

1004− },

1005− "selenium-webdriver": {

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

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

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

1009− "requires": {

1010− "jszip": "^3.2.2",

1011− "rimraf": "^2.7.1",

1012− "tmp": "0.0.30"

1013− },

1014− "dependencies": {

1015− "rimraf": {

1016− "version": "2.7.1",

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

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

1019− "requires": {

1020− "glob": "^7.1.3"

1021− }

1022− }

1023− }

1024− },

1025− "semver": {

1026− "version": "5.7.1",

1027− "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",

1028− "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="

1029− },

1030− "set-immediate-shim": {

1031− "version": "1.0.1",

1032− "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",

1033− "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="

1034− },

1035− "shebang-command": {

1036− "version": "1.2.0",

1037− "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

1038− "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",

1039− "requires": {

1040− "shebang-regex": "^1.0.0"

1041− },

1042− "dependencies": {

1043− "shebang-regex": {

1044− "version": "1.0.0",

1045− "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",

1046− "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="

1047− }

1048− }

1049− },

1050− "shebang-regex": {

1051− "version": "3.0.0",

1052− "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",

1053− "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="

1054− },

1055− "split": {

1056− "version": "1.0.1",

1057− "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",

1058− "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",

1059− "requires": {

1060− "through": "2"

1061− }

1062− },

1063− "sshpk": {

1064− "version": "1.16.1",

1065− "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",

1066− "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",

1067− "requires": {

1068− "asn1": "~0.2.3",

1069− "assert-plus": "^1.0.0",

1070− "bcrypt-pbkdf": "^1.0.0",

1071− "dashdash": "^1.12.0",

1072− "ecc-jsbn": "~0.1.1",

1073− "getpass": "^0.1.1",

1074− "jsbn": "~0.1.0",

1075− "safer-buffer": "^2.0.2",

1076− "tweetnacl": "~0.14.0"

1077− }

1078− },

1079− "stealthy-require": {

1080− "version": "1.1.1",

1081− "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",

1082− "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="

1083− },

1084− "string_decoder": {

1085− "version": "1.1.1",

1086− "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",

1087− "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",

1088− "requires": {

1089− "safe-buffer": "~5.1.0"

1090− },

1091− "dependencies": {

1092− "safe-buffer": {

1093− "version": "5.1.2",

1094− "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",

1095− "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="

1096− }

1097− }

1098− },

1099− "tar": {

1100− "version": "4.4.13",

1101− "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",

1102− "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",

1103− "requires": {

1104− "chownr": "^1.1.1",

1105− "fs-minipass": "^1.2.5",

1106− "minipass": "^2.8.6",

1107− "minizlib": "^1.2.1",

1108− "mkdirp": "^0.5.0",

1109− "safe-buffer": "^5.1.2",

1110− "yallist": "^3.0.3"

1111− }

1112− },

1113− "temp": {

1114− "version": "0.9.1",

1115− "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.1.tgz",

1116− "integrity": "sha512-WMuOgiua1xb5R56lE0eH6ivpVmg/lq2OHm4+LtT/xtEtPQ+sz6N3bBM6WZ5FvO1lO4IKIOb43qnhoc4qxP5OeA==",

1117− "requires": {

1118− "rimraf": "~2.6.2"

1119− }

1120− },

1121− "through": {

1122− "version": "2.3.8",

1123− "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

1124− "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="

1125− },

1126− "tmp": {

1127− "version": "0.0.30",

1128− "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.30.tgz",

1129− "integrity": "sha1-ckGdSovn1s51FI/YsyTlk6cRwu0=",

1130− "requires": {

1131− "os-tmpdir": "~1.0.1"

1132− }

1133− },

1134− "to-regex-range": {

1135− "version": "5.0.1",

1136− "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

1137− "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",

1138− "requires": {

1139− "is-number": "^7.0.0"

1140− }

1141− },

1142− "tough-cookie": {

1143− "version": "2.5.0",

1144− "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",

1145− "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",

1146− "requires": {

1147− "psl": "^1.1.28",

1148− "punycode": "^2.1.1"

1149− }

1150− },

1151− "traverse": {

1152− "version": "0.3.9",

1153− "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",

1154− "integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk="

1155− },

1156− "tunnel-agent": {

1157− "version": "0.6.0",

1158− "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

1159− "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",

1160− "requires": {

1161− "safe-buffer": "^5.0.1"

1162− }

1163− },

1164− "tweetnacl": {

1165− "version": "0.14.5",

1166− "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",

1167− "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="

1168− },

1169− "universalify": {

1170− "version": "0.1.2",

1171− "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",

1172− "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="

1173− },

1174− "unzip-stream": {

1175− "version": "0.3.0",

1176− "resolved": "https://registry.npmjs.org/unzip-stream/-/unzip-stream-0.3.0.tgz",

1177− "integrity": "sha512-NG1h/MdGIX3HzyqMjyj1laBCmlPYhcO4xEy7gEqqzGiSLw7XqDQCnY4nYSn5XSaH8mQ6TFkaujrO8d/PIZN85A==",

1178− "requires": {

1179− "binary": "^0.3.0",

1180− "mkdirp": "^0.5.1"

1181− }

1182− },

1183− "uri-js": {

1184− "version": "4.2.2",

1185− "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",

1186− "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",

1187− "requires": {

1188− "punycode": "^2.1.0"

1189− }

1190− },

1191− "util-deprecate": {

1192− "version": "1.0.2",

1193− "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

1194− "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="

1195− },

1196− "uuid": {

1197− "version": "3.4.0",

1198− "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",

1199− "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="

1200− },

1201− "verror": {

1202− "version": "1.10.0",

1203− "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",

1204− "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",

1205− "requires": {

1206− "assert-plus": "^1.0.0",

1207− "core-util-is": "1.0.2",

1208− "extsprintf": "^1.2.0"

1209− }

1210− },

1211− "which": {

1212− "version": "1.3.1",

1213− "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

1214− "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",

1215− "requires": {

1216− "isexe": "^2.0.0"

1217− }

1218− },

1219− "wrappy": {

1220− "version": "1.0.2",

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

1222− "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="

1223− },

1224− "xmlbuilder": {

1225− "version": "13.0.2",

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

1227− "integrity": "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ=="

1228− },

1229− "yallist": {

1230− "version": "3.1.1",

1231− "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

1232− "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="

1233− }

1234− }

1235−}

package.jsondeleted−34

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

1−{

2− "name": "elm-ui-testing",

3− "version": "1.0.0",

4− "description": "Run the Elm UI benchmarks and render tests",

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

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

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

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

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

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

15− },

16− "repository": {

17− "type": "git",

18− "url": "git+https://github.com/mdgriffith/elm-ui.git"

19− },

20− "author": "Matthew Griffith <mdg.griffith@gmail.com> (http://mechanical-elephant.com/)",

21− "license": "ISC",

22− "bugs": {

23− "url": "https://github.com/mdgriffith/elm-ui/issues"

24− },

25− "homepage": "https://github.com/mdgriffith/elm-ui#readme",

26− "dependencies": {

27− "chalk": "^2.4.2",

28− "commander": "^2.20.0",

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

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

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

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

33− }

34−}

src/Element.elm+82−173

@@ -34,7 +34,7 @@ module Element exposing

34

35# Rows and Columns

36

37−When we want more than one child on an element, we want to be _specific_ about how they will be laid out.

37+When we want more than one child on an element, we want to be _specific_ about how they will be layed out.

38

39So, the common ways to do that would be `row` and `column`.

40

@@ -105,11 +105,9 @@ If alignment is set on elements in a layout such as `row`, then the element will

105

106will result in a layout like

107

108− |-|-| |-| |-|

108+ |-|-| |-| |-|

109

110−Where there are two elements on the left, one on the right, and one in the center of the space between the elements on the left and right.

110+Where there are two elements on the left, one in the center, and one on the right.

111−

112−**Note** For text alignment, check out `Element.Font`!

113

111

114@docs centerX, centerY, alignLeft, alignRight, alignTop, alignBottom

112@docs centerX, centerY, alignLeft, alignRight, alignTop, alignBottom

115

113

@@ -191,7 +189,11 @@ The main technique for responsiveness is to store window size information in you

191

189

192Install the `Browser` package, and set up a subscription for [`Browser.Events.onResize`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Events#onResize).

190Install the `Browser` package, and set up a subscription for [`Browser.Events.onResize`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Events#onResize).

193

191

192+You'll also need to retrieve the initial window size. You can either run the following task:

193+

194+ Task.perform (\size -> WindowResize { width = size.width, height = size.height }) Window.size

195+

194−You'll also need to retrieve the initial window size. You can either use [`Browser.Dom.getViewport`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#getViewport) or pass in `window.innerWidth` and `window.innerHeight` as flags to your program, which is the preferred way. This requires minor setup on the JS side, but allows you to avoid the state where you don't have window info.

196+Or pass in `window.innerWidth` and `window.innerHeight` as flags to your program, which is the preferred way. This requires minor setup on the JS side, but allows you to avoid the state where you don't have window info.

195

197

196@docs Device, DeviceClass, Orientation, classifyDevice

198@docs Device, DeviceClass, Orientation, classifyDevice

197

199

@@ -297,7 +299,7 @@ fromRgb255 clr =

297 clr.alpha

299 clr.alpha

298

300

299

301

300−{-| Deconstruct a `Color` into its rgb channels.

302+{-| Deconstruct a `Color` into it's rgb channels.

301-}

303-}

302toRgb :

304toRgb :

303 Color

305 Color

@@ -455,6 +457,9 @@ layoutWith { options } attrs child =

455 [ classes.root

457 [ classes.root

456 , classes.any

458 , classes.any

457 , classes.single

459 , classes.single

460+

461+ -- , classes.contentCenterX

462+ -- , classes.contentCenterY

458 ]

463 ]

459 )

464 )

460 :: (Internal.rootStyle ++ attrs)

465 :: (Internal.rootStyle ++ attrs)

@@ -467,11 +472,11 @@ type alias Option =

467 Internal.Option

472 Internal.Option

468

473

469

474

470−{-| Elm UI embeds two StyleSheets, one that is constant, and one that changes dynamically based on styles collected from the elements being rendered.

475+{-| Elm UI embeds two StyleSheets, one that is constant, and one that changes dynamically based on styles collected from the elments being rendered.

471

476

472This option will stop the static/constant stylesheet from rendering.

477This option will stop the static/constant stylesheet from rendering.

473

478

474−If you're embedding multiple elm-ui `layout` elements, you need to guarantee that only one is rendering the static style sheet and that it's above all the others in the DOM tree.

479+Make sure to render the constant/static stylesheet at least once on your page!

475

480

476-}

481-}

477noStaticStyleSheet : Option

482noStaticStyleSheet : Option

@@ -645,33 +650,20 @@ wrappedRow attrs children =

645 newPadding =

650 newPadding =

646 case padded of

651 case padded of

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

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

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

653+ if r >= x && b >= y 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 <|

654 Just <|

663− Internal.StyleClass Flag.padding

655+ Internal.StyleClass

656+ Flag.padding

664 (Internal.PaddingStyle

657 (Internal.PaddingStyle

665− (Internal.paddingNameFloat

658+ (Internal.paddingName t

666− newTop

659+ (r - x)

667− newRight

660+ (b - y)

668− newBottom

661+ l

669− newLeft

670 )

662 )

671− newTop

663+ t

672− newRight

664+ (r - x)

673− newBottom

665+ (b - y)

674− newLeft

666+ l

675 )

667 )

676

668

677 else

669 else

@@ -701,13 +693,6 @@ wrappedRow attrs children =

701

693

702 Nothing ->

694 Nothing ->

703 -- Not enough space in padding to compensate for spacing

695 -- Not enough space in padding to compensate for spacing

704− let

705− halfX =

706− negate (toFloat x / 2)

707−

708− halfY =

709− negate (toFloat y / 2)

710− in

711 Internal.element

696 Internal.element

712 Internal.asEl

697 Internal.asEl

713 Internal.div

698 Internal.div

@@ -724,28 +709,9 @@ wrappedRow attrs children =

724 ++ classes.wrapped

709 ++ classes.wrapped

725 )

710 )

726 :: Internal.Attr

711 :: Internal.Attr

727− (Html.Attributes.style "margin"

712+ (Html.Attributes.style "margin-bottom" (String.fromInt (negate y) ++ "px"))

728− (String.fromFloat halfY

713+ :: width fill

729− ++ "px"

714+ :: height fill

730− ++ " "

731− ++ String.fromFloat halfX

732− ++ "px"

733− )

734− )

735− :: Internal.Attr

736− (Html.Attributes.style "width"

737− ("calc(100% + "

738− ++ String.fromInt x

739− ++ "px)"

740− )

741− )

742− :: Internal.Attr

743− (Html.Attributes.style "height"

744− ("calc(100% + "

745− ++ String.fromInt y

746− ++ "px)"

747− )

748− )

749 :: Internal.StyleClass Flag.spacing (Internal.SpacingStyle spaceName x y)

715 :: Internal.StyleClass Flag.spacing (Internal.SpacingStyle spaceName x y)

750 :: []

716 :: []

751 )

717 )

@@ -767,7 +733,7 @@ type alias Todo =

767 el

733 el

768 [ Element.explain Debug.todo

734 [ Element.explain Debug.todo

769 ]

735 ]

770− (text "Help, I'm being debugged!")

736+ (text "Help! I'm being debugged!")

771

737

772-}

738-}

773explain : Todo -> Attribute msg

739explain : Todo -> Attribute msg

@@ -956,11 +922,11 @@ tableHelper attrs config =

956 }

922 }

957

923

958 InternalColumn col ->

924 InternalColumn col ->

925+ { cursor

959− { elements =

926+ | elements =

960− onGrid cursor.row cursor.column (col.view cell)

927+ onGrid cursor.row cursor.column (col.view cell)

961− :: cursor.elements

928+ :: cursor.elements

962− , column = cursor.column + 1

929+ , column = cursor.column + 1

963− , row = cursor.row

964 }

930 }

965

931

966 build columns rowData cursor =

932 build columns rowData cursor =

@@ -970,9 +936,9 @@ tableHelper attrs config =

970 cursor

936 cursor

971 columns

937 columns

972 in

938 in

973− { elements = newCursor.elements

939+ { newCursor

974− , row = cursor.row + 1

940+ | row = cursor.row + 1

975− , column = 1

941+ , column = 1

976 }

942 }

977

943

978 children =

944 children =

@@ -1001,22 +967,21 @@ tableHelper attrs config =

1001 children.elements

967 children.elements

1002

968

1003 Just renderedHeaders ->

969 Just renderedHeaders ->

1004− renderedHeaders ++ List.reverse children.elements

970+ renderedHeaders ++ children.elements

1005 )

971 )

1006 )

972 )

1007

973

1008

974

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

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

1010

976

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

977+ import Element

1012 import Element.Font as Font

978 import Element.Font as Font

1013

979

1014− view =

1015− paragraph []

980+ Element.paragraph []

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

981+ [ text "lots of text ...."

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

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

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

983+ , text "lots of text ...."

1019− ]

984+ ]

1020

985

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.

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

987

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

1024

989

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

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

1026

991

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

992+ import Element

1028 import Element.Font as Font

993 import Element.Font as Font

1029

994

1030− view =

1031− paragraph []

995+ Element.paragraph []

1032− [ el

996+ [ el

1033− [ alignLeft

997+ [ alignLeft

1034− , padding 5

998+ , padding 5

1035− ]

1036− (text "S")

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

1038 ]

999 ]

1000+ (text "S")

1001+ , text "o much text ...."

1002+ ]

1039

1003

1040Which will look something like

1004Which will look something like

1041

1005

@@ -1165,8 +1129,6 @@ link attrs { url, label } =

1165 (classes.contentCenterX

1129 (classes.contentCenterX

1166 ++ " "

1130 ++ " "

1167 ++ classes.contentCenterY

1131 ++ classes.contentCenterY

1168− ++ " "

1169− ++ classes.link

1170 )

1132 )

1171 :: attrs

1133 :: attrs

1172 )

1134 )

@@ -1190,19 +1152,18 @@ newTabLink attrs { url, label } =

1190 :: Internal.Attr (Html.Attributes.target "_blank")

1152 :: Internal.Attr (Html.Attributes.target "_blank")

1191 :: width shrink

1153 :: width shrink

1192 :: height shrink

1154 :: height shrink

1193− :: Internal.htmlClass

1194− (classes.contentCenterX

1155+ :: Internal.htmlClass (classes.contentCenterX ++ " " ++ classes.contentCenterY)

1195− ++ " "

1196− ++ classes.contentCenterY

1197− ++ " "

1198− ++ classes.link

1199− )

1200 :: attrs

1156 :: attrs

1201 )

1157 )

1202 (Internal.Unkeyed [ label ])

1158 (Internal.Unkeyed [ label ])

1203

1159

1204

1160

1205{-| A link to download a file.

1161{-| A link to download a file.

1162+

1163+**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.

1164+

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

1166+

1206-}

1167-}

1207download :

1168download :

1208 List (Attribute msg)

1169 List (Attribute msg)

@@ -1251,42 +1212,28 @@ downloadAs attrs { url, filename, label } =

1251 (Internal.Unkeyed [ label ])

1212 (Internal.Unkeyed [ label ])

1252

1213

1253

1214

1254−

1255−{- NEARBYS -}

1256−

1257−

1258−createNearby : Internal.Location -> Element msg -> Attribute msg

1259−createNearby loc element =

1260− case element of

1261− Internal.Empty ->

1262− Internal.NoAttribute

1263−

1264− _ ->

1265− Internal.Nearby loc element

1266−

1267−

1268{-| -}

1215{-| -}

1269below : Element msg -> Attribute msg

1216below : Element msg -> Attribute msg

1270below element =

1217below element =

1271− createNearby Internal.Below element

1218+ Internal.Nearby Internal.Below element

1272

1219

1273

1220

1274{-| -}

1221{-| -}

1275above : Element msg -> Attribute msg

1222above : Element msg -> Attribute msg

1276above element =

1223above element =

1277− createNearby Internal.Above element

1224+ Internal.Nearby Internal.Above element

1278

1225

1279

1226

1280{-| -}

1227{-| -}

1281onRight : Element msg -> Attribute msg

1228onRight : Element msg -> Attribute msg

1282onRight element =

1229onRight element =

1283− createNearby Internal.OnRight element

1230+ Internal.Nearby Internal.OnRight element

1284

1231

1285

1232

1286{-| -}

1233{-| -}

1287onLeft : Element msg -> Attribute msg

1234onLeft : Element msg -> Attribute msg

1288onLeft element =

1235onLeft element =

1289− createNearby Internal.OnLeft element

1236+ Internal.Nearby Internal.OnLeft element

1290

1237

1291

1238

1292{-| This will place an element in front of another.

1239{-| This will place an element in front of another.

@@ -1296,14 +1243,14 @@ onLeft element =

1296-}

1243-}

1297inFront : Element msg -> Attribute msg

1244inFront : Element msg -> Attribute msg

1298inFront element =

1245inFront element =

1299− createNearby Internal.InFront element

1246+ Internal.Nearby Internal.InFront element

1300

1247

1301

1248

1302{-| This will place an element between the background and the content of an element.

1249{-| This will place an element between the background and the content of an element.

1303-}

1250-}

1304behindContent : Element msg -> Attribute msg

1251behindContent : Element msg -> Attribute msg

1305behindContent element =

1252behindContent element =

1306− createNearby Internal.Behind element

1253+ Internal.Nearby Internal.Behind element

1307

1254

1308

1255

1309{-| -}

1256{-| -}

@@ -1324,8 +1271,7 @@ scale n =

1324 Internal.TransformComponent Flag.scale (Internal.Scale ( n, n, 1 ))

1271 Internal.TransformComponent Flag.scale (Internal.Scale ( n, n, 1 ))

1325

1272

1326

1273

1327−{-| Angle is given in radians. [Here are some conversion functions if you want to use another unit.](https://package.elm-lang.org/packages/elm/core/latest/Basics#degrees)

1328−-}

1274+{-| -}

1329rotate : Float -> Attr decorative msg

1275rotate : Float -> Attr decorative msg

1330rotate angle =

1276rotate angle =

1331 Internal.TransformComponent Flag.rotate (Internal.Rotate ( 0, 0, 1 ) angle)

1277 Internal.TransformComponent Flag.rotate (Internal.Rotate ( 0, 0, 1 ) angle)

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

1358{-| -}

1304{-| -}

1359padding : Int -> Attribute msg

1305padding : Int -> Attribute msg

1360padding x =

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

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

1366

1308

1367

1309

1368{-| Set horizontal and vertical padding.

1310{-| Set horizontal and vertical padding.

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

1370paddingXY : Int -> Int -> Attribute msg

1312paddingXY : Int -> Int -> Attribute msg

1371paddingXY x y =

1313paddingXY x y =

1372 if x == y then

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

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

1378

1316

1379 else

1317 else

1380− let

1381− xFloat =

1382− toFloat x

1383−

1384− yFloat =

1385− toFloat y

1386− in

1387 Internal.StyleClass Flag.padding

1318 Internal.StyleClass Flag.padding

1388 (Internal.PaddingStyle

1319 (Internal.PaddingStyle

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

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

1390− yFloat

1321+ y

1391− xFloat

1322+ x

1392− yFloat

1323+ y

1393− xFloat

1324+ x

1394 )

1325 )

1395

1326

1396

1327

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

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

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

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

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

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

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

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

1420− topFloat

1421− topFloat

1422− topFloat

1423− topFloat

1424− )

1425

1346

1426 else

1347 else

1427 Internal.StyleClass Flag.padding

1348 Internal.StyleClass Flag.padding

1428 (Internal.PaddingStyle

1349 (Internal.PaddingStyle

1429 (Internal.paddingName top right bottom left)

1350 (Internal.paddingName top right bottom left)

1430− (toFloat top)

1351+ top

1431− (toFloat right)

1352+ right

1432− (toFloat bottom)

1353+ bottom

1433− (toFloat left)

1354+ left

1434 )

1355 )

1435

1356

1436

1357

@@ -1473,7 +1394,7 @@ alignRight =

1473{-| -}

1394{-| -}

1474spaceEvenly : Attribute msg

1395spaceEvenly : Attribute msg

1475spaceEvenly =

1396spaceEvenly =

1476− Internal.Class Flag.spacing Internal.Style.classes.spaceEvenly

1397+ Internal.Class Flag.xAlign (.spaceEvenly Internal.Style.classes)

1477

1398

1478

1399

1479{-| -}

1400{-| -}

@@ -1505,7 +1426,7 @@ transparent on =

1505

1426

1506{-| A capped value between 0.0 and 1.0, where 0.0 is transparent and 1.0 is fully opaque.

1427{-| A capped value between 0.0 and 1.0, where 0.0 is transparent and 1.0 is fully opaque.

1507

1428

1508−Semantically equivalent to html opacity.

1429+Semantically equavalent to html opacity.

1509

1430

1510-}

1431-}

1511alpha : Float -> Attr decorative msg

1432alpha : Float -> Attr decorative msg

@@ -1595,29 +1516,17 @@ type Orientation

1595

1516

1596

1517

1597{-| Takes in a Window.Size and returns a device profile which can be used for responsiveness.

1518{-| Takes in a Window.Size and returns a device profile which can be used for responsiveness.

1598−

1599−If you have more detailed concerns around responsiveness, it probably makes sense to copy this function into your codebase and modify as needed.

1600−

1601-}

1519-}

1602classifyDevice : { window | height : Int, width : Int } -> Device

1520classifyDevice : { window | height : Int, width : Int } -> Device

1603classifyDevice window =

1521classifyDevice window =

1604− -- Tested in this ellie:

1605− -- https://ellie-app.com/68QM7wLW8b9a1

1606 { class =

1522 { class =

1607− let

1608− longSide =

1609− max window.width window.height

1610−

1611− shortSide =

1612− min window.width window.height

1613− in

1614− if shortSide < 600 then

1523+ if window.width <= 600 then

1615 Phone

1524 Phone

1616

1525

1617− else if longSide <= 1200 then

1526+ else if window.width > 600 && window.width <= 1200 then

1618 Tablet

1527 Tablet

1619

1528

1620− else if longSide > 1200 && longSide <= 1920 then

1529+ else if window.width > 1200 && window.width <= 1800 then

1621 Desktop

1530 Desktop

1622

1531

1623 else

1532 else

@@ -1634,7 +1543,7 @@ classifyDevice window =

1634{-| When designing it's nice to use a modular scale to set spacial rythms.

1543{-| When designing it's nice to use a modular scale to set spacial rythms.

1635

1544

1636 scaled =

1545 scaled =

1637− Element.modular 16 1.25

1546+ Scale.modular 16 1.25

1638

1547

1639A modular scale starts with a number, and multiplies it by a ratio a number of times.

1548A modular scale starts with a number, and multiplies it by a ratio a number of times.

1640Then, when setting font sizes you can use:

1549Then, when setting font sizes you can use:

src/Element/Background.elm+1−1

@@ -35,7 +35,7 @@ image src =

35 Internal.Attr (VirtualDom.style "background" ("url(\"" ++ src ++ "\") center / cover no-repeat"))

36

37

38−{-| A centered background image that keeps its natural proportions, but scales to fit the space.

38+{-| A centered background image that keeps its natural propostions, but scales to fit the space.

39-}

40uncropped : String -> Attribute msg

41uncropped src =

src/Element/Border.elm+2−2

@@ -232,7 +232,7 @@ shadow almostShade =

232 in

233 Internal.StyleClass Flag.shadows <|

234 Internal.Single

235− (Internal.boxShadowClass shade)

235+ (Internal.boxShadowName shade)

236 "box-shadow"

237 (Internal.formatBoxShadow shade)

238

@@ -257,7 +257,7 @@ innerShadow almostShade =

257 in

258 Internal.StyleClass Flag.shadows <|

259 Internal.Single

260− (Internal.boxShadowClass shade)

260+ (Internal.boxShadowName shade)

261 "box-shadow"

262 (Internal.formatBoxShadow shade)

263

src/Element/Font.elm+21−237

@@ -5,7 +5,6 @@ module Element.Font exposing

5 , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing

6 , underline, strike, italic, unitalicized

7 , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline

8− , Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed

9 , glow, shadow

8 , glow, shadow

10 )

9 )

11

10

@@ -38,6 +37,23 @@ module Element.Font exposing

38

37

39@docs external

38@docs external

40

39

40+`Font.external` can be used to import font files. Let's say you found a neat font on <http://fonts.google.com>:

41+

42+ import Element

43+ import Element.Font as Font

44+

45+ view =

46+ Element.el

47+ [ Font.family

48+ [ Font.external

49+ { name = "Roboto"

50+ , url = "https://fonts.googleapis.com/css?family=Roboto"

51+ }

52+ , Font.sansSerif

53+ ]

54+ ]

55+ (Element.text "Woohoo, I'm stylish text")

56+

41

57

42## Alignment and Spacing

58## Alignment and Spacing

43

59

@@ -54,11 +70,6 @@ module Element.Font exposing

54@docs heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline

70@docs heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline

55

71

56

72

57−## Variants

58−

59−@docs Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed

60−

61−

62## Shadows

73## Shadows

63

74

64@docs glow, shadow

75@docs glow, shadow

@@ -79,13 +90,7 @@ type alias Font =

79{-| -}

90{-| -}

80color : Color -> Attr decorative msg

91color : Color -> Attr decorative msg

81color fontColor =

92color fontColor =

82− Internal.StyleClass

83− Flag.fontColor

84− (Internal.Colored

85− ("fc-" ++ Internal.formatColorClass fontColor)

93+ Internal.StyleClass Flag.fontColor (Internal.Colored ("fc-" ++ Internal.formatColorClass fontColor) "color" fontColor)

86− "color"

87− fontColor

88− )

89

94

90

95

91{-|

96{-|

@@ -105,12 +110,7 @@ color fontColor =

105-}

110-}

106family : List Font -> Attribute msg

111family : List Font -> Attribute msg

107family families =

112family families =

108− Internal.StyleClass

109− Flag.fontFamily

110− (Internal.FontFamily

111− (List.foldl Internal.renderFontClassName "ff-" families)

113+ Internal.StyleClass Flag.fontFamily <| Internal.FontFamily (List.foldl Internal.renderFontClassName "ff-" families) families

112− families

113− )

114

115

116{-| -}

@@ -138,61 +138,6 @@ typeface =

138

139

140{-| -}

141−type alias Adjustment =

142− { capital : Float

143− , lowercase : Float

144− , baseline : Float

145− , descender : Float

146− }

147−

148−

149−{-| -}

150−with :

151− { name : String

152− , adjustment : Maybe Adjustment

153− , variants : List Variant

154− }

155− -> Font

156−with =

157− Internal.FontWith

158−

159−

160−{-| -}

161−sizeByCapital : Attribute msg

162−sizeByCapital =

163− Internal.htmlClass classes.sizeByCapital

164−

165−

166−{-| -}

167−full : Attribute msg

168−full =

169− Internal.htmlClass classes.fullSize

170−

171−

172−{-| **Note** it's likely that `Font.external` will cause a flash on your page on loading.

173−

174−To bypass this, import your fonts using a separate stylesheet and just use `Font.typeface`.

175−

176−It's likely that `Font.external` will be removed or redesigned in the future to avoid the flashing.

177−

178−`Font.external` can be used to import font files. Let's say you found a neat font on <http://fonts.google.com>:

179−

180− import Element

181− import Element.Font as Font

182−

183− view =

184− Element.el

185− [ Font.family

186− [ Font.external

187− { name = "Roboto"

188− , url = "https://fonts.googleapis.com/css?family=Roboto"

189− }

190− , Font.sansSerif

191− ]

192− ]

193− (Element.text "Woohoo, I'm stylish text")

194−

195−-}

196external : { url : String, name : String } -> Font

141external : { url : String, name : String } -> Font

197external { url, name } =

142external { url, name } =

198 Internal.ImportFont name url

143 Internal.ImportFont name url

@@ -346,7 +291,7 @@ shadow :

346 -> Attr decorative msg

291 -> Attr decorative msg

347shadow shade =

292shadow shade =

348 Internal.StyleClass Flag.txtShadows <|

293 Internal.StyleClass Flag.txtShadows <|

349− Internal.Single (Internal.textShadowClass shade) "text-shadow" (Internal.formatTextShadow shade)

294+ Internal.Single (Internal.textShadowName shade) "text-shadow" (Internal.formatTextShadow shade)

350

295

351

296

352{-| A glow is just a simplified shadow.

297{-| A glow is just a simplified shadow.

@@ -361,165 +306,4 @@ glow clr i =

361 }

306 }

362 in

307 in

363 Internal.StyleClass Flag.txtShadows <|

308 Internal.StyleClass Flag.txtShadows <|

364− Internal.Single (Internal.textShadowClass shade) "text-shadow" (Internal.formatTextShadow shade)

309+ Internal.Single (Internal.textShadowName shade) "text-shadow" (Internal.formatTextShadow shade)

365−

366−

367−

368−{- Variants -}

369−

370−

371−{-| -}

372−type alias Variant =

373− Internal.Variant

374−

375−

376−{-| You can use this to set a single variant on an element itself such as:

377−

378− el

379− [ Font.variant Font.smallCaps

380− ]

381− (text "rendered with smallCaps")

382−

383−**Note** These will **not** stack. If you want multiple variants, you should use `Font.variantList`.

384−

385−-}

386−variant : Variant -> Attribute msg

387−variant var =

388− case var of

389− Internal.VariantActive name ->

390− Internal.Class Flag.fontVariant ("v-" ++ name)

391−

392− Internal.VariantOff name ->

393− Internal.Class Flag.fontVariant ("v-" ++ name ++ "-off")

394−

395− Internal.VariantIndexed name index ->

396− Internal.StyleClass Flag.fontVariant <|

397− Internal.Single ("v-" ++ name ++ "-" ++ String.fromInt index)

398− "font-feature-settings"

399− ("\"" ++ name ++ "\" " ++ String.fromInt index)

400−

401−

402−isSmallCaps x =

403− case x of

404− Internal.VariantActive feat ->

405− feat == "smcp"

406−

407− _ ->

408− False

409−

410−

411−{-| -}

412−variantList : List Variant -> Attribute msg

413−variantList vars =

414− let

415− features =

416− vars

417− |> List.map Internal.renderVariant

418−

419− hasSmallCaps =

420− List.any isSmallCaps vars

421−

422− name =

423− if hasSmallCaps then

424− vars

425− |> List.map Internal.variantName

426− |> String.join "-"

427− |> (\x -> x ++ "-sc")

428−

429− else

430− vars

431− |> List.map Internal.variantName

432− |> String.join "-"

433−

434− featureString =

435− String.join ", " features

436− in

437− Internal.StyleClass Flag.fontVariant <|

438− Internal.Style ("v-" ++ name)

439− [ Internal.Property "font-feature-settings" featureString

440− , Internal.Property "font-variant"

441− (if hasSmallCaps then

442− "small-caps"

443−

444− else

445− "normal"

446− )

447− ]

448−

449−

450−{-| [Small caps](https://en.wikipedia.org/wiki/Small_caps) are rendered using uppercase glyphs, but at the size of lowercase glyphs.

451−-}

452−smallCaps : Variant

453−smallCaps =

454− Internal.VariantActive "smcp"

455−

456−

457−{-| Add a slash when rendering `0`

458−-}

459−slashedZero : Variant

460−slashedZero =

461− Internal.VariantActive "zero"

462−

463−

464−{-| -}

465−ligatures : Variant

466−ligatures =

467− Internal.VariantActive "liga"

468−

469−

470−{-| Oridinal markers like `1st` and `2nd` will receive special glyphs.

471−-}

472−ordinal : Variant

473−ordinal =

474− Internal.VariantActive "ordn"

475−

476−

477−{-| Number figures will each take up the same space, allowing them to be easily aligned, such as in tables.

478−-}

479−tabularNumbers : Variant

480−tabularNumbers =

481− Internal.VariantActive "tnum"

482−

483−

484−{-| Render fractions with the numerator stacked on top of the denominator.

485−-}

486−stackedFractions : Variant

487−stackedFractions =

488− Internal.VariantActive "afrc"

489−

490−

491−{-| Render fractions

492−-}

493−diagonalFractions : Variant

494−diagonalFractions =

495− Internal.VariantActive "frac"

496−

497−

498−{-| -}

499−swash : Int -> Variant

500−swash =

501− Internal.VariantIndexed "swsh"

502−

503−

504−{-| Set a feature by name and whether it should be on or off.

505−

506−Feature names are four-letter names as defined in the [OpenType specification](https://docs.microsoft.com/en-us/typography/opentype/spec/featurelist).

507−

508−-}

509−feature : String -> Bool -> Variant

510−feature name on =

511− if on then

512− Internal.VariantIndexed name 1

513−

514− else

515− Internal.VariantIndexed name 0

516−

517−

518−{-| A font variant might have multiple versions within the font.

519−

520−In these cases we need to specify the index of the version we want.

521−

522−-}

523−indexed : String -> Int -> Variant

524−indexed name on =

525− Internal.VariantIndexed name on

src/Element/Input.elm+480−777

@@ -1,186 +1,51 @@

1module Element.Input exposing

2− ( focusedOnLoad

3− , button

2+ ( button

4 , checkbox, defaultCheckbox

3 , checkbox, defaultCheckbox

5− , text, multiline

6− , Placeholder, placeholder

4+ , text, Placeholder, placeholder

7 , username, newPassword, currentPassword, email, search, spellChecked

5 , username, newPassword, currentPassword, email, search, spellChecked

6+ , multiline

8 , slider, Thumb, thumb, defaultThumb

7 , slider, Thumb, thumb, defaultThumb

9 , radio, radioRow, Option, option, optionWith, OptionState(..)

8 , radio, radioRow, Option, option, optionWith, OptionState(..)

10 , Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden

9 , Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden

10+ , focusedOnLoad

11 )

12

13−{-| Input elements have a lot of constraints!

13+{-|

14−

15−We want all of our input elements to:

16−

17− - _Always be accessible_

18− - _Behave intuitively_

19− - _Be completely restyleable_

20−

21−While these three goals may seem pretty obvious, Html and CSS have made it surprisingly difficult to achieve!

22−

23−And incredibly difficult for developers to remember all the tricks necessary to make things work. If you've every tried to make a `<textarea>` be the height of it's content or restyle a radio button while maintaining accessibility, you may be familiar.

24−

25−This module is intended to be accessible by default. You shouldn't have to wade through docs, articles, and books to find out [exactly how accessible your html actually is](https://www.powermapper.com/tests/screen-readers/aria/index.html).

26−

27−

28−# Focus Styling

29−

30−All Elements can be styled on focus by using [`Element.focusStyle`](Element#focusStyle) to set a global focus style or [`Element.focused`](Element#focused) to set a focus style individually for an element.

31−

32−@docs focusedOnLoad

33−

34−

35−# Buttons

36

14

37@docs button

15@docs button

38

16

39−

40−# Checkboxes

41−

42−A checkbox requires you to store a `Bool` in your model.

43−

44−This is also the first input element that has a [`required label`](#Label).

45−

46− import Element exposing (text)

47− import Element.Input as Input

48−

49− type Msg

50− = GuacamoleChecked Bool

51−

52− view model =

53− Input.checkbox []

54− { onChange = GuacamoleChecked

55− , icon = Input.defaultCheckbox

56− , checked = model.guacamole

57− , label =

58− Input.labelRight []

59− (text "Do you want Guacamole?")

60− }

61−

62@docs checkbox, defaultCheckbox

17@docs checkbox, defaultCheckbox

63

18

64

19

65−# Text

20+## Text Input

66−

67−@docs text, multiline

68−

69−@docs Placeholder, placeholder

70−

71−

72−## Text with autofill

73

21

74−If we want to play nicely with a browser's ability to autofill a form, we need to be able to give it a hint about what we're expecting.

22+@docs text, Placeholder, placeholder

75

23

76−The following inputs are very similar to `Input.text`, but they give the browser a hint to allow autofill to work correctly.

24+We can also give a hint about what type of content our text field contains. This will allow things like autofill to work correctly.

77

25

78@docs username, newPassword, currentPassword, email, search, spellChecked

26@docs username, newPassword, currentPassword, email, search, spellChecked

79

27

80

28

81−# Sliders

29+## Multiline Text

82

30

83−A slider is great for choosing between a range of numerical values.

31+@docs multiline

84

32

85− - **thumb** - The icon that you click and drag to change the value.

86− - **track** - The line behind the thumb denoting where you can slide to.

87

33

88−@docs slider, Thumb, thumb, defaultThumb

34+## Slider

89−

90−

91−# Radio Selection

92

35

93−The fact that we still call this a radio selection is fascinating. I can't remember the last time I actually used an honest-to-goodness button on a radio. Chalk it up along with the floppy disk save icon or the word [Dashboard](https://en.wikipedia.org/wiki/Dashboard).

36+@docs slider, Thumb, thumb, defaultThumb

94−

95−Perhaps a better name would be `Input.chooseOne`, because this allows you to select one of a set of options!

96−

97−Nevertheless, here we are. Here's how you put one together

98

37

99− Input.radio

100− [ padding 10

101− , spacing 20

102− ]

103− { onChange = ChooseLunch

104− , selected = Just model.lunch

105− , label = Input.labelAbove [] (text "Lunch")

106− , options =

107− [ Input.option Burrito (text "Burrito")

108− , Input.option Taco (text "Taco!")

109− , Input.option Gyro (text "Gyro")

110− ]

111− }

112

38

113−**Note** we're using `Input.option`, which will render the default radio icon you're probably used to. If you want compeltely custom styling, use `Input.optionWith`!

39+## Radio Buttons

114

40

115@docs radio, radioRow, Option, option, optionWith, OptionState

41@docs radio, radioRow, Option, option, optionWith, OptionState

116

42

117

43

118−# Labels

44+## Labels

119−

120−Every input has a required `Label`.

121

45

122@docs Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden

46@docs Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden

123

47

124−

48+@docs focusedOnLoad

125−# Form Elements

126−

127−You might be wondering where something like `<form>` is.

128−

129−What I've found is that most people who want `<form>` usually want it for the [implicit submission behavior](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission) or to be clearer, they want to do something when the `Enter` key is pressed.

130−

131−Instead of implicit submission behavior, [try making an `onEnter` event handler like in this Ellie Example](https://ellie-app.com/5X6jBKtxzdpa1). Then everything is explicit!

132−

133−And 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

142−

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

144−

145−Disabled inputs can be a little problematic for user experience, and doubly so for accessibility. This is because it's now your priority to inform the user _why_ some field is disabled.

146−

147−If an input is truly disabled, meaning it's not focusable or doesn't send off a `Msg`, you actually lose your ability to help the user out! For those wary about accessibility [this is a big problem.](https://ux.stackexchange.com/questions/103239/should-disabled-elements-be-focusable-for-accessibility-purposes)

148−

149−Here are some alternatives to think about that don't involve explicitly disabling an input.

150−

151−**Disabled Buttons** - Change the `Msg` it fires, the text that is rendered, and optionally set a `Region.description` which will be available to screen readers.

152−

153− import Element.Input as Input

154− import Element.Region as Region

155−

156− myButton ready =

157− if ready then

158− Input.button

159− [ Background.color blue

160− ]

161− { onPress =

162− Just SaveButtonPressed

163− , label =

164− text "Save blog post"

165− }

166−

167− else

168− Input.button

169− [ Background.color grey

170− , Region.description

171− "A publish date is required before saving a blogpost."

172− ]

173− { onPress =

174− Just DisabledSaveButtonPressed

175− , label =

176− text "Save Blog "

177− }

178−

179−Consider showing a hint if `DisabledSaveButtonPressed` is sent.

180−

181−For other inputs such as `Input.text`, consider simply rendering it in a normal `paragraph` or `el` if it's not editable.

182−

183−Alternatively, see if it's reasonable to _not_ display an input if you'd normally disable it. Is there an option where it's only visible when it's editable?

184

49

185-}

50-}

186

51

@@ -232,33 +97,13 @@ type LabelLocation

232 | Below

97 | Below

233

98

234

99

100+{-| Every input has a required `label`.

235−{-| -}

101+-}

236type Label msg

102type Label msg

237 = Label LabelLocation (List (Attribute msg)) (Element msg)

103 = Label LabelLocation (List (Attribute msg)) (Element msg)

238 | HiddenLabel String

104 | HiddenLabel String

239

105

240

106

241−isStacked : Label msg -> Bool

242−isStacked label =

243− case label of

244− Label loc _ _ ->

245− case loc of

246− OnRight ->

247− False

248−

249− OnLeft ->

250− False

251−

252− Above ->

253− True

254−

255− Below ->

256− True

257−

258− HiddenLabel _ ->

259− True

260−

261−

262{-| -}

107{-| -}

263labelRight : List (Attribute msg) -> Element msg -> Label msg

108labelRight : List (Attribute msg) -> Element msg -> Label msg

264labelRight =

109labelRight =

@@ -292,7 +137,7 @@ The situations where a hidden label makes sense:

292 - A searchbar with a `search` button right next to it.

137 - A searchbar with a `search` button right next to it.

293 - A `table` of inputs where the header gives the label.

138 - A `table` of inputs where the header gives the label.

294

139

295−Basically, a hidden label works when there are other contextual clues that sighted people can pick up on.

140+Basically, a hidden label makes sense when there are other contextual clues that sighted people can pick up on.

296

141

297-}

142-}

298labelHidden : String -> Label msg

143labelHidden : String -> Label msg

@@ -311,26 +156,16 @@ hiddenLabelAttribute label =

311

156

312{-| A standard button.

157{-| A standard button.

313

158

314−The `onPress` handler will be fired either `onClick` or when the element is focused and the `Enter` key has been pressed.

159+The `onPress` handler will be fired either `onClick` or when the element is focused and the enter key has been pressed.

315

160

316− import Element exposing (rgb255, text)

317− import Element.Background as Background

318 import Element.Input as Input

161 import Element.Input as Input

319

162

320− blue =

321− Element.rgb255 238 238 238

322−

323− myButton =

324− Input.button

163+ Input.button []

325− [ Background.color blue

326− , Element.focused

327− [ Background.color purple ]

328− ]

329− { onPress = Just ClickMsg

164+ { onPress = ClickMsg

330− , label = text "My Button"

165+ , label = text "My Button"

331− }

166+ }

332

167

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.

168+`onPress` takes a `Maybe msg`. If you provide the value `Nothing`, then the button will be disabled.

334

169

335-}

170-}

336button :

171button :

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

369

204

370 Just msg ->

205 Just msg ->

371 Events.onClick msg

206 Events.onClick msg

372− :: onKeyLookup

207+ :: 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

208 :: attrs

384 )

209 )

385 )

210 )

@@ -412,14 +237,7 @@ type alias Checkbox msg =

412 }

237 }

413

238

414

239

415−{-|

240+{-| -}

416−

417− - **onChange** - The `Msg` to send.

418− - **icon** - The checkbox icon to show. This can be whatever you'd like, but `Input.defaultCheckbox` is included to get you started.

419− - **checked** - The current checked state.

420− - **label** - The [`Label`](#Label) for this checkbox

421−

422−-}

423checkbox :

241checkbox :

424 List (Attribute msg)

242 List (Attribute msg)

425 ->

243 ->

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

457 ]

275 ]

458 ++ attrs

276 ++ attrs

459 in

277 in

460− applyLabel

278+ applyLabel attributes

279+ label

280+ (Internal.element

281+ Internal.asEl

282+ Internal.div

283+ [ Internal.Attr <|

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

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

462− :: Internal.Attr

285+ , Internal.Attr <|

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

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

464 if checked then

287 if checked then

465 "true"

288 "true"

466

289

467 else

290 else

468 "false"

291 "false"

469− )

470− :: hiddenLabelAttribute label

292+ , hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

293+ , Element.centerY

478 , Element.height Element.fill

294 , Element.height Element.fill

479 , Element.width Element.shrink

295 , Element.width Element.shrink

480 ]

296 ]

@@ -527,9 +343,7 @@ defaultThumb =

527 )

343 )

528 ]

344 ]

529 { onChange = AdjustValue

345 { onChange = AdjustValue

530− , label =

531− Input.labelAbove []

532− (text "My Slider Value")

346+ , label = Input.labelAbove [] (text "My Slider Value")

533 , min = 0

347 , min = 0

534 , max = 75

348 , max = 75

535 , step = Nothing

349 , step = Nothing

@@ -538,7 +352,7 @@ defaultThumb =

538 Input.defaultThumb

352 Input.defaultThumb

539 }

353 }

540

354

541−`Element.behindContent` is used to render the track of the slider. Without it, no track would be rendered. The `thumb` is the icon that you can move around.

355+The `thumb` is the icon that you can move around.

542

356

543The slider can be vertical or horizontal depending on the width/height of the slider.

357The slider can be vertical or horizontal depending on the width/height of the slider.

544

358

@@ -546,7 +360,7 @@ The slider can be vertical or horizontal depending on the width/height of the sl

546 - `height (px someHeight)` and `width (px someWidth)` where `someHeight` > `someWidth` will also do it.

360 - `height (px someHeight)` and `width (px someWidth)` where `someHeight` > `someWidth` will also do it.

547 - otherwise, the slider will be horizontal.

361 - otherwise, the slider will be horizontal.

548

362

549−**Note** If you want a slider for an `Int` value:

363+**Note:** If you want a slider for an `Int` value:

550

364

551 - set `step` to be `Just 1`, or some other whole value

365 - set `step` to be `Just 1`, or some other whole value

552 - `value = toFloat model.myInt`

366 - `value = toFloat model.myInt`

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

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

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

714 thumbShadowStyle

528 thumbShadowStyle

715 )

529 )

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

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

717 , Internal.Attr

531 , Internal.Attr

718 (Html.Events.onInput

532 (Html.Events.onInput

719 (\str ->

533 (\str ->

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

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

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

780 ++ [ Element.behindContent <|

594 ++ [ Element.behindContent <|

781 if vertical then

595 if vertical then

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

596+ viewVerticalThumb factor thumbAttributes trackWidth

783

597

784 else

598 else

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

599+ viewHorizontalThumb factor thumbAttributes trackHeight

786 ]

600 ]

787 )

601 )

788 Element.none

602 Element.none

@@ -855,198 +669,286 @@ type alias Text msg =

855 }

669 }

856

670

857

671

672+type Padding

673+ = Padding Int Int Int Int

674+

675+

858−{-| -}

676+{-|

677+

678+ attributes

679+

680+ <parent>

681+ attribute::width/height fill

682+ attribtue::alignment

683+ attribute::spacing

684+ attribute::fontsize/family/lineheight

685+ <el-wrapper>

686+ attribute::nearby(placeholder)

687+ attribute::width/height fill

688+ inFront ->

689+ placeholder

690+ attribute::padding

691+

692+

693+ <input>

694+ textarea ->

695+ special height for height-content

696+ attribtue::padding

697+ attribute::lineHeight

698+ attributes

699+ <label>

700+

701+-}

859textHelper : TextInput -> List (Attribute msg) -> Text msg -> Element msg

702textHelper : TextInput -> List (Attribute msg) -> Text msg -> Element msg

860textHelper textInput attrs textOptions =

703textHelper textInput attrs textOptions =

861 let

704 let

862− withDefaults =

705+ attributes =

863 defaultTextBoxStyle ++ attrs

706 defaultTextBoxStyle ++ attrs

864

707

865− redistributed =

708+ behavior =

866− redistribute (textInput.type_ == TextArea)

709+ [ Internal.Attr (Html.Events.onInput textOptions.onChange) ]

867− (isStacked textOptions.label)

710+

868− withDefaults

711+ noNearbys =

712+ List.filter (not << forNearby) attributes

869

713

870− onlySpacing attr =

714+ forNearby attr =

871 case attr of

715 case attr of

872− Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->

716+ Internal.Nearby _ _ ->

873 True

717 True

874

718

875 _ ->

719 _ ->

876 False

720 False

877

721

878− getPadding attr =

722+ ( inputNode, inputAttrs, inputChildren ) =

879− case attr of

880− Internal.StyleClass cls (Internal.PaddingStyle pad t r b l) ->

881− -- The - 3 is here to prevent accidental triggering of scrollbars

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

884− Just

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

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

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

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

889− }

890−

891− _ ->

892− Nothing

893−

894− heightConstrained =

895 case textInput.type_ of

723 case textInput.type_ of

896 TextInputNode inputType ->

724 TextInputNode inputType ->

897− False

725+ ( "input"

726+ , [ value textOptions.text

727+ , Internal.Attr (Html.Attributes.type_ inputType)

728+ , spellcheck textInput.spellchecked

729+ , Internal.htmlClass classes.inputText

730+ , case textInput.autofill of

731+ Nothing ->

732+ Internal.NoAttribute

733+

734+ Just fill ->

735+ autofill fill

736+ ]

737+ ++ noNearbys

738+ , []

739+ )

898

740

899 TextArea ->

741 TextArea ->

900− withDefaults

742+ let

901− |> List.filterMap getHeight

743+ { maybePadding, heightContent, maybeSpacing, adjustedAttributes, maybeBorder } =

902− |> List.reverse

744+ attributes

903− |> List.head

745+ |> List.foldr

904− |> Maybe.map isConstrained

746+ (\attr found ->

905− |> Maybe.withDefault False

747+ case attr of

906−

748+ Internal.Describe _ ->

907− parentPadding =

749+ found

908− withDefaults

750+

909− |> List.filterMap getPadding

751+ Internal.Height len ->

910− |> List.reverse

752+ case found.heightContent of

911− |> List.head

753+ Nothing ->

754+ { found

755+ | heightContent = Just (Internal.isContent len)

756+ , adjustedAttributes = attr :: found.adjustedAttributes

757+ }

758+

759+ _ ->

760+ found

761+

762+ Internal.StyleClass _ (Internal.BorderWidth _ t r b l) ->

763+ case found.maybeBorder of

764+ Nothing ->

765+ { found

766+ | maybeBorder = Just (Padding t r b l)

767+ , adjustedAttributes = attr :: found.adjustedAttributes

768+ }

769+

770+ _ ->

771+ found

772+

773+ Internal.StyleClass _ (Internal.PaddingStyle _ t r b l) ->

774+ case found.maybePadding of

775+ Nothing ->

776+ { found

777+ | maybePadding = Just (Padding t r b l)

778+

779+ -- Skip storing padding because it's being customized later

780+ , adjustedAttributes = found.adjustedAttributes

781+ }

782+

783+ _ ->

784+ found

785+

786+ Internal.StyleClass _ (Internal.SpacingStyle _ x y) ->

787+ case found.maybeSpacing of

788+ Nothing ->

789+ { found

790+ | maybeSpacing = Just y

791+ , adjustedAttributes = attr :: found.adjustedAttributes

792+ }

793+

794+ _ ->

795+ found

796+

797+ _ ->

798+ { found | adjustedAttributes = attr :: found.adjustedAttributes }

799+ )

800+ { maybePadding = Nothing

801+ , heightContent = Nothing

802+ , maybeBorder = Nothing

803+ , maybeSpacing = Nothing

804+ , adjustedAttributes = []

805+ }

806+

807+ -- NOTE: This is where default text spacing is set

808+ spacing =

809+ Maybe.withDefault 5 maybeSpacing

810+ in

811+ ( "textarea"

812+ , [ spellcheck textInput.spellchecked

813+ , Internal.htmlClass classes.inputMultiline

814+ , Maybe.map autofill textInput.autofill

912− |> Maybe.withDefault

815+ |> Maybe.withDefault Internal.NoAttribute

913− { top = 0

816+ , case maybePadding of

914− , right = 0

817+ Nothing ->

915− , bottom = 0

818+ Internal.NoAttribute

916− , left = 0

917− }

918

819

919− inputElement =

820+ Just (Padding t r b l) ->

920− Internal.element

821+ Element.paddingEach

921− Internal.asEl

822+ { top = max 0 (t - (spacing // 2))

922− (case textInput.type_ of

823+ , bottom = max 0 (b - (spacing // 2))

923− TextInputNode inputType ->

824+ , left = l

825+ , right = r

826+ }

827+ , case heightContent of

828+ Nothing ->

924− Internal.NodeName "input"

829+ Internal.NoAttribute

925

830

926− TextArea ->

831+ Just True ->

927− Internal.NodeName "textarea"

832+ textHeightContent textOptions.text spacing maybePadding maybeBorder

928− )

929− ((case textInput.type_ of

930− TextInputNode inputType ->

931− -- Note: Due to a weird edgecase in...Edge...

932− -- `type` needs to come _before_ `value`

933− -- More reading: https://github.com/mdgriffith/elm-ui/pull/94/commits/4f493a27001ccc3cf1f2baa82e092c35d3811876

934− [ Internal.Attr (Html.Attributes.type_ inputType)

935− , Internal.htmlClass classes.inputText

936− ]

937

833

938− TextArea ->

834+ Just False ->

939− [ Element.clip

940− , Element.height Element.fill

941− , Internal.htmlClass classes.inputMultiline

942− , calcMoveToCompensateForPadding withDefaults

943−

944− -- The only reason we do this padding trick is so that when the user clicks in the padding,

945− -- that the cursor will reset correctly.

946− -- This could probably be combined with the above `calcMoveToCompensateForPadding`

947− , Element.paddingEach parentPadding

948− , Internal.Attr (Html.Attributes.style "margin" (renderBox (negateBox parentPadding)))

949− , Internal.Attr (Html.Attributes.style "box-sizing" "content-box")

950− ]

951− )

952− ++ [ value textOptions.text

953− , Internal.Attr (Html.Events.onInput textOptions.onChange)

954− , hiddenLabelAttribute textOptions.label

955− , spellcheck textInput.spellchecked

956− , Maybe.map autofill textInput.autofill

957− |> Maybe.withDefault Internal.NoAttribute

958− ]

959− ++ redistributed.input

960− )

961− (Internal.Unkeyed [])

962−

963− wrappedInput =

964− case textInput.type_ of

965− TextArea ->

966− -- textarea with height-content means that

967− -- the input element is rendered `inFront` with a transparent background

968− -- Then the input text is rendered as the space filling element.

969− Internal.element

970− Internal.asEl

971− Internal.div

972− ((if heightConstrained then

973− (::) Element.scrollbarY

974−

975− else

976− identity

977− )

978− [ Element.width Element.fill

979− , if List.any hasFocusStyle withDefaults then

980 Internal.NoAttribute

835 Internal.NoAttribute

836+ ]

837+ ++ adjustedAttributes

838+ , [ Internal.unstyled (Html.text textOptions.text) ]

839+ )

981

840

982− else

841+ heightFillFromChild =

983− Internal.htmlClass classes.focusedWithin

842+ Internal.get attributes <|

984− , Internal.htmlClass classes.inputMultilineWrapper

843+ \attr ->

985− ]

844+ case attr of

986− ++ redistributed.parent

845+ Internal.Height (Internal.Fill _) ->

987− )

846+ True

988− (Internal.Unkeyed

989− [ Internal.element

990− Internal.asParagraph

991− Internal.div

992− (Element.width Element.fill

993− :: Element.height Element.fill

994− :: Element.inFront inputElement

995− :: Internal.htmlClass classes.inputMultilineParent

996− :: redistributed.wrapper

997− )

998− (Internal.Unkeyed

999− (if textOptions.text == "" then

1000− case textOptions.placeholder of

1001− Nothing ->

1002− -- Without this, firefox will make the text area lose focus

1003− -- if the input is empty and you mash the keyboard

1004− [ Element.text "\u{00A0}"

1005− ]

1006−

1007− Just place ->

1008− [ renderPlaceholder place

1009− []

1010− (textOptions.text == "")

1011− ]

1012−

1013− else

1014− [ Internal.unstyled

1015− (Html.span [ Html.Attributes.class classes.inputMultilineFiller ]

1016− -- We append a non-breaking space to the end of the content so that newlines don't get chomped.

1017− [ Html.text (textOptions.text ++ "\u{00A0}")

1018− ]

1019− )

1020− ]

1021− )

1022− )

1023− ]

1024− )

1025

847

1026− TextInputNode inputType ->

848+ _ ->

1027− Internal.element

849+ False

1028− Internal.asEl

1029− Internal.div

1030− (Element.width Element.fill

1031− :: (if List.any hasFocusStyle withDefaults then

1032− Internal.NoAttribute

1033

850

1034− else

851+ attributesFromChild =

1035− Internal.htmlClass classes.focusedWithin

852+ Internal.get attributes <|

1036− )

853+ \attr ->

854+ case attr of

855+ Internal.Width (Internal.Fill _) ->

856+ True

857+

858+ Internal.Height (Internal.Fill _) ->

859+ True

860+

861+ Internal.AlignX _ ->

862+ True

863+

864+ Internal.AlignY _ ->

865+ True

866+

867+ Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->

868+ True

869+

870+ Internal.StyleClass _ (Internal.FontSize _) ->

871+ True

872+

873+ Internal.StyleClass _ (Internal.FontFamily _ _) ->

874+ True

875+

876+ _ ->

877+ False

878+

879+ nearbys =

880+ Internal.get attributes <|

881+ \attr ->

882+ case attr of

883+ Internal.Nearby _ _ ->

884+ True

885+

886+ _ ->

887+ False

888+

889+ inputPadding =

890+ Internal.get attributes <|

891+ \attr ->

892+ case attr of

893+ Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->

894+ True

895+

896+ _ ->

897+ False

898+

899+ inputElement =

900+ Internal.element

901+ Internal.asEl

902+ Internal.div

903+ (Element.width Element.fill

1037− :: List.concat

904+ :: List.concat

1038− [ redistributed.parent

905+ [ nearbys

906+ , heightFillFromChild

1039− , case textOptions.placeholder of

907+ , case textOptions.placeholder of

1040− Nothing ->

908+ Nothing ->

1041− []

909+ []

1042−

910+

1043− Just place ->

911+ Just (Placeholder placeholderAttrs placeholderEl) ->

1044− [ Element.behindContent

912+ [ Element.inFront

1045− (renderPlaceholder place redistributed.cover (textOptions.text == ""))

913+ (Element.el

1046− ]

914+ (defaultTextPadding

915+ :: noNearbys

916+ ++ [ Font.color charcoal

917+ , Internal.htmlClass (classes.noTextSelection ++ " " ++ classes.passPointerEvents)

918+ , Border.color (Element.rgba 0 0 0 0)

919+ , Background.color (Element.rgba 0 0 0 0)

920+ , Element.height Element.fill

921+ , Element.width Element.fill

922+ , Element.alpha

923+ (if textOptions.text == "" then

924+ 1

925+

926+ else

927+ 0

928+ )

929+ ]

930+ ++ placeholderAttrs

931+ )

932+ placeholderEl

933+ )

1047 ]

934 ]

935+ ]

936+ )

937+ (Internal.Unkeyed

938+ [ Internal.element

939+ Internal.asEl

940+ (Internal.NodeName inputNode)

941+ (List.concat

942+ [ [ focusDefault attrs

943+ , hiddenLabelAttribute textOptions.label

944+ ]

945+ , inputAttrs

946+ , behavior

947+ ]

1048 )

948 )

1049− (Internal.Unkeyed [ inputElement ])

949+ (Internal.Unkeyed inputChildren)

950+ ]

951+ )

1050 in

952 in

1051 applyLabel

953 applyLabel

1052 (Internal.Class Flag.cursor classes.cursorText

954 (Internal.Class Flag.cursor classes.cursorText

@@ -1058,348 +960,45 @@ textHelper textInput attrs textOptions =

1058 5

960 5

1059 )

961 )

1060 :: Region.announce

962 :: Region.announce

1061− :: redistributed.fullParent

963+ :: attributesFromChild

1062 )

964 )

1063 textOptions.label

965 textOptions.label

1064− wrappedInput

966+ inputElement

1065−

1066

967

1067−getHeight attr =

1068− case attr of

1069− Internal.Height h ->

1070− Just h

1071

968

1072− _ ->

969+textHeightContent textValue spacing maybePadding maybeBorder =

1073− Nothing

1074−

1075−

1076−negateBox box =

1077− { top = negate box.top

1078− , right = negate box.right

1079− , bottom = negate box.bottom

1080− , left = negate box.left

1081− }

1082−

1083−

1084−renderBox { top, right, bottom, left } =

1085− String.fromInt top

1086− ++ "px "

1087− ++ String.fromInt right

1088− ++ "px "

1089− ++ String.fromInt bottom

1090− ++ "px "

1091− ++ String.fromInt left

1092− ++ "px"

1093−

1094−

1095−renderPlaceholder (Placeholder placeholderAttrs placeholderEl) forPlaceholder on =

1096− Element.el

1097− (forPlaceholder

1098− ++ [ Font.color charcoal

1099− , Internal.htmlClass (classes.noTextSelection ++ " " ++ classes.passPointerEvents)

1100− , Element.clip

1101− , Border.color (Element.rgba 0 0 0 0)

1102− , Background.color (Element.rgba 0 0 0 0)

1103− , Element.height Element.fill

1104− , Element.width Element.fill

1105− , Element.alpha

1106− (if on then

1107− 1

1108−

1109− else

1110− 0

1111− )

1112− ]

1113− ++ placeholderAttrs

1114− )

1115− placeholderEl

1116−

1117−

1118−{-| Because textareas are now shadowed, where they're rendered twice,

1119−we to move the literal text area up because spacing is based on line height.

1120−-}

1121−calcMoveToCompensateForPadding : List (Attribute msg) -> Attribute msg

1122−calcMoveToCompensateForPadding attrs =

1123 let

970 let

1124− gatherSpacing attr found =

971+ newlineCount =

1125− case attr of

972+ String.lines textValue

1126− Internal.StyleClass _ (Internal.SpacingStyle _ x y) ->

973+ |> List.length

1127− case found of

974+ |> (\x ->

1128− Nothing ->

975+ if x < 1 then

1129− Just y

976+ 1

1130−

977+

1131− _ ->

978+ else

1132− found

979+ x

1133−

980+ )

1134− _ ->

981+

1135− found

982+ topBottom (Padding t _ b _) =

983+ t + b

984+

985+ additionalSpacing =

986+ ((newlineCount - 1) * spacing)

987+ + Maybe.withDefault 0 (Maybe.map topBottom maybePadding)

988+ + Maybe.withDefault 0 (Maybe.map topBottom maybeBorder)

989+

990+ heightValue count =

991+ "calc("

992+ ++ String.fromInt count

993+ ++ "em + "

994+ ++ String.fromInt additionalSpacing

995+ ++ "px) !important"

1136 in

996 in

1137− case List.foldr gatherSpacing Nothing attrs of

1138− Nothing ->

1139− Internal.NoAttribute

1140−

1141− Just vSpace ->

1142− Element.moveUp (toFloat (floor (toFloat vSpace / 2)))

1143−

1144−

1145−{-| Given the list of attributes provided to `Input.multiline` or `Input.text`,

1146−

1147−redistribute them to the parent, the input, or the cover.

1148−

1149− - fullParent -> Wrapper around label and input

1150− - parent -> parent of wrapper

1151− - wrapper -> the element that is here to take up space.

1152− - cover -> things like placeholders or text areas which are layered on top of input.

1153− - input -> actual input element

1154−

1155−-}

1156−redistribute :

1157− Bool

1158− -> Bool

1159− -> List (Attribute msg)

1160− ->

1161− { fullParent : List (Attribute msg)

1162− , parent : List (Attribute msg)

1163− , wrapper : List (Attribute msg)

1164− , input : List (Attribute msg)

1165− , cover : List (Attribute msg)

1166− }

1167−redistribute isMultiline stacked attrs =

1168− List.foldl (redistributeOver isMultiline stacked)

1169− { fullParent = []

1170− , parent = []

1171− , input = []

1172− , cover = []

1173− , wrapper = []

1174− }

1175− attrs

1176− |> (\redist ->

1177− { parent = List.reverse redist.parent

1178− , fullParent = List.reverse redist.fullParent

1179− , wrapper = List.reverse redist.wrapper

1180− , input = List.reverse redist.input

1181− , cover = List.reverse redist.cover

1182− }

1183− )

1184−

1185−

1186−isFill len =

1187− case len of

1188− Internal.Fill _ ->

1189− True

1190−

1191− Internal.Content ->

1192− False

1193−

1194− Internal.Px _ ->

1195− False

1196−

1197− Internal.Min _ l ->

1198− isFill l

1199−

1200− Internal.Max _ l ->

1201− isFill l

1202−

1203−

1204−isShrink len =

1205− case len of

1206− Internal.Content ->

1207− True

1208−

1209− Internal.Px _ ->

1210− False

1211−

1212− Internal.Fill _ ->

1213− False

1214−

1215− Internal.Min _ l ->

1216− isShrink l

1217−

1218− Internal.Max _ l ->

1219− isShrink l

1220−

1221−

1222−isConstrained len =

1223− case len of

1224− Internal.Content ->

1225− False

1226−

1227− Internal.Px _ ->

1228− True

1229−

1230− Internal.Fill _ ->

1231− True

1232−

1233− Internal.Min _ l ->

1234− isConstrained l

1235−

1236− Internal.Max _ l ->

1237− True

1238−

1239−

1240−isPixel len =

1241− case len of

1242− Internal.Content ->

1243− False

1244−

1245− Internal.Px _ ->

1246− True

1247−

1248− Internal.Fill _ ->

1249− False

1250−

1251− Internal.Min _ l ->

1252− isPixel l

1253−

1254− Internal.Max _ l ->

1255− isPixel l

1256−

1257−

1258−{-| isStacked means that the label is above or below

1259−-}

1260−redistributeOver isMultiline stacked attr els =

1261− case attr of

1262− Internal.Nearby _ _ ->

1263− { els | parent = attr :: els.parent }

1264−

1265− Internal.Width width ->

1266− if isFill width then

1267− { els

1268− | fullParent = attr :: els.fullParent

1269− , parent = attr :: els.parent

1270− , input = attr :: els.input

1271− }

1272−

1273− else if stacked then

1274− { els

1275− | fullParent = attr :: els.fullParent

1276− }

1277−

1278− else

1279− { els

1280− | parent = attr :: els.parent

1281− }

1282−

1283− Internal.Height height ->

1284− if not stacked then

1285− { els

1286− | fullParent = attr :: els.fullParent

1287− , parent = attr :: els.parent

1288− }

1289−

1290− else if isFill height then

1291− { els

1292− | fullParent = attr :: els.fullParent

1293− , parent = attr :: els.parent

1294− }

1295−

1296− else if isPixel height then

1297− { els | parent = attr :: els.parent }

1298−

1299− else

1300− { els

1301− | parent = attr :: els.parent

1302− }

1303−

1304− Internal.AlignX _ ->

1305− { els | fullParent = attr :: els.fullParent }

1306−

1307− Internal.AlignY _ ->

1308− { els | fullParent = attr :: els.fullParent }

1309−

1310− Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->

1311− { els

1312− | fullParent = attr :: els.fullParent

1313− , parent = attr :: els.parent

1314− , input = attr :: els.input

1315− , wrapper = attr :: els.wrapper

1316− }

1317−

1318− Internal.StyleClass cls (Internal.PaddingStyle pad t r b l) ->

1319− if isMultiline then

1320− { els

1321− | parent = attr :: els.parent

1322− , cover = attr :: els.cover

1323− }

1324−

1325− else

1326− let

1327− newHeight =

1328− Element.htmlAttribute

1329− (Html.Attributes.style

1330− "height"

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

1332− )

1333−

1334− newLineHeight =

1335− Element.htmlAttribute

1336− (Html.Attributes.style

1337− "line-height"

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

1339− )

1340−

1341− newTop =

1342− t - min t b

1343−

1344− newBottom =

1345− b - min t b

1346−

1347− reducedVerticalPadding =

1348− Internal.StyleClass Flag.padding

997+ Internal.StyleClass Flag.heightTextAreaContent

1349− (Internal.PaddingStyle

998+ (Internal.Single ("textarea-height-" ++ String.fromInt newlineCount)

1350− (Internal.paddingNameFloat

999+ "height"

1351− newTop

1000+ (heightValue newlineCount)

1352− r

1001+ )

1353− newBottom

1354− l

1355− )

1356− newTop

1357− r

1358− newBottom

1359− l

1360− )

1361− in

1362− { els

1363− | parent = reducedVerticalPadding :: els.parent

1364− , input = newHeight :: newLineHeight :: els.input

1365− , cover = attr :: els.cover

1366− }

1367−

1368− Internal.StyleClass _ (Internal.BorderWidth _ _ _ _ _) ->

1369− { els

1370− | parent = attr :: els.parent

1371− , cover = attr :: els.cover

1372− }

1373−

1374− Internal.StyleClass _ (Internal.Transform _) ->

1375− { els

1376− | parent = attr :: els.parent

1377− , cover = attr :: els.cover

1378− }

1379−

1380− Internal.StyleClass _ (Internal.FontSize _) ->

1381− { els | fullParent = attr :: els.fullParent }

1382−

1383− Internal.StyleClass _ (Internal.FontFamily _ _) ->

1384− { els | fullParent = attr :: els.fullParent }

1385−

1386− Internal.StyleClass flag cls ->

1387− { els | parent = attr :: els.parent }

1388−

1389− Internal.NoAttribute ->

1390− els

1391−

1392− Internal.Attr a ->

1393− { els | input = attr :: els.input }

1394−

1395− Internal.Describe _ ->

1396− { els | input = attr :: els.input }

1397−

1398− Internal.Class _ _ ->

1399− { els | parent = attr :: els.parent }

1400−

1401− Internal.TransformComponent _ _ ->

1402− { els | input = attr :: els.input }

1403

1002

1404

1003

1405{-| -}

1004{-| -}

@@ -1461,7 +1060,7 @@ search =

1461

1060

1462It's `newPassword` instead of just `password` because it gives the browser a hint on what type of password input it is.

1061It's `newPassword` instead of just `password` because it gives the browser a hint on what type of password input it is.

1463

1062

1464−A password takes all the arguments a normal `Input.text` would, and also **show**, which will remove the password mask (e.g. `****` vs `pass1234`)

1063+A password takes all the arguments a normal `Input.text` would, and also `show`, which will remove the password mask (e.g. `****` vs `pass1234`)

1465

1064

1466-}

1065-}

1467newPassword :

1066newPassword :

@@ -1561,13 +1160,7 @@ email =

1561 }

1160 }

1562

1161

1563

1162

1564−{-| A multiline text input.

1565−

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

1567−

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

1569−

1570−-}

1163+{-| -}

1571multiline :

1164multiline :

1572 List (Attribute msg)

1165 List (Attribute msg)

1573 ->

1166 ->

@@ -1628,32 +1221,33 @@ applyLabel attrs label input =

1628 Internal.element

1221 Internal.element

1629 Internal.asColumn

1222 Internal.asColumn

1630 (Internal.NodeName "label")

1223 (Internal.NodeName "label")

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

1224+ attrs

1632 (Internal.Unkeyed [ labelElement, input ])

1225 (Internal.Unkeyed [ labelElement, input ])

1633

1226

1634 Below ->

1227 Below ->

1635 Internal.element

1228 Internal.element

1636 Internal.asColumn

1229 Internal.asColumn

1637 (Internal.NodeName "label")

1230 (Internal.NodeName "label")

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

1231+ attrs

1639 (Internal.Unkeyed [ input, labelElement ])

1232 (Internal.Unkeyed [ input, labelElement ])

1640

1233

1641 OnRight ->

1234 OnRight ->

1642 Internal.element

1235 Internal.element

1643 Internal.asRow

1236 Internal.asRow

1644 (Internal.NodeName "label")

1237 (Internal.NodeName "label")

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

1238+ attrs

1646 (Internal.Unkeyed [ input, labelElement ])

1239 (Internal.Unkeyed [ input, labelElement ])

1647

1240

1648 OnLeft ->

1241 OnLeft ->

1649 Internal.element

1242 Internal.element

1650 Internal.asRow

1243 Internal.asRow

1651 (Internal.NodeName "label")

1244 (Internal.NodeName "label")

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

1245+ attrs

1653 (Internal.Unkeyed [ labelElement, input ])

1246 (Internal.Unkeyed [ labelElement, input ])

1654

1247

1655

1248

1249+{-| Add choices to your radio and select menus.

1656−{-| -}

1250+-}

1657type Option value msg

1251type Option value msg

1658 = Option value (OptionState -> Element msg)

1252 = Option value (OptionState -> Element msg)

1659

1253

@@ -1665,21 +1259,46 @@ type OptionState

1665 | Selected

1259 | Selected

1666

1260

1667

1261

1668−{-| Add a choice to your radio element. This will be rendered with the default radio icon.

1669−-}

1262+{-| -}

1670option : value -> Element msg -> Option value msg

1263option : value -> Element msg -> Option value msg

1671option val txt =

1264option val txt =

1672 Option val (defaultRadioOption txt)

1265 Option val (defaultRadioOption txt)

1673

1266

1674

1267

1675−{-| Customize exactly what your radio option should look like in different states.

1676−-}

1268+{-| -}

1677optionWith : value -> (OptionState -> Element msg) -> Option value msg

1269optionWith : value -> (OptionState -> Element msg) -> Option value msg

1678optionWith val view =

1270optionWith val view =

1679 Option val view

1271 Option val view

1680

1272

1681

1273

1682−{-| -}

1274+{-|

1275+

1276+ Input.radio

1277+ [ padding 10

1278+ , spacing 20

1279+ ]

1280+ { onChange = ChooseLunch

1281+ , selected = Just model.lunch

1282+ , label = Input.labelAbove (text "Lunch")

1283+ , options =

1284+ [ Input.styledChoice Burrito <|

1285+ \selected ->

1286+ Element.row

1287+ [ spacing 5 ]

1288+ [ el None [] <|

1289+ if selected then

1290+ text ":D"

1291+

1292+ else

1293+ text ":("

1294+ , text "burrito"

1295+ ]

1296+ , Input.option Taco (text "Taco!")

1297+ , Input.option Gyro (text "Gyro")

1298+ ]

1299+ }

1300+

1301+-}

1683radio :

1302radio :

1684 List (Attribute msg)

1303 List (Attribute msg)

1685 ->

1304 ->

@@ -1864,6 +1483,92 @@ radioHelper orientation attrs input =

1864 AfterFound ->

1483 AfterFound ->

1865 ( found, prev, nxt )

1484 ( found, prev, nxt )

1866

1485

1486+ inputVisible =

1487+ List.isEmpty <|

1488+ Internal.get attrs <|

1489+ \attr ->

1490+ case attr of

1491+ Internal.StyleClass _ (Internal.Transparency _ _) ->

1492+ True

1493+

1494+ Internal.Class _ "hidden" ->

1495+ True

1496+

1497+ _ ->

1498+ False

1499+

1500+ labelVisible =

1501+ case input.label of

1502+ Label _ labelAttrs _ ->

1503+ List.isEmpty <|

1504+ Internal.get labelAttrs <|

1505+ \attr ->

1506+ case attr of

1507+ Internal.StyleClass _ (Internal.Transparency _ _) ->

1508+ True

1509+

1510+ Internal.Class _ "hidden" ->

1511+ True

1512+

1513+ _ ->

1514+ False

1515+

1516+ HiddenLabel _ ->

1517+ True

1518+

1519+ hideIfEverythingisInvisible =

1520+ if not labelVisible && not inputVisible then

1521+ let

1522+ pseudos =

1523+ List.filterMap

1524+ (\attr ->

1525+ case attr of

1526+ Internal.StyleClass _ style ->

1527+ case style of

1528+ Internal.PseudoSelector pseudo styles ->

1529+ let

1530+ transparent =

1531+ List.filter forTransparency styles

1532+

1533+ forTransparency psuedoStyle =

1534+ case psuedoStyle of

1535+ Internal.Transparency _ _ ->

1536+ True

1537+

1538+ _ ->

1539+ False

1540+

1541+ flag =

1542+ case pseudo of

1543+ Internal.Hover ->

1544+ Flag.hover

1545+

1546+ Internal.Focus ->

1547+ Flag.focus

1548+

1549+ Internal.Active ->

1550+ Flag.active

1551+ in

1552+ case transparent of

1553+ [] ->

1554+ Nothing

1555+

1556+ _ ->

1557+ Just <| Internal.StyleClass flag <| Internal.PseudoSelector pseudo transparent

1558+

1559+ _ ->

1560+ Nothing

1561+

1562+ _ ->

1563+ Nothing

1564+ )

1565+ attrs

1566+ in

1567+ Internal.StyleClass Flag.transparency (Internal.Transparency "transparent" 1.0) :: pseudos

1568+

1569+ else

1570+ []

1571+

1867 events =

1572 events =

1868 Internal.get

1573 Internal.get

1869 attrs

1574 attrs

@@ -1924,7 +1629,7 @@ radioHelper orientation attrs input =

1924 )

1629 )

1925 ]

1630 ]

1926 ++ events

1631 ++ events

1927− -- ++ hideIfEverythingisInvisible

1632+ ++ hideIfEverythingisInvisible

1928 )

1633 )

1929 input.label

1634 input.label

1930 optionArea

1635 optionArea

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

2105 Json.field "key" Json.string

1810 Json.field "key" Json.string

2106 |> Json.andThen decode

1811 |> Json.andThen decode

2107 in

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

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

2111− Html.Events.preventDefaultOn "keydown"

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

2113

1814

2114

1815

2115{-| -}

1816{-| -}

@@ -2124,6 +1825,17 @@ onFocusIn msg =

2124 Internal.Attr <| Html.Events.on "focusin" (Json.succeed msg)

1825 Internal.Attr <| Html.Events.on "focusin" (Json.succeed msg)

2125

1826

2126

1827

1828+type_ : String -> Attribute msg

1829+type_ =

1830+ Internal.Attr << Html.Attributes.type_

1831+

1832+

1833+

1834+-- checked : Bool -> Attribute msg

1835+-- checked =

1836+-- Internal.Attr << Html.Attributes.checked

1837+

1838+

2127selected : Bool -> Attribute msg

1839selected : Bool -> Attribute msg

2128selected =

1840selected =

2129 Internal.Attr << Html.Attributes.selected

1841 Internal.Attr << Html.Attributes.selected

@@ -2164,11 +1876,7 @@ autofill =

2164 Internal.Attr << Html.Attributes.attribute "autocomplete"

1876 Internal.Attr << Html.Attributes.attribute "autocomplete"

2165

1877

2166

1878

2167−{-| Attach this attribute to any `Input` that you would like to be automatically focused when the page loads.

2168−

2169−You should only have a maximum of one per page.

2170−

2171−-}

1879+{-| -}

2172focusedOnLoad : Attribute msg

1880focusedOnLoad : Attribute msg

2173focusedOnLoad =

1881focusedOnLoad =

2174 Internal.Attr <| Html.Attributes.autofocus True

1882 Internal.Attr <| Html.Attributes.autofocus True

@@ -2185,9 +1893,8 @@ defaultTextBoxStyle =

2185 , Border.color darkGrey

1893 , Border.color darkGrey

2186 , Background.color white

1894 , Background.color white

2187 , Border.width 1

1895 , Border.width 1

2188− , Element.spacing 5

1896+ , Element.spacing 3

2189 , Element.width Element.fill

1897 , Element.width Element.fill

2190− , Element.height Element.shrink

2191 ]

1898 ]

2192

1899

2193

1900

@@ -2196,17 +1903,12 @@ defaultTextPadding =

2196 Element.paddingXY 12 12

1903 Element.paddingXY 12 12

2197

1904

2198

1905

2199−{-| The blue default checked box icon.

2200−

2201−You'll likely want to make your own checkbox at some point that fits your design.

2202−

2203−-}

1906+{-| -}

2204defaultCheckbox : Bool -> Element msg

1907defaultCheckbox : Bool -> Element msg

2205defaultCheckbox checked =

1908defaultCheckbox checked =

2206 Element.el

1909 Element.el

2207 [ Internal.htmlClass "focusable"

1910 [ Internal.htmlClass "focusable"

2208− , Element.width

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

2209− (Element.px 14)

2210 , Element.height (Element.px 14)

1912 , Element.height (Element.px 14)

2211 , Font.color white

1913 , Font.color white

2212 , Element.centerY

1914 , Element.centerY

@@ -2219,7 +1921,7 @@ defaultCheckbox checked =

2219

1921

2220 else

1922 else

2221 Element.rgb (211 / 255) (211 / 255) (211 / 255)

1923 Element.rgb (211 / 255) (211 / 255) (211 / 255)

2222− , Border.shadow

1924+ , Border.shadow <|

2223 { offset = ( 0, 0 )

1925 { offset = ( 0, 0 )

2224 , blur = 1

1926 , blur = 1

2225 , size = 1

1927 , size = 1

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

2242

1944

2243 else

1945 else

2244 1

1946 1

2245− , Element.inFront

1947+ ]

1948+ (if checked then

2246− (Element.el

1949+ Element.el

2247 [ Border.color white

1950 [ Border.color white

2248 , Element.height (Element.px 6)

1951 , Element.height (Element.px 6)

2249 , Element.width (Element.px 9)

1952 , Element.width (Element.px 9)

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

2251 , Element.centerX

1954 , Element.centerX

2252 , Element.centerY

1955 , Element.centerY

2253 , Element.moveUp 1

1956 , Element.moveUp 1

2254− , Element.transparent (not checked)

2255 , Border.widthEach

1957 , Border.widthEach

2256 { top = 0

1958 { top = 0

2257 , left = 2

1959 , left = 2

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

2260 }

1962 }

2261 ]

1963 ]

2262 Element.none

1964 Element.none

2263− )

1965+

2264− ]

1966+ else

2265− Element.none

1967+ Element.none

1968+ )

src/Element/Keyed.elm+10−13

@@ -20,7 +20,7 @@ This means if a key is changed between renders, then the diffing step will be sk

20

21-}

22

23−import Element exposing (Attribute, Element, fill, height, shrink, width)

23+import Element exposing (Attribute, Element, fill, height, width)

24import Internal.Model as Internal

25import Internal.Style exposing (classes)

26

@@ -31,8 +31,8 @@ el attrs child =

31 Internal.element

32 Internal.asEl

33 Internal.div

34− (width shrink

34+ (width Element.shrink

35− :: height shrink

35+ :: height Element.shrink

36 :: attrs

37 )

38 (Internal.Keyed [ child ])

@@ -44,9 +44,9 @@ row attrs children =

44 Internal.element

45 Internal.asRow

46 Internal.div

47− (Internal.htmlClass (classes.contentLeft ++ " " ++ classes.contentCenterY)

47+ (Internal.htmlClass classes.contentLeft

48+ :: Internal.htmlClass classes.contentCenterY

48− :: width shrink

49+ :: width fill

49− :: height shrink

50 :: attrs

51 )

52 (Internal.Keyed children)

@@ -58,13 +58,10 @@ column attrs children =

58 Internal.element

59 Internal.asColumn

60 Internal.div

61− (Internal.htmlClass

61+ (Internal.htmlClass classes.contentTop

62− (classes.contentTop

63− ++ " "

64− ++ classes.contentLeft

62+ :: Internal.htmlClass classes.contentLeft

65− )

66− :: height shrink

63+ :: height fill

67− :: width shrink

64+ :: width fill

68 :: attrs

65 :: attrs

69 )

66 )

70 (Internal.Keyed children)

67 (Internal.Keyed children)

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/Flag.elm−5

@@ -22,7 +22,6 @@ module Internal.Flag exposing

22 , fontColor

23 , fontFamily

24 , fontSize

25− , fontVariant

26 , fontWeight

25 , fontWeight

27 , gridPosition

26 , gridPosition

28 , gridTemplate

27 , gridTemplate

@@ -319,7 +318,3 @@ behind =

319

318

320heightTextAreaContent =

319heightTextAreaContent =

321 flag 47

320 flag 47

322−

323−

324−fontVariant =

325− flag 48

src/Internal/Model.elm+697−1187

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

16 , LayoutContext(..)

17 , Length(..)

18 , Location(..)

19− , NearbyChildren(..)

20 , NodeName(..)

19 , NodeName(..)

21 , Option(..)

20 , Option(..)

22 , OptionRecord

21 , OptionRecord

@@ -30,7 +29,6 @@ module Internal.Model exposing

30 , TransformComponent(..)

29 , TransformComponent(..)

31 , Transformation(..)

30 , Transformation(..)

32 , VAlign(..)

31 , VAlign(..)

33− , Variant(..)

34 , XYZ

32 , XYZ

35 , addNodeName

33 , addNodeName

36 , addWhen

34 , addWhen

@@ -42,7 +40,7 @@ module Internal.Model exposing

42 , asParagraph

40 , asParagraph

43 , asRow

41 , asRow

44 , asTextColumn

42 , asTextColumn

45− , boxShadowClass

43+ , boxShadowName

46 , columnClass

44 , columnClass

47 , composeTransformation

45 , composeTransformation

48 , contextClasses

46 , contextClasses

@@ -79,30 +77,40 @@ module Internal.Model exposing

79 , onlyStyles

77 , onlyStyles

80 , optionsToRecord

78 , optionsToRecord

81 , paddingName

79 , paddingName

82− , paddingNameFloat

83 , pageClass

80 , pageClass

84 , paragraphClass

81 , paragraphClass

85 , reduceRecursive

82 , reduceRecursive

83+ , reduceRecursiveCalcName

86 , reduceStyles

84 , reduceStyles

87 , reduceStylesRecursive

85 , reduceStylesRecursive

88 , removeNever

86 , removeNever

87+ , renderFocusStyle

88+ , renderFont

89 , renderFontClassName

90 , renderHeight

91 , renderRoot

92− , renderVariant

93 , renderWidth

92 , renderWidth

94 , rootStyle

93 , rootStyle

95 , rowClass

94 , rowClass

96 , singleClass

95 , singleClass

96+ , skippable

97+ , sortedReduce

97 , spacingName

98 , spacingName

99+ , staticRoot

98 , tag

100 , tag

99− , textShadowClass

101+ , textElement

102+ , textElementFill

103+ , textShadowName

100 , toHtml

104 , toHtml

101 , toStyleSheet

105 , toStyleSheet

106+ , toStyleSheetString

102 , transformClass

107 , transformClass

108+ , transformValue

109+ , unit

103 , unstyled

110 , unstyled

111+ , untransformed

104 , unwrapDecorations

112 , unwrapDecorations

105− , variantName

113+ , unwrapDecsHelper

106 )

114 )

107

115

108{-| -}

116{-| -}

@@ -112,7 +120,7 @@ import Html.Attributes

112import Html.Keyed

120import Html.Keyed

113import Internal.Flag as Flag exposing (Flag)

121import Internal.Flag as Flag exposing (Flag)

114import Internal.Style exposing (classes, dot)

122import Internal.Style exposing (classes, dot)

115−import Json.Encode as Encode

123+import Json.Encode as Json

116import Set exposing (Set)

124import Set exposing (Set)

117import VirtualDom

125import VirtualDom

118

126

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

174 | Colored String String Color

182 | Colored String String Color

175 | SpacingStyle String Int Int

183 | SpacingStyle String Int Int

176 | BorderWidth String Int Int Int Int

184 | BorderWidth String Int Int Int Int

177− | PaddingStyle String Float Float Float Float

185+ | PaddingStyle String Int Int Int Int

178 | GridTemplateStyle

186 | GridTemplateStyle

179 { spacing : ( Length, Length )

187 { spacing : ( Length, Length )

180 , columns : List Length

188 , columns : List Length

@@ -205,86 +213,12 @@ type PseudoClass

205 | Active

213 | Active

206

214

207

215

208−{-| -}

209−type alias Adjustment =

210− { capital : Float

211− , lowercase : Float

212− , baseline : Float

213− , descender : Float

214− }

215−

216−

217type Font

216type Font

218 = Serif

217 = Serif

219 | SansSerif

218 | SansSerif

220 | Monospace

219 | Monospace

221 | Typeface String

220 | Typeface String

222 | ImportFont String String

221 | ImportFont String String

223− | FontWith

224− { name : String

225− , adjustment : Maybe Adjustment

226− , variants : List Variant

227− }

228−

229−

230−type Variant

231− = VariantActive String

232− | VariantOff String

233− | VariantIndexed String Int

234−

235−

236−renderVariant var =

237− case var of

238− VariantActive name ->

239− "\"" ++ name ++ "\""

240−

241− VariantOff name ->

242− "\"" ++ name ++ "\" 0"

243−

244− VariantIndexed name index ->

245− "\"" ++ name ++ "\" " ++ String.fromInt index

246−

247−

248−variantName var =

249− case var of

250− VariantActive name ->

251− name

252−

253− VariantOff name ->

254− name ++ "-0"

255−

256− VariantIndexed name index ->

257− name ++ "-" ++ String.fromInt index

258−

259−

260−renderVariants typeface =

261− case typeface of

262− FontWith font ->

263− Just (String.join ", " (List.map renderVariant font.variants))

264−

265− _ ->

266− Nothing

267−

268−

269−isSmallCaps var =

270− case var of

271− VariantActive name ->

272− name == "smcp"

273−

274− VariantOff name ->

275− False

276−

277− VariantIndexed name index ->

278− name == "smcp" && index == 1

279−

280−

281−hasSmallCaps typeface =

282− case typeface of

283− FontWith font ->

284− List.any isSmallCaps font.variants

285−

286− _ ->

287− False

288

222

289

223

290type Property

224type Property

@@ -372,13 +306,6 @@ type NodeName

372 | Embedded String String

306 | Embedded String String

373

307

374

308

375−type NearbyChildren msg

376− = NoNearbyChildren

377− | ChildrenBehind (List (Html.Html msg))

378− | ChildrenInFront (List (Html.Html msg))

379− | ChildrenBehindAndInFront (List (Html.Html msg)) (List (Html.Html msg))

380−

381−

382div =

309div =

383 Generic

310 Generic

384

311

@@ -387,7 +314,7 @@ type alias Gathered msg =

387 { node : NodeName

314 { node : NodeName

388 , attributes : List (VirtualDom.Attribute msg)

315 , attributes : List (VirtualDom.Attribute msg)

389 , styles : List Style

316 , styles : List Style

390− , children : NearbyChildren msg

317+ , children : List (VirtualDom.Node msg)

391 , has : Flag.Field

318 , has : Flag.Field

392 }

319 }

393

320

@@ -455,10 +382,7 @@ finalizeNode has node attributes children embedMode parentContext =

455 Embedded nodeName internal ->

382 Embedded nodeName internal ->

456 VirtualDom.node nodeName

383 VirtualDom.node nodeName

457 attributes

384 attributes

458− [ createNode internal

459− [ Html.Attributes.class

460− (classes.any ++ " " ++ classes.single)

385+ [ createNode internal [ Html.Attributes.class (classes.any ++ " " ++ classes.single) ]

461− ]

462 ]

386 ]

463 in

387 in

464 case parentContext of

388 case parentContext of

@@ -535,45 +459,49 @@ finalizeNode has node attributes children embedMode parentContext =

535

459

536

460

537embedWith static opts styles children =

461embedWith static opts styles children =

538− let

539− dynamicStyleSheet =

540− styles

541− |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )

542− |> Tuple.second

543− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

544− -- |> sortedReduce

545− |> toStyleSheet opts

546− in

547 if static then

462 if static then

548− staticRoot opts

463+ staticRoot

549− :: dynamicStyleSheet

464+ :: (styles

465+ |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

466+ |> Tuple.second

467+ -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

468+ -- |> sortedReduce

469+ |> toStyleSheet opts

470+ )

550 :: children

471 :: children

551

472

552 else

473 else

553− dynamicStyleSheet

474+ (styles

475+ |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

476+ |> Tuple.second

477+ -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

478+ -- |> sortedReduce

479+ |> toStyleSheet opts

480+ )

554 :: children

481 :: children

555

482

556

483

557embedKeyed static opts styles children =

484embedKeyed static opts styles children =

558− let

559− dynamicStyleSheet =

560− styles

561− |> List.foldl reduceStyles ( Set.empty, renderFocusStyle opts.focus )

562− |> Tuple.second

563− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

564− -- |> sortedReduce

565− |> toStyleSheet opts

566− in

567 if static then

485 if static then

568− ( "static-stylesheet", staticRoot opts )

486+ ( "static-stylesheet", staticRoot )

569 :: ( "dynamic-stylesheet"

487 :: ( "dynamic-stylesheet"

570− , dynamicStyleSheet

488+ , styles

489+ |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

490+ |> Tuple.second

491+ -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

492+ -- |> sortedReduce

493+ |> toStyleSheet opts

571 )

494 )

572 :: children

495 :: children

573

496

574 else

497 else

575 ( "dynamic-stylesheet"

498 ( "dynamic-stylesheet"

576− , dynamicStyleSheet

499+ , styles

500+ |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )

501+ |> Tuple.second

502+ -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]

503+ -- |> sortedReduce

504+ |> toStyleSheet opts

577 )

505 )

578 :: children

506 :: children

579

507

@@ -889,16 +817,7 @@ skippable flag style =

889 False

817 False

890

818

891

819

892−gatherAttrRecursive :

820+gatherAttrRecursive : String -> NodeName -> Flag.Field -> Transformation -> List Style -> List (VirtualDom.Attribute msg) -> List (VirtualDom.Node msg) -> List (Attribute aligned msg) -> Gathered msg

893− String

894− -> NodeName

895− -> Flag.Field

896− -> Transformation

897− -> List Style

898− -> List (VirtualDom.Attribute msg)

899− -> NearbyChildren msg

900− -> List (Attribute aligned msg)

901− -> Gathered msg

902gatherAttrRecursive classes node has transform styles attrs children elementAttrs =

821gatherAttrRecursive classes node has transform styles attrs children elementAttrs =

903 case elementAttrs of

822 case elementAttrs of

904 [] ->

823 [] ->

@@ -1032,7 +951,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr

1032 in

951 in

1033 gatherAttrRecursive (classes ++ " " ++ newClass)

952 gatherAttrRecursive (classes ++ " " ++ newClass)

1034 node

953 node

1035− (Flag.merge addToFlags (Flag.add Flag.width has))

954+ (Flag.merge addToFlags has)

1036 transform

955 transform

1037 (newStyles ++ styles)

956 (newStyles ++ styles)

1038 attrs

957 attrs

@@ -1053,7 +972,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr

1053 name =

972 name =

1054 "height-px-" ++ val

973 "height-px-" ++ val

1055 in

974 in

1056− gatherAttrRecursive (Internal.Style.classes.heightExact ++ " " ++ name ++ " " ++ classes)

975+ gatherAttrRecursive (name ++ " " ++ classes)

1057 node

976 node

1058 (Flag.add Flag.height has)

977 (Flag.add Flag.height has)

1059 transform

978 transform

@@ -1110,7 +1029,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr

1110 in

1029 in

1111 gatherAttrRecursive (classes ++ " " ++ newClass)

1030 gatherAttrRecursive (classes ++ " " ++ newClass)

1112 node

1031 node

1113− (Flag.merge addToFlags (Flag.add Flag.height has))

1032+ (Flag.merge addToFlags has)

1114 transform

1033 transform

1115 (newStyles ++ styles)

1034 (newStyles ++ styles)

1116 attrs

1035 attrs

@@ -1142,15 +1061,20 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr

1142 gatherAttrRecursive classes (addNodeName "h6" node) has transform styles attrs children remaining

1061 gatherAttrRecursive classes (addNodeName "h6" node) has transform styles attrs children remaining

1143

1062

1144 Paragraph ->

1063 Paragraph ->

1145− -- previously we rendered a <p> tag, though apparently this invalidates the html if it has <div>s inside.

1064+ let

1146− -- Since we can't guaranteee that there are no divs, we need another strategy.

1065+ newNode =

1147− -- While it's not documented in many places, there apparently is a paragraph aria role

1066+ case node of

1148− -- https://github.com/w3c/aria/blob/11f85f41a5b621fdbe85fc9bcdcd270e653a48ba/common/script/roleInfo.js

1067+ Generic ->

1149− -- Though we'll need to wait till it gets released in an official wai-aria spec to use it.

1068+ NodeName "p"

1150− -- If it's used at the moment, then Lighthouse complains (likely rightfully) that role paragraph is not recognized.

1069+

1070+ NodeName name ->

1071+ NodeName name

1072+

1073+ Embedded x y ->

1074+ Embedded x y

1075+ in

1151− gatherAttrRecursive

1076+ gatherAttrRecursive classes

1152− classes

1077+ newNode

1153− node

1154 has

1078 has

1155 transform

1079 transform

1156 styles

1080 styles

@@ -1185,16 +1109,75 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr

1185

1109

1186 Styled styled ->

1110 Styled styled ->

1187 styles ++ styled.styles

1111 styles ++ styled.styles

1112+

1113+ nearbyElement =

1114+ Html.div

1115+ [ Html.Attributes.class <|

1116+ case location of

1117+ Above ->

1118+ String.join " "

1119+ [ Internal.Style.classes.nearby

1120+ , Internal.Style.classes.single

1121+ , Internal.Style.classes.above

1122+ ]

1123+

1124+ Below ->

1125+ String.join " "

1126+ [ Internal.Style.classes.nearby

1127+ , Internal.Style.classes.single

1128+ , Internal.Style.classes.below

1129+ ]

1130+

1131+ OnRight ->

1132+ String.join " "

1133+ [ Internal.Style.classes.nearby

1134+ , Internal.Style.classes.single

1135+ , Internal.Style.classes.onRight

1136+ ]

1137+

1138+ OnLeft ->

1139+ String.join " "

1140+ [ Internal.Style.classes.nearby

1141+ , Internal.Style.classes.single

1142+ , Internal.Style.classes.onLeft

1143+ ]

1144+

1145+ InFront ->

1146+ String.join " "

1147+ [ Internal.Style.classes.nearby

1148+ , Internal.Style.classes.single

1149+ , Internal.Style.classes.inFront

1150+ ]

1151+

1152+ Behind ->

1153+ String.join " "

1154+ [ Internal.Style.classes.nearby

1155+ , Internal.Style.classes.single

1156+ , Internal.Style.classes.behind

1157+ ]

1158+ ]

1159+ [ case elem of

1160+ Empty ->

1161+ VirtualDom.text ""

1162+

1163+ Text str ->

1164+ textElement str

1165+

1166+ Unstyled html ->

1167+ html asEl

1168+

1169+ Styled styled ->

1170+ styled.html NoStyleSheet asEl

1171+ ]

1172+

1173+ newClasses =

1174+ if location == Behind then

1175+ Internal.Style.classes.hasBehind ++ " " ++ classes

1176+

1177+ else

1178+ classes

1188 in

1179 in

1189− gatherAttrRecursive

1180+ gatherAttrRecursive newClasses node has transform newStyles attrs (nearbyElement :: children) remaining

1190− classes

1191− node

1192− has

1193− transform

1194− newStyles

1195− attrs

1196− (addNearbyElement location elem children)

1197− remaining

1198

1181

1199 AlignX x ->

1182 AlignX x ->

1200 if Flag.present Flag.xAlign has then

1183 if Flag.present Flag.xAlign has then

@@ -1250,106 +1233,6 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr

1250 remaining

1233 remaining

1251

1234

1252

1235

1253−addNearbyElement location elem existing =

1254− let

1255− nearby =

1256− nearbyElement location elem

1257− in

1258− case existing of

1259− NoNearbyChildren ->

1260− case location of

1261− Behind ->

1262− ChildrenBehind [ nearby ]

1263−

1264− _ ->

1265− ChildrenInFront [ nearby ]

1266−

1267− ChildrenBehind existingBehind ->

1268− case location of

1269− Behind ->

1270− ChildrenBehind (nearby :: existingBehind)

1271−

1272− _ ->

1273− ChildrenBehindAndInFront existingBehind [ nearby ]

1274−

1275− ChildrenInFront existingInFront ->

1276− case location of

1277− Behind ->

1278− ChildrenBehindAndInFront [ nearby ] existingInFront

1279−

1280− _ ->

1281− ChildrenInFront (nearby :: existingInFront)

1282−

1283− ChildrenBehindAndInFront existingBehind existingInFront ->

1284− case location of

1285− Behind ->

1286− ChildrenBehindAndInFront (nearby :: existingBehind) existingInFront

1287−

1288− _ ->

1289− ChildrenBehindAndInFront existingBehind (nearby :: existingInFront)

1290−

1291−

1292−nearbyElement location elem =

1293− Html.div

1294− [ Html.Attributes.class <|

1295− case location of

1296− Above ->

1297− String.join " "

1298− [ Internal.Style.classes.nearby

1299− , Internal.Style.classes.single

1300− , Internal.Style.classes.above

1301− ]

1302−

1303− Below ->

1304− String.join " "

1305− [ Internal.Style.classes.nearby

1306− , Internal.Style.classes.single

1307− , Internal.Style.classes.below

1308− ]

1309−

1310− OnRight ->

1311− String.join " "

1312− [ Internal.Style.classes.nearby

1313− , Internal.Style.classes.single

1314− , Internal.Style.classes.onRight

1315− ]

1316−

1317− OnLeft ->

1318− String.join " "

1319− [ Internal.Style.classes.nearby

1320− , Internal.Style.classes.single

1321− , Internal.Style.classes.onLeft

1322− ]

1323−

1324− InFront ->

1325− String.join " "

1326− [ Internal.Style.classes.nearby

1327− , Internal.Style.classes.single

1328− , Internal.Style.classes.inFront

1329− ]

1330−

1331− Behind ->

1332− String.join " "

1333− [ Internal.Style.classes.nearby

1334− , Internal.Style.classes.single

1335− , Internal.Style.classes.behind

1336− ]

1337− ]

1338− [ case elem of

1339− Empty ->

1340− VirtualDom.text ""

1341−

1342− Text str ->

1343− textElement str

1344−

1345− Unstyled html ->

1346− html asEl

1347−

1348− Styled styled ->

1349− styled.html NoStyleSheet asEl

1350− ]

1351−

1352−

1353renderWidth w =

1236renderWidth w =

1354 case w of

1237 case w of

1355 Px px ->

1238 Px px ->

@@ -1436,7 +1319,7 @@ renderHeight h =

1436 "height-px-" ++ val

1319 "height-px-" ++ val

1437 in

1320 in

1438 ( Flag.none

1321 ( Flag.none

1439− , Internal.Style.classes.heightExact ++ " " ++ name

1322+ , name

1440 , [ Single name "height" (val ++ "px") ]

1323 , [ Single name "height" (val ++ "px") ]

1441 )

1324 )

1442

1325

@@ -1459,7 +1342,7 @@ renderHeight h =

1459 , [ Single

1342 , [ Single

1460 (Internal.Style.classes.any

1343 (Internal.Style.classes.any

1461 ++ "."

1344 ++ "."

1462− ++ Internal.Style.classes.column

1345+ ++ Internal.Style.classes.row

1463 ++ " > "

1346 ++ " > "

1464 ++ (Internal.Style.dot <| "height-fill-" ++ String.fromInt portion)

1347 ++ (Internal.Style.dot <| "height-fill-" ++ String.fromInt portion)

1465 )

1348 )

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

1478 Single

1361 Single

1479 cls

1362 cls

1480 "min-height"

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

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

1484

1365

1485 ( newFlag, newAttrs, newStyle ) =

1366 ( newFlag, newAttrs, newStyle ) =

1486 renderHeight len

1367 renderHeight len

@@ -1558,7 +1439,7 @@ element : LayoutContext -> NodeName -> List (Attribute aligned msg) -> Children

1558element context node attributes children =

1439element context node attributes children =

1559 attributes

1440 attributes

1560 |> List.reverse

1441 |> List.reverse

1561− |> gatherAttrRecursive (contextClasses context) node Flag.none untransformed [] [] NoNearbyChildren

1442+ |> gatherAttrRecursive (contextClasses context) node Flag.none untransformed [] [] []

1562 |> createElement context children

1443 |> createElement context children

1563

1444

1564

1445

@@ -1609,31 +1490,34 @@ createElement context children rendered =

1609 -- Maybe we could unpack text elements in a paragraph as well,

1490 -- Maybe we could unpack text elements in a paragraph as well,

1610 -- however, embedded elements that are larger than the line height will overlap with exisitng text.

1491 -- however, embedded elements that are larger than the line height will overlap with exisitng text.

1611 -- I don't think that's what we want.

1492 -- I don't think that's what we want.

1612− -- if

1493+ if

1613− -- context

1494+ context

1614− -- == asEl

1495+ == asEl

1615− -- || context

1496+ || context

1616− -- == asParagraph

1497+ == asParagraph

1617− -- then

1498+ then

1618− -- ( VirtualDom.text

1499+ ( VirtualDom.text

1619− -- (if context == asParagraph then

1500+ (if context == asParagraph then

1620− -- str

1501+ str

1502+

1621− -- else

1503+ else

1622− -- str

1504+ str

1623− -- )

1505+ )

1624− -- :: htmls

1506+ :: htmls

1625− -- , existingStyles

1507+ , existingStyles

1626− -- )

1508+ )

1627− -- else

1509+

1628− ( (if context == asEl then

1510+ else

1629− textElementFill str

1630−

1631− else

1632− textElement str

1511+ ( textElement

1512+ (if context == asParagraph then

1513+ str

1514+

1515+ else

1516+ str

1633− )

1517+ )

1634− :: htmls

1518+ :: htmls

1635− , existingStyles

1519+ , existingStyles

1636− )

1520+ )

1637

1521

1638 Empty ->

1522 Empty ->

1639 ( htmls, existingStyles )

1523 ( htmls, existingStyles )

@@ -1675,30 +1559,28 @@ createElement context children rendered =

1675 -- TEXT OPTIMIZATION

1559 -- TEXT OPTIMIZATION

1676 -- You can have raw text if the element is an el, and has `width-content` and `height-content`

1560 -- You can have raw text if the element is an el, and has `width-content` and `height-content`

1677 -- Same if it's a column or row with one child and width-content, height-content

1561 -- Same if it's a column or row with one child and width-content, height-content

1678− -- if

1562+ if

1679− -- context

1563+ context

1680− -- == asEl

1564+ == asEl

1681− -- || context

1565+ || context

1682− -- == asParagraph

1566+ == asParagraph

1683− -- then

1567+ then

1684− -- ( ( key

1568+ ( ( key

1685− -- , VirtualDom.text

1569+ , VirtualDom.text

1686− -- str

1570+ str

1687− -- )

1571+ )

1688− -- :: htmls

1572+ :: htmls

1689− -- , existingStyles

1573+ , existingStyles

1690− -- )

1574+ )

1691− -- else

1692− ( ( key

1693− , if context == asEl then

1694− textElementFill str

1695

1575

1696− else

1576+ else

1577+ ( ( key

1697− textElement str

1578+ , textElement

1579+ str

1698− )

1580+ )

1699− :: htmls

1581+ :: htmls

1700− , existingStyles

1582+ , existingStyles

1701− )

1583+ )

1702

1584

1703 Empty ->

1585 Empty ->

1704 ( htmls, existingStyles )

1586 ( htmls, existingStyles )

@@ -1721,8 +1603,13 @@ createElement context children rendered =

1721 (finalizeNode rendered.has

1603 (finalizeNode rendered.has

1722 rendered.node

1604 rendered.node

1723 rendered.attributes

1605 rendered.attributes

1724− (Keyed

1606+ (Keyed <|

1607+ keyed

1608+ ++ List.map

1609+ (\x ->

1610+ ( "nearby-elements-pls", x )

1611+ )

1725− (addKeyedChildren "nearby-element-pls" keyed rendered.children)

1612+ rendered.children

1726 )

1613 )

1727 NoStyleSheet

1614 NoStyleSheet

1728 )

1615 )

@@ -1736,7 +1623,13 @@ createElement context children rendered =

1736 rendered.node

1623 rendered.node

1737 rendered.attributes

1624 rendered.attributes

1738 (Keyed

1625 (Keyed

1626+ (keyed

1627+ ++ List.map

1628+ (\x ->

1629+ ( "nearby-elements-pls", x )

1630+ )

1739− (addKeyedChildren "nearby-element-pls" keyed rendered.children)

1631+ rendered.children

1632+ )

1740 )

1633 )

1741 }

1634 }

1742

1635

@@ -1758,7 +1651,7 @@ createElement context children rendered =

1758 rendered.has

1651 rendered.has

1759 rendered.node

1652 rendered.node

1760 rendered.attributes

1653 rendered.attributes

1761− (Unkeyed (addChildren unkeyed rendered.children))

1654+ (Unkeyed <| unkeyed ++ rendered.children)

1762 NoStyleSheet

1655 NoStyleSheet

1763 )

1656 )

1764

1657

@@ -1770,42 +1663,10 @@ createElement context children rendered =

1770 rendered.has

1663 rendered.has

1771 rendered.node

1664 rendered.node

1772 rendered.attributes

1665 rendered.attributes

1773− (Unkeyed (addChildren unkeyed rendered.children))

1666+ (Unkeyed (unkeyed ++ rendered.children))

1774 }

1667 }

1775

1668

1776

1669

1777−addChildren existing nearbyChildren =

1778− case nearbyChildren of

1779− NoNearbyChildren ->

1780− existing

1781−

1782− ChildrenBehind behind ->

1783− behind ++ existing

1784−

1785− ChildrenInFront inFront ->

1786− existing ++ inFront

1787−

1788− ChildrenBehindAndInFront behind inFront ->

1789− behind ++ existing ++ inFront

1790−

1791−

1792−addKeyedChildren key existing nearbyChildren =

1793− case nearbyChildren of

1794− NoNearbyChildren ->

1795− existing

1796−

1797− ChildrenBehind behind ->

1798− List.map (\x -> ( key, x )) behind ++ existing

1799−

1800− ChildrenInFront inFront ->

1801− existing ++ List.map (\x -> ( key, x )) inFront

1802−

1803− ChildrenBehindAndInFront behind inFront ->

1804− List.map (\x -> ( key, x )) behind

1805− ++ existing

1806− ++ List.map (\x -> ( key, x )) inFront

1807−

1808−

1809unit =

1670unit =

1810 0

1671 0

1811

1672

@@ -1817,20 +1678,8 @@ defaultOptions =

1817 }

1678 }

1818

1679

1819

1680

1820−staticRoot : OptionRecord -> VirtualDom.Node msg

1681+staticRoot =

1821−staticRoot opts =

1822− case opts.mode of

1823− Layout ->

1824− -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.

1825− VirtualDom.node "div"

1826− []

1827− [ VirtualDom.node "style" [] [ VirtualDom.text Internal.Style.rules ] ]

1682+ VirtualDom.node "style" [] [ VirtualDom.text Internal.Style.rules ]

1828−

1829− NoStaticStyleSheet ->

1830− VirtualDom.text ""

1831−

1832− WithVirtualCss ->

1833− VirtualDom.node "elm-ui-static-rules" [ VirtualDom.property "rules" (Encode.string Internal.Style.rules) ] []

1834

1683

1835

1684

1836addWhen ifThis x to =

1685addWhen ifThis x to =

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

1948

1797

1949

1798

1950type Padding

1799type Padding

1951− = Padding String Float Float Float Float

1800+ = Padding String Int Int Int Int

1952

1801

1953

1802

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

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

@@ -2044,44 +1893,35 @@ getHeight attrs =

2044 Nothing

1893 Nothing

2045

1894

2046

1895

2047−textElementClasses : String

2048−textElementClasses =

2049− classes.any

2050− ++ " "

2051− ++ classes.text

2052− ++ " "

2053− ++ classes.widthContent

2054− ++ " "

2055− ++ classes.heightContent

2056−

2057−

2058textElement : String -> VirtualDom.Node msg

1896textElement : String -> VirtualDom.Node msg

2059textElement str =

1897textElement str =

2060 Html.div

1898 Html.div

2061 [ Html.Attributes.class

1899 [ Html.Attributes.class

2062− textElementClasses

1900+ (String.join " "

1901+ [ classes.any

1902+ , classes.text

1903+ , classes.widthContent

1904+ , classes.heightContent

1905+ ]

1906+ )

2063 ]

1907 ]

2064 [ Html.text str ]

1908 [ Html.text str ]

2065

1909

2066

1910

2067−textElementFillClasses : String

2068−textElementFillClasses =

2069− classes.any

2070− ++ " "

2071− ++ classes.text

2072− ++ " "

2073− ++ classes.widthFill

2074− ++ " "

2075− ++ classes.heightFill

2076−

2077−

2078textElementFill : String -> VirtualDom.Node msg

1911textElementFill : String -> VirtualDom.Node msg

2079textElementFill str =

1912textElementFill str =

2080− Html.div

1913+ VirtualDom.node "div"

2081− [ Html.Attributes.class

1914+ [ VirtualDom.property "className"

2082− textElementFillClasses

1915+ (Json.string <|

1916+ String.join " "

1917+ [ classes.any

1918+ , classes.text

1919+ , classes.widthFill

1920+ , classes.heightFill

1921+ ]

1922+ )

2083 ]

1923 ]

2084− [ Html.text str ]

1924+ [ VirtualDom.text str ]

2085

1925

2086

1926

2087type Children x

1927type Children x

@@ -2089,6 +1929,10 @@ type Children x

2089 | Keyed (List ( String, x ))

1929 | Keyed (List ( String, x ))

2090

1930

2091

1931

1932+

1933+-- toHtml : OptionRecord -> Element msg -> VirtualDom.Node msg

1934+

1935+

2092toHtml mode el =

1936toHtml mode el =

2093 case el of

1937 case el of

2094 Unstyled html ->

1938 Unstyled html ->

@@ -2124,7 +1968,8 @@ renderRoot optionList attributes child =

2124

1968

2125

1969

2126type RenderMode

1970type RenderMode

1971+ = Viewport

2127− = Layout

1972+ | Layout

2128 | NoStaticStyleSheet

1973 | NoStaticStyleSheet

2129 | WithVirtualCss

1974 | WithVirtualCss

2130

1975

@@ -2173,8 +2018,8 @@ rootStyle =

2173 , SansSerif

2018 , SansSerif

2174 ]

2019 ]

2175 in

2020 in

2176− [ StyleClass Flag.bgColor (Colored ("bg-" ++ formatColorClass (Rgba 1 1 1 0)) "background-color" (Rgba 1 1 1 0))

2021+ [ StyleClass Flag.bgColor (Colored ("bg-color-" ++ formatColorClass (Rgba 1 1 1 0)) "background-color" (Rgba 1 1 1 0))

2177− , StyleClass Flag.fontColor (Colored ("fc-" ++ formatColorClass (Rgba 0 0 0 1)) "color" (Rgba 0 0 0 1))

2022+ , StyleClass Flag.fontColor (Colored ("font-color-" ++ formatColorClass (Rgba 0 0 0 1)) "color" (Rgba 0 0 0 1))

2178 , StyleClass Flag.fontSize (FontSize 20)

2023 , StyleClass Flag.fontSize (FontSize 20)

2179 , StyleClass Flag.fontFamily <|

2024 , StyleClass Flag.fontFamily <|

2180 FontFamily (List.foldl renderFontClassName "font-" families)

2025 FontFamily (List.foldl renderFontClassName "font-" families)

@@ -2206,49 +2051,14 @@ renderFontClassName font current =

2206 |> String.toLower

2051 |> String.toLower

2207 |> String.words

2052 |> String.words

2208 |> String.join "-"

2053 |> String.join "-"

2209−

2210− FontWith { name } ->

2211− name

2212− |> String.toLower

2213− |> String.words

2214− |> String.join "-"

2215 )

2054 )

2216

2055

2217

2056

2218renderFocusStyle :

2057renderFocusStyle :

2219 FocusStyle

2058 FocusStyle

2220− -> List Style

2059+ -> Style

2221renderFocusStyle focus =

2060renderFocusStyle focus =

2222− [ Style (Internal.Style.dot classes.focusedWithin ++ ":focus-within")

2223− (List.filterMap identity

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

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

2226− , Maybe.map

2227− (\shadow ->

2228− Property "box-shadow"

2229− (formatBoxShadow

2230− { color = shadow.color

2231− , offset =

2232− shadow.offset

2233− |> Tuple.mapFirst toFloat

2234− |> Tuple.mapSecond toFloat

2235− , inset = False

2236− , blur =

2237− toFloat shadow.blur

2238− , size =

2239− toFloat shadow.size

2240− }

2241− )

2242− )

2243− focus.shadow

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

2245− ]

2246− )

2247− , Style

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

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

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

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

2251− )

2252 (List.filterMap identity

2062 (List.filterMap identity

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

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

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

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

@@ -2271,7 +2081,6 @@ renderFocusStyle focus =

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

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

2272 ]

2082 ]

2273 )

2083 )

2274− ]

2275

2084

2276

2085

2277focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }

2086focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }

@@ -2283,7 +2092,7 @@ focusDefaultStyle =

2283 { color =

2092 { color =

2284 Rgba (155 / 255) (203 / 255) 1 1

2093 Rgba (155 / 255) (203 / 255) 1 1

2285 , offset = ( 0, 0 )

2094 , offset = ( 0, 0 )

2286− , blur = 0

2095+ , blur = 3

2287 , size = 3

2096 , size = 3

2288 }

2097 }

2289 }

2098 }

@@ -2351,734 +2160,519 @@ optionsToRecord options =

2351 options

2160 options

2352

2161

2353

2162

2354−toStyleSheet : OptionRecord -> List Style -> VirtualDom.Node msg

2163+renderFont : List Font -> String

2355−toStyleSheet options styleSheet =

2164+renderFont families =

2356− case options.mode of

2357− Layout ->

2358− -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.

2359− VirtualDom.node "div"

2360− []

2361− [ VirtualDom.node "style"

2362− []

2363− [ VirtualDom.text (toStyleSheetString options styleSheet) ]

2364− ]

2365−

2366− NoStaticStyleSheet ->

2367− -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.

2368− VirtualDom.node "div"

2369− []

2370− [ VirtualDom.node "style"

2371− []

2372− [ VirtualDom.text (toStyleSheetString options styleSheet) ]

2373− ]

2374−

2375− WithVirtualCss ->

2376− VirtualDom.node "elm-ui-rules"

2377− [ VirtualDom.property "rules"

2378− (encodeStyles options styleSheet)

2379− ]

2380− []

2381−

2382−

2383−renderTopLevelValues rules =

2384 let

2165 let

2385− withImport font =

2166+ fontName font =

2386 case font of

2167 case font of

2387− ImportFont _ url ->

2168+ Serif ->

2388− Just ("@import url('" ++ url ++ "');")

2169+ "serif"

2389−

2390− -- FontWith with ->

2391− -- case with.url of

2392− -- Just x ->

2393− -- Just ("@import url('" ++ x ++ "');")

2394− -- Nothing ->

2395− -- Nothing

2396− _ ->

2397− Nothing

2398−

2399− allNames =

2400− List.map Tuple.first rules

2401−

2402− fontImports ( name, typefaces ) =

2403− let

2404− imports =

2405− String.join "\n" (List.filterMap withImport typefaces)

2406− in

2407− imports

2408−

2409− fontAdjustments ( name, typefaces ) =

2410− case typefaceAdjustment typefaces of

2411− Nothing ->

2412− String.join ""

2413− (List.map (renderNullAdjustmentRule name) allNames)

2414

2170

2415− Just adjustment ->

2171+ SansSerif ->

2416− String.join ""

2172+ "sans-serif"

2417− (List.map (renderFontAdjustmentRule name adjustment) allNames)

2418− in

2419− String.join "\n" (List.map fontImports rules)

2420− ++ String.join "\n" (List.map fontAdjustments rules)

2421

2173

2174+ Monospace ->

2175+ "monospace"

2422

2176

2423−renderNullAdjustmentRule fontToAdjust otherFontName =

2177+ Typeface name ->

2424− let

2178+ "\"" ++ name ++ "\""

2425− name =

2426− if fontToAdjust == otherFontName then

2427− fontToAdjust

2428

2179

2429− else

2180+ ImportFont name url ->

2430− otherFontName ++ " ." ++ fontToAdjust

2181+ "\"" ++ name ++ "\""

2431 in

2182 in

2183+ families

2184+ |> List.map fontName

2432− String.join " "

2185+ |> String.join ", "

2433− [ bracket

2434− ("."

2435− ++ name

2436− ++ "."

2437− ++ classes.sizeByCapital

2438− ++ ", "

2439− ++ "."

2440− ++ name

2441− ++ " ."

2442− ++ classes.sizeByCapital

2443− )

2444− [ ( "line-height", "1" )

2445− ]

2446− , bracket

2447− ("."

2448− ++ name

2449− ++ "."

2450− ++ classes.sizeByCapital

2451− ++ "> ."

2452− ++ Internal.Style.classes.text

2453− ++ ", ."

2454− ++ name

2455− ++ " ."

2456− ++ classes.sizeByCapital

2457− ++ " > ."

2458− ++ Internal.Style.classes.text

2459− )

2460− [ ( "vertical-align", "0" )

2461− , ( "line-height", "1" )

2462− ]

2463− ]

2464

2186

2465

2187

2466−fontRule name modifier ( parentAdj, textAdjustment ) =

2188+toStyleSheet : OptionRecord -> List Style -> VirtualDom.Node msg

2467− [ bracket

2189+toStyleSheet options styleSheet =

2468− ("."

2190+ VirtualDom.node "style" [] [ VirtualDom.text (toStyleSheetString options styleSheet) ]

2469− ++ name

2470− ++ "."

2471− ++ modifier

2472− ++ ", "

2473− ++ "."

2474− ++ name

2475− ++ " ."

2476− ++ modifier

2477− )

2478− parentAdj

2479− , bracket

2480− ("."

2481− ++ name

2482− ++ "."

2483− ++ modifier

2484− ++ "> ."

2485− ++ Internal.Style.classes.text

2486− ++ ", ."

2487− ++ name

2488− ++ " ."

2489− ++ modifier

2490− ++ " > ."

2491− ++ Internal.Style.classes.text

2492− )

2493− textAdjustment

2494− ]

2495

2191

2496

2192

2497−renderFontAdjustmentRule fontToAdjust ( full, capital ) otherFontName =

2193+toStyleSheetString : OptionRecord -> List Style -> String

2194+toStyleSheetString options stylesheet =

2498 let

2195 let

2499− name =

2196+ renderTopLevels rule =

2500− if fontToAdjust == otherFontName then

2197+ case rule of

2501− fontToAdjust

2198+ FontFamily name typefaces ->

2502−

2199+ let

2503− else

2200+ getImports font =

2504− otherFontName ++ " ." ++ fontToAdjust

2201+ case font of

2505− in

2202+ ImportFont _ url ->

2506− String.join " "

2203+ Just ("@import url('" ++ url ++ "');")

2507− (fontRule name classes.sizeByCapital capital ++ fontRule name classes.fullSize full)

2508−

2509

2204

2510−bracket selector rules =

2205+ _ ->

2511− let

2206+ Nothing

2512− renderPair ( name, val ) =

2513− name ++ ": " ++ val ++ ";"

2514− in

2207+ in

2515− selector ++ " {" ++ String.join "" (List.map renderPair rules) ++ "}"

2208+ typefaces

2209+ |> List.filterMap getImports

2210+ |> String.join "\n"

2211+ |> Just

2516

2212

2213+ _ ->

2214+ Nothing

2517

2215

2518−fontAdjustmentRules converted =

2216+ renderProps force (Property key val) existing =

2519− ( [ ( "display", "block" )

2217+ if force then

2520− ]

2218+ existing ++ "\n " ++ key ++ ": " ++ val ++ " !important;"

2521− , [ ( "display", "inline-block" )

2522− , ( "line-height", String.fromFloat converted.height )

2523− , ( "vertical-align", String.fromFloat converted.vertical ++ "em" )

2524− , ( "font-size", String.fromFloat converted.size ++ "em" )

2525− ]

2526− )

2527

2219

2220+ else

2221+ existing ++ "\n " ++ key ++ ": " ++ val ++ ";"

2528

2222

2529−typefaceAdjustment typefaces =

2223+ renderStyle maybePseudo selector props =

2530− List.foldl

2531− (\face found ->

2532− case found of

2224+ case maybePseudo of

2533 Nothing ->

2225 Nothing ->

2534− case face of

2226+ selector ++ "{" ++ List.foldl (renderProps False) "" props ++ "\n}"

2535− FontWith with ->

2536− case with.adjustment of

2537− Nothing ->

2538− found

2539−

2540− Just adjustment ->

2541− Just

2542− ( fontAdjustmentRules

2543− (.full (convertAdjustment adjustment))

2544− , fontAdjustmentRules

2545− (.capital (convertAdjustment adjustment))

2546− )

2547−

2548− _ ->

2549− found

2550−

2551− Just _ ->

2552− found

2553− )

2554− Nothing

2555− typefaces

2556−

2557−

2558−fontName font =

2559− case font of

2560− Serif ->

2561− "serif"

2562−

2563− SansSerif ->

2564− "sans-serif"

2565−

2566− Monospace ->

2567− "monospace"

2568−

2569− Typeface name ->

2570− "\"" ++ name ++ "\""

2571

2227

2572− ImportFont name url ->

2228+ Just pseudo ->

2573− "\"" ++ name ++ "\""

2229+ case pseudo of

2574−

2230+ Hover ->

2575− FontWith { name } ->

2231+ case options.hover of

2576− "\"" ++ name ++ "\""

2232+ NoHover ->

2577−

2233+ ""

2578−

2579−topLevelValue rule =

2580− case rule of

2581− FontFamily name typefaces ->

2582− Just ( name, typefaces )

2583−

2584− _ ->

2585− Nothing

2586−

2587−

2588−renderProps force (Property key val) existing =

2589− if force then

2590− existing ++ "\n " ++ key ++ ": " ++ val ++ " !important;"

2591−

2592− else

2593− existing ++ "\n " ++ key ++ ": " ++ val ++ ";"

2594−

2595−

2596−encodeStyles options stylesheet =

2597− stylesheet

2598− |> List.map

2599− (\style ->

2600− let

2601− styled =

2602− renderStyleRule options style Nothing

2603− in

2604− ( getStyleName style, Encode.list Encode.string styled )

2605− )

2606− |> Encode.object

2607−

2608−

2609−toStyleSheetString : OptionRecord -> List Style -> String

2610−toStyleSheetString options stylesheet =

2611− let

2612− combine style rendered =

2613− { rules = rendered.rules ++ renderStyleRule options style Nothing

2614− , topLevel =

2615− case topLevelValue style of

2616− Nothing ->

2617− rendered.topLevel

2618

2234

2619− Just topLevel ->

2235+ ForceHover ->

2620− topLevel :: rendered.topLevel

2236+ selector ++ "-hv {" ++ List.foldl (renderProps True) "" props ++ "\n}"

2621− }

2622− in

2623− case List.foldl combine { topLevel = [], rules = [] } stylesheet of

2624− { topLevel, rules } ->

2625− renderTopLevelValues topLevel ++ String.concat rules

2626

2237

2238+ AllowHover ->

2239+ selector ++ "-hv:hover {" ++ List.foldl (renderProps False) "" props ++ "\n}"

2627

2240

2628−renderStyle : OptionRecord -> Maybe PseudoClass -> String -> List Property -> List String

2241+ Focus ->

2629−renderStyle options maybePseudo selector props =

2242+ let

2630− case maybePseudo of

2243+ renderedProps =

2631− Nothing ->

2632− [ selector ++ "{" ++ List.foldl (renderProps False) "" props ++ "\n}" ]

2244+ List.foldl (renderProps False) "" props

2245+ in

2246+ String.join "\n"

2247+ [ selector

2248+ ++ "-fs:focus {"

2249+ ++ renderedProps

2250+ ++ "\n}"

2251+ , "."

2252+ ++ classes.any

2253+ ++ ":focus ~ "

2254+ ++ selector

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

2256+ ++ renderedProps

2257+ ++ "\n}"

2258+ , "."

2259+ ++ classes.any

2260+ ++ ":focus "

2261+ ++ selector

2262+ ++ "-fs {"

2263+ ++ renderedProps

2264+ ++ "\n}"

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

2266+ ++ "."

2267+ ++ classes.any

2268+ ++ " "

2269+ ++ selector

2270+ ++ "-fs {"

2271+ ++ renderedProps

2272+ ++ "\n}"

2273+ ]

2633

2274

2634− Just pseudo ->

2275+ Active ->

2635− case pseudo of

2276+ selector ++ "-act:active {" ++ List.foldl (renderProps False) "" props ++ "\n}"

2636− Hover ->

2637− case options.hover of

2638− NoHover ->

2639− []

2640

2277

2641− ForceHover ->

2278+ renderStyleRule rule maybePseudo =

2642− [ selector ++ "-hv {" ++ List.foldl (renderProps True) "" props ++ "\n}" ]

2279+ case rule of

2280+ Style selector props ->

2281+ renderStyle maybePseudo selector props

2643

2282

2644− AllowHover ->

2283+ Shadows name prop ->

2645− [ selector ++ "-hv:hover {" ++ List.foldl (renderProps False) "" props ++ "\n}" ]

2284+ renderStyle

2285+ maybePseudo

2286+ ("." ++ name)

2287+ [ Property "box-shadow" prop

2288+ ]

2646

2289

2647− Focus ->

2290+ Transparency name transparency ->

2648 let

2291 let

2649− renderedProps =

2292+ opacity =

2650− List.foldl (renderProps False) "" props

2293+ (1 - transparency)

2294+ |> min 1

2295+ |> max 0

2651 in

2296 in

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

2297+ renderStyle

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

2298+ maybePseudo

2654− ++ renderedProps

2655− ++ "\n}"

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

2657− ++ renderedProps

2658− ++ "\n}"

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

2660− ++ renderedProps

2661− ++ "\n}"

2662− ]

2663−

2664− Active ->

2665− [ selector ++ "-act:active {" ++ List.foldl (renderProps False) "" props ++ "\n}" ]

2666−

2667−

2668−renderStyleRule : OptionRecord -> Style -> Maybe PseudoClass -> List String

2669−renderStyleRule options rule maybePseudo =

2670− case rule of

2671− Style selector props ->

2672− renderStyle options maybePseudo selector props

2673−

2674− Shadows name prop ->

2675− renderStyle options

2676− maybePseudo

2677− ("." ++ name)

2299+ ("." ++ name)

2678− [ Property "box-shadow" prop

2679− ]

2680−

2681− Transparency name transparency ->

2682− let

2683− opacity =

2684− (1 - transparency)

2685− |> min 1

2686− |> max 0

2687− in

2688− renderStyle options

2689− maybePseudo

2690− ("." ++ name)

2691− [ Property "opacity" (String.fromFloat opacity)

2300+ [ Property "opacity" (String.fromFloat opacity)

2692− ]

2301+ ]

2693

2302

2694− FontSize i ->

2303+ FontSize i ->

2695− renderStyle options

2304+ renderStyle

2696− maybePseudo

2305+ maybePseudo

2697− (".font-size-" ++ String.fromInt i)

2306+ (".font-size-" ++ String.fromInt i)

2698− [ Property "font-size" (String.fromInt i ++ "px")

2307+ [ Property "font-size" (String.fromInt i ++ "px")

2699− ]

2308+ ]

2700

2309

2701− FontFamily name typefaces ->

2310+ FontFamily name typefaces ->

2702− let

2311+ renderStyle

2703− features =

2312+ maybePseudo

2704− typefaces

2313+ ("." ++ name)

2705− |> List.filterMap renderVariants

2706− |> String.join ", "

2707−

2708− families =

2709− [ Property "font-family"

2314+ [ Property "font-family" (renderFont typefaces)

2710− (typefaces

2315+ ]

2711− |> List.map fontName

2712− |> String.join ", "

2713− )

2714− , Property "font-feature-settings" features

2715− , Property "font-variant"

2716− (if List.any hasSmallCaps typefaces then

2717− "small-caps"

2718

2316

2719− else

2317+ Single class prop val ->

2720− "normal"

2721− )

2722− ]

2723− in

2724− renderStyle options

2318+ renderStyle

2725− maybePseudo

2319+ maybePseudo

2726− ("." ++ name)

2320+ ("." ++ class)

2727− families

2321+ [ Property prop val

2322+ ]

2728

2323

2729− Single class prop val ->

2324+ Colored class prop color ->

2730− renderStyle options

2325+ renderStyle

2731− maybePseudo

2326+ maybePseudo

2732− ("." ++ class)

2327+ ("." ++ class)

2733− [ Property prop val

2328+ [ Property prop (formatColor color)

2734− ]

2329+ ]

2735

2330

2736− Colored class prop color ->

2331+ SpacingStyle cls x y ->

2737− renderStyle options

2332+ let

2738− maybePseudo

2333+ class =

2739− ("." ++ class)

2334+ "." ++ cls

2740− [ Property prop (formatColor color)

2741− ]

2742

2335

2743− SpacingStyle cls x y ->

2336+ xPx =

2744− let

2337+ String.fromInt x ++ "px"

2745− class =

2746− "." ++ cls

2747

2338

2748− halfX =

2339+ yPx =

2749− String.fromFloat (toFloat x / 2) ++ "px"

2340+ String.fromInt y ++ "px"

2750

2341

2751− halfY =

2342+ row =

2752− String.fromFloat (toFloat y / 2) ++ "px"

2343+ "." ++ Internal.Style.classes.row

2753

2344

2754− xPx =

2345+ wrappedRow =

2755− String.fromInt x ++ "px"

2346+ "." ++ Internal.Style.classes.wrapped ++ row

2756

2347

2757− yPx =

2348+ column =

2758− String.fromInt y ++ "px"

2349+ "." ++ Internal.Style.classes.column

2759

2350

2760− row =

2351+ page =

2761− "." ++ Internal.Style.classes.row

2352+ "." ++ Internal.Style.classes.page

2762

2353

2763− wrappedRow =

2354+ paragraph =

2764− "." ++ Internal.Style.classes.wrapped ++ row

2355+ "." ++ Internal.Style.classes.paragraph

2765

2356

2766− column =

2357+ left =

2767− "." ++ Internal.Style.classes.column

2358+ "." ++ Internal.Style.classes.alignLeft

2768

2359

2769− page =

2360+ right =

2770− "." ++ Internal.Style.classes.page

2361+ "." ++ Internal.Style.classes.alignRight

2771

2362

2772− paragraph =

2363+ any =

2773− "." ++ Internal.Style.classes.paragraph

2364+ "." ++ Internal.Style.classes.any

2774

2365

2775− left =

2366+ single =

2776− "." ++ Internal.Style.classes.alignLeft

2367+ "." ++ Internal.Style.classes.single

2368+ in

2369+ String.concat

2370+ [ renderStyle maybePseudo (class ++ row ++ " > " ++ any) [ Property "margin-right" xPx ]

2777

2371

2778− right =

2372+ -- margins don't apply to last element of normal, unwrapped rows

2779− "." ++ Internal.Style.classes.alignRight

2373+ , renderStyle maybePseudo (class ++ row ++ " > " ++ any ++ ":last-child") [ Property "margin" "0" ]

2780

2374

2781− any =

2375+ -- For wrapped rows, margins always apply because we handle "canceling out" the other margins manually in the element.

2782− "." ++ Internal.Style.classes.any

2376+ , renderStyle maybePseudo

2377+ (class ++ wrappedRow ++ " > " ++ any)

2378+ [ Property "margin" ("0 " ++ xPx ++ " " ++ yPx ++ " 0")

2379+ ]

2380+ , renderStyle maybePseudo

2381+ (class ++ wrappedRow ++ " > " ++ any ++ ":last-child")

2382+ [ Property "margin-right" "0"

2383+ ]

2783

2384

2784− single =

2385+ -- columns

2785− "." ++ Internal.Style.classes.single

2786− in

2787− List.concat

2788− [ renderStyle options maybePseudo (class ++ row ++ " > " ++ any ++ " + " ++ any) [ Property "margin-left" xPx ]

2386+ , renderStyle maybePseudo (class ++ column ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]

2789−

2387+ , renderStyle maybePseudo (class ++ page ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]

2790− -- margins don't apply to last element of normal, unwrapped rows

2791− -- , renderStyle options maybePseudo (class ++ row ++ " > " ++ any ++ ":first-child") [ Property "margin" "0" ]

2388+ , renderStyle maybePseudo (class ++ page ++ " > " ++ left) [ Property "margin-right" xPx ]

2792− -- For wrapped rows, margins always apply because we handle "canceling out" the other margins manually in the element.

2389+ , renderStyle maybePseudo (class ++ page ++ " > " ++ right) [ Property "margin-left" xPx ]

2793− , renderStyle options

2390+ , renderStyle

2794− maybePseudo

2391+ maybePseudo

2795− (class ++ wrappedRow ++ " > " ++ any)

2392+ (class ++ paragraph)

2796− [ Property "margin" (halfY ++ " " ++ halfX)

2393+ [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")

2394+ ]

2395+ , renderStyle

2396+ maybePseudo

2397+ ("textarea" ++ class)

2398+ [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")

2797− ]

2399+ ]

2798

2400

2799− -- , renderStyle options maybePseudo

2401+ -- , renderStyle

2800− -- (class ++ wrappedRow ++ " > " ++ any ++ ":last-child")

2402+ -- maybePseudo

2403+ -- (class ++ paragraph ++ " > " ++ any)

2801− -- [ Property "margin-right" "0"

2404+ -- [ Property "margin-right" xPx

2802− -- ]

2405+ -- , Property "margin-bottom" yPx

2803− -- columns

2406+ -- ]

2804− , renderStyle options maybePseudo (class ++ column ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]

2407+ , renderStyle

2805− , renderStyle options maybePseudo (class ++ page ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]

2408+ maybePseudo

2409+ (class ++ paragraph ++ " > " ++ left)

2410+ [ Property "margin-right" xPx

2411+ ]

2412+ , renderStyle

2413+ maybePseudo

2414+ (class ++ paragraph ++ " > " ++ right)

2806− , renderStyle options maybePseudo (class ++ page ++ " > " ++ left) [ Property "margin-right" xPx ]

2415+ [ Property "margin-left" xPx

2807− , renderStyle options maybePseudo (class ++ page ++ " > " ++ right) [ Property "margin-left" xPx ]

2416+ ]

2808− , renderStyle options

2417+ , renderStyle

2809− maybePseudo

2418+ maybePseudo

2810− (class ++ paragraph)

2419+ (class ++ paragraph ++ "::after")

2420+ [ Property "content" "''"

2421+ , Property "display" "block"

2422+ , Property "height" "0"

2423+ , Property "width" "0"

2811− [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")

2424+ , Property "margin-top" (String.fromInt (-1 * (y // 2)) ++ "px")

2812− ]

2425+ ]

2813− , renderStyle options

2426+ , renderStyle

2814− maybePseudo

2427+ maybePseudo

2815− ("textarea" ++ any ++ class)

2428+ (class ++ paragraph ++ "::before")

2816− [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")

2429+ [ Property "content" "''"

2430+ , Property "display" "block"

2431+ , Property "height" "0"

2432+ , Property "width" "0"

2817− , Property "height" ("calc(100% + " ++ String.fromInt y ++ "px)")

2433+ , Property "margin-bottom" (String.fromInt (-1 * (y // 2)) ++ "px")

2434+ ]

2818− ]

2435+ ]

2819

2436

2820− -- , renderStyle options

2437+ PaddingStyle cls top right bottom left ->

2821− -- maybePseudo

2438+ let

2822− -- (class ++ paragraph ++ " > " ++ any)

2823− -- [ Property "margin-right" xPx

2824− -- , Property "margin-bottom" yPx

2825− -- ]

2826− , renderStyle options

2827− maybePseudo

2828− (class ++ paragraph ++ " > " ++ left)

2439+ class =

2829− [ Property "margin-right" xPx

2440+ "."

2830− ]

2441+ ++ cls

2831− , renderStyle options

2442+ in

2832− maybePseudo

2833− (class ++ paragraph ++ " > " ++ right)

2834− [ Property "margin-left" xPx

2835− ]

2836− , renderStyle options

2443+ renderStyle

2837− maybePseudo

2444+ maybePseudo

2838− (class ++ paragraph ++ "::after")

2445+ class

2839− [ Property "content" "''"

2446+ [ Property "padding"

2840− , Property "display" "block"

2841− , Property "height" "0"

2842− , Property "width" "0"

2843− , Property "margin-top" (String.fromInt (-1 * (y // 2)) ++ "px")

2447+ (String.fromInt top

2844− ]

2448+ ++ "px "

2845− , renderStyle options

2449+ ++ String.fromInt right

2846− maybePseudo

2450+ ++ "px "

2847− (class ++ paragraph ++ "::before")

2451+ ++ String.fromInt bottom

2848− [ Property "content" "''"

2452+ ++ "px "

2849− , Property "display" "block"

2850− , Property "height" "0"

2851− , Property "width" "0"

2852− , Property "margin-bottom" (String.fromInt (-1 * (y // 2)) ++ "px")

2453+ ++ String.fromInt left

2853− ]

2454+ ++ "px"

2455+ )

2854− ]

2456+ ]

2855

2457

2856− PaddingStyle cls top right bottom left ->

2458+ BorderWidth cls top right bottom left ->

2857− let

2459+ let

2858− class =

2460+ class =

2859− "."

2461+ "."

2860− ++ cls

2462+ ++ cls

2861− in

2463+ in

2862− renderStyle options

2464+ renderStyle

2863− maybePseudo

2465+ maybePseudo

2864− class

2466+ class

2865− [ Property "padding"

2467+ [ Property "border-width"

2866− (String.fromFloat top

2468+ (String.fromInt top

2867− ++ "px "

2469+ ++ "px "

2868− ++ String.fromFloat right

2470+ ++ String.fromInt right

2869− ++ "px "

2471+ ++ "px "

2870− ++ String.fromFloat bottom

2472+ ++ String.fromInt bottom

2871− ++ "px "

2473+ ++ "px "

2872− ++ String.fromFloat left

2474+ ++ String.fromInt left

2873− ++ "px"

2475+ ++ "px"

2874− )

2476+ )

2875− ]

2477+ ]

2876

2478

2877− BorderWidth cls top right bottom left ->

2479+ GridTemplateStyle template ->

2878− let

2480+ let

2879− class =

2481+ class =

2880− "."

2482+ ".grid-rows-"

2881− ++ cls

2483+ ++ String.join "-" (List.map lengthClassName template.rows)

2484+ ++ "-cols-"

2485+ ++ String.join "-" (List.map lengthClassName template.columns)

2486+ ++ "-space-x-"

2487+ ++ lengthClassName (Tuple.first template.spacing)

2488+ ++ "-space-y-"

2489+ ++ lengthClassName (Tuple.second template.spacing)

2490+

2491+ ySpacing =

2492+ toGridLength (Tuple.second template.spacing)

2493+

2494+ xSpacing =

2495+ toGridLength (Tuple.first template.spacing)

2496+

2497+ toGridLength x =

2498+ toGridLengthHelper Nothing Nothing x

2499+

2500+ toGridLengthHelper minimum maximum x =

2501+ case x of

2502+ Px px ->

2503+ String.fromInt px ++ "px"

2504+

2505+ Content ->

2506+ case ( minimum, maximum ) of

2507+ ( Nothing, Nothing ) ->

2508+ "max-content"

2509+

2510+ ( Just minSize, Nothing ) ->

2511+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ "max-content)"

2512+

2513+ ( Nothing, Just maxSize ) ->

2514+ "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"

2515+

2516+ ( Just minSize, Just maxSize ) ->

2517+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"

2518+

2519+ Fill i ->

2520+ case ( minimum, maximum ) of

2521+ ( Nothing, Nothing ) ->

2522+ String.fromInt i ++ "fr"

2523+

2524+ ( Just minSize, Nothing ) ->

2525+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt i ++ "fr" ++ "fr)"

2526+

2527+ ( Nothing, Just maxSize ) ->

2528+ "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"

2529+

2530+ ( Just minSize, Just maxSize ) ->

2531+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"

2532+

2533+ Min m len ->

2534+ toGridLengthHelper (Just m) maximum len

2535+

2536+ Max m len ->

2537+ toGridLengthHelper minimum (Just m) len

2538+

2539+ msColumns =

2540+ template.columns

2541+ |> List.map toGridLength

2542+ |> String.join ySpacing

2543+ |> (\x -> "-ms-grid-columns: " ++ x ++ ";")

2544+

2545+ msRows =

2546+ template.columns

2547+ |> List.map toGridLength

2548+ |> String.join ySpacing

2549+ |> (\x -> "-ms-grid-rows: " ++ x ++ ";")

2550+

2551+ base =

2552+ class ++ "{" ++ msColumns ++ msRows ++ "}"

2553+

2554+ columns =

2555+ template.columns

2556+ |> List.map toGridLength

2557+ |> String.join " "

2558+ |> (\x -> "grid-template-columns: " ++ x ++ ";")

2559+

2560+ rows =

2561+ template.rows

2562+ |> List.map toGridLength

2563+ |> String.join " "

2564+ |> (\x -> "grid-template-rows: " ++ x ++ ";")

2565+

2566+ gapX =

2567+ "grid-column-gap:" ++ toGridLength (Tuple.first template.spacing) ++ ";"

2568+

2569+ gapY =

2570+ "grid-row-gap:" ++ toGridLength (Tuple.second template.spacing) ++ ";"

2571+

2572+ modernGrid =

2573+ class ++ "{" ++ columns ++ rows ++ gapX ++ gapY ++ "}"

2574+

2575+ supports =

2576+ "@supports (display:grid) {" ++ modernGrid ++ "}"

2882− in

2577+ in

2883− renderStyle options

2578+ base ++ supports

2884− maybePseudo

2885− class

2886− [ Property "border-width"

2887− (String.fromInt top

2888− ++ "px "

2889− ++ String.fromInt right

2890− ++ "px "

2891− ++ String.fromInt bottom

2892− ++ "px "

2893− ++ String.fromInt left

2894− ++ "px"

2895− )

2896− ]

2897

2579

2898− GridTemplateStyle template ->

2580+ GridPosition position ->

2899− let

2581+ let

2900− class =

2582+ class =

2901− ".grid-rows-"

2583+ ".grid-pos-"

2902− ++ String.join "-" (List.map lengthClassName template.rows)

2584+ ++ String.fromInt position.row

2585+ ++ "-"

2586+ ++ String.fromInt position.col

2903− ++ "-cols-"

2587+ ++ "-"

2904− ++ String.join "-" (List.map lengthClassName template.columns)

2588+ ++ String.fromInt position.width

2905− ++ "-space-x-"

2589+ ++ "-"

2906− ++ lengthClassName (Tuple.first template.spacing)

2590+ ++ String.fromInt position.height

2907− ++ "-space-y-"

2591+

2908− ++ lengthClassName (Tuple.second template.spacing)

2592+ msPosition =

2909−

2593+ String.join " "

2910− ySpacing =

2594+ [ "-ms-grid-row: "

2911− toGridLength (Tuple.second template.spacing)

2595+ ++ String.fromInt position.row

2912−

2596+ ++ ";"

2913− xSpacing =

2597+ , "-ms-grid-row-span: "

2914− toGridLength (Tuple.first template.spacing)

2598+ ++ String.fromInt position.height

2915−

2599+ ++ ";"

2916− toGridLength x =

2600+ , "-ms-grid-column: "

2917− toGridLengthHelper Nothing Nothing x

2601+ ++ String.fromInt position.col

2918−

2602+ ++ ";"

2919− toGridLengthHelper minimum maximum x =

2603+ , "-ms-grid-column-span: "

2920− case x of

2604+ ++ String.fromInt position.width

2921− Px px ->

2605+ ++ ";"

2606+ ]

2607+

2608+ base =

2609+ class ++ "{" ++ msPosition ++ "}"

2610+

2611+ modernPosition =

2612+ String.join " "

2613+ [ "grid-row: "

2922− String.fromInt px ++ "px"

2614+ ++ String.fromInt position.row

2923−

2615+ ++ " / "

2924− Content ->

2616+ ++ String.fromInt (position.row + position.height)

2925− case ( minimum, maximum ) of

2617+ ++ ";"

2926− ( Nothing, Nothing ) ->

2618+ , "grid-column: "

2927− "max-content"

2928−

2929− ( Just minSize, Nothing ) ->

2930− "minmax(" ++ String.fromInt minSize ++ "px, " ++ "max-content)"

2619+ ++ String.fromInt position.col

2931−

2620+ ++ " / "

2932− ( Nothing, Just maxSize ) ->

2621+ ++ String.fromInt (position.col + position.width)

2933− "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"

2622+ ++ ";"

2934−

2623+ ]

2935− ( Just minSize, Just maxSize ) ->

2624+

2936− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"

2625+ modernGrid =

2937−

2626+ class ++ "{" ++ modernPosition ++ "}"

2938− Fill i ->

2627+

2939− case ( minimum, maximum ) of

2628+ supports =

2940− ( Nothing, Nothing ) ->

2629+ "@supports (display:grid) {" ++ modernGrid ++ "}"

2941− String.fromInt i ++ "fr"

2630+ in

2942−

2631+ base ++ supports

2943− ( Just minSize, Nothing ) ->

2944− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt i ++ "fr" ++ "fr)"

2945−

2946− ( Nothing, Just maxSize ) ->

2947− "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"

2948−

2949− ( Just minSize, Just maxSize ) ->

2950− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"

2951−

2952− Min m len ->

2953− toGridLengthHelper (Just m) maximum len

2954−

2955− Max m len ->

2956− toGridLengthHelper minimum (Just m) len

2957−

2958− msColumns =

2959− template.columns

2960− |> List.map toGridLength

2961− |> String.join ySpacing

2962− |> (\x -> "-ms-grid-columns: " ++ x ++ ";")

2963−

2964− msRows =

2965− template.columns

2966− |> List.map toGridLength

2967− |> String.join ySpacing

2968− |> (\x -> "-ms-grid-rows: " ++ x ++ ";")

2969−

2970− base =

2971− class ++ "{" ++ msColumns ++ msRows ++ "}"

2972−

2973− columns =

2974− template.columns

2975− |> List.map toGridLength

2976− |> String.join " "

2977− |> (\x -> "grid-template-columns: " ++ x ++ ";")

2978

2632

2979− rows =

2633+ PseudoSelector class styles ->

2980− template.rows

2634+ let

2981− |> List.map toGridLength

2635+ renderPseudoRule style =

2636+ renderStyleRule style (Just class)

2637+ in

2638+ List.map renderPseudoRule styles

2982 |> String.join " "

2639 |> String.join " "

2983− |> (\x -> "grid-template-rows: " ++ x ++ ";")

2984−

2985− gapX =

2986− "grid-column-gap:" ++ toGridLength (Tuple.first template.spacing) ++ ";"

2987−

2988− gapY =

2989− "grid-row-gap:" ++ toGridLength (Tuple.second template.spacing) ++ ";"

2990

2640

2991− modernGrid =

2641+ Transform transform ->

2992− class ++ "{" ++ columns ++ rows ++ gapX ++ gapY ++ "}"

2993−

2994− supports =

2995− "@supports (display:grid) {" ++ modernGrid ++ "}"

2996− in

2997− [ base

2998− , supports

2999− ]

3000−

3001− GridPosition position ->

3002− let

2642+ let

3003− class =

2643+ val =

3004− ".grid-pos-"

2644+ transformValue transform

3005− ++ String.fromInt position.row

3006− ++ "-"

3007− ++ String.fromInt position.col

3008− ++ "-"

3009− ++ String.fromInt position.width

3010− ++ "-"

3011− ++ String.fromInt position.height

3012−

3013− msPosition =

3014− String.join " "

3015− [ "-ms-grid-row: "

3016− ++ String.fromInt position.row

3017− ++ ";"

3018− , "-ms-grid-row-span: "

3019− ++ String.fromInt position.height

3020− ++ ";"

3021− , "-ms-grid-column: "

3022− ++ String.fromInt position.col

3023− ++ ";"

3024− , "-ms-grid-column-span: "

3025− ++ String.fromInt position.width

3026− ++ ";"

3027− ]

3028−

3029− base =

3030− class ++ "{" ++ msPosition ++ "}"

3031−

3032− modernPosition =

3033− String.join " "

3034− [ "grid-row: "

3035− ++ String.fromInt position.row

3036− ++ " / "

3037− ++ String.fromInt (position.row + position.height)

3038− ++ ";"

3039− , "grid-column: "

3040− ++ String.fromInt position.col

3041− ++ " / "

3042− ++ String.fromInt (position.col + position.width)

3043− ++ ";"

3044− ]

3045−

3046− modernGrid =

3047− class ++ "{" ++ modernPosition ++ "}"

3048−

3049− supports =

3050− "@supports (display:grid) {" ++ modernGrid ++ "}"

3051− in

3052− [ base

3053− , supports

3054− ]

3055

2645

3056− PseudoSelector class styles ->

2646+ class =

3057− let

2647+ transformClass transform

3058− renderPseudoRule style =

3059− renderStyleRule options style (Just class)

3060− in

2648+ in

3061− List.concatMap renderPseudoRule styles

2649+ case ( class, val ) of

2650+ ( Just cls, Just v ) ->

2651+ renderStyle

2652+ maybePseudo

2653+ ("." ++ cls)

2654+ [ Property "transform"

2655+ v

2656+ ]

3062

2657

3063− Transform transform ->

2658+ _ ->

3064− let

2659+ ""

3065− val =

3066− transformValue transform

3067

2660

3068− class =

2661+ combine style rendered =

3069− transformClass transform

2662+ { rendered

3070− in

2663+ | rules = rendered.rules ++ renderStyleRule style Nothing

3071− case ( class, val ) of

2664+ , topLevel =

3072− ( Just cls, Just v ) ->

2665+ case renderTopLevels style of

3073− renderStyle options

2666+ Nothing ->

3074− maybePseudo

2667+ rendered.topLevel

3075− ("." ++ cls)

3076− [ Property "transform"

3077− v

3078− ]

3079

2668

3080− _ ->

2669+ Just topLevel ->

3081− []

2670+ rendered.topLevel ++ topLevel

2671+ }

2672+ in

2673+ case List.foldl combine { rules = "", topLevel = "" } stylesheet of

2674+ { topLevel, rules } ->

2675+ topLevel ++ rules

3082

2676

3083

2677

3084lengthClassName : Length -> String

2678lengthClassName : Length -> String

@@ -3118,12 +2712,12 @@ formatTextShadow shadow =

3118 ]

2712 ]

3119

2713

3120

2714

3121−textShadowClass shadow =

2715+textShadowName shadow =

3122 String.concat

2716 String.concat

3123 [ "txt"

2717 [ "txt"

3124− , floatClass (Tuple.first shadow.offset) ++ "px"

2718+ , String.fromFloat (Tuple.first shadow.offset) ++ "px"

3125− , floatClass (Tuple.second shadow.offset) ++ "px"

2719+ , String.fromFloat (Tuple.second shadow.offset) ++ "px"

3126− , floatClass shadow.blur ++ "px"

2720+ , String.fromFloat shadow.blur ++ "px"

3127 , formatColorClass shadow.color

2721 , formatColorClass shadow.color

3128 ]

2722 ]

3129

2723

@@ -3144,17 +2738,17 @@ formatBoxShadow shadow =

3144 ]

2738 ]

3145

2739

3146

2740

3147−boxShadowClass shadow =

2741+boxShadowName shadow =

3148 String.concat <|

2742 String.concat <|

3149 [ if shadow.inset then

2743 [ if shadow.inset then

3150 "box-inset"

2744 "box-inset"

3151

2745

3152 else

2746 else

3153 "box-"

2747 "box-"

3154− , floatClass (Tuple.first shadow.offset) ++ "px"

2748+ , String.fromFloat (Tuple.first shadow.offset) ++ "px"

3155− , floatClass (Tuple.second shadow.offset) ++ "px"

2749+ , String.fromFloat (Tuple.second shadow.offset) ++ "px"

3156− , floatClass shadow.blur ++ "px"

2750+ , String.fromFloat shadow.blur ++ "px"

3157− , floatClass shadow.size ++ "px"

2751+ , String.fromFloat shadow.size ++ "px"

3158 , formatColorClass shadow.color

2752 , formatColorClass shadow.color

3159 ]

2753 ]

3160

2754

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

3199 ++ String.fromInt left

2793 ++ String.fromInt left

3200

2794

3201

2795

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

2796getStyleName : Style -> String

3214getStyleName style =

2797getStyleName style =

3215 case style of

2798 case style of

@@ -3475,76 +3058,3 @@ onlyStyles attr =

3475

3058

3476 _ ->

3059 _ ->

3477 Nothing

3060 Nothing

3478−

3479−

3480−

3481−{- Font Adjustments -}

3482−

3483−

3484−convertAdjustment adjustment =

3485− let

3486− lineHeight =

3487− 1.5

3488−

3489− base =

3490− lineHeight

3491−

3492− normalDescender =

3493− (lineHeight - 1)

3494− / 2

3495−

3496− oldMiddle =

3497− lineHeight / 2

3498−

3499− newCapitalMiddle =

3500− ((ascender - newBaseline) / 2) + newBaseline

3501−

3502− newFullMiddle =

3503− ((ascender - descender) / 2) + descender

3504−

3505− lines =

3506− [ adjustment.capital

3507− , adjustment.baseline

3508− , adjustment.descender

3509− , adjustment.lowercase

3510− ]

3511−

3512− ascender =

3513− Maybe.withDefault adjustment.capital (List.maximum lines)

3514−

3515− descender =

3516− Maybe.withDefault adjustment.descender (List.minimum lines)

3517−

3518− newBaseline =

3519− lines

3520− |> List.filter (\x -> x /= descender)

3521− |> List.minimum

3522− |> Maybe.withDefault adjustment.baseline

3523−

3524− capitalVertical =

3525− 1 - ascender

3526−

3527− capitalSize =

3528− 1 / (ascender - newBaseline)

3529−

3530− fullSize =

3531− 1 / (ascender - descender)

3532−

3533− fullVertical =

3534− 1 - ascender

3535−

3536− -- (oldMiddle - newFullMiddle) * 2

3537− in

3538− { full =

3539− adjust fullSize (ascender - descender) fullVertical

3540− , capital =

3541− adjust capitalSize (ascender - newBaseline) capitalVertical

3542− }

3543−

3544−

3545−adjust size height vertical =

3546− { vertical = vertical

3547− , height =

3548− height / size

3549− , size = size

3550− }

src/Internal/Style.elm+17−167

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

@@ -149,7 +148,6 @@ classes =

149 , widthFillPortion = "wfp"

148 , widthFillPortion = "wfp"

150 , heightFill = "hf"

149 , heightFill = "hf"

151 , heightContent = "hc"

150 , heightContent = "hc"

152− , heightExact = "he"

153 , heightFillPortion = "hfp"

151 , heightFillPortion = "hfp"

154 , seButton = "sbt"

152 , seButton = "sbt"

155

153

@@ -206,7 +204,6 @@ classes =

206

204

207 -- , hoverOpaque = "hover-opaque"

205 -- , hoverOpaque = "hover-opaque"

208 , focus = "fcs"

206 , focus = "fcs"

209− , focusedWithin = "focus-within"

210

207

211 -- , focusOpaque = "focus-opaque"

208 -- , focusOpaque = "focus-opaque"

212 , active = "atv"

209 , active = "atv"

@@ -227,8 +224,6 @@ classes =

227 , borderSolid = "bs"

224 , borderSolid = "bs"

228

225

229 -- text weight

226 -- text weight

230− , sizeByCapital = "cap"

231− , fullSize = "fs"

232 , textThin = "w1"

227 , textThin = "w1"

233 , textExtraLight = "w2"

228 , textExtraLight = "w2"

234 , textLight = "w3"

229 , textLight = "w3"

@@ -254,13 +249,6 @@ classes =

254 -- inputText

249 -- inputText

255 , inputText = "it"

250 , inputText = "it"

256 , inputMultiline = "iml"

251 , inputMultiline = "iml"

257− , inputMultilineParent = "imlp"

258− , inputMultilineFiller = "imlf"

259− , inputMultilineWrapper = "implw"

260− , inputLabel = "lbl"

261−

262− -- link

263− , link = "lnk"

264 }

252 }

265

253

266

254

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

562 :: rendered.others

550 :: rendered.others

563 }

551 }

564

552

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

553 Descriptor descriptor descriptorRules ->

575 { rendered

554 { rendered

576 | others =

555 | others =

@@ -699,30 +678,18 @@ overrides =

699 ++ dot classes.any

678 ++ dot classes.any

700 ++ dot classes.container

679 ++ dot classes.container

701 ++ " { flex-basis: auto !important; }}"

680 ++ " { flex-basis: auto !important; }}"

702− ++ inputTextReset

681+ ++ sliderOverrides

703− ++ sliderReset

704− ++ trackReset

705− ++ thumbReset

706 ++ explainer

682 ++ explainer

707

683

708

684

709−inputTextReset =

685+sliderOverrides =

710 """

686 """

711−input[type="search"],

712−input[type="search"]::-webkit-search-decoration,

713−input[type="search"]::-webkit-search-cancel-button,

714−input[type="search"]::-webkit-search-results-button,

715−input[type="search"]::-webkit-search-results-decoration {

716− -webkit-appearance:none;

717−}

718−"""

719−

720

687

721−sliderReset =

688+/* General Input Reset */

722− """

723input[type=range] {

689input[type=range] {

724− -webkit-appearance: none;

690+ -webkit-appearance: none; /* Hides the slider so that custom slider can be made */

691+ /* width: 100%; Specific width is required for Firefox. */

725− background: transparent;

692+ background: transparent; /* Otherwise white in Chrome */

726 position:absolute;

693 position:absolute;

727 left:0;

694 left:0;

728 top:0;

695 top:0;

@@ -732,11 +699,8 @@ input[type=range] {

732 height: 100%;

699 height: 100%;

733 opacity: 0;

700 opacity: 0;

734}

701}

735−"""

736−

737

702

738−trackReset =

703+/* Hide all syling for track */

739− """

740input[type=range]::-moz-range-track {

704input[type=range]::-moz-range-track {

741 background: transparent;

705 background: transparent;

742 cursor: pointer;

706 cursor: pointer;

@@ -749,11 +713,8 @@ input[type=range]::-webkit-slider-runnable-track {

749 background: transparent;

713 background: transparent;

750 cursor: pointer;

714 cursor: pointer;

751}

715}

752−"""

753

716

754−

717+/* Thumbs */

755−thumbReset =

756− """

757input[type=range]::-webkit-slider-thumb {

718input[type=range]::-webkit-slider-thumb {

758 -webkit-appearance: none;

719 -webkit-appearance: none;

759 opacity: 0.5;

720 opacity: 0.5;

@@ -822,38 +783,9 @@ commonValues =

822 Class (".p-" ++ String.fromInt i) [ Prop "padding" (String.fromInt i ++ "px") ]

783 Class (".p-" ++ String.fromInt i) [ Prop "padding" (String.fromInt i ++ "px") ]

823 )

784 )

824 (List.range 0 24)

785 (List.range 0 24)

825−

826− -- Common Font Variants

827− , [ Class ".v-smcp"

828− [ Prop "font-variant" "small-caps"

829− ]

830− , Class ".v-smcp-off"

831− [ Prop "font-variant" "normal"

832− ]

833− ]

834−

835− -- , fontVariant "smcp"

836− , fontVariant "zero"

837− , fontVariant "onum"

838− , fontVariant "liga"

839− , fontVariant "dlig"

840− , fontVariant "ordn"

841− , fontVariant "tnum"

842− , fontVariant "afrc"

843− , fontVariant "frac"

844 ]

786 ]

845

787

846

788

847−fontVariant var =

848− [ Class (".v-" ++ var)

849− [ Prop "font-feature-settings" ("\"" ++ var ++ "\"")

850− ]

851− , Class (".v-" ++ var ++ "-off")

852− [ Prop "font-feature-settings" ("\"" ++ var ++ "\" 0")

853− ]

854− ]

855−

856−

857rules : String

789rules : String

858rules =

790rules =

859 overrides

791 overrides

@@ -893,9 +825,6 @@ elDescription =

893 -- Prop "align-self" "stretch !important"

825 -- Prop "align-self" "stretch !important"

894 Prop "width" "100%"

826 Prop "width" "100%"

895 ]

827 ]

896− , Child (dot classes.widthFillPortion)

897− [ Prop "width" "100%"

898− ]

899 , Child (dot classes.widthContent)

828 , Child (dot classes.widthContent)

900 [ Prop "align-self" "flex-start"

829 [ Prop "align-self" "flex-start"

901 ]

830 ]

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

961 ]

890 ]

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

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

963 [ Prop "display" "block"

892 [ 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 ]

893 ]

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

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

978 [ Prop "outline" "none"

895 [ Prop "outline" "none"

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

995 , Child (dot classes.inFront)

912 , Child (dot classes.inFront)

996 [ Descriptor (dot classes.nearby)

913 [ Descriptor (dot classes.nearby)

997 [ Prop "position" "fixed"

914 [ Prop "position" "fixed"

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

999 ]

915 ]

1000 ]

916 ]

1001 ]

917 ]

@@ -1114,7 +1030,6 @@ baseSheet =

1114 , Prop "flex-direction" "row"

1030 , Prop "flex-direction" "row"

1115 , Prop "flex-basis" "auto"

1031 , Prop "flex-basis" "auto"

1116 , Prop "resize" "none"

1032 , Prop "resize" "none"

1117− , Prop "font-feature-settings" "inherit"

1118

1033

1119 -- , Prop "flex-basis" "0%"

1034 -- , Prop "flex-basis" "0%"

1120 , Prop "box-sizing" "border-box"

1035 , Prop "box-sizing" "border-box"

@@ -1243,8 +1158,6 @@ baseSheet =

1243 -- chrome and safari have a minimum recognized line height for text input of 1.05

1158 -- chrome and safari have a minimum recognized line height for text input of 1.05

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

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

1245 [ Prop "line-height" "1.05"

1160 [ Prop "line-height" "1.05"

1246− , Prop "background" "transparent"

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

1248 ]

1161 ]

1249 , Descriptor (dot classes.single)

1162 , Descriptor (dot classes.single)

1250 elDescription

1163 elDescription

@@ -1256,16 +1169,15 @@ baseSheet =

1256 , Descriptor (dot classes.widthExact)

1169 , Descriptor (dot classes.widthExact)

1257 [ Prop "flex-basis" "auto"

1170 [ Prop "flex-basis" "auto"

1258 ]

1171 ]

1259− , Descriptor (dot classes.link)

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

1261− ]

1262 ]

1172 ]

1263 , Child (dot classes.heightFill)

1173 , Child (dot classes.heightFill)

1174+ [ --Prop "height" "100%"

1264− [ -- alignTop, centerY, and alignBottom need to be disabled

1175+ -- alignTop, centerY, and alignBottom need to be disabled

1265 Prop "align-self" "stretch !important"

1176 Prop "align-self" "stretch !important"

1266 ]

1177 ]

1267 , Child (dot classes.heightFillPortion)

1178 , Child (dot classes.heightFillPortion)

1179+ [ --Prop "height" "100%"

1268− [ -- alignTop, centerY, and alignBottom need to be disabled

1180+ -- alignTop, centerY, and alignBottom need to be disabled

1269 Prop "align-self" "stretch !important"

1181 Prop "align-self" "stretch !important"

1270 ]

1182 ]

1271

1183

@@ -1371,29 +1283,10 @@ baseSheet =

1371 , Descriptor (dot classes.spaceEvenly)

1283 , Descriptor (dot classes.spaceEvenly)

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

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

1373 ]

1285 ]

1374− , Descriptor (dot classes.inputLabel)

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

1376− ]

1377 ]

1286 ]

1378 , Descriptor (dot classes.column)

1287 , Descriptor (dot classes.column)

1379 [ Prop "display" "flex"

1288 [ Prop "display" "flex"

1380 , Prop "flex-direction" "column"

1289 , Prop "flex-direction" "column"

1381− , Child (dot classes.any)

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

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

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

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

1386− -- instead of the expected content size.

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

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

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

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

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

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

1393− , Descriptor (dot classes.heightExact)

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

1395− ]

1396− ]

1397 , Child (dot classes.heightFill)

1290 , Child (dot classes.heightFill)

1398 [ Prop "flex-grow" "100000"

1291 [ Prop "flex-grow" "100000"

1399 ]

1292 ]

@@ -1408,7 +1301,7 @@ baseSheet =

1408 Prop "width" "100%"

1301 Prop "width" "100%"

1409 ]

1302 ]

1410

1303

1411− -- TODO:: This might be necessary, maybe it should move to widthFill?

1304+ -- TODO:: THIs might be necessary, maybe it should move to widthFill?

1412 -- , Child (dot classes.widthFill)

1305 -- , Child (dot classes.widthFill)

1413 -- [ Prop "align-self" "stretch"

1306 -- [ Prop "align-self" "stretch"

1414 -- , Descriptor (dot classes.alignedHorizontally)

1307 -- , Descriptor (dot classes.alignedHorizontally)

@@ -1596,67 +1489,24 @@ baseSheet =

1596 )

1489 )

1597 ]

1490 ]

1598 , Descriptor (dot classes.inputMultiline)

1491 , Descriptor (dot classes.inputMultiline)

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

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

1600− , Prop "height" "100%"

1601− , Prop "width" "100%"

1602− , Prop "background-color" "transparent"

1603− ]

1604− , Descriptor (dot classes.inputMultilineWrapper)

1605− -- Get this.

1606− -- This allows multiline input to anchor scrolling to the bottom of the node

1607− -- when in a scrolling viewport, and the user is adding content.

1608− -- however, it only works in chrome. In firefox, it prevents scrolling.

1609− --

1610− -- But how crazy is this solution?

1611− -- [ Prop "display" "flex"

1612− -- , Prop "flex-direction" "column-reverse"

1613− -- ]

1614− [ -- to increase specificity to beat another rule

1615− Descriptor (dot classes.single)

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

1617− ]

1618− , Descriptor (dot classes.inputMultilineParent)

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

1620− , Prop "cursor" "text"

1621− , Child (dot classes.inputMultilineFiller)

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

1623− , Prop "color" "transparent"

1624− ]

1625 ]

1493 ]

1626 , Descriptor (dot classes.paragraph)

1494 , Descriptor (dot classes.paragraph)

1627 [ Prop "display" "block"

1495 [ Prop "display" "block"

1628 , Prop "white-space" "normal"

1496 , Prop "white-space" "normal"

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

1630 , Descriptor (dot classes.hasBehind)

1497 , Descriptor (dot classes.hasBehind)

1631 [ Prop "z-index" "0"

1498 [ Prop "z-index" "0"

1632 , Child (dot classes.behind)

1499 , Child (dot classes.behind)

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

1500 [ Prop "z-index" "-1"

1634 ]

1501 ]

1635 ]

1502 ]

1636− , AllChildren (dot classes.text)

1503+ , Child (dot classes.text)

1637 [ Prop "display" "inline"

1504 [ Prop "display" "inline"

1638 , Prop "white-space" "normal"

1505 , Prop "white-space" "normal"

1639 ]

1506 ]

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)

1507+ , Child (dot classes.single)

1650 [ Prop "display" "inline"

1508 [ Prop "display" "inline"

1651 , Prop "white-space" "normal"

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

1510 , Descriptor (dot classes.inFront)

1661 [ Prop "display" "flex"

1511 [ Prop "display" "flex"

1662 ]

1512 ]

@@ -1681,7 +1531,7 @@ baseSheet =

1681 ]

1531 ]

1682 ]

1532 ]

1683 , Child (dot classes.row)

1533 , Child (dot classes.row)

1684− [ Prop "display" "inline"

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

1685 ]

1535 ]

1686 , Child (dot classes.column)

1536 , Child (dot classes.column)

1687 [ Prop "display" "inline-flex"

1537 [ 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/doc-preview.shdeleted−1

@@ -1 +0,0 @@

1−elm make --docs docs.json

tests-rendering/automation/publish-file.shdeleted−31

@@ -1,31 +0,0 @@

1−# These env variables need to be set before running this script

2−# FILE="test.html"

3−# BUILD="1.1.0"

4−# NAME="development"

5−DIRECTORY='elm-ui-testing'

6−

7−# Check to see if the repo is already cloned locally

8−cd tmp

9−if [ ! -d "$DIRECTORY" ]; then

10− git clone git@github.com:mdgriffith/elm-ui-testing.git

11−else

12− git pull

13−fi

14−mkdir -p "$DIRECTORY/public/tests/$BUILD/$NAME/"

15−cp "$FILE" "$DIRECTORY/public/tests/$BUILD/$NAME/index.html"

16−if [ -z "$(git status --porcelain)" ]; then

17− # Working directory clean

18− echo "No changes need for $BUILD -> $NAME"

19−else

20− cd "$DIRECTORY"

21− # Uncommitted changes

22− git config --global user.email "$GIT_EMAIL"

23− git config --global user.name "$GIT_NAME"

24− git add .

25− git commit -m "Elm UI test for $NAME on $BUILD"

26− git push origin master

27−

28− echo "Files published for for $BUILD -> $NAME"

29−fi

30−

31−

tests-rendering/automation/run.jsdeleted−304

@@ -1,304 +0,0 @@

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

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

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

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

5−const program = require("commander");

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

7−const chalk = require("chalk");

8−const childProcess = require("child_process");

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

10−

11−program

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

13− .option("--chrome", "run chrome tests (default)")

14− .option("--firefox", "run firefox tests")

15− .option("--ie", "run ie tests")

16− .option("--edge", "run edge tests")

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

22−

23−// 'Windows 10'

24−

25−const windows = {

26− chrome: {

27− platform: "Windows 10",

28− browser: "chrome",

29− browserVersion: "latest",

30− },

31− firefox: {

32− platform: "Windows 10",

33− browser: "firefox",

34− browserVersion: "latest",

35− },

36− edge: {

37− platform: "Windows 10",

38− browser: "MicrosoftEdge",

39− browserVersion: "latest",

40− },

41− ie: {

42− platform: "Windows 10",

43− browser: "internet explorer",

44− browserVersion: "latest",

45− },

46−};

47−

48−const all_windows = [

49− windows.chrome,

50− windows.firefox,

51− windows.edge,

52− // i.e. takes forever and seems to make selenium timeout :/

53− // not really sure how to extend the timeout.

54− // , windows.ie

55−];

56−

57−// "macOS 10.14"

58−const osx = {

59− chrome: {

60− platform: "macOS 10.14",

61− browser: "chrome",

62− browserVersion: "latest",

63− },

64− firefox: {

65− platform: "macOS 10.14",

66− browser: "firefox",

67− browserVersion: "latest",

68− },

69− safari: {

70− platform: "macOS 10.14",

71− browser: "safari",

72− browserVersion: "latest",

73− },

74−};

75−

76−const all_osx = [osx.safari];

77−

78−const all_browsers = all_windows.concat(all_osx);

79−

80−function prepare_all_envs(config) {

81− var envs = [];

82−

83− for (i = 0; i < all_browsers.length; i++) {

84− envs.push({

85− browser: all_browsers[i].browser,

86− browserVersion: all_browsers[i].browserVersion,

87− platform: all_browsers[i].platform,

88− build: config.build,

89− name: config.name,

90− });

91− }

92−

93− // for (i = 0; i < osx.length; i++) {

94− // envs.push({

95− // browser: osx[i].browser,

96− // browserVersion: osx[i].browserVersion,

97− // platform: "macOS 10.14",

98− // build: config.build,

99− // name: config.name,

100− // });

101− // }

102−

103− return envs;

104−}

105−

106−function prepare_sauce_driver(env) {

107− const username = process.env.SAUCE_USERNAME;

108− const accessKey = process.env.SAUCE_ACCESS_KEY;

109−

110− driver = new Builder()

111− .withCapabilities({

112− browserName: env.browser,

113− platformName: env.platform,

114− browserVersion: env.browserVersion,

115− /* Pass Sauce User Name and Access Key */

116− "sauce:options": {

117− username: username,

118− accessKey: accessKey,

119− build: env.build,

120− name: env.name,

121− },

122− })

123− .usingServer("https://@ondemand.saucelabs.com:443/wd/hub")

124− .build();

125−

126− return driver;

127−}

128−

129−async function prepare_local_driver(env) {

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

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

132−

133− if (program.headless) {

134− firefoxOptions.headless();

135− chromeOptions.headless();

136− }

137−

138− let driver = await new Builder()

139− .forBrowser(env.browser)

140− .setChromeOptions(chromeOptions)

141− .setFirefoxOptions(firefoxOptions)

142− .build();

143−

144− return driver;

145−}

146−

147−async function run_test(driver, url) {

148− var results = null;

149− try {

150− await driver

151− .manage()

152− .window()

153− .setRect({ width: 1200, height: 800, x: 0, y: 0 });

154− await driver.get(url);

155− await driver.wait(until.titleIs("tests finished"), 240 * 1000);

156− results = await driver.executeScript("return test_results");

157− } finally {

158− await driver.quit();

159− }

160− return results;

161−}

162−

163−(async () => {

164− var dir = "tmp";

165− if (!fs.existsSync(dir)) {

166− fs.mkdirSync(dir);

167− }

168− console.log("Compiling tests");

169− await compile_and_embed({

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

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

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

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

174− });

175− console.log("Done compiling");

176−

177− if (program.sauce) {

178− const build = program.build;

179− const name = program.name;

180−

181− if (build == null || name == null) {

182− throw "A Build and a Name must be specified.";

183− }

184−

185− var results = [];

186−

187− // Publish to netlify

188− childProcess.execSync("sh tests-rendering/automation/publish-file.sh", {

189− env: {

190− FILE: "test.html",

191− BUILD: program.build,

192− NAME: program.name,

193− GIT_EMAIL: "automation@elm-ui.com",

194− GIT_NAME: "Elm UI Automation",

195− HOME: process.env.HOME,

196− SSH_AUTH_SOCK: process.env.SSH_AUTH_SOCK,

197− SSH_AGENT_PID: process.env.SSH_AGENT_PID,

198− },

199− });

200−

201− var url = `http://elm-ui-testing.netlify.com/tests/${program.build}/${program.name}/`;

202− console.log(`Running sauce labs test:`);

203− console.log(` ${url}`);

204−

205− const envs = prepare_all_envs({ build: build, name: name });

206− console.log(envs);

207− var test_runs = [];

208− var test_labels = [];

209− for (i = 0; i < envs.length; i++) {

210− var driver = prepare_sauce_driver(envs[i]);

211− test_runs.push(run_test(driver, url));

212− test_labels.push(envs[i]);

213− }

214− var results = await Promise.all(test_runs);

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

216− print_results(renderEnvName(test_labels[i]), results[i]);

217− }

218− } else {

219− // Run chrome if nothing else is selected

220− if (program.chrome || (!program.chrome && !program.firefox)) {

221− console.log("Running locally on Chrome...");

222− const driver = await prepare_local_driver(osx.chrome);

223− var results = await run_test(

224− driver,

225− "file://" + path.resolve("./tmp/test.html")

226− );

227− print_results("Local Chrome", results);

228− }

229− if (program.firefox) {

230− console.log("Running locally on Firefox...");

231− const driver = await prepare_local_driver(osx.firefox);

232− var results = await run_test(

233− driver,

234− "file://" + path.resolve("./tmp/test.html")

235− );

236− print_results("Local Firefox", results);

237− }

238− if (program.ie) {

239− console.log("Running locally on IE...");

240− const driver = await prepare_local_driver(windows.ie);

241− var results = await run_test(

242− driver,

243− "file://" + path.resolve("./tmp/test.html")

244− );

245− print_results("Local IE", results);

246− }

247− if (program.edge) {

248− console.log("Running locally on Edge...");

249− const driver = await prepare_local_driver(windows.edge);

250− var results = await run_test(

251− driver,

252− "file://" + path.resolve("./tmp/test.html")

253− );

254− print_results("Local Edge", results);

255− }

256− }

257−})();

258−

259−function renderEnvName(env) {

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

261−}

262−

263−function print_results(label, tests) {

264− var total_passed = 0;

265− var total_failed = 0;

266− var i;

267− if (program.verbose) {

268− console.log(label);

269− }

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

271− var passed = 0;

272− var failed = 0;

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

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

275− passed = passed + 1;

276− } else {

277− if (failed == 0) {

278− if (!program.verbose) {

279− console.log(label);

280− }

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

282− }

283− failed = failed + 1;

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

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

286− }

287− }

288− total_passed = total_passed + passed;

289− total_failed = total_failed + failed;

290−

291− if (failed != 0) {

292− console.log(chalk.green(` ${passed} tests passed`));

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

294− console.log();

295− } else if (program.verbose) {

296− console.log(tests[i].label + chalk.green(` ${passed} tests passed`));

297− }

298− }

299− if (total_failed == 0) {

300− console.log(

301− `${label} -> ` + chalk.green(`All ${total_passed} tests passed`)

302− );

303− }

304−}

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.htmldeleted−185

@@ -1,185 +0,0 @@

1−<!DOCTYPE html>

2−<html>

3− <head>

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

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

6− <script>

7− ~~_compiled_elm_code_~~

8− </script>

9− <script>

10− // Helpers

11− // Calculations for canvas

12− var PIXEL_RATIO = (function () {

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

14− dpr = window.devicePixelRatio || 1,

15− bsr =

16− ctx.webkitBackingStorePixelRatio ||

17− ctx.mozBackingStorePixelRatio ||

18− ctx.msBackingStorePixelRatio ||

19− ctx.oBackingStorePixelRatio ||

20− ctx.backingStorePixelRatio ||

21− 1;

22−

23− return dpr / bsr;

24− })();

25−

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

27− if (!ratio) {

28− ratio = PIXEL_RATIO;

29− }

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

31− can.width = w * ratio;

32− can.height = h * ratio;

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

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

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

36− return can;

37− }

38−

39− function isVisible(id, bbox) {

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

41− var result = 0;

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

43− result++;

44− }

45− if (

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

47− ) {

48− result++;

49− }

50− if (

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

52− ) {

53− result++;

54− }

55− if (

56− current ==

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

58− ) {

59− result++;

60− }

61−

62− if (result == 4) {

63− return true;

64− } else {

65− return false;

66− }

67− }

68−

69− function getStyle(element) {

70− var props = [];

71− var style = window.getComputedStyle(element);

72− for (var i = style.length; i--; ) {

73− var name = style.item(i);

74− var value = style.getPropertyValue(name);

75− props.push([name, value]);

76− }

77− return props;

78− }

79−

80− function getBoundingBox(element) {

81− var bbox = element.getBoundingClientRect();

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

83−

84− var padding = {

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

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

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

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

89− };

90−

91− return {

92− top: bbox.top,

93− bottom: bbox.bottom,

94− left: bbox.left,

95− right: bbox.right,

96− width: bbox.width,

97− height: bbox.height,

98− padding: padding,

99− };

100− }

101− function getTextMetrics(element) {

102− // Given our element, we want to return the text metrics on the text within.

103− // If it is an element we want to measure:

104− // we want to get the font family

105− // and the font size.

106− // We're going to presume that the font is loaded.

107− let childrenTextMetrics = [];

108− for (i = 0; i < element.children.length; i++) {

109− if (element.children[i].classList.contains("t")) {

110− let style = window.getComputedStyle(element, null);

111− let fontSize = style.getPropertyValue("font-size");

112− let fontFamily = style.getPropertyValue("font-family");

113− let ctx = canvas.getContext("2d");

114−

115− ctx.font = fontSize + " " + fontFamily; //"16px Roboto";

116− let text = ctx.measureText(element.children[i].innerText);

117−

118− childrenTextMetrics.push({

119− actualBoundingBoxAscent: text.actualBoundingBoxAscent,

120− actualBoundingBoxDescent: text.actualBoundingBoxDescent,

121− actualBoundingBoxLeft: text.actualBoundingBoxLeft,

122− actualBoundingBoxRight: text.actualBoundingBoxRight,

123− width: text.width,

124− });

125− }

126− }

127− return childrenTextMetrics;

128− }

129− </script>

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>

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/elm.jsondeleted−23

@@ -1,23 +0,0 @@

1−{

2− "type": "application",

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

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

5− "dependencies": {

6− "direct": {

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

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

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

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

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

12− "ohanhi/lorem": "1.0.2"

13− },

14− "indirect": {

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

16− "elm/url": "1.0.0"

17− }

18− },

19− "test-dependencies": {

20− "direct": {},

21− "indirect": {}

22− }

23−}

tests-rendering/cases/open/InFrontSize.elmdeleted−43

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

1−module InFrontSize exposing (view)

2−

3−{-|

4−

5−

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

7−

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

9−

10−Though they're expected to be the actual size of the parent.

11−

12−-}

13−

14−import Testable.Element exposing (..)

15−import Testable.Element.Background as Background

16−import Testable.Element.Border as Border

17−

18−

19−view =

20− layout []

21− (el

22− [ width (px 100)

23− , height (px 100)

24− , centerX

25− , centerY

26− , Background.color (rgb 0.1 0.1 0.1)

27− , Border.width 20

28− , Border.color (rgb 0.5 1 1)

29−

30− -- the following element should cover the parent's border

31− , inFront

32− (el

33− [ width fill

34− , height fill

35− , Background.color (rgb 0.1 0.5 0.9)

36−

37− -- , moveUp 40

38− ]

39− none

40− )

41− ]

42− none

43− )

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

@@ -1,39 +0,0 @@

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

2−

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

4−import Element.Background as Background

5−import Element.Border as Border

6−import Element.Font as Font

7−

8−

9−main =

10− Element.layout [ height fill ] <|

11− row [ width fill, height fill ]

12− [ sidebar

13− ]

14−

15−

16−sidebar =

17− column [ width fill, height fill, spacing 30 ]

18− [ myElement

19− , column [ width fill, height fill ]

20− [ column [ width (px 350), height fill, Element.scrollbarY, Element.clip, Border.width 1 ]

21− [ column [ width fill ] <|

22− el [] (text "this should scroll indepedendently")

23− :: List.map (always myElement) (List.range 0 100)

24− ]

25− , el [] (text "this should be at the bottom of the screen")

26− ]

27− ]

28−

29−

30−myElement : Element msg

31−myElement =

32− el

33− [ Background.color (rgb255 240 0 245)

34− , Font.color (rgb255 255 255 255)

35− , Border.rounded 3

36− , padding 30

37− , width fill

38− ]

39− (text "stylish!")

tests-rendering/cases/open/Scrollbars.elmdeleted−50

@@ -1,50 +0,0 @@

1−module Scrollbars exposing (main)

2−

3−import Element exposing (..)

4−import Element.Background as Background

5−import Html.Attributes

6−import Lorem as Lorem

7−

8−

9−main =

10− layout [ height fill ] <|

11− column

12− [ width fill

13− , Background.color (rgba 0.8 0 0 0.5)

14− , height fill

15− ]

16− [ row

17− [ padding 15

18− , width fill

19− , Background.color (rgba 0.8 0.2 0 0.5)

20− ]

21− [ text "this row should always be visible" ]

22− , row

23− [ width fill

24−

25− --, height (px 700)

26− -- Don't know why it doesn't work with `height fill`

27− , height fill

28− , clip

29−

30− --, htmlAttribute (Html.Attributes.style "flex-shrink" "1")

31− , Element.explain Debug.todo

32− ]

33− [ column

34− [ spacing 15

35− , scrollbarY

36− , height fill

37− , width fill

38− , padding 10

39− ]

40− (List.map (\p -> paragraph [] [ text p ]) <| Lorem.paragraphs 10)

41− , column

42− [ spacing 15

43− , scrollbarY

44− , width fill

45− , height fill

46− , padding 10

47− ]

48− (List.map (\p -> paragraph [] [ text p ]) <| Lorem.paragraphs 10)

49− ]

50− ]

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

@@ -1,35 +0,0 @@

1−module WeirdCentering exposing (view)

2−

3−import Testable.Element exposing (..)

4−import Testable.Element.Background as Background

5−

6−

7−view =

8− layout [] <|

9− column []

10− [ text "Example with centerX:"

11− , row

12− [ width fill ]

13− [ row

14− [ centerX

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

16− ]

17− [ paragraph

18− [ width shrink

19− ]

20− [ text "Hello world" ]

21− , paragraph

22− [ width shrink

23− ]

24− [ text "Hello world" ]

25− ]

26− ]

27− , text "Example without centerX:"

28− , row

29− [ width fill ]

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

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

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

33− ]

34− ]

35− ]

tests-rendering/cases/resolved/Adjusted.elmdeleted−70

@@ -1,70 +0,0 @@

1−module Main exposing (main)

2−

3−{-| -}

4−

5−import Element exposing (..)

6−import Element.Background as Background

7−import Element.Font as Font

8−import Html.Attributes

9−

10−

11−myFont =

12− Font.with

13− { url = Just "https://fonts.googleapis.com/css?family=Catamaran"

14− , name = "Catamaran"

15− , adjustment =

16− { capital = 1.15

17− , lowercase = 0.96

18− , baseline = 0.465

19− , descender = 0.245

20− }

21− }

22−

23−

24−main =

25− Element.layout

26− [ Background.color (rgba 0 0.8 0.9 1)

27− , Font.color (rgba 1 1 1 1)

28− , Font.size 32

29− , Font.family [ myFont ]

30−

31− -- , Font.family

32− -- [ Font.external

33− -- { url = "https://fonts.googleapis.com/css?family=EB+Garamond"

34− -- , name = "EB Garamond"

35− -- }

36− -- , Font.sansSerif

37− -- ]

38− ]

39− <|

40− column [ centerX, centerY, spacing 20, padding 100, htmlAttribute (Html.Attributes.style "display" "block") ]

41− [ el

42− []

43− (text "Hello stylish friend!")

44− , el

45− [ Font.family

46− [ Font.external

47− { url = "https://fonts.googleapis.com/css?family=EB+Garamond"

48− , name = "EB Garamond"

49− }

50− ]

51− ]

52− <|

53− el

54− [ Font.sizeByCapital

55− , Background.color (rgba 1 1 1 1)

56− , Font.color (rgba 0 0 0 1)

57− ]

58− (text "Hello stylish friend!")

59− , el

60− [ Font.sizeByCapital

61− , Background.color (rgba 1 1 1 1)

62− , Font.color (rgba 0 0 0 1)

63− ]

64− (text "Hello stylish friend!")

65− , el

66− [ Background.color (rgba 1 1 1 1)

67− , Font.color (rgba 0 0 0 1)

68− ]

69− (text "Hello stylish friend!")

70− ]

tests-rendering/cases/resolved/BehindContent.elmdeleted−34

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

1−module Main exposing (main)

2−

3−{-| -}

4−

5−import Element exposing (..)

6−import Element.Background as Background

7−import Element.Font as Font

8−import Element.Input

9−import Element.Lazy

10−

11−

12−main =

13− Element.layout

14− [ Background.color (rgba 0 0 0 1)

15− , Font.color (rgba 1 1 1 1)

16− , Font.italic

17− , Font.size 32

18− , Font.family

19− [ Font.external

20− { url = "https://fonts.googleapis.com/css?family=EB+Garamond"

21− , name = "EB Garamond"

22− }

23− , Font.sansSerif

24− ]

25− ]

26− <|

27− el

28− [ centerX

29− , centerY

30− , Background.color (rgba 0 0.8 0.9 1)

31− , behindContent

32− (el [ height (px 20), width (px 100), Background.color (rgba 0.9 0.8 0 1) ] none)

33− ]

34− (text "Hello stylish friend!")

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/ColumnGrowth.elmdeleted−40

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

1−module Main exposing (main)

2−

3−import Browser

4−import Element exposing (column, fill, fillPortion, height, minimum, paddingXY, px, rgb, row, shrink, spacing, width)

5−import Element.Background as Back

6−import Element.Border as Border

7−import Html exposing (Html)

8−

9−

10−main : Html m

11−main =

12− let

13− box =

14− row

15− [ Border.solid

16− , Border.width 2

17− , Back.color (rgb 1 1 1)

18− , width (px 80)

19− , height (fillPortion 1)

20− ]

21− []

22−

23− grower =

24− column

25− [ width fill

26−

27− -- fillPortion is not being applied here unless we set it to 1.

28− -- It will also resume working if we delete the minimum bound.

29− , height

30− (fillPortion 2

31− |> minimum 20

32− )

33− ]

34− []

35− in

36− Element.layout

37− [ Back.color (rgb 0.9 1 0.8)

38− , paddingXY 20 20

39− ]

40− (column [ height fill ] [ box, grower, box ])

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

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

1−module Main exposing (main)

2−

3−import Element

4−import Element.Background

5−import Element.Input

6−

7−

8−main =

9− Element.layout []

10− (Element.column [ Element.width (Element.px 200), Element.spacing 10 ]

11− [ Element.Input.text [ Element.focused [] ]

12− { label = Element.Input.labelHidden ""

13− , onChange = \_ -> ()

14− , placeholder = Nothing

15− , text = ""

16− }

17− , Element.Input.multiline

18− [ Element.focused [ Element.Background.color (Element.rgb 0 0 0) ] ]

19− { label = Element.Input.labelHidden ""

20− , onChange = \_ -> ()

21− , placeholder = Nothing

22− , spellcheck = False

23− , text = ""

24− }

25− , Element.Input.button [ Element.focused [] ]

26− { label = Element.text "Button"

27− , onPress = Nothing

28− }

29− , Element.Input.button []

30− { label = Element.text "Button"

31− , onPress = Nothing

32− }

33− ]

34− )

tests-rendering/cases/resolved/HugePlaceholder.elmdeleted−25

@@ -1,25 +0,0 @@

1−module Main exposing (main)

2−

3−import Browser

4−import Element exposing (Element)

5−import Element.Background as Background

6−import Element.Border as Border

7−import Element.Input as Input

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

9−import Html.Events exposing (onClick)

10−

11−

12−main =

13− Element.layout [] sscce

14−

15−

16−sscce =

17− Input.text

18− [ Border.width 1

19− , Element.width <| Element.px 50

20− ]

21− { onChange = always ()

22− , text = ""

23− , placeholder = Just <| Input.placeholder [] <| Element.text "this is a very long place holder ......................"

24− , label = Input.labelHidden ""

25− }

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/FocusStylePrecedingElements.elmdeleted−38

@@ -1,38 +0,0 @@

1−module FocusStylePrecedingElements exposing (main)

2−

3−{-|

4−

5−

6−# `focused` style applied to an element when any element with a lower tab index is focused

7−

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

9−

10−When I add a focused attribute, the styles therein are applied not only when

11−the element is focused, but also when any element with a lower tab index is focused.

12−This behaviour is not browser-specific.

13−

14−To reproduce, tab through to the buttons in the Ellie below. As soon as the first

15−button has focus, the third button (which is the only one with a focused attribute)

16−is highlighted as well.

17−

18−I narrowed down the reason for this behaviour to this CSS selector:

19−.s:focus ~ .fc-250-50-50-255-fs:not(.focus)

20−

21−Disabling it produces the correct focus behaviour.

22−

23−-}

24−

25−import Element exposing (..)

26−import Element.Font as Font

27−import Element.Input as Input

28−

29−

30−main =

31− layout [] <|

32− column []

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

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

35− , Input.button [ focused [ Font.color <| rgb255 250 50 50 ] ] { onPress = Nothing, label = text "Button" }

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

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

38− ]

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/MismatchTextInputText.elmdeleted−82

@@ -1,82 +0,0 @@

1−module Main exposing (main)

2−

3−import Browser

4−import Element exposing (text)

5−import Element.Border as Border

6−import Element.Input as Input

7−import Html exposing (Html, button, div)

8−import Html.Events exposing (onClick)

9−

10−

11−black =

12− Element.rgb 0 0 0

13−

14−

15−styles =

16− [ Border.color black

17− , Border.width 1

18− , Element.padding 5

19− , Border.rounded 0

20− ]

21−

22−

23−view : () -> Html ()

24−view () =

25− -- Element.layout []

26− -- (Input.text [ Border.rounded 0 ]

27− -- { onChange = always ()

28− -- , text = "yes"

29− -- , placeholder = Nothing

30− -- , label = Input.labelAbove [] <| text ""

31− -- }

32− -- )

33− Element.layout [] <|

34− Element.row [ Element.padding 10 ]

35− [ Element.el

36− styles

37− <|

38− Element.text "Hello yes"

39− , Input.text

40− styles

41− { onChange = always ()

42− , text = "Hello yes"

43− , placeholder = Nothing

44− , label = Input.labelHidden "Hello"

45− }

46− , Element.el

47− [ Element.padding 0

48− , Border.color black

49− , Border.width 1

50− ]

51− <|

52− Element.text "Hello yes"

53− , Input.search

54− [ Element.padding 0

55− , Border.color black

56− , Border.width 1

57− ]

58− { onChange = always ()

59− , text = "Hello yes"

60− , placeholder = Nothing

61− , label = Input.labelHidden "Hello"

62− }

63− , Input.text

64− [ Element.padding 0

65− , Border.color black

66− , Border.width 1

67− ]

68− { onChange = always ()

69− , text = "Hello yes"

70− , placeholder = Nothing

71− , label = Input.labelHidden "Hello"

72− }

73− ]

74−

75−

76−main : Program () () ()

77−main =

78− Browser.sandbox

79− { init = ()

80− , view = view

81− , update = \_ _ -> ()

82− }

tests-rendering/cases/resolved/MultilineCollapsed.elmdeleted−61

@@ -1,61 +0,0 @@

1−module Main 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.Input as Input

8−import Html exposing (Html)

9−import Html.Events exposing (onClick)

10−

11−

12−type alias Model =

13− String

14−

15−

16−type Msg

17− = Type String

18−

19−

20−update : Msg -> Model -> Model

21−update msg model =

22− case msg of

23− Type s ->

24− s

25−

26−

27−view : Model -> Html Msg

28−view model =

29− Element.layout [] <|

30− column [ width fill, height fill ]

31− [ Input.multiline

32− [ height (maximum 200 shrink)

33− ]

34− { onChange = Type

35− , text = model

36− , placeholder = Nothing

37− , label = Input.labelAbove [] <| text "only one line!"

38− , spellcheck = False

39− }

40− , Input.multiline []

41− { onChange = Type

42− , text = model

43− , placeholder = Nothing

44− , label = Input.labelAbove [] <| text "expanded to multi lines."

45− , spellcheck = False

46− }

47− ]

48−

49−

50−main : Program () Model Msg

51−main =

52− Browser.sandbox

53− { init = "yes\nno\nmaybe"

54− , view = view

55− , update = update

56− }

57−

58−

59−sscce : Element msg

60−sscce =

61− Element.text "sscce"

tests-rendering/cases/resolved/MultilineInput.elmdeleted−377

@@ -1,377 +0,0 @@

1−module Main 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−import Element.Input as Input exposing (labelAbove, multiline)

9−import Html exposing (Html)

10−import Html.Events exposing (onClick)

11−

12−

13−type alias Model =

14− { multiline : String

15− , single : String

16− }

17−

18−

19−initialModel : Model

20−initialModel =

21− { multiline = testtxt

22− , single = ""

23− }

24−

25−

26−type Msg

27− = MultilineChanged String

28− | SingleChanged String

29−

30−

31−update : Msg -> Model -> Model

32−update msg model =

33− case msg of

34− MultilineChanged new ->

35− { model | multiline = new }

36−

37− SingleChanged new ->

38− { model | single = new }

39−

40−

41−examplePlaceholder =

42− Input.placeholder [ Font.color (rgb 0.2 0.2 0.8) ] (text "My placeholder...")

43−

44−

45−examplePlaceholderLong =

46− Input.placeholder [ Font.color (rgb 0.2 0.2 0.8) ] (text "My placeholderMy placeholderMy placeholderMy placeholderMy placeholderMy placeholderMy placeholderMy placeholder...")

47−

48−

49−background =

50− Background.color (rgb 0 1 0)

51−

52−

53−testtxt =

54− """orem Ipsum is simply dummy text of the printing

55−and typesetting industry. Lorem Ipsum has been the industry's

56−standard dummy text ever since the 1500s, when an unknown

57−printer took a galley of type and scrambled it to make a type specimen book.

58−It has survived not only five centuries, but also the leap into electronic

59−typesetting

60−

61−, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?"""

62−

63−

64−rowTest header els =

65− column [ width fill, spacing 24 ]

66− [ el [] (text header)

67− , row

68− [ width fill

69− , height (px 800)

70− , spacing 50

71− , centerX

72− , Border.width 1

73− ]

74− els

75− ]

76−

77−

78−label str =

79− labelAbove

80− [ width (px 100)

81− , Font.italic

82− ]

83− (text str)

84−

85−

86−view : Model -> Html Msg

87−view model =

88− layout [] <|

89− column []

90− [ el [ Font.size 32 ] (text "Single Input")

91− , viewSingle model

92− , el [ Font.size 32 ] (text "Multiline")

93− , viewMultiline model

94− ]

95−

96−

97−viewMultiline model =

98− column

99− [ width (px 1500)

100− , padding 100

101− , spacing 500

102− , centerX

103− ]

104− [ rowTest "Heights"

105− [ multiline [ background ]

106− { onChange = MultilineChanged

107− , text = model.multiline

108− , placeholder = Nothing

109− , spellcheck = False

110− , label =

111− label "Default"

112− }

113− , multiline [ background, height shrink ]

114− { onChange = MultilineChanged

115− , text = model.multiline

116− , placeholder = Nothing

117− , spellcheck = False

118− , label =

119− label "Height shrink"

120− }

121− , multiline [ background, height fill ]

122− { onChange = MultilineChanged

123− , text = model.multiline

124− , placeholder = Nothing

125− , spellcheck = False

126− , label =

127− label "Height Fill"

128− }

129− , multiline [ background, height (px 200) ]

130− { onChange = MultilineChanged

131− , text = model.multiline

132− , placeholder = Nothing

133− , spellcheck = False

134− , label =

135− label "Height 200px"

136− }

137− ]

138− , rowTest "Widths"

139− [ multiline []

140− { onChange = MultilineChanged

141− , text = model.multiline

142− , placeholder = Nothing

143− , spellcheck = False

144− , label =

145− label "Default"

146− }

147− , multiline [ width fill ]

148− { onChange = MultilineChanged

149− , text = model.multiline

150− , placeholder = Nothing

151− , spellcheck = False

152− , label =

153− label "Width fill"

154− }

155− , multiline [ width shrink ]

156− { onChange = MultilineChanged

157− , text = model.multiline

158− , placeholder = Nothing

159− , spellcheck = False

160− , label =

161− label "Width Shrink"

162− }

163− , multiline [ width (px 300) ]

164− { onChange = MultilineChanged

165− , text = model.multiline

166− , placeholder = Nothing

167− , spellcheck = False

168− , label = label "width 300"

169− }

170− ]

171− , rowTest "Spacing"

172− [ multiline []

173− { onChange = MultilineChanged

174− , text = model.multiline

175− , placeholder = Nothing

176− , spellcheck = False

177− , label =

178− label "Default"

179− }

180− , multiline [ spacing 30, padding 60 ]

181− { onChange = MultilineChanged

182− , text = model.multiline

183− , placeholder = Nothing

184− , spellcheck = False

185− , label =

186− label "Spacing 30"

187− }

188− , multiline [ spacing 0 ]

189− { onChange = MultilineChanged

190− , text = model.multiline

191− , placeholder = Nothing

192− , spellcheck = False

193− , label = label "Spacing 0"

194− }

195− ]

196− , rowTest "Scrollable viewport with different paddings "

197− [ multiline [ height (px 200), padding 30 ]

198− { onChange = MultilineChanged

199− , text = model.multiline

200− , placeholder = Nothing

201− , spellcheck = False

202− , label =

203− label "Height 200, Padding 30"

204− }

205− , multiline [ height (px 200), padding 60 ]

206− { onChange = MultilineChanged

207− , text = model.multiline

208− , placeholder = Nothing

209− , spellcheck = False

210− , label =

211− label "Height 200, Padding 60"

212− }

213− , multiline [ height (px 200), padding 0 ]

214− { onChange = MultilineChanged

215− , text = model.multiline

216− , placeholder = Nothing

217− , spellcheck = False

218− , label = label "Height 200, Padding 0"

219− }

220− ]

221− , rowTest "Placeholders"

222− [ multiline []

223− { onChange = MultilineChanged

224− , text = ""

225− , placeholder = Just examplePlaceholder

226− , spellcheck = False

227− , label =

228− label "Default"

229− }

230− , multiline [ height shrink ]

231− { onChange = MultilineChanged

232− , text = ""

233− , placeholder = Just examplePlaceholder

234− , spellcheck = False

235− , label =

236− label "Height shrink"

237− }

238− , multiline [ height fill ]

239− { onChange = MultilineChanged

240− , text = ""

241− , placeholder = Just examplePlaceholder

242− , spellcheck = False

243− , label =

244− label "Height Fill"

245− }

246− , multiline [ height (px 200) ]

247− { onChange = MultilineChanged

248− , text = ""

249− , placeholder = Just examplePlaceholder

250− , spellcheck = False

251− , label =

252− label "Height 200px"

253− }

254− ]

255− , rowTest "Long Placeholders"

256− [ multiline []

257− { onChange = MultilineChanged

258− , text = ""

259− , placeholder = Just examplePlaceholderLong

260− , spellcheck = False

261− , label =

262− label "Default"

263− }

264− , multiline [ height shrink ]

265− { onChange = MultilineChanged

266− , text = ""

267− , placeholder = Just examplePlaceholderLong

268− , spellcheck = False

269− , label =

270− label "Height shrink"

271− }

272− , multiline [ height fill ]

273− { onChange = MultilineChanged

274− , text = ""

275− , placeholder = Just examplePlaceholderLong

276− , spellcheck = False

277− , label =

278− label "Height Fill"

279− }

280− , multiline [ height (px 200) ]

281− { onChange = MultilineChanged

282− , text = ""

283− , placeholder = Just examplePlaceholderLong

284− , spellcheck = False

285− , label =

286− label "Height 200px"

287− }

288− ]

289− ]

290−

291−

292−singleInput attrs labelTxt model =

293− Input.text attrs

294− { onChange = SingleChanged

295− , text = model

296− , label =

297− labelAbove

298− [ width (px 100)

299− , Font.italic

300− ]

301− (text labelTxt)

302− , placeholder =

303− Just

304− (Input.placeholder [ Font.color (rgb 0.8 0.8 0.8) ]

305− (text "Here is my single input")

306− )

307− }

308−

309−

310−singleInputLongPlaceholder attrs labelTxt model =

311− Input.text attrs

312− { onChange = SingleChanged

313− , text = model

314− , label =

315− labelAbove

316− [ width (px 100)

317− , Font.italic

318− ]

319− (text labelTxt)

320− , placeholder =

321− Just

322− (Input.placeholder [ Font.color (rgb 0.8 0.8 0.8) ]

323− (text "Here is my single input with a placeholder that is super long")

324− )

325− }

326−

327−

328−viewSingle model =

329− column

330− [ width (px 1500)

331− , padding 100

332− , spacing 500

333− , centerX

334− ]

335− [ rowTest "Heights"

336− [ singleInput [] "Default" model.single

337− , singleInput [ height shrink ] "Height shrink" model.single

338− , singleInput [ height fill ] "Height Fill" model.single

339− , singleInput [ height (px 200) ] "Height 200px" model.single

340− ]

341− , rowTest "Widths"

342− [ singleInput [] "Default" model.single

343− , singleInput [ width fill ] "Width fill" model.single

344− , singleInput [ width shrink ] "Width Shrink" model.single

345− , singleInput [ width (px 200) ] "width 200" model.single

346− ]

347− , rowTest "Spacing (no effect)"

348− [ singleInput [] "Default" model.single

349− , singleInput [ spacing 60 ] "Spacing 30" model.single

350− , singleInput [ spacing 0 ] "Spacing 0" model.single

351− ]

352− , rowTest "Padding"

353− [ singleInput [] "Default" model.single

354− , singleInput [ padding 60 ] "Padding 30" model.single

355− , singleInput [ padding 0 ] "Padding 0" model.single

356− ]

357− , rowTest "Scrollable viewport with different paddings "

358− [ singleInput [ height (px 200), padding 30 ] "Height 200, Padding 30" model.single

359− , singleInput [ height (px 200), padding 60 ] "Height 200, Padding 60" model.single

360− , singleInput [ height (px 200), padding 0 ] "Height 200, Padding 0" model.single

361− ]

362− , rowTest "Long Placeholders"

363− [ singleInputLongPlaceholder [] "Default" model.single

364− , singleInputLongPlaceholder [ height shrink ] "Height shrink" model.single

365− , singleInputLongPlaceholder [ height fill ] "Height Fill" model.single

366− , singleInputLongPlaceholder [ height (px 200) ] "Height 200px" model.single

367− ]

368− ]

369−

370−

371−main : Program () Model Msg

372−main =

373− Browser.sandbox

374− { init = initialModel

375− , view = view

376− , update = update

377− }

tests-rendering/cases/resolved/MultilineNewline.elmdeleted−61

@@ -1,61 +0,0 @@

1−module Main 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−import Element.Input as Input

9−import Html exposing (Html)

10−import Html.Events

11−

12−

13−type alias Model =

14− { content : String }

15−

16−

17−initialModel : Model

18−initialModel =

19− { content = "" }

20−

21−

22−type Msg

23− = ContentChanged String

24−

25−

26−update : Msg -> Model -> Model

27−update msg model =

28− case msg of

29− ContentChanged str ->

30− { model | content = str }

31−

32−

33−view : Model -> Html Msg

34−view model =

35− Element.layout [ Font.color (rgb 1 0 0) ]

36− (viewInput model)

37−

38−

39−main : Program () Model Msg

40−main =

41− Browser.sandbox

42− { init = initialModel

43− , view = view

44− , update = update

45− }

46−

47−

48−viewInput model =

49− Input.multiline

50− [ padding 50

51− , height (shrink |> maximum 300)

52− , width fill

53− , centerX

54− , centerY

55− ]

56− { onChange = ContentChanged

57− , text = model.content

58− , placeholder = Just (Input.placeholder [] (text "Write your novel, dummy!"))

59− , label = Input.labelAbove [] (text "My Input")

60− , spellcheck = False

61− }

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/cases/resolved/NestedColumns.elmdeleted−33

@@ -1,33 +0,0 @@

1−module Main exposing (main)

2−

3−import Browser

4−import Element

5−

6−

7−

8−{- Broken in chrome -}

9−

10−

11−main =

12− Element.layout

13− [ Element.inFront

14− (Element.column []

15− [ Element.column []

16− [ Element.text "1"

17− , Element.text "2"

18− , Element.text "3"

19− ]

20− , Element.column []

21− [ Element.text "4"

22− , Element.text "5"

23− , Element.text "6"

24− ]

25− , Element.column []

26− [ Element.text "7"

27− , Element.text "8"

28− , Element.text "9"

29− ]

30− ]

31− )

32− ]

33− Element.none

tests-rendering/cases/resolved/OtherOtherZindex.elmdeleted−31

@@ -1,31 +0,0 @@

1−module Main exposing (main)

2−

3−import Element

4−import Element.Background

5−

6−

7−main =

8− Element.layout []

9− (Element.el

10− [ Element.inFront

11− (Element.el

12− [ Element.width (Element.px 70)

13− , Element.height (Element.px 70)

14− , Element.Background.color (Element.rgb 0 0 0)

15− ]

16− Element.none

17− )

18− ]

19− (Element.el

20− [ Element.inFront

21− (Element.el

22− [ Element.width (Element.px 50)

23− , Element.height (Element.px 50)

24− , Element.Background.color (Element.rgb 1 0 0)

25− ]

26− Element.none

27− )

28− ]

29− Element.none

30− )

31− )

tests-rendering/cases/resolved/OtherZIndex.elmdeleted−85

@@ -1,85 +0,0 @@

1−module Main exposing (main)

2−

3−import Browser

4−import Html exposing (Html)

5−import Element as Ui exposing (..)

6−import Element.Background as Background

7−import Element.Font as Font

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− <| text "A"

38−

39− b =

40− column

41− [ width fill

42− , height <| px 5000

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

44− , spacing 60

45− ]

46− [ text "B"

47− , c

48− ]

49−

50− c =

51− el

52− [ width fill

53− , height <| px 100

54− , Background.color <| rgb 0 0 0

55− , Font.color <| rgb 1 1 1

56− , paddingXY 0 30

57− , inFront d

58− ]

59− <|

60− text "C"

61−

62− d =

63− el

64− [ width <| px 100

65− , height <| px 100

66− , centerX

67− , Background.color <| rgb 1 1 1

68− , Font.color <| rgb 0 0 0

69− ]

70− <| text "D"

71− in

72− layout

73− [ inFront a

74− , paddingXY 0 30

75− ]

76− b

77−

78−

79−main : Program () Model Msg

80−main =

81− Browser.sandbox

82− { init = initialModel

83− , view = view

84− , update = update

85− }

tests-rendering/cases/resolved/OverflowingInput.elmdeleted−48

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

1−module Main exposing (main)

2−

3−import Browser

4−import Element exposing (..)

5−import Element.Input as Input

6−import Html exposing (Html)

7−

8−

9−type alias Model =

10− {}

11−

12−

13−type Msg

14− = OnInput String

15−

16−

17−update : Msg -> Model -> Model

18−update msg model =

19− model

20−

21−

22−view : Model -> Html Msg

23−view model =

24− layout [] <|

25− row

26− [ width (px 200)

27− , padding 8

28− , spacing 16

29− ]

30− [ Input.text

31− [ padding 4

32− , width fill

33− ]

34− { onChange = OnInput

35− , text = "text"

36− , placeholder = Nothing

37− , label = Input.labelHidden "label"

38− }

39− ]

40−

41−

42−main : Program () Model Msg

43−main =

44− Browser.sandbox

45− { init = {}

46− , view = view

47− , update = update

48− }

tests-rendering/cases/resolved/OverflowingInput2.elmdeleted−54

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

1−module Main exposing (main)

2−

3−import Browser

4−import Element

5−import Element.Background as Background

6−import Element.Input as Input

7−import Html exposing (Html)

8−

9−

10−type alias Model =

11− {}

12−

13−

14−type Msg

15− = TextUpdated String

16−

17−

18−update : Msg -> Model -> Model

19−update msg model =

20− case msg of

21− TextUpdated _ ->

22− model

23−

24−

25−view : Model -> Html Msg

26−view model =

27− Element.layout

28− []

29− (Element.row

30− [ Element.width (Element.px 100)

31− , Element.padding 10

32− , Background.color (Element.rgb 1 0 0)

33− ]

34− [ Input.text

35− [ Element.width (Element.fillPortion 2)

36−

37− -- Element.width Element.fill

38− ]

39− { onChange = TextUpdated

40− , text = ""

41− , placeholder = Nothing

42− , label = Input.labelHidden ""

43− }

44− ]

45− )

46−

47−

48−main : Program () Model Msg

49−main =

50− Browser.sandbox

51− { init = {}

52− , view = view

53− , update = update

54− }

tests-rendering/cases/resolved/OverflowingInput3.elmdeleted−95

@@ -1,95 +0,0 @@

1−module Main 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−import Element.Input as Input

9−import Html exposing (Html)

10−

11−

12−type alias Model =

13− { count : Int }

14−

15−

16−initialModel : Model

17−initialModel =

18− { count = 0 }

19−

20−

21−type Msg

22− = Increment

23− | Decrement

24−

25−

26−update : Msg -> Model -> Model

27−update msg model =

28− case msg of

29− Increment ->

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

31−

32− Decrement ->

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

34−

35−

36−blue =

37− rgb 0 0 1

38−

39−

40−red =

41− rgb 1 0 0

42−

43−

44−view : Model -> Html Msg

45−view model =

46− layout [ width fill, padding 5 ] <|

47− column [ width fill, spacing 10 ]

48− [ row [ width fill, height <| px 100 ]

49− [ link [ height fill, width <| fillPortion 1, Background.color blue ]

50− { url = "https://github.com/mdgriffith/elm-ui/issues"

51− , label = paragraph [ Font.center ] [ text "Hello!" ]

52− }

53− , el [ height fill, width <| fillPortion 2, Background.color red ] none

54− ]

55− , row [ width fill, height <| px 100 ]

56− [ el [ height fill, width <| fillPortion 1, Background.color blue ] (text "Hello!")

57− , el [ height fill, width <| fillPortion 2, Background.color red ] none

58− ]

59− ]

60−

61−

62−button : String -> Element Msg

63−button label =

64− el

65− [ Border.rounded 2

66− , Border.width 1

67− , Border.color black

68− , Background.color white

69− , Font.color black

70− , padding 5

71− , mouseOver

72− [ Font.color white

73− , Background.color black

74− ]

75− ]

76− (text label)

77−

78−

79−black : Color

80−black =

81− rgb 0 0 0

82−

83−

84−white : Color

85−white =

86− rgb 255 255 255

87−

88−

89−main : Program () Model Msg

90−main =

91− Browser.sandbox

92− { init = initialModel

93− , view = view

94− , update = update

95− }

tests-rendering/cases/resolved/ReversedTableOrder.elmdeleted−56

@@ -1,56 +0,0 @@

1−module Main exposing (Person, main, persons)

2−

3−{-| -}

4−

5−import Element exposing (..)

6−import Element.Background as Background

7−import Element.Font as Font

8−import Element.Input

9−

10−

11−type alias Person =

12− { firstName : String

13− , lastName : String

14− }

15−

16−

17−persons : List Person

18−persons =

19− [ { firstName = "David"

20− , lastName = "Bowie"

21− }

22− , { firstName = "Florence"

23− , lastName = "Welch"

24− }

25− ]

26−

27−

28−main =

29− Element.layout [] <|

30− Element.table []

31− { data = persons

32− , columns =

33− [ { header = Element.text "First Name"

34− , width = fill

35− , view =

36− \person ->

37− Element.Input.text []

38− { text = person.firstName

39− , placeholder = Nothing

40− , onChange = always Nothing

41− , label = Element.Input.labelAbove [] Element.none

42− }

43− }

44− , { header = Element.text "Last Name"

45− , width = fill

46− , view =

47− \person ->

48− Element.Input.text []

49− { text = person.lastName

50− , placeholder = Nothing

51− , onChange = always Nothing

52− , label = Element.Input.labelAbove [] Element.none

53− }

54− }

55− ]

56− }

tests-rendering/cases/resolved/TextAreaMax.elmdeleted−80

@@ -1,80 +0,0 @@

1−module Main exposing (main)

2−

3−import Element exposing (..)

4−import Element.Background as Bg

5−import Element.Font as Font

6−import Element.Input as Input

7−

8−

9−large =

10− """Hi

11−Hello

12− -->

13−

14− World!"""

15−

16−

17−empty =

18− ""

19−

20−

21−singleLine =

22− "Hello World! ->"

23−

24−

25−placeholder =

26− "placeholder"

27−

28−

29−main =

30− Element.layout [ width fill, height fill, Font.color (rgb 1 0 0) ] <|

31− column [ width fill, height fill ]

32− [ Input.multiline

33− [ centerX

34− , spacing 20

35−

36− -- , height (px 100)

37− , width shrink

38− ]

39− { onChange = always ()

40− , text = empty

41− , placeholder = Just (Input.placeholder [] (text "hello"))

42− , label = Input.labelAbove [] none

43− , spellcheck = False

44− }

45− , el

46− [ width <| px 500

47− , height <| px 20

48− , Bg.color <| rgb255 0 0 0

49− , centerX

50− ]

51− none

52− , Input.text

53− [ centerX

54− , spacing 5

55−

56− -- , height (px 100)

57− -- , width shrink

58− -- , height shrink

59− , width (px 200)

60− ]

61− { onChange = always ()

62− , text = empty

63− , placeholder = Just (Input.placeholder [] (text placeholder))

64− , label = Input.labelAbove [] (text "labeled")

65− }

66− , Input.text

67− [ centerX

68− , spacing 5

69−

70− -- , height (px 100)

71− -- , width shrink

72− -- , height shrink

73− , width (px 200)

74− ]

75− { onChange = always ()

76− , text = "Filled Content"

77− , placeholder = Just (Input.placeholder [] (text placeholder))

78− , label = Input.labelBelow [] (text "labeled")

79− }

80− ]

tests-rendering/cases/resolved/WeirdWrapping.elmdeleted−32

@@ -1,32 +0,0 @@

1−module Main exposing (main)

2−

3−import Element exposing (..)

4−import Element.Background as Background

5−import Element.Border as Border exposing (widthEach)

6−import Element.Font as Font

7−

8−

9−main =

10− Element.layout

11− [ height fill

12− , width fill

13− , padding 5

14− ]

15− <|

16− row

17− [ width fill ]

18− [ newTabLink

19− [ widthEach

20− { bottom = 0

21− , left = 2

22− , right = 0

23− , top = 0

24− }

25− , paddingXY 3 0

26− ]

27− { url = "url.example.com"

28− , label =

29− [ text "My news site super cool header" ]

30− |> paragraph []

31− }

32− ]

tests-rendering/cases/resolved/ZIndex.elmdeleted−56

@@ -1,56 +0,0 @@

1−module Main 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− ]

27− [ el

28− [ width fill

29− , Background.color grey

30− , padding 20

31−

32− , below <|

33− el

34− [ height (px 300)

35− , width (px 300)

36− , Background.color darkGrey

37− , moveRight 50

38− , padding 50

39− ]

40− (el [ alignBottom ] (text "I'm a dropdown menu."))

41− ]

42− (text "I'm a toolbar.")

43− , Input.text []

44− { onChange = NoMsg

45− , text = ""

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

47− , label = Input.labelAbove [] none

48− }

49− , Input.multiline []

50− { onChange = NoMsg

51− , text = ""

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

53− , label = Input.labelAbove [] none

54− , spellcheck = False

55− }

56− ]

tests-rendering/cases/resolved/elm.jsondeleted−25

@@ -1,25 +0,0 @@

1−{

2− "type": "application",

3− "source-directories": [

4− ".",

5− "../../../src/"

6− ],

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

8− "dependencies": {

9− "direct": {

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

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

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

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

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

15− },

16− "indirect": {

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

18− "elm/url": "1.0.0"

19− }

20− },

21− "test-dependencies": {

22− "direct": {},

23− "indirect": {}

24− }

25−}

tests-rendering/elm.jsondeleted−25

@@ -1,25 +0,0 @@

1−{

2− "type": "application",

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

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

5− "dependencies": {

6− "direct": {

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

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

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

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

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

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

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

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

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

16− },

17− "indirect": {

18− "elm/url": "1.0.0"

19− }

20− },

21− "test-dependencies": {

22− "direct": {},

23− "indirect": {}

24− }

25−}

tests-rendering/src/Testable/Element.elmdeleted−1723

@@ -1,1723 +0,0 @@

1−module Testable.Element exposing

2− ( Length(..)

3− , above

4− , alignBottom

5− , alignLeft

6− , alignRight

7− , alignTop

8− , alpha

9− , behindContent

10− , below

11− , centerX

12− , centerY

13− , clip

14− , column

15− , el

16− , expectRoundedEquality

17− , fill

18− , fillPortion

19− , height

20− , inFront

21− , isVisible

22− , label

23− , layout

24− , link

25− , maximum

26− , minimum

27− , moveDown

28− , moveLeft

29− , moveRight

30− , moveUp

31− , none

32− , onLeft

33− , onRight

34− , padding

35− , paddingXY

36− , paragraph

37− , px

38− , rgb

39− , rgba

40− , row

41− , scrollbarX

42− , scrollbarY

43− , scrollbars

44− , shrink

45− , spacing

46− , text

47− , textColumn

48− , toProgram

49− , transparent

50− , width

51− )

52−

53−{-| This module should mirror the top level `Element` api, with one important distinction.

54−

55−The resulting `Element msg` structure can either be rendered to Html or transformed into a test suite that can be run.

56−

57−In order to run the test:

58−

59− - render html

60− - gather information from the browser

61− - generate tests

62−

63−-}

64−

65−import Dict

66−import Element

67−import Html.Attributes

68−import Testable

69−import Testable.Runner

70−

71−

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

80−layout attrs elem =

81− Testable.Runner.testable "Test" elem

82−

83−

84−text : String -> Testable.Element msg

85−text =

86− Testable.Text

87−

88−

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

90−el attrs =

91− Testable.El (implicitWidthHeightShrink attrs)

92−

93−

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

95−row attrs =

96− Testable.Row (implicitWidthHeightShrink attrs)

97−

98−

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

100−column attrs =

101− Testable.Column (implicitWidthHeightShrink attrs)

102−

103−

104−none : Testable.Element msg

105−none =

106− Testable.Empty

107−

108−

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

110−paragraph attrs =

111− let

112− withImplicits =

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

114− :: implicitTest (heightHelper Nothing Nothing Shrink)

115− :: attrs

116− in

117− Testable.Paragraph (skipOverridden withImplicits)

118−

119−

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

121−textColumn attrs =

122− let

123− withImplicits =

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

125− :: implicitTest (heightHelper Nothing Nothing Shrink)

126− :: attrs

127− in

128− Testable.TextColumn (skipOverridden withImplicits)

129−

130−

131−link :

132− List (Testable.Attr msg)

133− ->

134− { url : String

135− , label : Testable.Element msg

136− }

137− -> Testable.Element msg

138−link attrs details =

139− Testable.Link details.url

140− (implicitWidthHeightShrink attrs)

141− details.label

142−

143−

144−clip =

145− Testable.Attr Element.clip

146−

147−

148−{-| -}

149−scrollbars : Testable.Attr msg

150−scrollbars =

151− Testable.Attr Element.scrollbars

152−

153−

154−{-| -}

155−scrollbarY : Testable.Attr msg

156−scrollbarY =

157− Testable.Attr Element.scrollbarY

158−

159−

160−{-| -}

161−scrollbarX : Testable.Attr msg

162−scrollbarX =

163− Testable.Attr Element.scrollbarX

164−

165−

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

167−-}

168−label str =

169− Testable.Batch []

170−

171−

172−moveUp x =

173− Testable.Attr (Element.moveUp x)

174−

175−

176−moveDown x =

177− Testable.Attr (Element.moveDown x)

178−

179−

180−moveRight x =

181− Testable.Attr (Element.moveRight x)

182−

183−

184−moveLeft x =

185− Testable.Attr (Element.moveLeft x)

186−

187−

188−type Length

189− = Px Int

190− | Fill Int

191− | Shrink

192− | Minimum Int Length

193− | Maximum Int Length

194−

195−

196−minimum =

197− Minimum

198−

199−

200−maximum =

201− Maximum

202−

203−

204−rgb =

205− Element.rgb

206−

207−

208−rgba =

209− Element.rgba

210−

211−

212−px : Int -> Length

213−px =

214− Px

215−

216−

217−fill : Length

218−fill =

219− Fill 1

220−

221−

222−shrink : Length

223−shrink =

224− Shrink

225−

226−

227−fillPortion : Int -> Length

228−fillPortion =

229− Fill

230−

231−

232−transparent : Bool -> Testable.Attr msg

233−transparent on =

234− Testable.LabeledTest

235− { label =

236− if on then

237− "transparent"

238−

239− else

240− "opaque"

241− , attr = Element.transparent on

242− , id = Testable.NoId

243− , test =

244− \context ->

245− let

246− selfTransparency =

247− context.self.style

248− |> Dict.get "opacity"

249− |> Maybe.withDefault "notfound"

250−

251− value =

252− if on then

253− "0"

254−

255− else

256− "1"

257− in

258− [ Testable.equal value selfTransparency ]

259− }

260−

261−

262−{-| -}

263−isVisible : Testable.Attr msg

264−isVisible =

265− Testable.AttrTest

266− { label = "is-visible"

267− , id = Testable.NoId

268− , test =

269− \context ->

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

271− }

272−

273−

274−{-| -}

275−alpha : Float -> Testable.Attr msg

276−alpha a =

277− Testable.LabeledTest

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

279− , attr = Element.alpha a

280− , id = Testable.NoId

281− , test =

282− \context ->

283− let

284− selfTransparency =

285− context.self.style

286− |> Dict.get "opacity"

287− |> Maybe.withDefault "notfound"

288− in

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

290− }

291−

292−

293−{-| -}

294−padding : Int -> Testable.Attr msg

295−padding pad =

296− Testable.LabeledTest

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

298− , attr = Element.padding pad

299− , id = Testable.NoId

300− , test =

301− \found ->

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

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

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

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

306− , floor found.self.bbox.padding.top

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

308− ]

309− )

310− ]

311− }

312−

313−

314−{-| -}

315−paddingXY : Int -> Int -> Testable.Attr msg

316−paddingXY x y =

317− Testable.LabeledTest

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

319− , attr = Element.paddingXY x y

320− , id = Testable.NoId

321− , test =

322− \found ->

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

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

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

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

327− ]

328− && List.all ((==) y)

329− [ floor found.self.bbox.padding.top

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

331− ]

332− )

333− ]

334− }

335−

336−

337−listIf ls =

338− List.filter Tuple.first ls

339− |> List.map Tuple.second

340−

341−

342−widthHelper maybeMin maybeMax len =

343− let

344− addMin l =

345− case maybeMin of

346− Nothing ->

347− l

348−

349− Just minPx ->

350− l |> Element.minimum minPx

351−

352− addMax l =

353− case maybeMax of

354− Nothing ->

355− l

356−

357− Just maxPx ->

358− l |> Element.maximum maxPx

359−

360− minLabel =

361− case maybeMin of

362− Nothing ->

363− ""

364−

365− Just i ->

366− " min:" ++ String.fromInt i

367−

368− maxLabel =

369− case maybeMax of

370− Nothing ->

371− ""

372−

373− Just i ->

374− " max:" ++ String.fromInt i

375−

376− minMaxTest actualWidth =

377− case ( maybeMin, maybeMax ) of

378− ( Nothing, Nothing ) ->

379− True

380−

381− ( Just lower, Nothing ) ->

382− lower <= actualWidth

383−

384− ( Just lower, Just higher ) ->

385− lower <= actualWidth && actualWidth <= higher

386−

387− ( Nothing, Just higher ) ->

388− actualWidth <= higher

389− in

390− case len of

391− Minimum m newLen ->

392− widthHelper (Just m) maybeMax newLen

393−

394− Maximum m newLen ->

395− widthHelper maybeMin (Just m) newLen

396−

397− Px val ->

398− -- Pixel values should ignore min and max?

399− Testable.LabeledTest

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

401− , id = Testable.IsWidth

402− , attr =

403− Element.width

404− (Element.px val

405− |> addMin

406− |> addMax

407− )

408− , test =

409− \found ->

410− [ expectRoundedEquality

411− { expected = toFloat val

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

413− }

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

415− ]

416− }

417−

418− Fill portion ->

419− Testable.LabeledTest

420− { label =

421− if portion == 1 then

422− "width fill" ++ minLabel ++ maxLabel

423−

424− else

425− "width fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel

426− , id = Testable.IsWidth

427− , attr =

428− Element.width

429− (Element.fillPortion portion

430− |> addMin

431− |> addMax

432− )

433− , test =

434− \context ->

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

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

437−

438− else

439− let

440− parentAvailableWidth =

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

442− in

443− List.concat

444− [ case context.parentLayout of

445− Testable.IsNearby _ ->

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

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

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

449− )

450− ]

451−

452− Testable.InColumn ->

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

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

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

456− )

457− ]

458−

459− Testable.InEl ->

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

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

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

463− ]

464−

465− _ ->

466− let

467− spacePerPortion =

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

469− in

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

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

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

473− ]

474− , [ Testable.lessThanOrEqual "not larger than parent"

475− context.self.bbox.width

476− context.parent.bbox.width

477− ]

478− , case context.selfElement of

479− Testable.Paragraph _ _ ->

480− -- A paragraph with width fill

481− -- we want to test for correct text wrapping here.

482− --

483− let

484− childWidth child =

485− child.bbox.width

486−

487− totalChildren =

488− context.children

489− |> List.map childWidth

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

491− |> List.sum

492−

493− horizontalPadding =

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

495−

496− totalCalculatedWidth =

497− totalChildren + horizontalPadding

498−

499− expectedLines =

500− if boxChildrenHeight > 20 then

501− ceiling (boxChildrenHeight / 20)

502−

503− else

504− ceiling (totalCalculatedWidth / context.self.bbox.width)

505−

506− boxChildrenHeight =

507− context.children

508− |> List.map

509− (\c ->

510− c.bbox.height

511− )

512− |> List.sum

513− in

514− [ Testable.true "text wrapping, checking height"

515− -- all we're doing here is testing if wrapping is occurring

516− -- not the exact height, which is a little tricky to calculate perfectly without more information.

517− (if expectedLines > 1 then

518− context.self.bbox.height >= (20 * 2)

519−

520− else

521− -- then it's less than 2 ~ line heights

522− -- there's some weird variance here which makes it hard to be exact.

523− context.self.bbox.height < (20 * 2)

524− )

525− ]

526−

527− _ ->

528− []

529− ]

530− }

531−

532− Shrink ->

533− Testable.LabeledTest

534− { label = "width shrink" ++ minLabel ++ maxLabel

535− , attr =

536− Element.width

537− (Element.shrink

538− |> addMin

539− |> addMax

540− )

541− , id = Testable.IsWidth

542− , test =

543− \context ->

544− case context.selfElement of

545− Testable.El _ _ ->

546− let

547− childWidth child =

548− child.bbox.width

549−

550− totalChildren =

551− context.children

552− |> List.map childWidth

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

554− |> List.sum

555−

556− horizontalPadding =

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

558− in

559− listIf

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

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

562− , Testable.rounded "equals children"

563− { expected = totalChildren + horizontalPadding

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

565− }

566− )

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

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

569− context.self.bbox.width

570− context.parent.bbox.width

571− )

572− ]

573−

574− Testable.Link _ _ _ ->

575− let

576− childWidth child =

577− child.bbox.width

578−

579− totalChildren =

580− context.children

581− |> List.map childWidth

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

583− |> List.sum

584−

585− horizontalPadding =

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

587− in

588− listIf

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

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

591− , Testable.rounded "equals children"

592− { expected = totalChildren + horizontalPadding

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

594− }

595− )

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

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

598− context.self.bbox.width

599− context.parent.bbox.width

600− )

601− ]

602−

603− Testable.Row rowAttrs _ ->

604− -- width of row is the sum of all children widths

605− -- both text elements and others.

606− let

607− childWidth child =

608− child.bbox.width

609−

610− totalChildren =

611− context.children

612− |> List.map childWidth

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

614− |> List.sum

615−

616− horizontalPadding =

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

618−

619− spacingAmount =

620− Testable.getSpacingFromAttributes rowAttrs

621−

622− totalSpacing =

623− toFloat spacingAmount * (toFloat (List.length context.children) - 1)

624− in

625− listIf

626− [ ( True

627− , expectRoundedEquality

628− { expected = totalChildren + horizontalPadding + totalSpacing

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

630− }

631− )

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

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

634− context.self.bbox.width

635− context.parent.bbox.width

636− )

637− ]

638−

639− Testable.Column _ _ ->

640− -- The width of the column is the width of the widest child.

641− let

642− childWidth child =

643− child.bbox.width

644− + context.self.bbox.padding.left

645− + context.self.bbox.padding.right

646−

647− textChildren =

648− List.map

649− (\txt ->

650− txt.width

651− + context.self.bbox.padding.left

652− + context.self.bbox.padding.right

653− )

654− context.self.textMetrics

655−

656− allChildren =

657− context.children

658− |> List.map childWidth

659− |> List.append textChildren

660− in

661− listIf

662− [ ( True

663− , expectRoundedEquality

664− { expected = Maybe.withDefault 0 (List.maximum allChildren)

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

666− }

667− )

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

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

670− context.self.bbox.width

671− context.parent.bbox.width

672− )

673− ]

674−

675− Testable.TextColumn _ _ ->

676− -- The width of the column is the width of the widest child.

677− let

678− childWidth child =

679− child.bbox.width

680− + context.self.bbox.padding.left

681− + context.self.bbox.padding.right

682−

683− textChildren =

684− List.map

685− (\txt ->

686− txt.width

687− + context.self.bbox.padding.left

688− + context.self.bbox.padding.right

689− )

690− context.self.textMetrics

691−

692− allChildren =

693− context.children

694− |> List.map childWidth

695− |> List.append textChildren

696− in

697− listIf

698− [ ( True

699− , expectRoundedEquality

700− { expected = Maybe.withDefault 0 (List.maximum allChildren)

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

702− }

703− )

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

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

706− context.self.bbox.width

707− context.parent.bbox.width

708− )

709− ]

710−

711− Testable.Paragraph _ _ ->

712− -- This should be the size it's text,

713− -- unless it takes up all available space, in which case it should wrap.

714− let

715− childWidth child =

716− child.bbox.width

717−

718− totalChildren =

719− context.children

720− |> List.map childWidth

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

722− |> List.sum

723−

724− horizontalPadding =

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

726− in

727− listIf

728− [ ( True

729− , expectRoundedEquality

730− { expected = totalChildren + horizontalPadding

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

732− }

733− )

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

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

736− context.self.bbox.width

737− context.parent.bbox.width

738− )

739− ]

740−

741− Testable.Text _ ->

742− []

743−

744− Testable.Empty ->

745− []

746− }

747−

748−

749−heightHelper maybeMin maybeMax len =

750− let

751− addMin l =

752− case maybeMin of

753− Nothing ->

754− l

755−

756− Just minPx ->

757− l |> Element.minimum minPx

758−

759− addMax l =

760− case maybeMax of

761− Nothing ->

762− l

763−

764− Just maxPx ->

765− l |> Element.maximum maxPx

766−

767− minLabel =

768− case maybeMin of

769− Nothing ->

770− ""

771−

772− Just i ->

773− " min:" ++ String.fromInt i

774−

775− maxLabel =

776− case maybeMax of

777− Nothing ->

778− ""

779−

780− Just i ->

781− " max:" ++ String.fromInt i

782−

783− minMaxTest actualheight =

784− case ( maybeMin, maybeMax ) of

785− ( Nothing, Nothing ) ->

786− True

787−

788− ( Just lower, Nothing ) ->

789− lower <= actualheight

790−

791− ( Just lower, Just higher ) ->

792− lower <= actualheight && actualheight <= higher

793−

794− ( Nothing, Just higher ) ->

795− actualheight <= higher

796− in

797− case len of

798− Minimum m newLen ->

799− heightHelper (Just m) maybeMax newLen

800−

801− Maximum m newLen ->

802− heightHelper maybeMin (Just m) newLen

803−

804− Px val ->

805− -- Pixel values should ignore min and max?

806− Testable.LabeledTest

807− { label = "height " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel

808− , attr =

809− Element.height

810− (Element.px val

811− |> addMin

812− |> addMax

813− )

814− , id = Testable.IsHeight

815− , test =

816− \found ->

817− [ expectRoundedEquality

818− { expected = toFloat val

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

820− }

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

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

823− ]

824− }

825−

826− Fill portion ->

827− Testable.LabeledTest

828− { label = "height fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel

829− , attr =

830− Element.height

831− (Element.fillPortion portion

832− |> addMin

833− |> addMax

834− )

835− , id = Testable.IsHeight

836− , test =

837− \context ->

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

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

840−

841− else

842− let

843− parentAvailableHeight =

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

845− in

846− case context.parentLayout of

847− Testable.IsNearby _ ->

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

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

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

851− )

852−

853− Testable.InColumn ->

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

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

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

857− )

858−

859− Testable.InEl ->

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

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

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

863−

864− _ ->

865− let

866− spacePerPortion =

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

868− in

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

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

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

872− ]

873− }

874−

875− Shrink ->

876− Testable.LabeledTest

877− { label = "height shrink" ++ minLabel ++ maxLabel

878− , attr =

879− Element.height

880− (Element.shrink

881− |> addMin

882− |> addMax

883− )

884− , id = Testable.IsHeight

885− , test =

886− \context ->

887− case context.selfElement of

888− Testable.El _ _ ->

889− let

890− childHeight child =

891− child.bbox.height

892− in

893− if List.isEmpty context.children then

894− -- context.self.textMetrics

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

896− -- |> List.sum

897− -- TODO: apparently the font metrics we have are for the literal characters rendered

898− -- not for the font itself.

899− [ Testable.todo "calculate height from actual text metrics"

900− ]

901−

902− else

903− [ expectRoundedEquality

904− { expected =

905− context.children

906− |> List.map childHeight

907− |> List.sum

908− |> (\h -> h + context.self.bbox.padding.top + context.self.bbox.padding.bottom)

909− , found = context.self.bbox.height

910− }

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

912− context.self.bbox.height

913− context.parent.bbox.height

914− ]

915−

916− Testable.Link _ _ _ ->

917− let

918− childHeight child =

919− child.bbox.height

920− in

921− if List.isEmpty context.children then

922− -- context.self.textMetrics

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

924− -- |> List.sum

925− -- TODO: apparently the font metrics we have are for the literal characters rendered

926− -- not for the font itself.

927− [ Testable.todo "calculate height from actual text metrics"

928− ]

929−

930− else

931− [ expectRoundedEquality

932− { expected =

933− context.children

934− |> List.map childHeight

935− |> List.sum

936− |> (\h -> h + context.self.bbox.padding.top + context.self.bbox.padding.bottom)

937− , found = context.self.bbox.height

938− }

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

940− context.self.bbox.height

941− context.parent.bbox.height

942− ]

943−

944− Testable.Row _ _ ->

945− let

946− childHeight child =

947− child.bbox.height

948− in

949− if List.isEmpty context.children then

950− -- context.self.textMetrics

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

952− -- |> List.sum

953− -- TODO: apparently the font metrics we have are for the literal characters rendered

954− -- not for the font itself.

955− [ Testable.todo "calculate height from actual text metrics" ]

956−

957− else

958− [ expectRoundedEquality

959− { expected =

960− context.children

961− |> List.map childHeight

962− |> List.maximum

963− |> Maybe.withDefault 0

964− |> (\h -> h + context.self.bbox.padding.top + context.self.bbox.padding.bottom)

965− , found = context.self.bbox.height

966− }

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

968− context.self.bbox.height

969− context.parent.bbox.height

970− ]

971−

972− Testable.Column colAttrs _ ->

973− let

974− childHeight child =

975− child.bbox.height

976−

977− totalChildren =

978− context.children

979− |> List.map childHeight

980− |> List.append (List.map Testable.textHeight context.self.textMetrics)

981− |> List.sum

982−

983− verticalPadding =

984− context.self.bbox.padding.top + context.self.bbox.padding.bottom

985−

986− spacingAmount =

987− Testable.getSpacingFromAttributes colAttrs

988−

989− totalSpacing =

990− toFloat spacingAmount * (toFloat (List.length context.children) - 1)

991− in

992− [ expectRoundedEquality

993− { expected = totalChildren + verticalPadding + totalSpacing

994− , found = context.self.bbox.height

995− }

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

997− context.self.bbox.height

998− context.parent.bbox.height

999− ]

1000−

1001− Testable.TextColumn _ _ ->

1002− []

1003−

1004− Testable.Paragraph _ _ ->

1005− []

1006−

1007− Testable.Text _ ->

1008− []

1009−

1010− Testable.Empty ->

1011− []

1012− }

1013−

1014−

1015−width : Length -> Testable.Attr msg

1016−width len =

1017− widthHelper Nothing Nothing len

1018−

1019−

1020−height : Length -> Testable.Attr msg

1021−height len =

1022− heightHelper Nothing Nothing len

1023−

1024−

1025−spacing : Int -> Testable.Attr msg

1026−spacing space =

1027− Testable.Batch

1028− [ Testable.Spacing space

1029− , Testable.LabeledTest

1030− { label = "spacing: " ++ String.fromInt space

1031− , attr = Element.spacing space

1032− , id = Testable.NoId

1033− , test =

1034− \found ->

1035− let

1036− findDistance child total =

1037− List.concatMap

1038− (\otherChild ->

1039− let

1040− horizontal =

1041− round <|

1042− child.bbox.left

1043− - otherChild.bbox.right

1044−

1045− vertical =

1046− round <|

1047− child.bbox.top

1048− - otherChild.bbox.bottom

1049− in

1050− [ if horizontal > 0 then

1051− horizontal

1052−

1053− else

1054− space

1055− , if vertical > 0 then

1056− vertical

1057−

1058− else

1059− space

1060− ]

1061− )

1062− found.children

1063− ++ total

1064−

1065− distances =

1066− List.foldl findDistance [] found.children

1067−

1068− allAreSpaced =

1069− List.foldl

1070− (\x wrong ->

1071− if not (x >= space) then

1072− x :: wrong

1073−

1074− else

1075− wrong

1076− )

1077− []

1078− distances

1079− in

1080− [ Testable.true

1081− ("All children are at least "

1082− ++ String.fromInt space

1083− ++ " pixels apart."

1084− ++ Debug.toString allAreSpaced

1085− ++ " are not though"

1086− )

1087− (allAreSpaced == [])

1088− ]

1089− }

1090− ]

1091−

1092−

1093−{-| alignLeft needs to account for

1094−

1095− - parent padding

1096− - elements to the left

1097− - spacing value

1098−

1099−in order to calculate the expected result.

1100−

1101−Also need parent rendering context if this is to work with wrapped rows in the future.

1102−

1103−All sibling elements

1104−

1105−-}

1106−alignLeft : Testable.Attr msg

1107−alignLeft =

1108− Testable.LabeledTest

1109− { label = "alignLeft"

1110− , attr = Element.alignLeft

1111− , id = Testable.NoId

1112− , test =

1113− \found ->

1114− [ if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

1115− Testable.true "alignLeft doesn't apply to elements that are onLeft or onRight" True

1116−

1117− else if

1118− List.member found.parentLayout

1119− [ Testable.IsNearby Testable.InFront

1120− , Testable.IsNearby Testable.Behind

1121− , Testable.IsNearby Testable.Above

1122− , Testable.IsNearby Testable.Below

1123− ]

1124− then

1125− expectRoundedEquality

1126− { found = found.self.bbox.left

1127− , expected = found.parent.bbox.left

1128− }

1129−

1130− else if List.length found.siblings == 0 then

1131− expectRoundedEquality

1132− { found = found.self.bbox.left

1133− , expected = found.parent.bbox.left + found.parent.bbox.padding.left

1134− }

1135−

1136− else

1137− case found.parentLayout of

1138− Testable.InRow ->

1139− let

1140− siblingsOnLeft =

1141− List.filter (\x -> x.bbox.right < found.self.bbox.left) found.siblings

1142−

1143− spacings =

1144− toFloat (List.length siblingsOnLeft * found.parentSpacing)

1145−

1146− widthsOnLeft =

1147− siblingsOnLeft

1148− |> List.map (.width << .bbox)

1149− |> List.sum

1150− in

1151− expectRoundedEquality

1152− { found = found.self.bbox.left

1153− , expected = found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings)

1154− }

1155−

1156− _ ->

1157− expectRoundedEquality

1158− { found = found.self.bbox.left

1159− , expected = found.parent.bbox.left + found.parent.bbox.padding.left

1160− }

1161− ]

1162− }

1163−

1164−

1165−{-| -}

1166−centerX : Testable.Attr msg

1167−centerX =

1168− Testable.LabeledTest

1169− { label = "centerX"

1170− , attr = Element.centerX

1171− , id = Testable.NoId

1172− , test =

1173− \found ->

1174− let

1175− selfCenter : Float

1176− selfCenter =

1177− found.self.bbox.left + (found.self.bbox.width / 2)

1178−

1179− parentCenter : Float

1180− parentCenter =

1181− found.parent.bbox.left + (found.parent.bbox.width / 2)

1182− in

1183− if List.member found.parentLayout [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then

1184− [ Testable.true "centerX doesn't apply to elements that are onLeft or onRight" True ]

1185−

1186− else if List.length found.siblings == 0 then

1187− [ expectRoundedEquality

1188− { found = selfCenter

1189− , expected = parentCenter

1190− }

1191− ]

1192−

1193− else

1194− case found.parentLayout of

1195− Testable.InRow ->

1196− let

1197− siblingsOnLeft =

1198− List.filter (\x -> x.bbox.right < found.self.bbox.left) found.siblings

1199−

1200− siblingsOnRight =

1201− List.filter (\x -> x.bbox.left > found.self.bbox.right) found.siblings

1202−

1203− widthsOnLeft : Float

1204− widthsOnLeft =

1205− siblingsOnLeft

1206− |> List.map (.width << .bbox)

1207− |> List.sum

1208− |> (\x -> x + (toFloat (List.length siblingsOnLeft) * toFloat found.parentSpacing))

1209−

1210− widthsOnRight =

1211− siblingsOnRight

1212− |> List.map (.width << .bbox)

1213− |> List.sum

1214− |> (\x -> x + (toFloat (List.length siblingsOnRight) * toFloat found.parentSpacing))

1215−

1216− expectedCenter : Float

1217− expectedCenter =

1218− found.parent.bbox.left

1219− + widthsOnLeft

1220− + ((found.parent.bbox.width - (widthsOnRight + widthsOnLeft))

1221− / 2

1222− )

1223− in

1224− [ expectRoundedEquality

1225− { found = selfCenter

1226− , expected = expectedCenter

1227− }

1228− ]

1229−

1230− _ ->

1231− [ expectRoundedEquality

1232− { found = selfCenter

1233− , expected = parentCenter

1234− }

1235− ]

1236− }

1237−

1238−

1239−{-| -}

1240−alignRight : Testable.Attr msg

1241−alignRight =

1242− Testable.LabeledTest

1243− { label = "alignRight"

1244− , attr = Element.alignRight

1245− , id = Testable.NoId

1246− , test =

1247− \found ->

1248− if List.member found.parentLayout [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

1249− [ Testable.true "alignRight doesn't apply to elements that are onLeft or onRight" True ]

1250−

1251− else if

1252− List.member found.parentLayout

1253− [ Testable.IsNearby Testable.InFront

1254− , Testable.IsNearby Testable.Behind

1255− , Testable.IsNearby Testable.Above

1256− , Testable.IsNearby Testable.Below

1257− ]

1258− then

1259− [ expectRoundedEquality

1260− { found = found.self.bbox.right

1261− , expected = found.parent.bbox.right

1262− }

1263− ]

1264−

1265− else if List.length found.siblings == 0 then

1266− [ expectRoundedEquality

1267− { found = found.self.bbox.right

1268− , expected = found.parent.bbox.right + found.parent.bbox.padding.right

1269− }

1270− ]

1271−

1272− else

1273− case found.parentLayout of

1274− Testable.InRow ->

1275− let

1276− siblingsOnRight =

1277− List.filter (\x -> x.bbox.left > found.self.bbox.right) found.siblings

1278−

1279− spacings =

1280− toFloat (List.length siblingsOnRight * found.parentSpacing)

1281−

1282− widthsOnRight =

1283− siblingsOnRight

1284− |> List.map (.width << .bbox)

1285− |> List.sum

1286− in

1287− [ expectRoundedEquality

1288− { found = found.self.bbox.right

1289− , expected = found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings)

1290− }

1291− ]

1292−

1293− _ ->

1294− [ expectRoundedEquality

1295− { found = found.self.bbox.right

1296− , expected = found.parent.bbox.right + found.parent.bbox.padding.right

1297− }

1298− ]

1299− }

1300−

1301−

1302−{-| -}

1303−alignTop : Testable.Attr msg

1304−alignTop =

1305− Testable.LabeledTest

1306− { label = "alignTop"

1307− , attr = Element.alignTop

1308− , id = Testable.NoId

1309− , test =

1310− \found ->

1311− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

1312− [ Testable.true "alignTop doesn't apply to elements that are above or below" True ]

1313−

1314− else if

1315− List.member found.parentLayout

1316− [ Testable.IsNearby Testable.InFront

1317− , Testable.IsNearby Testable.Behind

1318− , Testable.IsNearby Testable.OnRight

1319− , Testable.IsNearby Testable.OnLeft

1320− ]

1321− then

1322− [ expectRoundedEquality

1323− { found = found.self.bbox.top

1324− , expected = found.parent.bbox.top

1325− }

1326− ]

1327−

1328− else if List.length found.siblings == 0 then

1329− [ expectRoundedEquality

1330− { found = found.self.bbox.top

1331− , expected = found.parent.bbox.top + found.parent.bbox.padding.top

1332− }

1333− ]

1334−

1335− else

1336− case found.parentLayout of

1337− Testable.InColumn ->

1338− let

1339− siblingsAbove =

1340− List.filter (\x -> x.bbox.bottom < found.self.bbox.top) found.siblings

1341−

1342− spacings =

1343− toFloat (List.length siblingsAbove * found.parentSpacing)

1344−

1345− heightsAbove =

1346− siblingsAbove

1347− |> List.map (.height << .bbox)

1348− |> List.sum

1349− in

1350− [ expectRoundedEquality

1351− { found = found.self.bbox.top

1352− , expected = found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings)

1353− }

1354− ]

1355−

1356− _ ->

1357− [ expectRoundedEquality

1358− { found = found.self.bbox.top

1359− , expected = found.parent.bbox.top

1360− }

1361− ]

1362− }

1363−

1364−

1365−{-| -}

1366−alignBottom : Testable.Attr msg

1367−alignBottom =

1368− Testable.LabeledTest

1369− { label = "alignBottom"

1370− , attr = Element.alignBottom

1371− , id = Testable.NoId

1372− , test =

1373− \found ->

1374− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

1375− [ Testable.true "alignBottom doesn't apply to elements that are above or below" True ]

1376−

1377− else if

1378− List.member found.parentLayout

1379− [ Testable.IsNearby Testable.InFront

1380− , Testable.IsNearby Testable.Behind

1381− , Testable.IsNearby Testable.OnRight

1382− , Testable.IsNearby Testable.OnLeft

1383− ]

1384− then

1385− [ expectRoundedEquality

1386− { found = found.self.bbox.bottom

1387− , expected = found.parent.bbox.bottom

1388− }

1389− ]

1390−

1391− else if List.length found.siblings == 0 then

1392− [ expectRoundedEquality

1393− { found = found.self.bbox.bottom

1394− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom

1395− }

1396− ]

1397−

1398− else

1399− case found.parentLayout of

1400− Testable.InColumn ->

1401− let

1402− siblingsBelow =

1403− List.filter (\x -> x.bbox.top > found.self.bbox.bottom) found.siblings

1404−

1405− spacings =

1406− toFloat (List.length siblingsBelow * found.parentSpacing)

1407−

1408− heightsBelow =

1409− siblingsBelow

1410− |> List.map (.height << .bbox)

1411− |> List.sum

1412− in

1413− [ expectRoundedEquality

1414− { found = found.self.bbox.bottom

1415− , expected = found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings)

1416− }

1417− ]

1418−

1419− _ ->

1420− [ expectRoundedEquality

1421− { found = found.self.bbox.bottom

1422− , expected = found.parent.bbox.bottom + found.parent.bbox.padding.bottom

1423− }

1424− ]

1425− }

1426−

1427−

1428−expectRoundedEquality : { expected : Float, found : Float } -> Testable.LayoutExpectation

1429−expectRoundedEquality { expected, found } =

1430− Testable.true

1431− ("expected " ++ floatToString expected ++ ", found " ++ floatToString found)

1432− (abs (expected - found) < 1)

1433−

1434−

1435−floatToString : Float -> String

1436−floatToString x =

1437− String.fromFloat (toFloat (round (x * 100)) / 100)

1438−

1439−

1440−{-| -}

1441−centerY : Testable.Attr msg

1442−centerY =

1443− Testable.LabeledTest

1444− { label = "centerY"

1445− , attr = Element.centerY

1446− , id = Testable.NoId

1447− , test =

1448− \found ->

1449− let

1450− selfCenter =

1451− found.self.bbox.top + (found.self.bbox.height / 2)

1452−

1453− parentCenter =

1454− found.parent.bbox.top + (found.parent.bbox.height / 2)

1455− in

1456− if List.member found.parentLayout [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

1457− [ Testable.true "centerY doesn't apply to elements that are above or below" True ]

1458−

1459− else if List.length found.siblings == 0 then

1460− [ expectRoundedEquality

1461− { found = selfCenter

1462− , expected = parentCenter

1463− }

1464− ]

1465−

1466− else

1467− case found.parentLayout of

1468− Testable.InColumn ->

1469− let

1470− siblingsOnTop =

1471− List.filter (\x -> x.bbox.bottom < found.self.bbox.top) found.siblings

1472−

1473− siblingsBelow =

1474− List.filter (\x -> x.bbox.top > found.self.bbox.bottom) found.siblings

1475−

1476− heightsAbove : Float

1477− heightsAbove =

1478− siblingsOnTop

1479− |> List.map (.height << .bbox)

1480− |> List.sum

1481− |> (\x -> x + (toFloat (List.length siblingsOnTop) * toFloat found.parentSpacing))

1482−

1483− heightsBelow =

1484− siblingsBelow

1485− |> List.map (.height << .bbox)

1486− |> List.sum

1487− |> (\x -> x + (toFloat (List.length siblingsBelow) * toFloat found.parentSpacing))

1488−

1489− expectedCenter : Float

1490− expectedCenter =

1491− found.parent.bbox.top

1492− + heightsAbove

1493− + ((found.parent.bbox.height - (heightsBelow + heightsAbove))

1494− / 2

1495− )

1496− in

1497− [ expectRoundedEquality

1498− { found = selfCenter

1499− , expected = expectedCenter

1500− }

1501− ]

1502−

1503− _ ->

1504− [ expectRoundedEquality

1505− { found = selfCenter

1506− , expected = parentCenter

1507− }

1508− ]

1509− }

1510−

1511−

1512−{-| -}

1513−above : Testable.Element msg -> Testable.Attr msg

1514−above element =

1515− Testable.Nearby

1516− { location = Testable.Above

1517− , element = element

1518− , label = "above"

1519− , test =

1520− \found ->

1521− [ expectRoundedEquality

1522− { found = found.self.bbox.bottom

1523− , expected = found.parent.bbox.top

1524− }

1525− ]

1526− }

1527−

1528−

1529−{-| -}

1530−below : Testable.Element msg -> Testable.Attr msg

1531−below element =

1532− Testable.Nearby

1533− { location = Testable.Below

1534− , element = element

1535− , label = "below"

1536− , test =

1537− \found ->

1538− [ expectRoundedEquality

1539− { found = found.self.bbox.top

1540− , expected = found.parent.bbox.bottom

1541− }

1542− ]

1543− }

1544−

1545−

1546−{-| -}

1547−onRight : Testable.Element msg -> Testable.Attr msg

1548−onRight element =

1549− Testable.Nearby

1550− { location = Testable.OnRight

1551− , element = element

1552− , label = "onRight"

1553− , test =

1554− \found ->

1555− [ expectRoundedEquality

1556− { found = found.self.bbox.left

1557− , expected = found.parent.bbox.right

1558− }

1559− ]

1560− }

1561−

1562−

1563−{-| -}

1564−onLeft : Testable.Element msg -> Testable.Attr msg

1565−onLeft element =

1566− Testable.Nearby

1567− { location = Testable.OnLeft

1568− , element = element

1569− , label = "onLeft"

1570− , test =

1571− \found ->

1572− [ expectRoundedEquality

1573− { found = found.self.bbox.right

1574− , expected = found.parent.bbox.left

1575− }

1576− ]

1577− }

1578−

1579−

1580−compare x vs y =

1581− vs (round x) (round y) || vs (floor x) (floor y)

1582−

1583−

1584−{-| -}

1585−inFront : Testable.Element msg -> Testable.Attr msg

1586−inFront element =

1587− Testable.Nearby

1588− { location = Testable.InFront

1589− , element = element

1590− , label = "inFront"

1591− , test =

1592− \found ->

1593− [ withinHelper found ]

1594− }

1595−

1596−

1597−withinHelper found =

1598− let

1599− horizontalCheck =

1600− if found.self.bbox.width > found.parent.bbox.width then

1601− [ compare found.self.bbox.right (<=) found.parent.bbox.right

1602− || compare found.self.bbox.left (>=) found.parent.bbox.left

1603− ]

1604−

1605− else

1606− [ compare found.self.bbox.right (<=) found.parent.bbox.right

1607− , compare found.self.bbox.left (>=) found.parent.bbox.left

1608− ]

1609−

1610− verticalCheck =

1611− if found.self.bbox.width > found.parent.bbox.width then

1612− [ compare found.self.bbox.top (>=) found.parent.bbox.top

1613− || compare found.self.bbox.bottom (<=) found.parent.bbox.bottom

1614− ]

1615−

1616− else

1617− [ compare found.self.bbox.top (>=) found.parent.bbox.top

1618− , compare found.self.bbox.bottom (<=) found.parent.bbox.bottom

1619− ]

1620− in

1621− Testable.true "within the confines of the parent"

1622− (List.all ((==) True)

1623− (List.concat

1624− [ horizontalCheck

1625− , verticalCheck

1626− ]

1627− )

1628− )

1629−

1630−

1631−{-| -}

1632−behindContent : Testable.Element msg -> Testable.Attr msg

1633−behindContent element =

1634− Testable.Nearby

1635− { location = Testable.Behind

1636− , element = element

1637− , label = "behindContent"

1638− , test =

1639− \found ->

1640− [ withinHelper found ]

1641− }

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/Border.elmdeleted−20

@@ -1,20 +0,0 @@

1−module Testable.Element.Border exposing (..)

2−

3−{-| -}

4−

5−import Dict

6−import Element exposing (Color)

7−import Element.Border as Border

8−import Element.Font as Font

9−import Expect

10−import Testable

11−

12−

13−color : Color -> Testable.Attr msg

14−color clr =

15− Testable.Attr (Border.color clr)

16−

17−

18−width : Int -> Testable.Attr msg

19−width i =

20− Testable.Attr (Border.width i)

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

@@ -1,607 +0,0 @@

1−port module Testable.Runner exposing

2− ( Msg

3− , Testable

4− , TestableProgram

5− , program

6− , rename

7− , show

8− , testable

9− )

10−

11−{-| -}

12−

13−import Browser

14−import Dict exposing (Dict)

15−import Element

16−import Element.Background as Background

17−import Element.Border as Border

18−import Element.Events as Events

19−import Element.Font as Font

20−import Html exposing (Html)

21−import Html.Attributes

22−import Process

23−import Task

24−import Testable

25−import Time

26−

27−

28−show : Testable.Element msg -> Html msg

29−show =

30− Testable.toHtml

31−

32−

33−type alias TestableProgram =

34− Program () (Model Msg) Msg

35−

36−

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−

53−palette =

54− { white = Element.rgb 1 1 1

55− , red = Element.rgb 1 0 0

56− , green = Element.rgb 0 1 0

57− , black = Element.rgb 0 0 0

58− , lightGrey = Element.rgb 0.7 0.7 0.7

59− }

60−

61−

62−program : List Testable -> TestableProgram

63−program tests =

64− let

65− ( current, upcoming ) =

66− case tests of

67− [] ->

68− ( Nothing, [] )

69−

70− cur :: remaining ->

71− ( Just cur, remaining )

72− in

73− Browser.element

74− { init =

75− always

76− ( { current = current

77− , upcoming = upcoming

78− , finished = []

79− , selected = 0

80− , highlightDomId = Nothing

81− }

82− , Task.perform (always Analyze)

83− (Process.sleep 64

84− |> Task.andThen

85− (always Time.now)

86− )

87− )

88− , view = view

89− , update = update

90− , subscriptions = subscriptions

91− }

92−

93−

94−subscriptions : Model Msg -> Sub Msg

95−subscriptions model =

96− Sub.batch

97− [ styles RefreshBoundingBox

98− ]

99−

100−

101−type alias Model msg =

102− { current : Maybe ( String, Testable.Element msg )

103− , upcoming : List ( String, Testable.Element msg )

104− , finished : List (WithResults (Testable.Element msg))

105− , selected : Int

106− , highlightDomId : Maybe String

107− }

108−

109−

110−type alias WithResults thing =

111− { index : Int

112− , element : thing

113− , label : String

114− , results :

115− List Testable.LayoutTest

116− }

117−

118−

119−encodeForReport :

120− List (WithResults (Testable.Element msg))

121− ->

122− List

123− { label : String

124− , results :

125− List

126− { description : String

127− , passing : Bool

128− , todo : Bool

129− }

130− }

131−encodeForReport withResults =

132− let

133− prepareExpectation layoutTest exp =

134− case exp of

135− Testable.Todo description ->

136− { description = description

137− , passing = False

138− , todo = True

139− }

140−

141− Testable.Expect details ->

142− { description = details.description

143− , passing = details.result

144− , todo = False

145− }

146−

147− prepareNode layoutTest =

148− List.map (prepareExpectation layoutTest) layoutTest.expectations

149−

150− prepare { label, results } =

151− { label = label

152− , results = List.concatMap prepareNode results

153− }

154− in

155− List.map prepare withResults

156−

157−

158−type Msg

159− = NoOp

160− | Analyze

161− | Select Int

162− | HighlightDomID (Maybe String)

163− | RefreshBoundingBox

164− (List

165− { id : String

166− , bbox : Testable.BoundingBox

167− , style : List ( String, String )

168− , isVisible : Bool

169− , textMetrics : List Testable.TextMetrics

170− }

171− )

172−

173−

174−runTest : Int -> Dict String Testable.Found -> String -> Testable.Element msg -> WithResults (Testable.Element msg)

175−runTest index boxes label element =

176− let

177− results =

178− Testable.runTests boxes element

179− in

180− { index = index

181− , element = element

182− , label = label

183− , results = results

184− }

185−

186−

187−update : Msg -> Model Msg -> ( Model Msg, Cmd Msg )

188−update msg model =

189− case msg of

190− NoOp ->

191− ( model, Cmd.none )

192−

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

204− case model.current of

205− Nothing ->

206− ( model

207− , Cmd.none

208− )

209−

210− Just ( label, current ) ->

211− let

212− toTuple box =

213− ( box.id

214− , { style = Dict.fromList box.style

215− , bbox = box.bbox

216− , isVisible = box.isVisible

217− , textMetrics = box.textMetrics

218− }

219− )

220−

221− foundData =

222− boxes

223− |> List.map toTuple

224− |> Dict.fromList

225−

226− currentResults =

227− runTest (List.length model.finished) foundData label current

228− in

229− case model.upcoming of

230− [] ->

231− ( { model

232− | current = Nothing

233− , finished = model.finished ++ [ currentResults ]

234− }

235− , report (encodeForReport (currentResults :: model.finished))

236− )

237−

238− newCurrent :: remaining ->

239− ( { model

240− | finished = model.finished ++ [ currentResults ]

241− , current = Just newCurrent

242− , upcoming = remaining

243− }

244− , Task.perform (always Analyze)

245− (Process.sleep 64

246− |> Task.andThen

247− (always Time.now)

248− )

249− )

250−

251− Analyze ->

252− case model.current of

253− Nothing ->

254− ( model

255− , Cmd.none

256− )

257−

258− Just ( label, current ) ->

259− ( model

260− , analyze (Testable.getIds current)

261− )

262−

263−

264−view : Model Msg -> Html.Html Msg

265−view model =

266− case model.current of

267− Nothing ->

268− if List.isEmpty model.upcoming then

269− let

270− selected =

271− getByIndex model.selected model.finished

272− in

273− Element.layout

274− [ Font.size 16

275− , Element.inFront (Element.html (viewElementHighlight model))

276− , Element.height Element.fill

277− ]

278− <|

279− Element.row [ Element.width Element.fill, Element.height Element.fill ]

280− [ Element.el

281− [ Element.width

282− (Element.fill

283− |> Element.maximum 900

284− )

285− , Element.alignTop

286− , Element.height Element.fill

287− , Element.scrollbars

288− ]

289− (Element.el

290− [ Element.centerX

291− , Element.padding 100

292− , Border.dashed

293− , Border.width 2

294− , Border.color palette.lightGrey

295− , Font.size 20

296− , Element.inFront

297− (Element.el

298− [ Font.size 14

299− , Font.color palette.lightGrey

300− ]

301− (Element.text "test case")

302− )

303− ]

304− (case selected of

305− Nothing ->

306− Element.text "nothing selected"

307−

308− Just sel ->

309− Testable.toElement sel.element

310− )

311− )

312− , Element.column

313− [ Element.spacing 20

314− , Element.padding 20

315− , Element.width Element.fill

316− , Element.height Element.fill

317− , Element.scrollbarY

318− ]

319− (model.finished

320− |> List.sortBy hasFailure

321− |> List.map (viewResult model.selected)

322− )

323− ]

324−

325− else

326− Html.text ""

327−

328− Just ( label, current ) ->

329− Testable.toHtml current

330−

331−

332−getByIndex i ls =

333− List.foldl

334− (\elem ( index, found ) ->

335− if i == index then

336− ( index + 1, Just elem )

337−

338− else

339− ( index + 1, found )

340− )

341− ( 0, Nothing )

342− ls

343− |> Tuple.second

344−

345−

346−viewElementHighlight model =

347− case model.highlightDomId of

348− Nothing ->

349− Html.text ""

350−

351− Just highlightDomId ->

352− let

353− elementHighlight =

354− highlightDomId ++ " { outline: solid black; }"

355−

356− testId =

357− highlightDomId

358− |> String.dropLeft 1

359− |> String.append "#tests-"

360−

361− testHighlight =

362− testId ++ " { outline: dashed black; }"

363−

364− styleSheet =

365− String.join "\n"

366− [ elementHighlight

367− , testHighlight

368− ]

369− in

370− Html.node "style"

371− []

372− [ Html.text styleSheet

373− ]

374−

375−

376−hasFailure : WithResults (Testable.Element Msg) -> Int

377−hasFailure myTest =

378− if

379− List.any

380− (not << isPassing)

381− myTest.results

382− then

383− 0

384−

385− else

386− 1

387−

388−

389−isExpectationPassing result =

390− case result of

391− Testable.Todo label ->

392− True

393−

394− Testable.Expect details ->

395− details.result

396−

397−

398−isPassing layoutTest =

399− List.all isExpectationPassing layoutTest.expectations

400−

401−

402−viewResult : Int -> WithResults (Testable.Element Msg) -> Element.Element Msg

403−viewResult selectedIndex myTest =

404− if myTest.index == selectedIndex then

405− Element.column

406− [ Element.alignLeft

407− , Element.spacing 16

408− ]

409− [ Element.el [ Font.size 24 ] (Element.text myTest.label)

410− , Element.column

411− [ Element.alignLeft, Element.spacing 16 ]

412− (myTest.results

413− |> groupBy .elementDomId

414− |> List.map (expandDetails >> viewLayoutTestGroup)

415− )

416− ]

417−

418− else

419− let

420− ( passing, failing ) =

421− List.partition isPassing myTest.results

422− in

423− Element.column

424− [ Element.alignLeft

425− , Element.spacing 16

426− , Element.pointer

427− , Events.onClick (Select myTest.index)

428− ]

429− [ Element.row [ Element.spacing 16 ]

430− [ Element.el [ Font.size 16 ] (Element.text myTest.label)

431− , Element.text (String.fromInt (List.length passing) ++ " passing")

432− , let

433− failingCount =

434− List.length failing

435− in

436− if failingCount == 0 then

437− Element.none

438−

439− else

440− Element.text (String.fromInt (List.length failing) ++ " failing")

441− ]

442− ]

443−

444−

445−expandDetails group =

446− case group.members of

447− [] ->

448− { id = group.id

449− , elementType = Testable.EmptyType

450− , members = group.members

451− }

452−

453− top :: _ ->

454− { id = group.id

455− , elementType = top.elementType

456− , members = group.members

457− }

458−

459−

460−groupBy fn list =

461− groupWhile (\one two -> fn one == fn two) list

462− |> List.map

463− (\( fst, remaining ) ->

464− { id = fn fst

465− , members = fst :: remaining

466− }

467− )

468−

469−

470−groupWhile : (a -> a -> Bool) -> List a -> List ( a, List a )

471−groupWhile isSameGroup items =

472− List.foldr

473− (\x acc ->

474− case acc of

475− [] ->

476− [ ( x, [] ) ]

477−

478− ( y, restOfGroup ) :: groups ->

479− if isSameGroup x y then

480− ( x, y :: restOfGroup ) :: groups

481−

482− else

483− ( x, [] ) :: acc

484− )

485− []

486− items

487−

488−

489−viewLayoutTestGroup group =

490− let

491− testId =

492− group.id

493− |> String.dropLeft 1

494− |> String.append "tests-"

495− in

496− Element.column

497− [ Element.spacing 8

498− , Element.htmlAttribute (Html.Attributes.id testId)

499− , Events.onMouseEnter (HighlightDomID (Just group.id))

500− , Events.onMouseLeave (HighlightDomID Nothing)

501− , Element.htmlAttribute (Html.Attributes.style "user-select" "none")

502− ]

503− [ Element.row [ Element.spacing 16 ]

504− [ Element.el [] (Element.text (Testable.elementTypeToString group.elementType))

505− , Element.el [ Font.color palette.lightGrey ] (Element.text group.id)

506− ]

507− , Element.column

508− [ Element.spacing 8

509− , Element.paddingXY 32 0

510− ]

511− (List.map viewLayoutTest group.members)

512− ]

513−

514−

515−type alias Grouped thing =

516− { id : String

517− , members : List thing

518− }

519−

520−

521−viewLayoutTest layoutTest =

522− Element.column

523− [ Element.spacing 8

524− ]

525− [ Element.row [ Element.spacing 8 ]

526− [ Element.el [ Font.bold ] (Element.text layoutTest.label)

527−

528− -- , Element.el [ Font.color palette.lightGrey ] (Element.text layoutTest.elementDomId)

529− ]

530− , Element.column [ Element.spacing 8 ]

531− (List.map viewLayoutExpectation layoutTest.expectations)

532− ]

533−

534−

535−viewLayoutExpectation expectation =

536− case expectation of

537− Testable.Todo label ->

538− Element.row [ Element.spacing 4 ]

539− [ todo, Element.text label ]

540−

541− Testable.Expect details ->

542− if details.result then

543− Element.row [ Element.spacing 4 ]

544− [ pass, Element.text details.description ]

545−

546− else

547− Element.row [ Element.spacing 4 ]

548− [ fail, Element.text details.description ]

549−

550−

551−badge color text =

552− Element.el

553− [ Background.color color

554− , Font.color palette.black

555− , Element.paddingXY 4 8

556− , Border.rounded 2

557− ]

558− (Element.text text)

559−

560−

561−todo =

562− badge palette.lightGrey "todo"

563−

564−

565−pass =

566− badge palette.green "pass"

567−

568−

569−fail =

570− badge palette.red "fail"

571−

572−

573−formatKeyValue : String -> String -> String

574−formatKeyValue key val =

575− key ++ ": " ++ val

576−

577−

578−port report :

579− List

580− { label : String

581− , results :

582− List

583− { description : String

584− , passing : Bool

585− , todo : Bool

586− }

587− }

588− -> Cmd msg

589−

590−

591−port test : String -> Cmd msg

592−

593−

594−port analyze : List String -> Cmd msg

595−

596−

597−port styles :

598− (List

599− { id : String

600− , bbox : Testable.BoundingBox

601− , style : List ( String, String )

602− , isVisible : Bool

603− , textMetrics : List Testable.TextMetrics

604− }

605− -> msg

606− )

607− -> Sub msg

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/Nearby.elmdeleted−179

@@ -1,179 +0,0 @@

1−module Tests.Nearby exposing (view)

2−

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

4−-}

5−

6−import Html

7−import Testable

8−import Testable.Element exposing (..)

9−import Testable.Element.Background as Background

10−import Testable.Element.Font as Font

11−import Testable.Generator

12−import Testable.Runner

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

14−

15−

16−box attrs =

17− el

18− ([ width (px 50)

19− , height (px 50)

20− , Background.color blue

21− ]

22− ++ attrs

23− )

24− none

25−

26−

27−justBox size color attrs =

28− el

29− ([ width (px size)

30− , height (px size)

31− , Background.color color

32− ]

33− ++ attrs

34− )

35− none

36−

37−

38−littleBox name attrs =

39− el

40− ([ label name

41− , width (px 5)

42− , height (px 5)

43− ]

44− ++ attrs

45− )

46− none

47−

48−

49−p attrs =

50− paragraph

51− ([ Background.color blue

52− , Font.color white

53− , padding 20

54− ]

55− ++ attrs

56− )

57− [ text "Lorem Ipsum or something or other." ]

58−

59−

60−{-| -}

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

62−view =

63− List.concat

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

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

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

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

68− ]

69− , Testable.Generator.generate "Nearbys"

70− (\element nearby ->

71− element

72− [ nearby (box [])

73− , width (px 200)

74− , height (px 200)

75− , Background.color red

76− ]

77− none

78− )

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

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

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

82− (\element nearby align ->

83− element

84− [ nearby (box [ align ])

85− , width (px 200)

86− , height (px 200)

87− , Background.color red

88− ]

89− none

90− )

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

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

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

94− ]

95−

96−

97−layeredVisibility =

98− el

99− [ centerX

100− , inFront (justBox 40 red [ isVisible ])

101− ]

102− (el [ inFront (justBox 30 green []) ]

103− (justBox 50 blue [])

104− )

105−

106−

107−overlappingChildren =

108− row [ centerX ]

109− [ el [ inFront (justBox 40 green []) ]

110− (justBox 40 darkGrey [])

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

112− (justBox 40 darkGrey [])

113− ]

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

7−import Testable.Runner

8−

9−

10−main : Testable.Runner.TestableProgram

11−main =

12− Testable.Runner.program

13− [ Testable.Runner.rename " El In Fixed Height Column" ElInFixedHeightColumn.view

14− ]

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/Flags.elmdeleted−78

@@ -1,78 +0,0 @@

1−module Flags exposing (suite)

2−

3−{-| -}

4−

5−import Expect

6−import Internal.Flag as Flag

7−import Test

8−

9−

10−suite =

11− Test.describe "Flag Operations"

12− [ Test.test "All Flags Invalidate Themselves" <|

13− \_ ->

14− Expect.equal True (List.all (\flag -> Flag.present flag (Flag.add flag Flag.none)) allFlags)

15− , Test.test "All Flags don't interfere with each other" <|

16− \_ ->

17− Expect.equal True (List.all (doesntInvalidateOthers allFlags) allFlags)

18− ]

19−

20−

21−doesntInvalidateOthers others flag =

22− let

23− withFlag =

24− Flag.none

25− |> Flag.add flag

26− in

27− List.all identity <|

28− List.map

29− (\otherFlag ->

30− Flag.present otherFlag (Flag.add otherFlag withFlag)

31− )

32− others

33−

34−

35−allFlags =

36− [ Flag.transparency

37− , Flag.padding

38− , Flag.spacing

39− , Flag.fontSize

40− , Flag.fontFamily

41− , Flag.width

42− , Flag.height

43− , Flag.bgColor

44− , Flag.bgImage

45− , Flag.bgGradient

46− , Flag.borderStyle

47− , Flag.fontAlignment

48− , Flag.fontWeight

49− , Flag.fontColor

50− , Flag.wordSpacing

51− , Flag.letterSpacing

52− , Flag.borderRound

53− , Flag.shadows

54− , Flag.overflow

55− , Flag.cursor

56− , Flag.scale

57− , Flag.rotate

58− , Flag.moveX

59− , Flag.moveY

60− , Flag.borderWidth

61− , Flag.borderColor

62− , Flag.yAlign

63− , Flag.xAlign

64− , Flag.focus

65− , Flag.active

66− , Flag.hover

67− , Flag.gridTemplate

68− , Flag.gridPosition

69− , Flag.heightContent

70− , Flag.heightFill

71− , Flag.widthContent

72− , Flag.widthFill

73− , Flag.alignRight

74− , Flag.alignBottom

75− , Flag.centerX

76− , Flag.centerY

77− , Flag.fontVariant

78− ]

tests/Tests/Basic.elmnew file+54

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

1+module Tests.Basic exposing (view)

2+

3+{-| -}

4+

5+import Element as Actual

6+import Html

7+import Testable

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

9+import Testable.Element.Background as Background

10+import Testable.Element.Font as Font

11+import Testable.Runner

12+import Tests.Palette as Palette

13+

14+

15+{-| -}

16+main : Html.Html msg

17+main =

18+ Testable.Runner.show view

19+

20+

21+{-| -}

22+view : Testable.Element msg

23+view =

24+ row [ spacing 50, alignTop ]

25+ [ el

26+ [ width (px 200)

27+ , height (px 200)

28+ , Background.color Palette.blue

29+ , Font.color Palette.white

30+ ]

31+ (text "Hello!")

32+ , el

33+ [ width (px 200)

34+ , height (px 200)

35+ , Background.color Palette.blue

36+ , Font.color Palette.white

37+ ]

38+ (text "Hello!")

39+ , el

40+ [ width (px 200)

41+ , height (px 200)

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

43+ , Font.color Palette.white

44+ , below

45+ (el

46+ [ Background.color Palette.grey

47+ , width (px 50)

48+ , height (px 50)

49+ ]

50+ none

51+ )

52+ ]

53+ (text "Hello!")

54+ ]

tests/Tests/ColumnAlignment.elmnew file+176

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

1+module Tests.ColumnAlignment exposing (..)

2+

3+import Html

4+import Testable

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

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

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

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+container =

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

31+

32+

33+view =

34+ let

35+ colContainer attrs children =

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

37+

38+ tallContainer attrs children =

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

40+ in

41+ column

42+ [ width fill, spacing 20 ]

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

44+ , row [ spacing 20 ]

45+ [ colContainer []

46+ [ box [] ]

47+ , colContainer []

48+ [ box [ centerY ]

49+ ]

50+ , colContainer []

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

52+ ]

53+ ]

54+ , row [ spacing 20 ]

55+ [ colContainer []

56+ [ box [] ]

57+ , colContainer []

58+ [ box []

59+ , box []

60+ , box []

61+ ]

62+ , colContainer []

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

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

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

66+ ]

67+ ]

68+ , row [ spacing 20 ]

69+ [ colContainer []

70+ [ box []

71+ , box []

72+ , box []

73+ ]

74+ , colContainer []

75+ [ box []

76+ , box []

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

78+ ]

79+ , colContainer []

80+ [ box []

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

82+ , box []

83+ ]

84+ , colContainer []

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

86+ , box []

87+ , box []

88+ ]

89+ ]

90+ , text "centerY"

91+ , row [ spacing 20 ]

92+ [ colContainer [ height fill ]

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

94+ ]

95+ , colContainer []

96+ [ box []

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

98+ , box []

99+ ]

100+ , colContainer []

101+ [ box []

102+ , box []

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

104+ ]

105+ ]

106+ , text "multiple centerY"

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

108+ [ tallContainer []

109+ [ box []

110+ , box [ centerY ]

111+ , box [ centerY ]

112+ , box [ centerY ]

113+ , box [ centerY ]

114+ , box [ alignBottom ]

115+ ]

116+ , tallContainer []

117+ [ box []

118+ , box [ centerY ]

119+ , box []

120+ ]

121+ , tallContainer []

122+ [ box []

123+ , box []

124+ , box [ centerY ]

125+ ]

126+ ]

127+ , text "top, center, bottom"

128+ , row [ spacing 20 ]

129+ [ colContainer []

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

131+ , box []

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

133+ ]

134+ , colContainer []

135+ [ box [ alignTop ]

136+ , box [ centerY ]

137+ , box [ alignBottom ]

138+ ]

139+ , colContainer []

140+ [ box [ alignLeft, alignTop ]

141+ , box [ centerX, centerY ]

142+ , box [ alignRight, alignBottom ]

143+ ]

144+ ]

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

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

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

148+ , column

149+ [ alignLeft

150+ , alignTop

151+ , spacing 20

152+ , label "column"

153+ , Background.color lightGrey

154+ ]

155+ [ box []

156+ , box []

157+ , box []

158+ ]

159+ , column

160+ [ spacing 20

161+ , width (px 100)

162+ , alignLeft

163+ , alignTop

164+ , Background.color lightGrey

165+ ]

166+ [ box []

167+ , box []

168+ , box []

169+ ]

170+ , colContainer []

171+ [ box [ alignRight ]

172+ , box [ centerX ]

173+ , box [ alignLeft ]

174+ ]

175+ ]

176+ ]

tests/Tests/ColumnSpacing.elmnew file+68

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

1+module Tests.ColumnSpacing exposing (..)

2+

3+import Html

4+import Testable

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

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

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

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+tinyBox attrs =

30+ el

31+ ([ width (px 20)

32+ , height (px 20)

33+

34+ -- , centerY

35+ , Background.color darkCharcoal

36+ ]

37+ ++ attrs

38+ )

39+ none

40+

41+

42+container =

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

44+

45+

46+view =

47+ let

48+ colContainer attrs children =

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

50+ in

51+ column

52+ []

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

54+ , row []

55+ [ colContainer []

56+ [ box [] ]

57+ , colContainer []

58+ [ box []

59+ , box []

60+ , box []

61+ ]

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

63+ [ box []

64+ , box []

65+ , box []

66+ ]

67+ ]

68+ ]

tests/Tests/ElementAlignment.elmnew file+111

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

1+module Tests.ElementAlignment exposing (..)

2+

3+import Generator

4+import Html

5+import Testable

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

7+import Testable.Element.Background as Background

8+import Testable.Element.Font as Font

9+import Testable.Runner

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

11+

12+

13+{-| -}

14+main : Html.Html msg

15+main =

16+ Testable.Runner.show view

17+

18+

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

20+box attrs =

21+ el

22+ ([ width (px 50)

23+ , height (px 50)

24+ , Background.color blue

25+ ]

26+ ++ attrs

27+ )

28+ none

29+

30+

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

32+container =

33+ el

34+ [ width (px 200)

35+ , height (px 200)

36+ , Background.color lightGrey

37+ ]

38+

39+

40+view : Testable.Element msg

41+view =

42+ column []

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

44+ , container <|

45+ box []

46+ , text "alignLeft, centerX, alignRight"

47+ , column [ spacing 20 ] <|

48+ Generator.sizes

49+ (\resizeable ->

50+ row [ spacing 20 ]

51+ [ container <|

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

53+ , container <|

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

55+ , container <|

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

57+ ]

58+ )

59+ , text "top, centerY, bottom"

60+ , column [ spacing 20 ] <|

61+ Generator.sizes

62+ (\resizeable ->

63+ row [ spacing 20 ]

64+ [ container <|

65+ resizeable [ alignTop ] none

66+ , container <|

67+ resizeable [ centerY ] none

68+ , container <|

69+ resizeable [ alignBottom ] none

70+ ]

71+ )

72+ , text "align top ++ alignments"

73+ , column [ spacing 20 ] <|

74+ Generator.sizes

75+ (\resizeable ->

76+ row [ spacing 20 ]

77+ [ container <|

78+ resizeable [ alignTop, alignLeft ] none

79+ , container <|

80+ resizeable [ alignTop, centerX ] none

81+ , container <|

82+ resizeable [ alignTop, alignRight ] none

83+ ]

84+ )

85+ , text "centerY ++ alignments"

86+ , column [ spacing 20 ] <|

87+ Generator.sizes

88+ (\resizeable ->

89+ row [ spacing 20 ]

90+ [ container <|

91+ resizeable [ centerY, alignLeft ] none

92+ , container <|

93+ resizeable [ centerY, centerX ] none

94+ , container <|

95+ resizeable [ centerY, alignRight ] none

96+ ]

97+ )

98+ , text "alignBottom ++ alignments"

99+ , column [ spacing 20 ] <|

100+ Generator.sizes

101+ (\resizeable ->

102+ row [ spacing 20 ]

103+ [ container <|

104+ resizeable [ alignBottom, alignLeft ] none

105+ , container <|

106+ resizeable [ alignBottom, centerX ] none

107+ , container <|

108+ resizeable [ alignBottom, alignRight ] none

109+ ]

110+ )

111+ ]

tests-rendering/cases/Manual/AlignedForm.elm → tests/Tests/Manual/AlignedForm.elmrenamed

The content is the same.

tests-rendering/cases/Manual/All.elm → tests/Tests/Manual/All.elmrenamed

The content is the same.

tests-rendering/cases/Manual/LazyPerformance.elm → tests/Tests/Manual/LazyPerformance.elmrenamed

The content is the same.

tests-rendering/cases/Manual/OtherScrollbars.elm → tests/Tests/Manual/OtherScrollbars.elmrenamed

The content is the same.

tests-rendering/cases/Manual/Overflow.elm → tests/Tests/Manual/Overflow.elmrenamed

The content is the same.

tests-rendering/cases/Manual/Scrollbars.elm → tests/Tests/Manual/Scrollbars.elmrenamed

The content is the same.

tests-rendering/cases/Manual/ScrollbarsPls.elm → tests/Tests/Manual/ScrollbarsPls.elmrenamed

The content is the same.

tests-rendering/cases/Manual/TextLayout.elm → tests/Tests/Manual/TextLayout.elmrenamed

The content is the same.

tests/Tests/Nearby.elmnew file+434

@@ -0,0 +1,434 @@

1+module Tests.Nearby exposing (view)

2+

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

4+-}

5+

6+import Html

7+import Testable

8+import Testable.Element exposing (..)

9+import Testable.Element.Background as Background

10+import Testable.Element.Font as Font

11+import Testable.Runner

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

13+

14+

15+box attrs =

16+ el

17+ ([ width (px 50)

18+ , height (px 50)

19+ , Background.color blue

20+ ]

21+ ++ attrs

22+ )

23+ none

24+

25+

26+justBox size color attrs =

27+ el

28+ ([ width (px size)

29+ , height (px size)

30+ , Background.color color

31+ ]

32+ ++ attrs

33+ )

34+ none

35+

36+

37+littleBox name attrs =

38+ el

39+ ([ label name

40+ , width (px 5)

41+ , height (px 5)

42+ ]

43+ ++ attrs

44+ )

45+ none

46+

47+

48+p attrs =

49+ paragraph

50+ ([ Background.color blue

51+ , Font.color white

52+ , padding 20

53+ ]

54+ ++ attrs

55+ )

56+ [ text "Lorem Ipsum or something or other." ]

57+

58+

59+{-| -}

60+main : Html.Html msg

61+main =

62+ Testable.Runner.show view

63+

64+

65+{-| -}

66+view : Testable.Element msg

67+view =

68+ let

69+ transparentBox attrs =

70+ el

71+ ([ Font.color white

72+ , width (px 50)

73+ , height (px 50)

74+ , Background.color (rgba 52 101 164 0.8)

75+ ]

76+ ++ attrs

77+ )

78+ (text "hi")

79+

80+ -- single location name box =

81+ -- row [ height (px 100), width fill, spacing 50 ]

82+ -- [ box

83+ -- [ location

84+ -- (el

85+ -- [ width (px 20)

86+ -- , height (px 20)

87+ -- , Background.color darkCharcoal

88+ -- ]

89+ -- none

90+ -- )

91+ -- ]

92+ -- , box

93+ -- [ location

94+ -- (el

95+ -- [ width (px 20)

96+ -- , height (px 20)

97+ -- , alignLeft

98+ -- , Background.color darkCharcoal

99+ -- ]

100+ -- none

101+ -- )

102+ -- ]

103+ -- ]

104+ little name attrs =

105+ el

106+ ([ label name

107+ , width (px 5)

108+ , height (px 5)

109+ , Background.color darkCharcoal

110+ ]

111+ ++ attrs

112+ )

113+ none

114+

115+ nearby location name render =

116+ column [ spacing 32, label "column" ]

117+ [ el [ padding 20, Background.color green, Font.color white ] (text name)

118+ , row [ height (px 100), width fill, spacing 50 ]

119+ [ render

120+ [ location

121+ (el

122+ [ label name

123+ , width (px 20)

124+ , height (px 20)

125+ , Background.color darkCharcoal

126+ ]

127+ none

128+ )

129+ ]

130+ , render

131+ [ location

132+ (el

133+ [ label name

134+ , width (px 20)

135+ , height (px 20)

136+ , alignLeft

137+ , Background.color darkCharcoal

138+ ]

139+ none

140+ )

141+ ]

142+ , render

143+ [ location

144+ (el

145+ [ label name

146+ , width (px 20)

147+ , height (px 20)

148+ , centerX

149+ , Background.color darkCharcoal

150+ ]

151+ none

152+ )

153+ ]

154+ , render

155+ [ location

156+ (el

157+ [ label name

158+ , width (px 20)

159+ , height (px 20)

160+ , alignRight

161+ , Background.color darkCharcoal

162+ ]

163+ none

164+ )

165+ ]

166+ , render

167+ [ location

168+ (el

169+ [ label name

170+ , width (px 20)

171+ , height (px 20)

172+ , alignTop

173+ , Background.color darkCharcoal

174+ ]

175+ none

176+ )

177+ ]

178+ , render

179+ [ location

180+ (el

181+ [ label name

182+ , width (px 20)

183+ , height (px 20)

184+ , centerY

185+ , Background.color darkCharcoal

186+ ]

187+ none

188+ )

189+ ]

190+ , render

191+ [ location

192+ (el

193+ [ label name

194+ , width (px 20)

195+ , height (px 20)

196+ , alignBottom

197+ , Background.color darkCharcoal

198+ ]

199+ none

200+ )

201+ ]

202+ ]

203+ , text "widths/heights"

204+ , row [ height (px 100), width fill, spacing 50, label "Row" ]

205+ [ render

206+ [ location

207+ (el

208+ [ label name

209+ , width fill

210+ , height fill

211+ , Background.color darkCharcoal

212+ ]

213+ none

214+ )

215+ ]

216+ , render

217+ [ location

218+ (el

219+ [ label name

220+ , width (px 20)

221+ , height fill

222+ , Background.color darkCharcoal

223+ ]

224+ none

225+ )

226+ ]

227+ , render

228+ [ label "render"

229+ , location

230+ (el

231+ [ label name

232+ , width fill

233+ , height (px 20)

234+ , Background.color darkCharcoal

235+ ]

236+ none

237+ )

238+ ]

239+ , render

240+ [ location

241+ (el

242+ [ label name

243+ , width (px 20)

244+ , height shrink

245+ , Background.color darkCharcoal

246+ , Font.color white

247+ ]

248+ (text "h-shrink")

249+ )

250+ ]

251+ , render

252+ [ location

253+ (el

254+ [ label name

255+ , width shrink

256+ , height (px 20)

257+ , Background.color darkCharcoal

258+ , Font.color white

259+ ]

260+ (text "w-shrink")

261+ )

262+ ]

263+ ]

264+ , text "on paragraph"

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

266+ [ p

267+ [ location

268+ (el

269+ [ label name

270+ , width (px 20)

271+ , height (px 20)

272+ , Background.color darkCharcoal

273+ ]

274+ none

275+ )

276+ ]

277+ , p

278+ [ location

279+ (el

280+ [ label name

281+ , width (px 20)

282+ , height (px 20)

283+ , alignLeft

284+ , Background.color darkCharcoal

285+ ]

286+ none

287+ )

288+ ]

289+ , p

290+ [ location

291+ (el

292+ [ label name

293+ , width (px 20)

294+ , height (px 20)

295+ , centerX

296+ , Background.color darkCharcoal

297+ ]

298+ none

299+ )

300+ ]

301+ , p

302+ [ location

303+ (el

304+ [ label name

305+ , width (px 20)

306+ , height (px 20)

307+ , alignRight

308+ , Background.color darkCharcoal

309+ ]

310+ none

311+ )

312+ ]

313+ , p

314+ [ location

315+ (el

316+ [ label name

317+ , width (px 20)

318+ , height (px 20)

319+ , alignTop

320+ , Background.color darkCharcoal

321+ ]

322+ none

323+ )

324+ ]

325+ , p

326+ [ location

327+ (el

328+ [ label name

329+ , width (px 20)

330+ , height (px 20)

331+ , centerY

332+ , Background.color darkCharcoal

333+ ]

334+ none

335+ )

336+ ]

337+ , p

338+ [ location

339+ (el

340+ [ label name

341+ , width (px 20)

342+ , height (px 20)

343+ , alignBottom

344+ , Background.color darkCharcoal

345+ ]

346+ none

347+ )

348+ ]

349+ ]

350+ ]

351+

352+ master =

353+ el [ padding 20 ] <|

354+ box

355+ [ above (little "above-left" [ alignLeft ])

356+ , above (little "above-center" [ centerX ])

357+ , above (little "above-right" [ alignRight ])

358+ , below (little "below-left" [ alignLeft ])

359+ , below (little "below-center" [ centerX ])

360+ , below (little "below-right" [ alignRight ])

361+ , onRight (little "onRight-left" [ alignTop ])

362+ , onRight (little "onRight-center" [ centerY ])

363+ , onRight (little "onRight-right" [ alignBottom ])

364+ , onLeft (little "onLeft-left" [ alignTop ])

365+ , onLeft (little "onLeft-center" [ centerY ])

366+ , onLeft (little "onLeft-right" [ alignBottom ])

367+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])

368+ , inFront (little "infront-center-top" [ alignTop, centerX ])

369+ , inFront (little "infront-right-top" [ alignTop, alignRight ])

370+ , inFront (little "infront-left-center" [ centerY, alignLeft ])

371+ , inFront (little "infront-center-center" [ centerY, centerX ])

372+ , inFront (little "infront-right-center" [ centerY, alignRight ])

373+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

374+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

375+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

376+ ]

377+

378+ masterParagraph =

379+ el [ padding 20 ] <|

380+ p

381+ [ above (little "above-left" [ alignLeft ])

382+ , above (little "above-center" [ centerX ])

383+ , above (little "above-right" [ alignRight ])

384+ , below (little "below-left" [ alignLeft ])

385+ , below (little "below-center" [ centerX ])

386+ , below (little "below-right" [ alignRight ])

387+ , onRight (little "onRight-left" [ alignTop ])

388+ , onRight (little "onRight-center" [ centerY ])

389+ , onRight (little "onRight-right" [ alignBottom ])

390+ , onLeft (little "onLeft-left" [ alignTop ])

391+ , onLeft (little "onLeft-center" [ centerY ])

392+ , onLeft (little "onLeft-right" [ alignBottom ])

393+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])

394+ , inFront (little "infront-center-top" [ alignTop, centerX ])

395+ , inFront (little "infront-right-top" [ alignTop, alignRight ])

396+ , inFront (little "infront-left-center" [ centerY, alignLeft ])

397+ , inFront (little "infront-center-center" [ centerY, centerX ])

398+ , inFront (little "infront-right-center" [ centerY, alignRight ])

399+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])

400+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])

401+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])

402+ ]

403+ in

404+ column

405+ [ centerX, label "Nearby Elements", spacing 100 ]

406+ [ master

407+ , masterParagraph

408+ , nearby above "above" box

409+ , nearby below "below" box

410+ , nearby inFront "inFront" box

411+ , nearby onRight "onRight" box

412+ , nearby onLeft "onLeft" box

413+ , nearby behindContent "behindContent" transparentBox

414+ , layeredVisibility

415+ , overlappingChildren

416+ ]

417+

418+

419+layeredVisibility =

420+ el

421+ [ inFront (justBox 40 red [ isVisible ])

422+ ]

423+ (el [ inFront (justBox 30 green []) ]

424+ (justBox 50 blue [])

425+ )

426+

427+

428+overlappingChildren =

429+ row []

430+ [ el [ inFront (justBox 40 green []) ]

431+ (justBox 40 darkGrey [])

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

433+ (justBox 40 darkGrey [])

434+ ]

tests-rendering/src/Tests/Palette.elm → tests/Tests/Palette.elmrenamed+1−5

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

1−module Tests.Palette exposing (black, blue, darkCharcoal, darkGrey, green, grey, lightGrey, red, rgba, white)

1+module Tests.Palette exposing (..)

2

3{-| -}

4

@@ -9,10 +9,6 @@ rgba r g b a =

9 Element.rgba (r / 255) (g / 255) (b / 255) a

10

11

12−black =

13− Element.rgb 0 0 0

14−

15−

16darkGrey =

12darkGrey =

17 Element.rgb 0.8 0.8 0.8

13 Element.rgb 0.8 0.8 0.8

18

14

tests/Tests/RowAlignment.elmnew file+212

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

1+module Tests.RowAlignment exposing (..)

2+

3+import Generator

4+import Html

5+import Testable

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

7+import Testable.Element.Background as Background

8+import Testable.Element.Font as Font

9+import Testable.Runner

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

11+

12+

13+{-| -}

14+main : Html.Html msg

15+main =

16+ Testable.Runner.show view

17+

18+

19+box attrs =

20+ el

21+ ([ width (px 50)

22+ , height (px 50)

23+ , Background.color blue

24+ ]

25+ ++ attrs

26+ )

27+ none

28+

29+

30+view =

31+ let

32+ rowContainer attrs children =

33+ row

34+ ([ spacing 20

35+ , height (px 100)

36+ , Background.color lightGrey

37+ ]

38+ ++ attrs

39+ )

40+ children

41+ in

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

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

44+ , column [ spacing 20 ] <|

45+ Generator.sizes <|

46+ \resizeable ->

47+ rowContainer

48+ [ label "single child" ]

49+ [ resizeable [] none ]

50+ , column [ spacing 20 ] <|

51+ Generator.sizes <|

52+ \resizeable ->

53+ rowContainer

54+ [ label "single child" ]

55+ [ resizeable [ centerX ] none ]

56+ , column [ spacing 20 ] <|

57+ Generator.sizes <|

58+ \resizeable ->

59+ rowContainer [ label "single child" ]

60+ [ resizeable [ alignRight ] none ]

61+ , column [ spacing 20 ] <|

62+ Generator.sizes <|

63+ \resizeable ->

64+ rowContainer []

65+ [ resizeable [] none

66+ , resizeable [] none

67+ , resizeable [] none

68+ ]

69+ , column [ spacing 20 ] <|

70+ Generator.sizes <|

71+ \resizeable ->

72+ rowContainer []

73+ [ resizeable [] none

74+ , resizeable [] none

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

76+ ]

77+ , column [ spacing 20 ] <|

78+ Generator.sizes <|

79+ \resizeable ->

80+ rowContainer

81+ []

82+ [ resizeable [] none

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

84+ , resizeable [] none

85+ ]

86+ , column [ spacing 20 ] <|

87+ Generator.sizes <|

88+ \resizeable ->

89+ rowContainer []

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

91+ , resizeable [] none

92+ , resizeable [] none

93+ ]

94+ , text "center X"

95+ , column [ spacing 20 ] <|

96+ Generator.sizes <|

97+ \resizeable ->

98+ rowContainer []

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

100+ , resizeable [] none

101+ , resizeable [] none

102+ ]

103+ , column [ spacing 20 ] <|

104+ Generator.sizes <|

105+ \resizeable ->

106+ rowContainer []

107+ [ resizeable [] none

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

109+ , resizeable [] none

110+ ]

111+ , column [ spacing 20 ] <|

112+ Generator.sizes <|

113+ \resizeable ->

114+ rowContainer []

115+ [ resizeable [] none

116+ , resizeable [] none

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

118+ ]

119+ , column [ spacing 20 ] <|

120+ Generator.sizes <|

121+ \resizeable ->

122+ rowContainer []

123+ [ resizeable [] none

124+ , resizeable [] none

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

126+ , resizeable [] none

127+ ]

128+ , column [ spacing 20 ] <|

129+ Generator.sizes <|

130+ \resizeable ->

131+ rowContainer []

132+ [ resizeable [] none

133+ , resizeable [] none

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

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

136+ , resizeable [] none

137+ ]

138+ , column [ spacing 20 ] <|

139+ Generator.sizes <|

140+ \resizeable ->

141+ rowContainer []

142+ [ resizeable [] none

143+ , resizeable [] none

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

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

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

147+ , resizeable [] none

148+ ]

149+ , text "left x right"

150+ , column [ spacing 20 ] <|

151+ Generator.sizes <|

152+ \resizeable ->

153+ rowContainer []

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

155+ , resizeable [] none

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

157+ ]

158+ , text "left center right"

159+ , column [ spacing 20 ] <|

160+ Generator.sizes <|

161+ \resizeable ->

162+ rowContainer []

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

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

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

166+ ]

167+ , text "vertical alignment"

168+ , column [ spacing 20 ] <|

169+ Generator.sizes <|

170+ \resizeable ->

171+ rowContainer []

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

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

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

175+ ]

176+ , text "x and y alignments"

177+ , column [ spacing 20 ] <|

178+ Generator.sizes <|

179+ \resizeable ->

180+ rowContainer []

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

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

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

184+ ]

185+ , text "align Top and X alignments "

186+ , column [ spacing 20 ] <|

187+ Generator.sizes <|

188+ \resizeable ->

189+ rowContainer []

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

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

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

193+ ]

194+ , text "align Bottom and X alignments "

195+ , column [ spacing 20 ] <|

196+ Generator.sizes <|

197+ \resizeable ->

198+ rowContainer []

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

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

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

202+ ]

203+ , text "centerY and X alignments "

204+ , column [ spacing 20 ] <|

205+ Generator.sizes <|

206+ \resizeable ->

207+ rowContainer []

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

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

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

211+ ]

212+ ]

tests/Tests/RowSpacing.elmnew file+69

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

1+module Tests.RowSpacing exposing (..)

2+

3+import Html

4+import Testable

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

6+import Testable.Element.Background as Background

7+import Testable.Element.Font as Font

8+import Testable.Runner

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

10+

11+

12+{-| -}

13+main : Html.Html msg

14+main =

15+ Testable.Runner.show view

16+

17+

18+box attrs =

19+ el

20+ ([ width (px 50)

21+ , height (px 50)

22+ , Background.color blue

23+ ]

24+ ++ attrs

25+ )

26+ none

27+

28+

29+tinyBox attrs =

30+ el

31+ ([ width (px 20)

32+ , height (px 20)

33+

34+ -- , centerY

35+ , Background.color darkCharcoal

36+ ]

37+ ++ attrs

38+ )

39+ none

40+

41+

42+container =

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

44+

45+

46+view =

47+ let

48+ colContainer attrs children =

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

50+ in

51+ column

52+ []

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

54+ , column []

55+ [ box []

56+ , colContainer []

57+ [ box [] ]

58+ , colContainer []

59+ [ box []

60+ , box []

61+ , box []

62+ ]

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

64+ [ box []

65+ , box []

66+ , box []

67+ ]

68+ ]

69+ ]

tests/Tests/Run.elmnew file+27

@@ -0,0 +1,27 @@

1+port module Tests.Run exposing (main)

2+

3+{-| -}

4+

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

14+

15+

16+main : Testable.Runner.TestableProgram

17+main =

18+ Testable.Runner.program

19+ [ Tuple.pair "Basic Element" Tests.Basic.view

20+ , Tuple.pair "Nearby" Tests.Nearby.view

21+ , Tuple.pair "Element Alignment" Tests.ElementAlignment.view

22+ , Tuple.pair "Transparency" Tests.Transparency.view

23+ , Tuple.pair "Column Alignment" Tests.ColumnAlignment.view

24+ , Tuple.pair "Row Alignment" Tests.RowAlignment.view

25+ , Tuple.pair "Column Spacing" Tests.ColumnSpacing.view

26+ , Tuple.pair "Row Spacing" Tests.RowSpacing.view

27+ ]

tests-rendering/src/Tests/Table.elm.todo → tests/Tests/Table.elmrenamed+3−3

@@ -1,12 +1,12 @@

1−module Tests.Table exposing (box, container, main, view)

1+module Tests.Table exposing (..)

2

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

3import Html

4import Html

4import Testable

5import Testable

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

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

6import Testable.Element.Background as Background

7import Testable.Element.Background as Background

7import Testable.Element.Font as Font

8import Testable.Element.Font as Font

8import Testable.Runner

9import Testable.Runner

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

10

11

12{-| -}

@@ -104,7 +104,7 @@ view =

104 el [ Font.color white ] <|

105 text "Index"

106 , view =

107− \i row -> el [ Background.color lightGrey, width fill ] <| text (String.fromInt i)

107+ \i row -> el [ Background.color lightGrey, width fill ] <| text (toString i)

108 }

109 , { header =

110 el [ Font.color white ] <|

tests-rendering/src/Tests/Transparency.elm → tests/Tests/Transparency.elmrenamed

The content is the same.

tests-rendering/src/Tests/WidthHeight.elm → tests/Tests/WidthHeight.elmrenamed+1−1

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

1−module Tests.WidthHeight exposing (view)

1+module Tests.Basic exposing (view)

2

3{-| -}

4

tests/automation/selenium_test.pynew file+59

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

1+from selenium import webdriver

2+from selenium.webdriver.common.keys import Keys

3+from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

4+import os

5+import time

6+

7+

8+def browsers():

9+

10+ capabilities = [

11+ {'platform': "Mac OS X 10.9",

12+ 'browserName': "chrome",

13+ 'version': "31",

14+ }

15+ ]

16+ return capabilies

17+

18+

19+def run_local():

20+ driver = webdriver.Firefox()

21+ local_file = "file://" + os.getcwd() + "/gather-styles.html"

22+ run_test(driver, local_file)

23+

24+

25+def get_credentials():

26+ return {'username': os.environ['SAUCE_USERNAME'], 'access_key': os.environ['SAUCE_ACCESS_KEY']}

27+

28+

29+def run_remote(desired_cap):

30+ creds = get_credentials()

31+ driver = webdriver.Remote(

32+ command_executor='http://{username}:{key}@ondemand.saucelabs.com:80/wd/hub'.format(

33+ username=creds['username'],

34+ key=creds['access_key']),

35+ desired_capabilities=desired_cap)

36+ run_test(driver)

37+

38+

39+def run_test(driver, url):

40+ try:

41+ driver.get(local_file)

42+ for x in range(5):

43+ results = driver.execute_script('return test_results')

44+ if results != "waiting..":

45+ print(results)

46+ break

47+ time.sleep(1)

48+ except Exception as inst:

49+ print(type(inst))

50+ print(inst.args)

51+ print(inst)

52+ driver.quit()

53+ else:

54+ print("quitting browser")

55+ driver.quit()

56+

57+

58+if __name__ == "__main__":

59+ run_local()

experiments/workspace/elm.json → tests/elm.jsonrenamed+9−4

@@ -1,8 +1,10 @@

1{

2 "type": "application",

3 "source-directories": [

4− ".",

4+ "src",

5+ "suite",

5− "../src/"

6+ "../src",

7+ "."

6 ],

8 ],

7 "elm-version": "0.19.0",

9 "elm-version": "0.19.0",

8 "dependencies": {

10 "dependencies": {

@@ -11,10 +13,13 @@

11 "elm/core": "1.0.0",

13 "elm/core": "1.0.0",

12 "elm/html": "1.0.0",

14 "elm/html": "1.0.0",

13 "elm/json": "1.0.0",

15 "elm/json": "1.0.0",

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

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

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

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

19+ "elm/virtual-dom": "1.0.0",

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

15 },

21 },

16 "indirect": {

22 "indirect": {

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

18 "elm/url": "1.0.0"

23 "elm/url": "1.0.0"

19 }

24 }

20 },

25 },

tests/gather-styles.htmlnew file+110

@@ -0,0 +1,110 @@

1+<!DOCTYPE HTML>

2+<html>

3+

4+<head>

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

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

7+ <script src="elm.js"></script>

8+</head>

9+<style>

10+</style>

11+

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

13+

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

15+

16+ var node = document.getElementById('root');

17+ var app = Elm.Tests.Run.init({ node: node });

18+

19+ var test_results = "waiting.."

20+

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

22+ test_results = results;

23+ })

24+

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

26+ // ids : List String

27+ var idsLength = ids.length;

28+ var results = [];

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

30+ var id = ids[i];

31+ var element = document.getElementById(id);

32+ if (element == null) {

33+ console.log("id " + id + " not found");

34+ }

35+ var style = getStyle(element);

36+ var bbox = getBoundingBox(element);

37+

38+ var visible = isVisible(id, bbox);

39+

40+

41+ var result = { "bbox": bbox, "style": style, "id": id, "isVisible": visible };

42+ results.push(result);

43+

44+ }

45+ app.ports.styles.send(results);

46+ });

47+

48+ function isVisible(id, bbox) {

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

50+ var result = 0;

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

52+ result++;

53+ }

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

55+ result++;

56+ }

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

58+ result++;

59+ }

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

61+ result++;

62+ }

63+

64+

65+ if (result == 4) {

66+ return true;

67+ } else {

68+ return false

69+ }

70+ }

71+

72+ function getStyle(element) {

73+ var props = []

74+ var style = window.getComputedStyle(element);

75+ for (var i = style.length; i--;) {

76+ var name = style.item(i);

77+ var value = style.getPropertyValue(name);

78+ props.push([name, value]);

79+ }

80+ return props;

81+ }

82+

83+ function getBoundingBox(element) {

84+ var bbox = element.getBoundingClientRect();

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

86+

87+ var padding = {

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

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

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

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

92+ };

93+

94+ return {

95+ 'top': bbox.top

96+ , 'bottom': bbox.bottom

97+ , 'left': bbox.left

98+ , 'right': bbox.right

99+ , 'width': bbox.width

100+ , 'height': bbox.height

101+ , 'padding': padding

102+ }

103+ }

104+

105+

106+

107+

108+</script>

109+

110+</html>

tests/live.shnew file+1

@@ -0,0 +1 @@

1+elm-live Main.elm --output=elm.js --open --pushstate

tests-rendering/src/Generator.elm → tests/src/Generator.elmrenamed

The content is the same.

tests-rendering/src/Testable.elm → tests/src/Testable.elmrenamed+131−337

@@ -1,48 +1,21 @@

1−module Testable exposing

1+module Testable exposing (Attr(..), BoundingBox, Element(..), Found, LayoutContext(..), Location(..), Style, Surroundings, addAttribute, applyLabels, compareFormattedColor, createAttributeTest, createTest, formatColor, formatColorWithAlpha, getElementId, getIds, getSpacing, idAttr, levelToString, render, renderAttribute, renderElement, runTests, toTest)

2− ( Attr(..)

3− , AttributeId(..)

4− , BoundingBox

5− , Element(..)

6− , ElementType(..)

7− , Found

8− , LayoutContext(..)

9− , LayoutExpectation(..)

10− , LayoutTest

11− , Location(..)

12− , Style

13− , Surroundings

14− , TextMetrics

15− , compareFormattedColor

16− , elementTypeToString

17− , equal

18− , formatColor

19− , formatColorWithAlpha

20− , getIds

21− , getSpacing

22− , getSpacingFromAttributes

23− , lessThanOrEqual

24− , rounded

25− , runTests

26− , textHeight

27− , toElement

28− , toHtml

29− , todo

30− , true

31− )

32

2

33{-| -}

3{-| -}

34

4

35import Dict exposing (Dict)

5import Dict exposing (Dict)

36import Element exposing (Color)

6import Element exposing (Color)

7+import Expect

37import Html exposing (Html)

8import Html exposing (Html)

38import Html.Attributes

9import Html.Attributes

39import Internal.Model as Internal

10import Internal.Model as Internal

11+import Random

40import Test exposing (Test)

12import Test exposing (Test)

13+import Test.Runner

14+import Test.Runner.Failure

41

15

42

16

43type Element msg

17type Element msg

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

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

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

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

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

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

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

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

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

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

51 | Empty

24 | Empty

52

25

53

26

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

27type Attr msg

133 = Attr (Element.Attribute msg)

28 = Attr (Element.Attribute msg)

134− | AttrTest

29+ | AttrTest (Surroundings -> Test)

135− { test : Surroundings msg -> List LayoutExpectation

136− , label : String

137− , id : AttributeId

138− }

139 | Batch (List (Attr msg))

30 | Batch (List (Attr msg))

140 | Spacing Int

31 | Spacing Int

141 | Nearby

32 | Nearby

142 { location : Location

33 { location : Location

143 , element : Element msg

34 , element : Element msg

144− , test : Surroundings msg -> List LayoutExpectation

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

145 , label : String

36 , label : String

146 }

37 }

38+ | Label String

147 | LabeledTest

39 | LabeledTest

148− { test : Surroundings msg -> List LayoutExpectation

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

149 , label : String

41 , label : String

150 , attr : Element.Attribute msg

42 , attr : Element.Attribute msg

151− , id : AttributeId

152 }

43 }

153

44

154

45

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

166 | InRow

57 | InRow

167 | InEl

58 | InEl

168 | InColumn

59 | InColumn

169− | InParagraph

170− | InTextCol

171− | AtRoot

172

60

173

61

174−type alias Surroundings msg =

62+type alias Surroundings =

175 { siblings : List Found

63 { siblings : List Found

176 , parent : Found

64 , parent : Found

177 , children : List Found

65 , children : List Found

178 , self : Found

66 , self : Found

179− , selfElement : Element msg

180

67

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

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

182− , parentLayout : LayoutContext

69+ , location : LayoutContext

183 , parentSpacing : Int

70 , parentSpacing : Int

184 }

71 }

185

72

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

188 { bbox : BoundingBox

75 { bbox : BoundingBox

189 , style : Style

76 , style : Style

190 , isVisible : Bool

77 , isVisible : Bool

191− , textMetrics : List TextMetrics

192 }

78 }

193

79

194

80

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

81{-| -}

222type alias Style =

82type alias Style =

223 Dict String String

83 Dict String String

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

239 }

99 }

240

100

241

101

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

102

304{- Retrieve Ids -}

103{- Retrieve Ids -}

305

104

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

335 El attrs child ->

134 El attrs child ->

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

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

337

136

338− Link _ attrs child ->

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

340−

341 Row attrs children ->

137 Row attrs children ->

342 id :: childrenIDs children ++ attributeIDs attrs

138 id :: childrenIDs children ++ attributeIDs attrs

343

139

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

361{- Render as Html -}

157{- Render as Html -}

362

158

363

159

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

365−toElement el =

366− renderElement [ 0, 0 ] el

367−

368−

369−toHtml : Element msg -> Html msg

160+render : Element msg -> Html msg

370−toHtml el =

161+render el =

371− Element.layout

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

163 renderElement [ 0, 0 ] el

378

164

379

165

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

402 (id :: makeAttributes attrs)

188 (id :: makeAttributes attrs)

403 (renderElement (0 :: level) child)

189 (renderElement (0 :: level) child)

404

190

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

191 Row attrs children ->

413 Element.row

192 Element.row

414 (id :: makeAttributes attrs)

193 (id :: makeAttributes attrs)

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

448 Spacing _ ->

227 Spacing _ ->

449 []

228 []

450

229

230+ Label _ ->

231+ []

232+

451 Nearby { location, element } ->

233 Nearby { location, element } ->

452 case location of

234 case location of

453 Above ->

235 Above ->

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

480{- Convert to Test -}

262{- Convert to Test -}

481

263

482

264

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

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

484−runTests harvested el =

266+toTest label harvested el =

485 let

267 let

486 maybeFound =

268 maybeFound =

487 Dict.get "se-0" harvested

269 Dict.get "se-0" harvested

488 in

270 in

489 case maybeFound of

271 case maybeFound of

490 Nothing ->

272 Nothing ->

491− [ { elementDomId = "se-0"

273+ Test.describe label

492− , elementType = EmptyType

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

493− , label = "Finding root element"

275+ \_ -> 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− ]

276+ ]

502

277

503 Just root ->

278 Just root ->

279+ Test.describe label <|

504− createTest

280+ createTest

505− { siblings = []

281+ { siblings = []

506− , parent = root

282+ , parent = root

507− , cache = harvested

283+ , cache = harvested

508− , parentSpacing = 0

284+ , parentSpacing = 0

509− , level = [ 0, 0 ]

285+ , level = [ 0, 0 ]

510− , element = el

286+ , element = el

511− , location = AtRoot

287+ , location = InEl

512− }

288+ }

513

289

514

290

515levelToString : List Int -> String

291levelToString : List Int -> String

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

529 , location : LayoutContext

305 , location : LayoutContext

530 , parentSpacing : Int

306 , parentSpacing : Int

531 }

307 }

532− -> List LayoutTest

308+ -> List Test

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

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

534 let

310 let

535 spacing =

311 spacing =

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

539 id =

315 id =

540 levelToString level

316 levelToString level

541

317

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

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

543 testChildren found children =

319 testChildren found children =

544 let

320 let

545 childrenFound =

321 childrenFound =

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

567 { a

343 { a

568 | index : Int

344 | index : Int

569 , previous : List Found

345 , previous : List Found

570− , tests : List LayoutTest

346+ , tests : List Test

571 , upcoming : List Found

347 , upcoming : List Found

572 }

348 }

573 ->

349 ->

574 { index : Int

350 { index : Int

575 , previous : List Found

351 , previous : List Found

576− , tests : List LayoutTest

352+ , tests : List Test

577 , upcoming : List Found

353 , upcoming : List Found

578 }

354 }

579 applyChildTest found child childTest =

355 applyChildTest found child childTest =

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

600 El _ _ ->

376 El _ _ ->

601 InEl

377 InEl

602

378

603− Link _ _ _ ->

604− InEl

605−

606 Row _ _ ->

379 Row _ _ ->

607 InRow

380 InRow

608

381

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

610 InColumn

383 InColumn

611

384

612 TextColumn _ _ ->

385 TextColumn _ _ ->

613− InTextCol

386+ InColumn

614

387

615 Paragraph _ _ ->

388 Paragraph _ _ ->

616− InParagraph

389+ InRow

617

390

618 Text _ ->

391 Text _ ->

619 InEl

392 InEl

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

640 rest

413 rest

641 }

414 }

642

415

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

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

644 tests self attributes children =

417 tests self attributes children =

645 let

418 let

646 findBBox elem ( i, gathered ) =

419 findBBox elem ( i, gathered ) =

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

680

453

681 attributeTests =

454 attributeTests =

682 attributes

455 attributes

456+ |> applyLabels

683 |> List.indexedMap

457 |> List.indexedMap

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

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

685 (\i attr ->

459 (\i attr ->

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

690 { siblings = siblings

464 { siblings = siblings

691 , parent = parent

465 , parent = parent

692 , self = self

466 , self = self

693− , selfElement = element

694 , children = childrenFoundData

467 , children = childrenFoundData

695− , parentLayout = location

468+ , location = location

696 , parentSpacing = parentSpacing

469 , parentSpacing = parentSpacing

697 }

470 }

698 attr

471 attr

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

712 []

485 []

713

486

714 _ ->

487 _ ->

715− [ { elementDomId = id

488+ [ 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

489

727 Just self ->

490 Just self ->

728 case element of

491 case element of

729 El attrs child ->

492 El attrs child ->

730 tests self attrs [ child ]

493 tests self attrs [ child ]

731

494

732− Link _ attrs child ->

733− tests self attrs [ child ]

734−

735 Row attrs children ->

495 Row attrs children ->

736 tests self attrs children

496 tests self attrs children

737

497

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

751 []

511 []

752

512

753

513

514+applyLabels : List (Attr msg) -> List (Attr msg)

515+applyLabels attrs =

516+ let

517+ toLabel attr =

518+ case attr of

519+ Label label ->

520+ Just label

521+

522+ _ ->

523+ Nothing

524+

525+ newLabels =

526+ attrs

527+ |> List.filterMap toLabel

528+ |> String.join ", "

529+

530+ applyLabel newLabel attr =

531+ case attr of

532+ LabeledTest labeled ->

533+ LabeledTest

534+ { labeled

535+ | label =

536+ if newLabel == "" then

537+ labeled.label

538+

539+ else

540+ newLabel ++ ", " ++ labeled.label

541+ }

542+

543+ x ->

544+ x

545+ in

546+ List.map (applyLabel newLabels) attrs

547+

548+

754−createAttributeTest :

549+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 =

550createAttributeTest parent cache level attrIndex surroundings attr =

763 let

551 let

764− domId =

552+ indexLabel =

765− "#" ++ levelToString level

553+ levelToString (attrIndex :: level)

766 in

554 in

767 case attr of

555 case attr of

768 Attr _ ->

556 Attr _ ->

769 []

557 []

770

558

559+ Label _ ->

560+ []

561+

771 Spacing _ ->

562 Spacing _ ->

772 []

563 []

773

564

774− AttrTest details ->

565+ AttrTest test ->

775− [ { elementDomId = domId

776− , elementType =

777− toElementType surroundings.selfElement

778− , label = details.label

779− , expectations = details.test surroundings

566+ [ test surroundings

780− }

781 ]

567 ]

782

568

783 Nearby nearby ->

569 Nearby nearby ->

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

788 , parentSpacing = 0

574 , parentSpacing = 0

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

575 , level = attrIndex :: -1 :: level

790 , location = IsNearby nearby.location

576 , location = IsNearby nearby.location

791− , element =

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

578 }

802

579

803 Batch batch ->

580 Batch batch ->

804 batch

581 batch

805− |> List.indexedMap (\i attribute -> createAttributeTest parent cache level i surroundings attribute)

582+ |> List.indexedMap (\i attribute -> createAttributeTest parent cache (attrIndex :: level) i surroundings attribute)

806 |> List.concat

583 |> List.concat

807

584

808 LabeledTest { label, test } ->

585 LabeledTest { label, test } ->

809− [ { elementDomId = domId

810− , elementType = toElementType surroundings.selfElement

811− , label = label

812− , expectations = test surroundings

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

813− }

814 ]

587 ]

815

588

816

589

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

820 El attrs child ->

593 El attrs child ->

821 El (attr :: attrs) child

594 El (attr :: attrs) child

822

595

823− Link url attrs child ->

824− Link url (attr :: attrs) child

825−

826 Row attrs children ->

596 Row attrs children ->

827 Row (attr :: attrs) children

597 Row (attr :: attrs) children

828

598

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

842 Text str

612 Text str

843

613

844

614

615+runTests :

616+ Random.Seed

617+ -> Test

618+ ->

619+ List

620+ ( String

621+ , Maybe

622+ { given : Maybe String

623+ , description : String

624+ , reason : Test.Runner.Failure.Reason

625+ }

626+ )

627+runTests seed tests =

628+ let

629+ run runner =

630+ let

631+ ran =

632+ List.map Test.Runner.getFailureReason (runner.run ())

633+ in

634+ List.map2 Tuple.pair runner.labels ran

635+

636+ results =

637+ case Test.Runner.fromTest 100 seed tests of

638+ Test.Runner.Plain rnrs ->

639+ List.map run rnrs

640+

641+ Test.Runner.Only rnrs ->

642+ List.map run rnrs

643+

644+ Test.Runner.Skipping rnrs ->

645+ List.map run rnrs

646+

647+ Test.Runner.Invalid invalid ->

648+ let

649+ _ =

650+ Debug.log "Invalid tests" invalid

651+ in

652+ []

653+ in

654+ List.concat results

655+

656+

845compareFormattedColor : Color -> String -> Bool

657compareFormattedColor : Color -> String -> Bool

846compareFormattedColor color expected =

658compareFormattedColor color expected =

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

659 formatColor color == expected || formatColorWithAlpha color == expected

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

878 ++ ")"

690 ++ ")"

879

691

880

692

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

693getSpacing : Element msg -> Maybe Int

897getSpacing el =

694getSpacing el =

898 let

695 let

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

918 El attrs _ ->

715 El attrs _ ->

919 filterAttrs attrs

716 filterAttrs attrs

920

717

921− Link _ attrs _ ->

922− filterAttrs attrs

923−

924 Row attrs _ ->

718 Row attrs _ ->

925 filterAttrs attrs

719 filterAttrs attrs

926

720

tests/src/Testable/Element.elmnew file+1126

This diff is too big to show here.

tests-rendering/src/Testable/Element/Background.elm → tests/src/Testable/Element/Background.elmrenamed+4−5

This diff is too big to show here.

tests-rendering/src/Testable/Element/Font.elm → tests/src/Testable/Element/Font.elmrenamed+6−14

This diff is too big to show here.

tests/src/Testable/FuzzMain.elmnew file+629

This diff is too big to show here.

tests/src/Testable/Runner.elmnew file+461

This diff is too big to show here.

tests/ClassNames.elm → tests/suite/ClassNames.elmrenamed+3−17

This diff is too big to show here.

tests/suite/Flags.elmnew file+89

This diff is too big to show here.

tests/suite/elm-package.jsonnew file+16

This diff is too big to show here.

yarn.lockdeleted−1271

This diff is too big to show here.