git.iko.soy/typeable/elm-ui
on master help sign in
swap
acae885351 ahead, 0 behind
.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
6
7**Welcome!**
7**Welcome!**
8
8
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.
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.
10
10
11−Here's a basic template in [ellie](https://ellie-app.com/3fhCyrxjLw3a1) to get you started!
11+Here's a basic template in [ellie](https://www.ellie-app.com/3fhCyrxjLw3a1) to get you started!
12
12
13**Expected behavior**
13**Expected behavior**
14A clear and concise description of what you expected to happen.
14A clear and concise description of what you expected to happen.
.github/workflows/docs-preview.ymlnew file+36
@@ -0,0 +1,36 @@
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.ymlnew file+14
@@ -0,0 +1,14 @@
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.ymlnew file+59
@@ -0,0 +1,59 @@
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.ymlnew file+43
@@ -0,0 +1,43 @@
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+12−1
@@ -14,4 +14,15 @@ elm.js
14
14
15examples/temporary/
15examples/temporary/
16
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
CONTRIBUTING.mdnew file+25
@@ -0,0 +1,25 @@
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.
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`.
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!
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 even 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 event handler in the first place!
LICENSE+1−1
@@ -1,4 +1,4 @@
1−Copyright (c) 2018, Matthew Griffith
1+Copyright (c) 2020, Matthew Griffith
2All rights reserved.
2All rights reserved.
3
3
4Redistribution and use in source and binary forms, with or without
4Redistribution and use in source and binary forms, with or without
NOTES.mddeleted−10
@@ -1,10 +0,0 @@
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+18−2
@@ -1,3 +1,8 @@
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+
1# A New Language for Layout and Interface
6# A New Language for Layout and Interface
2
7
3CSS and HTML are actually quite difficult to use when you're trying to do the layout and styling of a web page.
8CSS and HTML are actually quite difficult to use when you're trying to do the layout and styling of a web page.
@@ -14,9 +19,11 @@ This means:
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.
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.
15
20
16
21
17−[Try this live example on Ellie!](https://ellie-app.com/3f2n4J5RnT3a1)
22+[Try this live example on Ellie!](https://ellie-app.com/7Cw4VCyr3RGa1)
18
23
19```elm
24```elm
25+module Main exposing (..)
26+
20import Element exposing (Element, el, text, row, alignRight, fill, width, rgb255, spacing, centerY, padding)
27import Element exposing (Element, el, text, row, alignRight, fill, width, rgb255, spacing, centerY, padding)
21import Element.Background as Background
28import Element.Background as Background
22import Element.Border as Border
29import Element.Border as Border
@@ -47,15 +54,24 @@ myElement =
47 (text "stylish!")
54 (text "stylish!")
48```
55```
49
56
57+# Join the Elm UI Slack!
50
58
51−
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.
52
60
53## History
61## History
54
62
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.
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.
56
64
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.
57
68
69+## Notes
58
70
71+Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.
59
72
73+## Contributing
60
74
75+Want to help out fixing bugs or reporting issues?
61
76
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.jsonnew file+34
@@ -0,0 +1,34 @@
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.elmnew file+330
@@ -0,0 +1,330 @@
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.jsonnew file+30
@@ -0,0 +1,30 @@
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.jsnew file+146
@@ -0,0 +1,146 @@
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.jsnew file+176
@@ -0,0 +1,176 @@
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.htmlnew file+57
@@ -0,0 +1,57 @@
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.htmlnew file+24
@@ -0,0 +1,24 @@
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.elmnew file+31
@@ -0,0 +1,31 @@
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.elmnew file+148
@@ -0,0 +1,148 @@
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.elmnew file+159
@@ -0,0 +1,159 @@
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.elmnew file+516
@@ -0,0 +1,516 @@
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.elmnew file+379
@@ -0,0 +1,379 @@
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+5−3
@@ -3,7 +3,7 @@
3 "name": "mdgriffith/elm-ui",
3 "name": "mdgriffith/elm-ui",
4 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",
4 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",
5 "license": "BSD-3-Clause",
5 "license": "BSD-3-Clause",
6− "version": "1.0.0",
6+ "version": "1.1.8",
7 "exposed-modules": [
7 "exposed-modules": [
8 "Element",
8 "Element",
9 "Element.Input",
9 "Element.Input",
@@ -22,5 +22,7 @@
22 "elm/json": "1.0.0 <= v < 2.0.0",
22 "elm/json": "1.0.0 <= v < 2.0.0",
23 "elm/virtual-dom": "1.0.0 <= v < 2.0.0"
23 "elm/virtual-dom": "1.0.0 <= v < 2.0.0"
24 },
24 },
25− "test-dependencies": {}
25+ "test-dependencies": {
26+ "elm-explorations/test": "1.2.2 <= v < 2.0.0"
27+ }
26−}
28+}
examples/Basic.elm+1−1
@@ -1,4 +1,4 @@
1−module Main exposing (..)
1+module Basic exposing (..)
2
2
3{-| -}
3{-| -}
4
4
examples/Form.elm+12−4
@@ -1,4 +1,4 @@
1−module Main exposing (..)
1+module Form exposing (..)
2
2
3{-| -}
3{-| -}
4
4
@@ -80,7 +80,14 @@ view model =
80 [ Font.size 20
80 [ Font.size 20
81 ]
81 ]
82 <|
82 <|
83− Element.column [ width (px 800), height shrink, centerY, centerX, spacing 36, padding 10, explain Debug.todo ]
83+ Element.column
84+ [ width (px 800)
85+ , height shrink
86+ , centerY
87+ , centerX
88+ , spacing 36
89+ , padding 10
90+ ]
84 [ el
91 [ el
85 [ Region.heading 1
92 [ Region.heading 1
86 , alignLeft
93 , alignLeft
@@ -117,7 +124,7 @@ view model =
117 , onChange = \new -> Update { model | username = new }
124 , onChange = \new -> Update { model | username = new }
118 , label = Input.labelAbove [ Font.size 14 ] (text "Username")
125 , label = Input.labelAbove [ Font.size 14 ] (text "Username")
119 }
126 }
120− , Input.currentPassword [ spacing 12, width shrink ]
127+ , Input.currentPassword [ spacing 12 ]
121 { text = model.password
128 { text = model.password
122 , placeholder = Nothing
129 , placeholder = Nothing
123 , onChange = \new -> Update { model | password = new }
130 , onChange = \new -> Update { model | password = new }
@@ -193,7 +200,8 @@ view model =
193 , Border.color darkBlue
200 , Border.color darkBlue
194 , paddingXY 32 16
201 , paddingXY 32 16
195 , Border.rounded 3
202 , Border.rounded 3
203+
196− , width fill
204+ -- , width fill
197 ]
205 ]
198 { onPress = Nothing
206 { onPress = Nothing
199 , label = Element.text "Place your lunch order!"
207 , label = Element.text "Place your lunch order!"
examples/Table.elm+1−1
@@ -1,4 +1,4 @@
1−module Main exposing (..)
1+module Table exposing (..)
2
2
3{-| -}
3{-| -}
4
4
examples/elm.json+19−22
@@ -1,25 +1,22 @@
1{
1{
2− "type": "application",
2+ "type": "application",
3− "source-directories": [
3+ "source-directories": [".", "../src/"],
4− ".",
5− "../src/"
6− ],
7− "elm-version": "0.19.0",
4+ "elm-version": "0.19.1",
8− "dependencies": {
5+ "dependencies": {
9− "direct": {
6+ "direct": {
10− "elm/browser": "1.0.0",
7+ "elm/browser": "1.0.0",
11− "elm/core": "1.0.0",
8+ "elm/core": "1.0.0",
12− "elm/html": "1.0.0",
9+ "elm/html": "1.0.0",
13− "elm/json": "1.0.0",
10+ "elm/json": "1.0.0",
14− "elm/virtual-dom": "1.0.0"
11+ "elm/virtual-dom": "1.0.0"
15− },
16− "indirect": {
17− "elm/time": "1.0.0",
18− "elm/url": "1.0.0"
19− }
20 },
12 },
21− "test-dependencies": {
22− "direct": {},
23− "indirect": {}
13+ "indirect": {
14+ "elm/time": "1.0.0",
15+ "elm/url": "1.0.0"
24 }
16 }
17+ },
18+ "test-dependencies": {
19+ "direct": {},
20+ "indirect": {}
21+ }
25−}
22+}
experiments/font-adjustment-updated/FontAdjustment.elm+44−44
@@ -65,6 +65,7 @@ garamond =
65 , font =
65 , font =
66 { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"
66 { url = Just "https://fonts.googleapis.com/css?family=EB+Garamond"
67 , name = "EB Garamond"
67 , name = "EB Garamond"
68+ , variants = []
68 , adjustment =
69 , adjustment =
69 { capital = default.capital
70 { capital = default.capital
70 , lowercase = default.lowercase
71 , lowercase = default.lowercase
@@ -92,6 +93,7 @@ catamaran =
92 , font =
93 , font =
93 { url = Just "https://fonts.googleapis.com/css?family=Catamaran"
94 { url = Just "https://fonts.googleapis.com/css?family=Catamaran"
94 , name = "Catamaran"
95 , name = "Catamaran"
96+ , variants = []
95 , adjustment =
97 , adjustment =
96 { capital = default.capital
98 { capital = default.capital
97 , lowercase = default.lowercase
99 , lowercase = default.lowercase
@@ -119,6 +121,7 @@ poiret =
119 , font =
121 , font =
120 { url = Just "https://fonts.googleapis.com/css?family=Poiret+One"
122 { url = Just "https://fonts.googleapis.com/css?family=Poiret+One"
121 , name = "Poiret One"
123 , name = "Poiret One"
124+ , variants = []
122 , adjustment =
125 , adjustment =
123 { capital = default.capital
126 { capital = default.capital
124 , lowercase = default.lowercase
127 , lowercase = default.lowercase
@@ -152,6 +155,7 @@ roboto =
152 , baseline = default.baseline
155 , baseline = default.baseline
153 , descender = default.descender
156 , descender = default.descender
154 }
157 }
158+ , variants = []
155 }
159 }
156 }
160 }
157
161
@@ -283,49 +287,64 @@ adjusted size adjustment =
283 , centerX
287 , centerX
284 , centerY
288 , centerY
285 ]
289 ]
290+ [ el
286− [ el [ Font.size 32 ] (text "Standard Defaults in CSS")
291+ [ Font.size 32 ]
292+ (text "New Adjustments in Els")
287 , row
293 , row
288− [ spacing 32
289− , Font.size 120
294+ [ Font.size 85
295+ , padding 80
296+ , spacing 48
290 ]
297 ]
291 [ el
298 [ el
299+ [ Font.size 95
300+ , Font.full
292− [ Background.color (rgb 0 0.8 0.9)
301+ , Background.color (rgb 0 0.8 0.9)
293− , style "line-height" "normal"
294− , class "lh-norm"
295− , above (el [ Font.size 12 ] (text "line-height: normal"))
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
296 ]
311 ]
297 (text "Typography")
312 (text "Typography")
298 , el
313 , el
299− [ Background.color (rgb 0 0.8 0.9)
300− , style "line-height" "1"
301− , above (el [ Font.size 12 ] (text "line-height: 1"))
302− ]
303− (text "Typography")
304− ]
305− , el
306− [ Font.size 32 ]
307− (text "New Adjustments in Els")
308− , row
309− [ Font.size 120
310− , padding 80
311− ]
312− [ --corrected adjustment.full "corrected"
313− -- , corrected adjustment.capital "corrected capital"
314− el
315 [ Font.sizeByCapital
314 [ Font.sizeByCapital
315+ , Font.size 85
316 , Background.color (rgb 0 0.8 0.9)
316 , Background.color (rgb 0 0.8 0.9)
317− , above (el [ Font.size 12, moveUp 6 ] (text "corrected capital"))
317+ , above (el [ Font.size 24, moveUp 6 ] (text "corrected capital"))
318 , onLeft <|
318 , onLeft <|
319 el
319 el
320 [ centerY
320 [ centerY
321 , width (px 40)
321 , width (px 40)
322− , height (px 120)
322+ , height (px 85)
323 , Background.color (rgb 0.9 0.8 0)
323 , Background.color (rgb 0.9 0.8 0)
324 ]
324 ]
325 none
325 none
326 ]
326 ]
327 (text "Typography")
327 (text "Typography")
328 ]
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+ ]
329 , row [ spacing 120 ]
348 , row [ spacing 120 ]
330 [ paragraph
349 [ paragraph
331 [ Font.size 25
350 [ Font.size 25
@@ -465,8 +484,6 @@ viewAdjustment label adjustment size left lineHeight updateWith =
465 onLeft
484 onLeft
466 (el
485 (el
467 [ moveLeft left
486 [ moveLeft left
468−
469− -- , moveUp (0.125 * toFloat size)
470 , height (px (round (toFloat size * lineHeight)))
487 , height (px (round (toFloat size * lineHeight)))
471 ]
488 ]
472 <|
489 <|
@@ -522,23 +539,6 @@ viewAdjustment label adjustment size left lineHeight updateWith =
522 , Border.width 1
539 , Border.width 1
523 , Border.color (Element.rgb 0.5 0.5 0.5)
540 , Border.color (Element.rgb 0.5 0.5 0.5)
524 , Background.color (Element.rgb 1 1 1)
541 , Background.color (Element.rgb 1 1 1)
525−
526− -- , onRight
527− -- (el
528− -- [ height (px 0)
529− -- , width (px 1200)
530− -- , moveDown 8
531− -- , Border.color (rgb 0 0 0)
532− -- , Border.dashed
533− -- , Border.widthEach
534− -- { top = 1
535− -- , right = 0
536− -- , bottom = 0
537− -- , left = 0
538− -- }
539− -- ]
540− -- none
541− -- )
542 ]
542 ]
543 , value = adjustment
543 , value = adjustment
544 }
544 }
experiments/virtual-css/Main.elmnew file+46
@@ -0,0 +1,46 @@
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/Makefilenew file+1
@@ -0,0 +1 @@
1+elm-live Main.elm --open --start-page=test.html -- --output=elm.js
experiments/virtual-css/cssom.jsnew file+47
@@ -0,0 +1,47 @@
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+}())
tests/elm.json → experiments/virtual-css/elm.jsonrenamed+4−9
@@ -1,10 +1,8 @@
1{
1{
2 "type": "application",
2 "type": "application",
3 "source-directories": [
3 "source-directories": [
4− "src",
4+ ".",
5− "suite",
6− "../src",
5+ "../../src/"
7− "."
8 ],
6 ],
9 "elm-version": "0.19.0",
7 "elm-version": "0.19.0",
10 "dependencies": {
8 "dependencies": {
@@ -13,13 +11,10 @@
13 "elm/core": "1.0.0",
11 "elm/core": "1.0.0",
14 "elm/html": "1.0.0",
12 "elm/html": "1.0.0",
15 "elm/json": "1.0.0",
13 "elm/json": "1.0.0",
16− "elm/parser": "1.1.0",
17− "elm/random": "1.0.0",
18− "elm/time": "1.0.0",
19− "elm/virtual-dom": "1.0.0",
14+ "elm/virtual-dom": "1.0.0"
20− "elm-explorations/test": "1.1.0"
21 },
15 },
22 "indirect": {
16 "indirect": {
17+ "elm/time": "1.0.0",
23 "elm/url": "1.0.0"
18 "elm/url": "1.0.0"
24 }
19 }
25 },
20 },
experiments/virtual-css/test.htmlnew file+18
@@ -0,0 +1,18 @@
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.elmnew file+233
@@ -0,0 +1,233 @@
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.elmnew file+234
@@ -0,0 +1,234 @@
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.elmnew file+204
@@ -0,0 +1,204 @@
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.elmnew file+65
@@ -0,0 +1,65 @@
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+ }
experiments/workspace/elm.jsonnew file+25
@@ -0,0 +1,25 @@
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+}
notes/BENCHMARKS.mdnew file+20
@@ -0,0 +1,20 @@
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+
CHANGES-FROM-STYLE-ELEMENTS.md → notes/CHANGES-FROM-STYLE-ELEMENTS.mdrenamed+1−4
@@ -1,10 +1,7 @@
1# Compared to Style Elements
1# Compared to Style Elements
2
2
3−
4This was a MAJOR rewrite of Style Elements.
3This was a MAJOR rewrite of Style Elements.
5
4
6−
7−
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.
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.
9
6
10* **Lazy is here!** - It works with no weird caveats.
7* **Lazy is here!** - It works with no weird caveats.
@@ -119,7 +116,7 @@ Also of note, is that if something is `center`, then it will truly be in the cen
119
116
120- `Font.weight` has been removed in favor of `Font.extraBold`, `Font.regular`, `Font.light`, etc. All weights from 100 - 900 are represented.
117- `Font.weight` has been removed in favor of `Font.extraBold`, `Font.regular`, `Font.light`, etc. All weights from 100 - 900 are represented.
121- `Background.image` and `Background.fittedImage` will place a centered background image, instead of anchoring at the top left.
118- `Background.image` and `Background.fittedImage` will place a centered background image, instead of anchoring at the top left.
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.
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.
123- `transparent` - Set an element as transparent. It will take up space, but otherwise be transparent and unclickable.
120- `transparent` - Set an element as transparent. It will take up space, but otherwise be transparent and unclickable.
124- `alpha` can now be set for an element.
121- `alpha` can now be set for an element.
125- `attribute` has been renamed `htmlAttribute` to better convey what it's used for.
122- `attribute` has been renamed `htmlAttribute` to better convey what it's used for.
notes/RUNNING_TESTS.mdnew file+65
@@ -0,0 +1,65 @@
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.mdnew file+29
@@ -0,0 +1,29 @@
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.mdnew file+135
@@ -0,0 +1,135 @@
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.mdnew file+67
@@ -0,0 +1,67 @@
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.mdnew file+13
@@ -0,0 +1,13 @@
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.mdnew file+132
@@ -0,0 +1,132 @@
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.mdnew file+24
@@ -0,0 +1,24 @@
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.mdnew file+9
@@ -0,0 +1,9 @@
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.mdnew file+12
@@ -0,0 +1,12 @@
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.mdnew file+12
@@ -0,0 +1,12 @@
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.mdnew file+10
@@ -0,0 +1,10 @@
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.jsonnew file+1235
@@ -0,0 +1,1235 @@
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.jsonnew file+34
@@ -0,0 +1,34 @@
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+136−61
@@ -34,7 +34,7 @@ module Element exposing
34
34
35# Rows and Columns
35# Rows and Columns
36
36
37−When we want more than one child on an element, we want to be _specific_ about how they will be layed out.
37+When we want more than one child on an element, we want to be _specific_ about how they will be laid out.
38
38
39So, the common ways to do that would be `row` and `column`.
39So, the common ways to do that would be `row` and `column`.
40
40
@@ -105,9 +105,11 @@ If alignment is set on elements in a layout such as `row`, then the element will
105
105
106will result in a layout like
106will result in a layout like
107
107
108− |-|-| |-| |-|
108+ |-|-| |-| |-|
109
109
110−Where there are two elements on the left, one in the center, and one on the right.
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.
111+
112+**Note** For text alignment, check out `Element.Font`!
111
113
112@docs centerX, centerY, alignLeft, alignRight, alignTop, alignBottom
114@docs centerX, centerY, alignLeft, alignRight, alignTop, alignBottom
113
115
@@ -189,11 +191,7 @@ The main technique for responsiveness is to store window size information in you
189
191
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).
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).
191
193
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−
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.
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.
197
195
198@docs Device, DeviceClass, Orientation, classifyDevice
196@docs Device, DeviceClass, Orientation, classifyDevice
199
197
@@ -299,7 +297,7 @@ fromRgb255 clr =
299 clr.alpha
297 clr.alpha
300
298
301
299
302−{-| Deconstruct a `Color` into it's rgb channels.
300+{-| Deconstruct a `Color` into its rgb channels.
303-}
301-}
304toRgb :
302toRgb :
305 Color
303 Color
@@ -469,11 +467,11 @@ type alias Option =
469 Internal.Option
467 Internal.Option
470
468
471
469
472−{-| Elm UI embeds two StyleSheets, one that is constant, and one that changes dynamically based on styles collected from the elments being rendered.
470+{-| Elm UI embeds two StyleSheets, one that is constant, and one that changes dynamically based on styles collected from the elements being rendered.
473
471
474This option will stop the static/constant stylesheet from rendering.
472This option will stop the static/constant stylesheet from rendering.
475
473
476−Make sure to render the constant/static stylesheet at least once on your page!
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.
477
475
478-}
476-}
479noStaticStyleSheet : Option
477noStaticStyleSheet : Option
@@ -647,14 +645,34 @@ wrappedRow attrs children =
647 newPadding =
645 newPadding =
648 case padded of
646 case padded of
649 Just (Internal.Padding name t r b l) ->
647 Just (Internal.Padding name t r b l) ->
650− if r >= (x // 2) && b >= (y // 2) then
648+ if r >= (toFloat x / 2) && b >= (toFloat y / 2) then
649+ let
650+ newTop =
651+ t - (toFloat y / 2)
652+
653+ newRight =
654+ r - (toFloat x / 2)
655+
656+ newBottom =
657+ b - (toFloat y / 2)
658+
659+ newLeft =
660+ l - (toFloat x / 2)
661+ in
651 Just <|
662 Just <|
652− paddingEach
663+ Internal.StyleClass Flag.padding
653− { top = t - (y // 2)
664+ (Internal.PaddingStyle
654− , right = r - (x // 2)
665+ (Internal.paddingNameFloat
655− , bottom = b - (y // 2)
666+ newTop
656− , left = l - (x // 2)
667+ newRight
657− }
668+ newBottom
669+ newLeft
670+ )
671+ newTop
672+ newRight
673+ newBottom
674+ newLeft
675+ )
658
676
659 else
677 else
660 Nothing
678 Nothing
@@ -990,14 +1008,15 @@ tableHelper attrs config =
990
1008
991{-| A paragraph will layout all children as wrapped, inline elements.
1009{-| A paragraph will layout all children as wrapped, inline elements.
992
1010
993− import Element
1011+ import Element exposing (el, paragraph, text)
994 import Element.Font as Font
1012 import Element.Font as Font
995
1013
1014+ view =
996− Element.paragraph []
1015+ paragraph []
997− [ text "lots of text ...."
1016+ [ text "lots of text ...."
998− , el [ Font.bold ] (text "this is bold")
1017+ , el [ Font.bold ] (text "this is bold")
999− , text "lots of text ...."
1018+ , text "lots of text ...."
1000− ]
1019+ ]
1001
1020
1002This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.
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.
1003
1022
@@ -1005,17 +1024,18 @@ Also, if a child element has `alignLeft` or `alignRight`, then it will be moved
1005
1024
1006This makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).
1025This makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).
1007
1026
1008− import Element
1027+ import Element exposing (alignLeft, el, padding, paragraph, text)
1009 import Element.Font as Font
1028 import Element.Font as Font
1010
1029
1011− Element.paragraph []
1030+ view =
1031+ paragraph []
1012− [ el
1032+ [ el
1013− [ alignLeft
1033+ [ alignLeft
1014− , padding 5
1034+ , padding 5
1035+ ]
1036+ (text "S")
1037+ , text "o much text ...."
1015 ]
1038 ]
1016− (text "S")
1017− , text "o much text ...."
1018− ]
1019
1039
1020Which will look something like
1040Which will look something like
1021
1041
@@ -1145,6 +1165,8 @@ link attrs { url, label } =
1145 (classes.contentCenterX
1165 (classes.contentCenterX
1146 ++ " "
1166 ++ " "
1147 ++ classes.contentCenterY
1167 ++ classes.contentCenterY
1168+ ++ " "
1169+ ++ classes.link
1148 )
1170 )
1149 :: attrs
1171 :: attrs
1150 )
1172 )
@@ -1168,18 +1190,19 @@ newTabLink attrs { url, label } =
1168 :: Internal.Attr (Html.Attributes.target "_blank")
1190 :: Internal.Attr (Html.Attributes.target "_blank")
1169 :: width shrink
1191 :: width shrink
1170 :: height shrink
1192 :: height shrink
1193+ :: Internal.htmlClass
1171− :: Internal.htmlClass (classes.contentCenterX ++ " " ++ classes.contentCenterY)
1194+ (classes.contentCenterX
1195+ ++ " "
1196+ ++ classes.contentCenterY
1197+ ++ " "
1198+ ++ classes.link
1199+ )
1172 :: attrs
1200 :: attrs
1173 )
1201 )
1174 (Internal.Unkeyed [ label ])
1202 (Internal.Unkeyed [ label ])
1175
1203
1176
1204
1177{-| A link to download a file.
1205{-| A link to download a file.
1178−
1179−**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.
1180−
1181−[Here's a description of what needs to happen](https://github.com/elm/html/issues/175).
1182−
1183-}
1206-}
1184download :
1207download :
1185 List (Attribute msg)
1208 List (Attribute msg)
@@ -1228,28 +1251,42 @@ downloadAs attrs { url, filename, label } =
1228 (Internal.Unkeyed [ label ])
1251 (Internal.Unkeyed [ label ])
1229
1252
1230
1253
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+
1231{-| -}
1268{-| -}
1232below : Element msg -> Attribute msg
1269below : Element msg -> Attribute msg
1233below element =
1270below element =
1234− Internal.Nearby Internal.Below element
1271+ createNearby Internal.Below element
1235
1272
1236
1273
1237{-| -}
1274{-| -}
1238above : Element msg -> Attribute msg
1275above : Element msg -> Attribute msg
1239above element =
1276above element =
1240− Internal.Nearby Internal.Above element
1277+ createNearby Internal.Above element
1241
1278
1242
1279
1243{-| -}
1280{-| -}
1244onRight : Element msg -> Attribute msg
1281onRight : Element msg -> Attribute msg
1245onRight element =
1282onRight element =
1246− Internal.Nearby Internal.OnRight element
1283+ createNearby Internal.OnRight element
1247
1284
1248
1285
1249{-| -}
1286{-| -}
1250onLeft : Element msg -> Attribute msg
1287onLeft : Element msg -> Attribute msg
1251onLeft element =
1288onLeft element =
1252− Internal.Nearby Internal.OnLeft element
1289+ createNearby Internal.OnLeft element
1253
1290
1254
1291
1255{-| This will place an element in front of another.
1292{-| This will place an element in front of another.
@@ -1259,14 +1296,14 @@ onLeft element =
1259-}
1296-}
1260inFront : Element msg -> Attribute msg
1297inFront : Element msg -> Attribute msg
1261inFront element =
1298inFront element =
1262− Internal.Nearby Internal.InFront element
1299+ createNearby Internal.InFront element
1263
1300
1264
1301
1265{-| This will place an element between the background and the content of an element.
1302{-| This will place an element between the background and the content of an element.
1266-}
1303-}
1267behindContent : Element msg -> Attribute msg
1304behindContent : Element msg -> Attribute msg
1268behindContent element =
1305behindContent element =
1269− Internal.Nearby Internal.Behind element
1306+ createNearby Internal.Behind element
1270
1307
1271
1308
1272{-| -}
1309{-| -}
@@ -1287,7 +1324,8 @@ scale n =
1287 Internal.TransformComponent Flag.scale (Internal.Scale ( n, n, 1 ))
1324 Internal.TransformComponent Flag.scale (Internal.Scale ( n, n, 1 ))
1288
1325
1289
1326
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)
1290−{-| -}
1328+-}
1291rotate : Float -> Attr decorative msg
1329rotate : Float -> Attr decorative msg
1292rotate angle =
1330rotate angle =
1293 Internal.TransformComponent Flag.rotate (Internal.Rotate ( 0, 0, 1 ) angle)
1331 Internal.TransformComponent Flag.rotate (Internal.Rotate ( 0, 0, 1 ) angle)
@@ -1320,7 +1358,11 @@ moveLeft x =
1320{-| -}
1358{-| -}
1321padding : Int -> Attribute msg
1359padding : Int -> Attribute msg
1322padding x =
1360padding x =
1361+ let
1362+ f =
1363+ toFloat x
1364+ in
1323− Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) x x x x)
1365+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) f f f f)
1324
1366
1325
1367
1326{-| Set horizontal and vertical padding.
1368{-| Set horizontal and vertical padding.
@@ -1328,16 +1370,27 @@ padding x =
1328paddingXY : Int -> Int -> Attribute msg
1370paddingXY : Int -> Int -> Attribute msg
1329paddingXY x y =
1371paddingXY x y =
1330 if x == y then
1372 if x == y then
1373+ let
1374+ f =
1375+ toFloat x
1376+ in
1331− Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) x x x x)
1377+ Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt x) f f f f)
1332
1378
1333 else
1379 else
1380+ let
1381+ xFloat =
1382+ toFloat x
1383+
1384+ yFloat =
1385+ toFloat y
1386+ in
1334 Internal.StyleClass Flag.padding
1387 Internal.StyleClass Flag.padding
1335 (Internal.PaddingStyle
1388 (Internal.PaddingStyle
1336 ("p-" ++ String.fromInt x ++ "-" ++ String.fromInt y)
1389 ("p-" ++ String.fromInt x ++ "-" ++ String.fromInt y)
1337− y
1390+ yFloat
1338− x
1391+ xFloat
1339− y
1392+ yFloat
1340− x
1393+ xFloat
1341 )
1394 )
1342
1395
1343
1396
@@ -1358,16 +1411,26 @@ And then just do
1358paddingEach : { top : Int, right : Int, bottom : Int, left : Int } -> Attribute msg
1411paddingEach : { top : Int, right : Int, bottom : Int, left : Int } -> Attribute msg
1359paddingEach { top, right, bottom, left } =
1412paddingEach { top, right, bottom, left } =
1360 if top == right && top == bottom && top == left then
1413 if top == right && top == bottom && top == left then
1414+ let
1415+ topFloat =
1416+ toFloat top
1417+ in
1418+ Internal.StyleClass Flag.padding
1361− Internal.StyleClass Flag.padding (Internal.PaddingStyle ("p-" ++ String.fromInt top) top top top top)
1419+ (Internal.PaddingStyle ("p-" ++ String.fromInt top)
1420+ topFloat
1421+ topFloat
1422+ topFloat
1423+ topFloat
1424+ )
1362
1425
1363 else
1426 else
1364 Internal.StyleClass Flag.padding
1427 Internal.StyleClass Flag.padding
1365 (Internal.PaddingStyle
1428 (Internal.PaddingStyle
1366 (Internal.paddingName top right bottom left)
1429 (Internal.paddingName top right bottom left)
1367− top
1430+ (toFloat top)
1368− right
1431+ (toFloat right)
1369− bottom
1432+ (toFloat bottom)
1370− left
1433+ (toFloat left)
1371 )
1434 )
1372
1435
1373
1436
@@ -1442,7 +1505,7 @@ transparent on =
1442
1505
1443{-| A capped value between 0.0 and 1.0, where 0.0 is transparent and 1.0 is fully opaque.
1506{-| A capped value between 0.0 and 1.0, where 0.0 is transparent and 1.0 is fully opaque.
1444
1507
1445−Semantically equavalent to html opacity.
1508+Semantically equivalent to html opacity.
1446
1509
1447-}
1510-}
1448alpha : Float -> Attr decorative msg
1511alpha : Float -> Attr decorative msg
@@ -1532,17 +1595,29 @@ type Orientation
1532
1595
1533
1596
1534{-| Takes in a Window.Size and returns a device profile which can be used for responsiveness.
1597{-| 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+
1535-}
1601-}
1536classifyDevice : { window | height : Int, width : Int } -> Device
1602classifyDevice : { window | height : Int, width : Int } -> Device
1537classifyDevice window =
1603classifyDevice window =
1604+ -- Tested in this ellie:
1605+ -- https://ellie-app.com/68QM7wLW8b9a1
1538 { class =
1606 { class =
1607+ let
1608+ longSide =
1609+ max window.width window.height
1610+
1611+ shortSide =
1612+ min window.width window.height
1613+ in
1539− if window.width <= 600 then
1614+ if shortSide < 600 then
1540 Phone
1615 Phone
1541
1616
1542− else if window.width > 600 && window.width <= 1200 then
1617+ else if longSide <= 1200 then
1543 Tablet
1618 Tablet
1544
1619
1545− else if window.width > 1200 && window.width <= 1800 then
1620+ else if longSide > 1200 && longSide <= 1920 then
1546 Desktop
1621 Desktop
1547
1622
1548 else
1623 else
@@ -1559,7 +1634,7 @@ classifyDevice window =
1559{-| When designing it's nice to use a modular scale to set spacial rythms.
1634{-| When designing it's nice to use a modular scale to set spacial rythms.
1560
1635
1561 scaled =
1636 scaled =
1562− Scale.modular 16 1.25
1637+ Element.modular 16 1.25
1563
1638
1564A modular scale starts with a number, and multiplies it by a ratio a number of times.
1639A modular scale starts with a number, and multiplies it by a ratio a number of times.
1565Then, when setting font sizes you can use:
1640Then, 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"))
35 Internal.Attr (VirtualDom.style "background" ("url(\"" ++ src ++ "\") center / cover no-repeat"))
36
36
37
37
38−{-| A centered background image that keeps its natural propostions, but scales to fit the space.
38+{-| A centered background image that keeps its natural proportions, but scales to fit the space.
39-}
39-}
40uncropped : String -> Attribute msg
40uncropped : String -> Attribute msg
41uncropped src =
41uncropped src =
src/Element/Border.elm+2−2
@@ -232,7 +232,7 @@ shadow almostShade =
232 in
232 in
233 Internal.StyleClass Flag.shadows <|
233 Internal.StyleClass Flag.shadows <|
234 Internal.Single
234 Internal.Single
235− (Internal.boxShadowName shade)
235+ (Internal.boxShadowClass shade)
236 "box-shadow"
236 "box-shadow"
237 (Internal.formatBoxShadow shade)
237 (Internal.formatBoxShadow shade)
238
238
@@ -257,7 +257,7 @@ innerShadow almostShade =
257 in
257 in
258 Internal.StyleClass Flag.shadows <|
258 Internal.StyleClass Flag.shadows <|
259 Internal.Single
259 Internal.Single
260− (Internal.boxShadowName shade)
260+ (Internal.boxShadowClass shade)
261 "box-shadow"
261 "box-shadow"
262 (Internal.formatBoxShadow shade)
262 (Internal.formatBoxShadow shade)
263
263
src/Element/Font.elm+95−33
@@ -1,11 +1,11 @@
1module Element.Font exposing
1module Element.Font exposing
2 ( color, size
2 ( color, size
3 , family, Font, typeface, serif, sansSerif, monospace
3 , family, Font, typeface, serif, sansSerif, monospace
4− , external, with, sizeByCapital, full
4+ , external
5 , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing
5 , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing
6 , underline, strike, italic, unitalicized
6 , underline, strike, italic, unitalicized
7 , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline
7 , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline
8− , Variant, variant, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
8+ , Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
9 , glow, shadow
9 , glow, shadow
10 )
10 )
11
11
@@ -36,24 +36,7 @@ module Element.Font exposing
36
36
37@docs family, Font, typeface, serif, sansSerif, monospace
37@docs family, Font, typeface, serif, sansSerif, monospace
38
38
39−@docs external, with, sizeByCapital, full
39+@docs external
40−
41−`Font.external` can be used to import font files. Let's say you found a neat font on <http://fonts.google.com>:
42−
43− import Element
44− import Element.Font as Font
45−
46− view =
47− Element.el
48− [ Font.family
49− [ Font.external
50− { name = "Roboto"
51− , url = "https://fonts.googleapis.com/css?family=Roboto"
52− }
53− , Font.sansSerif
54− ]
55− ]
56− (Element.text "Woohoo, I'm stylish text")
57
40
58
41
59## Alignment and Spacing
42## Alignment and Spacing
@@ -73,7 +56,7 @@ module Element.Font exposing
73
56
74## Variants
57## Variants
75
58
76−@docs Variant, variant, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
59+@docs Variant, variant, variantList, smallCaps, slashedZero, ligatures, ordinal, tabularNumbers, stackedFractions, diagonalFractions, swash, feature, indexed
77
60
78
61
79## Shadows
62## Shadows
@@ -96,7 +79,13 @@ type alias Font =
96{-| -}
79{-| -}
97color : Color -> Attr decorative msg
80color : Color -> Attr decorative msg
98color fontColor =
81color fontColor =
82+ Internal.StyleClass
83+ Flag.fontColor
84+ (Internal.Colored
99− Internal.StyleClass Flag.fontColor (Internal.Colored ("fc-" ++ Internal.formatColorClass fontColor) "color" fontColor)
85+ ("fc-" ++ Internal.formatColorClass fontColor)
86+ "color"
87+ fontColor
88+ )
100
89
101
90
102{-|
91{-|
@@ -116,7 +105,12 @@ color fontColor =
116-}
105-}
117family : List Font -> Attribute msg
106family : List Font -> Attribute msg
118family families =
107family families =
108+ Internal.StyleClass
109+ Flag.fontFamily
110+ (Internal.FontFamily
119− Internal.StyleClass Flag.fontFamily <| Internal.FontFamily (List.foldl Internal.renderFontClassName "ff-" families) families
111+ (List.foldl Internal.renderFontClassName "ff-" families)
112+ families
113+ )
120
114
121
115
122{-| -}
116{-| -}
@@ -155,8 +149,7 @@ type alias Adjustment =
155{-| -}
149{-| -}
156with :
150with :
157 { name : String
151 { name : String
158− , adjustment : Adjustment
152+ , adjustment : Maybe Adjustment
159− , url : Maybe String
160 , variants : List Variant
153 , variants : List Variant
161 }
154 }
162 -> Font
155 -> Font
@@ -176,7 +169,30 @@ full =
176 Internal.htmlClass classes.fullSize
169 Internal.htmlClass classes.fullSize
177
170
178
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+
179−{-| -}
195+-}
180external : { url : String, name : String } -> Font
196external : { url : String, name : String } -> Font
181external { url, name } =
197external { url, name } =
182 Internal.ImportFont name url
198 Internal.ImportFont name url
@@ -330,7 +346,7 @@ shadow :
330 -> Attr decorative msg
346 -> Attr decorative msg
331shadow shade =
347shadow shade =
332 Internal.StyleClass Flag.txtShadows <|
348 Internal.StyleClass Flag.txtShadows <|
333− Internal.Single (Internal.textShadowName shade) "text-shadow" (Internal.formatTextShadow shade)
349+ Internal.Single (Internal.textShadowClass shade) "text-shadow" (Internal.formatTextShadow shade)
334
350
335
351
336{-| A glow is just a simplified shadow.
352{-| A glow is just a simplified shadow.
@@ -345,7 +361,7 @@ glow clr i =
345 }
361 }
346 in
362 in
347 Internal.StyleClass Flag.txtShadows <|
363 Internal.StyleClass Flag.txtShadows <|
348− Internal.Single (Internal.textShadowName shade) "text-shadow" (Internal.formatTextShadow shade)
364+ Internal.Single (Internal.textShadowClass shade) "text-shadow" (Internal.formatTextShadow shade)
349
365
350
366
351
367
@@ -360,13 +376,11 @@ type alias Variant =
360{-| You can use this to set a single variant on an element itself such as:
376{-| You can use this to set a single variant on an element itself such as:
361
377
362 el
378 el
363− [ Font.variant Font.smallcaps
379+ [ Font.variant Font.smallCaps
364 ]
380 ]
365− (text "rendered with smallcaps")
381+ (text "rendered with smallCaps")
366−
367−**Note** These will **not** stack. If you want multiple variants, you should use `Font.with`.
368
382
369−If you specify a font variant on an element, then it will override all variants listed in `Font.with`.
383+**Note** These will **not** stack. If you want multiple variants, you should use `Font.variantList`.
370
384
371-}
385-}
372variant : Variant -> Attribute msg
386variant : Variant -> Attribute msg
@@ -385,6 +399,54 @@ variant var =
385 ("\"" ++ name ++ "\" " ++ String.fromInt index)
399 ("\"" ++ name ++ "\" " ++ String.fromInt index)
386
400
387
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+
388{-| [Small caps](https://en.wikipedia.org/wiki/Small_caps) are rendered using uppercase glyphs, but at the size of lowercase glyphs.
450{-| [Small caps](https://en.wikipedia.org/wiki/Small_caps) are rendered using uppercase glyphs, but at the size of lowercase glyphs.
389-}
451-}
390smallCaps : Variant
452smallCaps : Variant
src/Element/Input.elm+776−411
@@ -1,51 +1,186 @@
1module Element.Input exposing
1module Element.Input exposing
2+ ( focusedOnLoad
2− ( button
3+ , button
3 , checkbox, defaultCheckbox
4 , checkbox, defaultCheckbox
5+ , text, multiline
4− , text, Placeholder, placeholder
6+ , Placeholder, placeholder
5 , username, newPassword, currentPassword, email, search, spellChecked
7 , username, newPassword, currentPassword, email, search, spellChecked
6− , multiline
7 , slider, Thumb, thumb, defaultThumb
8 , slider, Thumb, thumb, defaultThumb
8 , radio, radioRow, Option, option, optionWith, OptionState(..)
9 , radio, radioRow, Option, option, optionWith, OptionState(..)
9 , Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden
10 , Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden
10− , focusedOnLoad
11 )
11 )
12
12
13−{-|
13+{-| Input elements have a lot of constraints!
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
14
36
15@docs button
37@docs button
16
38
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+
17@docs checkbox, defaultCheckbox
62@docs checkbox, defaultCheckbox
18
63
19
64
20−## Text Input
65+# Text
21
66
22−@docs text, Placeholder, placeholder
67+@docs text, multiline
23
68
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.
69+@docs Placeholder, placeholder
25
70
26−@docs username, newPassword, currentPassword, email, search, spellChecked
27
71
72+## Text with autofill
73+
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.
75+
76+The following inputs are very similar to `Input.text`, but they give the browser a hint to allow autofill to work correctly.
77+
78+@docs username, newPassword, currentPassword, email, search, spellChecked
28
79
29−## Multiline Text
30
80
31−@docs multiline
81+# Sliders
32
82
83+A slider is great for choosing between a range of numerical values.
33
84
34−## Slider
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.
35
87
36@docs slider, Thumb, thumb, defaultThumb
88@docs slider, Thumb, thumb, defaultThumb
37
89
38
90
39−## Radio Buttons
91+# Radio Selection
92+
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).
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+
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+
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`!
40
114
41@docs radio, radioRow, Option, option, optionWith, OptionState
115@docs radio, radioRow, Option, option, optionWith, OptionState
42
116
43
117
44−## Labels
118+# Labels
119+
120+Every input has a required `Label`.
45
121
46@docs Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden
122@docs Label, labelAbove, labelBelow, labelLeft, labelRight, labelHidden
47
123
48−@docs focusedOnLoad
124+
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?
49
184
50-}
185-}
51
186
@@ -97,13 +232,33 @@ type LabelLocation
97 | Below
232 | Below
98
233
99
234
100−{-| Every input has a required `label`.
101−-}
235+{-| -}
102type Label msg
236type Label msg
103 = Label LabelLocation (List (Attribute msg)) (Element msg)
237 = Label LabelLocation (List (Attribute msg)) (Element msg)
104 | HiddenLabel String
238 | HiddenLabel String
105
239
106
240
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+
107{-| -}
262{-| -}
108labelRight : List (Attribute msg) -> Element msg -> Label msg
263labelRight : List (Attribute msg) -> Element msg -> Label msg
109labelRight =
264labelRight =
@@ -137,7 +292,7 @@ The situations where a hidden label makes sense:
137 - A searchbar with a `search` button right next to it.
292 - A searchbar with a `search` button right next to it.
138 - A `table` of inputs where the header gives the label.
293 - A `table` of inputs where the header gives the label.
139
294
140−Basically, a hidden label makes sense when there are other contextual clues that sighted people can pick up on.
295+Basically, a hidden label works when there are other contextual clues that sighted people can pick up on.
141
296
142-}
297-}
143labelHidden : String -> Label msg
298labelHidden : String -> Label msg
@@ -156,16 +311,26 @@ hiddenLabelAttribute label =
156
311
157{-| A standard button.
312{-| A standard button.
158
313
159−The `onPress` handler will be fired either `onClick` or when the element is focused and the enter key has been pressed.
314+The `onPress` handler will be fired either `onClick` or when the element is focused and the `Enter` key has been pressed.
160
315
316+ import Element exposing (rgb255, text)
317+ import Element.Background as Background
161 import Element.Input as Input
318 import Element.Input as Input
162
319
320+ blue =
321+ Element.rgb255 238 238 238
322+
323+ myButton =
163− Input.button []
324+ Input.button
325+ [ Background.color blue
326+ , Element.focused
327+ [ Background.color purple ]
328+ ]
164− { onPress = ClickMsg
329+ { onPress = Just ClickMsg
165− , label = text "My Button"
330+ , label = text "My Button"
166− }
331+ }
167
332
168−`onPress` takes a `Maybe msg`. If you provide the value `Nothing`, then the button will be disabled.
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.
169
334
170-}
335-}
171button :
336button :
@@ -204,7 +369,17 @@ button attrs { onPress, label } =
204
369
205 Just msg ->
370 Just msg ->
206 Events.onClick msg
371 Events.onClick msg
207− :: onEnter msg
372+ :: onKeyLookup
373+ (\code ->
374+ if code == enter then
375+ Just msg
376+
377+ else if code == space then
378+ Just msg
379+
380+ else
381+ Nothing
382+ )
208 :: attrs
383 :: attrs
209 )
384 )
210 )
385 )
@@ -237,7 +412,14 @@ type alias Checkbox msg =
237 }
412 }
238
413
239
414
240−{-| -}
415+{-|
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+-}
241checkbox :
423checkbox :
242 List (Attribute msg)
424 List (Attribute msg)
243 ->
425 ->
@@ -275,22 +457,24 @@ checkbox attrs { label, icon, checked, onChange } =
275 ]
457 ]
276 ++ attrs
458 ++ attrs
277 in
459 in
278− applyLabel attributes
460+ applyLabel
279− label
280− (Internal.element
281− Internal.asEl
282− Internal.div
283− [ Internal.Attr <|
284− Html.Attributes.attribute "role" "checkbox"
461+ (Internal.Attr (Html.Attributes.attribute "role" "checkbox")
285− , Internal.Attr <|
462+ :: Internal.Attr
286− Html.Attributes.attribute "aria-checked" <|
463+ (Html.Attributes.attribute "aria-checked" <|
287 if checked then
464 if checked then
288 "true"
465 "true"
289
466
290 else
467 else
291 "false"
468 "false"
469+ )
292− , hiddenLabelAttribute label
470+ :: hiddenLabelAttribute label
471+ :: attributes
472+ )
473+ label
474+ (Internal.element
475+ Internal.asEl
476+ Internal.div
293− , Element.centerY
477+ [ Element.centerY
294 , Element.height Element.fill
478 , Element.height Element.fill
295 , Element.width Element.shrink
479 , Element.width Element.shrink
296 ]
480 ]
@@ -343,7 +527,9 @@ defaultThumb =
343 )
527 )
344 ]
528 ]
345 { onChange = AdjustValue
529 { onChange = AdjustValue
530+ , label =
531+ Input.labelAbove []
346− , label = Input.labelAbove [] (text "My Slider Value")
532+ (text "My Slider Value")
347 , min = 0
533 , min = 0
348 , max = 75
534 , max = 75
349 , step = Nothing
535 , step = Nothing
@@ -352,7 +538,7 @@ defaultThumb =
352 Input.defaultThumb
538 Input.defaultThumb
353 }
539 }
354
540
355−The `thumb` is the icon that you can move around.
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.
356
542
357The slider can be vertical or horizontal depending on the width/height of the slider.
543The slider can be vertical or horizontal depending on the width/height of the slider.
358
544
@@ -360,7 +546,7 @@ The slider can be vertical or horizontal depending on the width/height of the sl
360 - `height (px someHeight)` and `width (px someWidth)` where `someHeight` > `someWidth` will also do it.
546 - `height (px someHeight)` and `width (px someWidth)` where `someHeight` > `someWidth` will also do it.
361 - otherwise, the slider will be horizontal.
547 - otherwise, the slider will be horizontal.
362
548
363−**Note:** If you want a slider for an `Int` value:
549+**Note** If you want a slider for an `Int` value:
364
550
365 - set `step` to be `Just 1`, or some other whole value
551 - set `step` to be `Just 1`, or some other whole value
366 - `value = toFloat model.myInt`
552 - `value = toFloat model.myInt`
@@ -527,7 +713,7 @@ slider attributes input =
527 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")
713 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")
528 thumbShadowStyle
714 thumbShadowStyle
529 )
715 )
530− , Internal.Attr (Html.Attributes.class (className ++ " focusable-parent"))
716+ , Internal.Attr (Html.Attributes.class (className ++ " ui-slide-bar focusable-parent"))
531 , Internal.Attr
717 , Internal.Attr
532 (Html.Events.onInput
718 (Html.Events.onInput
533 (\str ->
719 (\str ->
@@ -593,10 +779,10 @@ slider attributes input =
593 -- This is after `attributes` because the thumb should be in front of everything.
779 -- This is after `attributes` because the thumb should be in front of everything.
594 ++ [ Element.behindContent <|
780 ++ [ Element.behindContent <|
595 if vertical then
781 if vertical then
596− viewVerticalThumb factor thumbAttributes trackWidth
782+ viewVerticalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackWidth
597
783
598 else
784 else
599− viewHorizontalThumb factor thumbAttributes trackHeight
785+ viewHorizontalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackHeight
600 ]
786 ]
601 )
787 )
602 Element.none
788 Element.none
@@ -669,304 +855,198 @@ type alias Text msg =
669 }
855 }
670
856
671
857
672−type Padding
673− = Padding Int Int Int Int
674−
675−
676−inheritablePlaceholderAttributes attr =
677− case attr of
678− Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->
679− True
680−
681− Internal.StyleClass _ (Internal.BorderWidth _ _ _ _ _) ->
682− True
683−
684− Internal.StyleClass _ (Internal.Transform _) ->
685− True
686−
687− _ ->
688− False
689−
690−
691−{-|
858+{-| -}
692−
693− attributes
694−
695− <parent>
696− attribute::width/height fill
697− attribtue::alignment
698− attribute::spacing
699− attribute::fontsize/family/lineheight
700− <el-wrapper>
701− attribute::nearby(placeholder)
702− attribute::width/height fill
703− inFront ->
704− placeholder
705− attribute::padding
706−
707−
708− <input>
709− textarea ->
710− special height for height-content
711− attribtue::padding
712− attribute::lineHeight
713− attributes
714− <label>
715−
716−-}
717textHelper : TextInput -> List (Attribute msg) -> Text msg -> Element msg
859textHelper : TextInput -> List (Attribute msg) -> Text msg -> Element msg
718textHelper textInput attrs textOptions =
860textHelper textInput attrs textOptions =
719 let
861 let
720− attributes =
862+ withDefaults =
721 defaultTextBoxStyle ++ attrs
863 defaultTextBoxStyle ++ attrs
722
864
723− behavior =
865+ redistributed =
724− [ Internal.Attr (Html.Events.onInput textOptions.onChange) ]
866+ redistribute (textInput.type_ == TextArea)
725−
867+ (isStacked textOptions.label)
726− forPlaceholder =
868+ withDefaults
727− List.filter inheritablePlaceholderAttributes attributes
728−
729− noNearbys =
730− List.filter (not << forNearby) attributes
731
869
732− forNearby attr =
870+ onlySpacing attr =
733 case attr of
871 case attr of
734− Internal.Nearby _ _ ->
872+ Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->
735 True
873 True
736
874
737 _ ->
875 _ ->
738 False
876 False
739
877
740− ( inputNode, inputAttrs, inputChildren ) =
878+ getPadding attr =
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 =
741 case textInput.type_ of
895 case textInput.type_ of
742 TextInputNode inputType ->
896 TextInputNode inputType ->
743− ( "input"
897+ False
744− , [ value textOptions.text
745− , Internal.Attr (Html.Attributes.type_ inputType)
746− , spellcheck textInput.spellchecked
747− , Internal.htmlClass classes.inputText
748− , case textInput.autofill of
749− Nothing ->
750− Internal.NoAttribute
751−
752− Just fill ->
753− autofill fill
754− ]
755− ++ noNearbys
756− , []
757− )
758
898
759 TextArea ->
899 TextArea ->
760− let
900+ withDefaults
761− { maybePadding, heightContent, maybeSpacing, adjustedAttributes, maybeBorder } =
901+ |> List.filterMap getHeight
762− attributes
902+ |> List.reverse
763− |> List.foldr
903+ |> List.head
764− (\attr found ->
904+ |> Maybe.map isConstrained
765− case attr of
766− Internal.Describe _ ->
767− found
768−
769− Internal.Height len ->
770− case found.heightContent of
771− Nothing ->
772− { found
773− | heightContent = Just (Internal.isContent len)
774− , adjustedAttributes = attr :: found.adjustedAttributes
775− }
776−
777− _ ->
778− found
779−
780− Internal.StyleClass _ (Internal.BorderWidth _ t r b l) ->
781− case found.maybeBorder of
782− Nothing ->
783− { found
784− | maybeBorder = Just (Padding t r b l)
785− , adjustedAttributes = attr :: found.adjustedAttributes
786− }
787−
788− _ ->
789− found
790−
791− Internal.StyleClass _ (Internal.PaddingStyle _ t r b l) ->
792− case found.maybePadding of
793− Nothing ->
794− { found
795− | maybePadding = Just (Padding t r b l)
796−
797− -- Skip storing padding because it's being customized later
798− , adjustedAttributes = found.adjustedAttributes
799− }
800−
801− _ ->
802− found
803−
804− Internal.StyleClass _ (Internal.SpacingStyle _ x y) ->
805− case found.maybeSpacing of
806− Nothing ->
807− { found
808− | maybeSpacing = Just y
809− , adjustedAttributes = attr :: found.adjustedAttributes
810− }
811−
812− _ ->
813− found
814−
815− _ ->
816− { found | adjustedAttributes = attr :: found.adjustedAttributes }
817− )
818− { maybePadding = Nothing
819− , heightContent = Nothing
820− , maybeBorder = Nothing
821− , maybeSpacing = Nothing
822− , adjustedAttributes = []
823− }
824−
825− -- NOTE: This is where default text spacing is set
826− spacing =
827− Maybe.withDefault 5 maybeSpacing
828− in
829− ( "textarea"
830− , [ spellcheck textInput.spellchecked
831− , Internal.htmlClass classes.inputMultiline
832− , Maybe.map autofill textInput.autofill
833− |> Maybe.withDefault Internal.NoAttribute
905+ |> Maybe.withDefault False
834− , case maybePadding of
906+
835− Nothing ->
907+ parentPadding =
836− Internal.NoAttribute
908+ withDefaults
837−
909+ |> List.filterMap getPadding
838− Just (Padding t r b l) ->
910+ |> List.reverse
839− Element.paddingEach
911+ |> List.head
912+ |> Maybe.withDefault
840− { top = max 0 (t - (spacing // 2))
913+ { top = 0
914+ , right = 0
841− , bottom = max 0 (b - (spacing // 2))
915+ , bottom = 0
842− , left = l
916+ , left = 0
843− , right = r
917+ }
844− }
845− , case heightContent of
846− Nothing ->
847− Internal.NoAttribute
848−
849− Just True ->
850− textHeightContent textOptions.text spacing maybePadding maybeBorder
851−
852− Just False ->
853− Internal.NoAttribute
854− ]
855− ++ adjustedAttributes
856− , [ Internal.unstyled (Html.text textOptions.text) ]
857− )
858−
859− heightFillFromChild =
860− Internal.get attributes <|
861− \attr ->
862− case attr of
863− Internal.Height (Internal.Fill _) ->
864− True
865−
866− _ ->
867− False
868−
869− attributesFromChild =
870− Internal.get attributes <|
871− \attr ->
872− case attr of
873− Internal.Width (Internal.Fill _) ->
874− True
875−
876− Internal.Height (Internal.Fill _) ->
877− True
878−
879− Internal.AlignX _ ->
880− True
881−
882− Internal.AlignY _ ->
883− True
884−
885− Internal.StyleClass _ (Internal.SpacingStyle _ _ _) ->
886− True
887−
888− Internal.StyleClass _ (Internal.FontSize _) ->
889− True
890−
891− Internal.StyleClass _ (Internal.FontFamily _ _) ->
892− True
893−
894− _ ->
895− False
896−
897− nearbys =
898− Internal.get attributes <|
899− \attr ->
900− case attr of
901− Internal.Nearby _ _ ->
902− True
903−
904− _ ->
905− False
906−
907− inputPadding =
908− Internal.get attributes <|
909− \attr ->
910− case attr of
911− Internal.StyleClass _ (Internal.PaddingStyle _ _ _ _ _) ->
912− True
913−
914− _ ->
915− False
916
918
917 inputElement =
919 inputElement =
918 Internal.element
920 Internal.element
919 Internal.asEl
921 Internal.asEl
920− Internal.div
922+ (case textInput.type_ of
921− (Element.width Element.fill
923+ TextInputNode inputType ->
922− :: List.concat
924+ Internal.NodeName "input"
923− [ nearbys
925+
924− , heightFillFromChild
926+ TextArea ->
925− , case textOptions.placeholder of
927+ Internal.NodeName "textarea"
926− Nothing ->
928+ )
927− []
929+ ((case textInput.type_ of
928−
930+ TextInputNode inputType ->
929− Just (Placeholder placeholderAttrs placeholderEl) ->
931+ -- Note: Due to a weird edgecase in...Edge...
930− [ Element.inFront
932+ -- `type` needs to come _before_ `value`
931− (Element.el
933+ -- More reading: https://github.com/mdgriffith/elm-ui/pull/94/commits/4f493a27001ccc3cf1f2baa82e092c35d3811876
932− (defaultTextPadding
934+ [ Internal.Attr (Html.Attributes.type_ inputType)
933− :: forPlaceholder
935+ , Internal.htmlClass classes.inputText
934− ++ [ Font.color charcoal
936+ ]
935− , Internal.htmlClass (classes.noTextSelection ++ " " ++ classes.passPointerEvents)
937+
936− , Border.color (Element.rgba 0 0 0 0)
938+ TextArea ->
937− , Background.color (Element.rgba 0 0 0 0)
939+ [ Element.clip
938− , Element.height Element.fill
940+ , Element.height Element.fill
939− , Element.width Element.fill
941+ , Internal.htmlClass classes.inputMultiline
940− , Element.alpha
942+ , calcMoveToCompensateForPadding withDefaults
941− (if textOptions.text == "" then
943+
942− 1
944+ -- The only reason we do this padding trick is so that when the user clicks in the padding,
943−
945+ -- that the cursor will reset correctly.
944− else
946+ -- This could probably be combined with the above `calcMoveToCompensateForPadding`
945− 0
947+ , Element.paddingEach parentPadding
946− )
948+ , Internal.Attr (Html.Attributes.style "margin" (renderBox (negateBox parentPadding)))
947− ]
949+ , Internal.Attr (Html.Attributes.style "box-sizing" "content-box")
948− ++ placeholderAttrs
949− )
950− placeholderEl
951− )
952− ]
953 ]
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
954 )
960 )
955− (Internal.Unkeyed
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.
956− [ Internal.element
969+ Internal.element
957 Internal.asEl
970 Internal.asEl
958− (Internal.NodeName inputNode)
971+ Internal.div
959− (List.concat
972+ ((if heightConstrained then
960− [ [ focusDefault attrs
973+ (::) Element.scrollbarY
961− , hiddenLabelAttribute textOptions.label
974+
962− ]
975+ else
963− , inputAttrs
976+ identity
964− , behavior
977+ )
978+ [ Element.width Element.fill
979+ , if List.any hasFocusStyle withDefaults then
980+ Internal.NoAttribute
981+
982+ else
983+ Internal.htmlClass classes.focusedWithin
984+ , Internal.htmlClass classes.inputMultilineWrapper
965 ]
985 ]
986+ ++ redistributed.parent
966 )
987 )
967− (Internal.Unkeyed inputChildren)
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+
1026+ TextInputNode inputType ->
1027+ Internal.element
1028+ Internal.asEl
1029+ Internal.div
1030+ (Element.width Element.fill
1031+ :: (if List.any hasFocusStyle withDefaults then
1032+ Internal.NoAttribute
1033+
1034+ else
1035+ Internal.htmlClass classes.focusedWithin
1036+ )
1037+ :: List.concat
1038+ [ redistributed.parent
1039+ , case textOptions.placeholder of
1040+ Nothing ->
968− ]
1041+ []
969− )
1042+
1043+ Just place ->
1044+ [ Element.behindContent
1045+ (renderPlaceholder place redistributed.cover (textOptions.text == ""))
1046+ ]
1047+ ]
1048+ )
1049+ (Internal.Unkeyed [ inputElement ])
970 in
1050 in
971 applyLabel
1051 applyLabel
972 (Internal.Class Flag.cursor classes.cursorText
1052 (Internal.Class Flag.cursor classes.cursorText
@@ -978,45 +1058,348 @@ textHelper textInput attrs textOptions =
978 5
1058 5
979 )
1059 )
980 :: Region.announce
1060 :: Region.announce
981− :: attributesFromChild
1061+ :: redistributed.fullParent
982 )
1062 )
983 textOptions.label
1063 textOptions.label
984− inputElement
1064+ wrappedInput
1065+
1066+
1067+getHeight attr =
1068+ case attr of
1069+ Internal.Height h ->
1070+ Just h
1071+
1072+ _ ->
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"
985
1093
986
1094
987−textHeightContent textValue spacing maybePadding maybeBorder =
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 =
988 let
1123 let
989− newlineCount =
1124+ gatherSpacing attr found =
990− String.lines textValue
1125+ case attr of
991− |> List.length
1126+ Internal.StyleClass _ (Internal.SpacingStyle _ x y) ->
992− |> (\x ->
1127+ case found of
993− if x < 1 then
1128+ Nothing ->
994− 1
1129+ Just y
995−
1130+
996− else
1131+ _ ->
997− x
1132+ found
998− )
1133+
999−
1134+ _ ->
1000− topBottom (Padding t _ b _) =
1135+ found
1001− t + b
1002−
1003− additionalSpacing =
1004− ((newlineCount - 1) * spacing)
1005− + Maybe.withDefault 0 (Maybe.map topBottom maybePadding)
1006− + Maybe.withDefault 0 (Maybe.map topBottom maybeBorder)
1007−
1008− heightValue count =
1009− "calc("
1010− ++ String.fromInt count
1011− ++ "em + "
1012− ++ String.fromInt additionalSpacing
1013− ++ "px) !important"
1014 in
1136 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 =
1015− Internal.StyleClass Flag.heightTextAreaContent
1348+ Internal.StyleClass Flag.padding
1016− (Internal.Single ("textarea-height-" ++ String.fromInt newlineCount)
1349+ (Internal.PaddingStyle
1017− "height"
1350+ (Internal.paddingNameFloat
1018− (heightValue newlineCount)
1351+ newTop
1019− )
1352+ r
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 }
1020
1403
1021
1404
1022{-| -}
1405{-| -}
@@ -1078,7 +1461,7 @@ search =
1078
1461
1079It's `newPassword` instead of just `password` because it gives the browser a hint on what type of password input it is.
1462It's `newPassword` instead of just `password` because it gives the browser a hint on what type of password input it is.
1080
1463
1081−A password takes all the arguments a normal `Input.text` would, and also `show`, which will remove the password mask (e.g. `****` vs `pass1234`)
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`)
1082
1465
1083-}
1466-}
1084newPassword :
1467newPassword :
@@ -1178,7 +1561,13 @@ email =
1178 }
1561 }
1179
1562
1180
1563
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+
1181−{-| -}
1570+-}
1182multiline :
1571multiline :
1183 List (Attribute msg)
1572 List (Attribute msg)
1184 ->
1573 ->
@@ -1239,33 +1628,32 @@ applyLabel attrs label input =
1239 Internal.element
1628 Internal.element
1240 Internal.asColumn
1629 Internal.asColumn
1241 (Internal.NodeName "label")
1630 (Internal.NodeName "label")
1242− attrs
1631+ (Internal.htmlClass classes.inputLabel :: attrs)
1243 (Internal.Unkeyed [ labelElement, input ])
1632 (Internal.Unkeyed [ labelElement, input ])
1244
1633
1245 Below ->
1634 Below ->
1246 Internal.element
1635 Internal.element
1247 Internal.asColumn
1636 Internal.asColumn
1248 (Internal.NodeName "label")
1637 (Internal.NodeName "label")
1249− attrs
1638+ (Internal.htmlClass classes.inputLabel :: attrs)
1250 (Internal.Unkeyed [ input, labelElement ])
1639 (Internal.Unkeyed [ input, labelElement ])
1251
1640
1252 OnRight ->
1641 OnRight ->
1253 Internal.element
1642 Internal.element
1254 Internal.asRow
1643 Internal.asRow
1255 (Internal.NodeName "label")
1644 (Internal.NodeName "label")
1256− attrs
1645+ (Internal.htmlClass classes.inputLabel :: attrs)
1257 (Internal.Unkeyed [ input, labelElement ])
1646 (Internal.Unkeyed [ input, labelElement ])
1258
1647
1259 OnLeft ->
1648 OnLeft ->
1260 Internal.element
1649 Internal.element
1261 Internal.asRow
1650 Internal.asRow
1262 (Internal.NodeName "label")
1651 (Internal.NodeName "label")
1263− attrs
1652+ (Internal.htmlClass classes.inputLabel :: attrs)
1264 (Internal.Unkeyed [ labelElement, input ])
1653 (Internal.Unkeyed [ labelElement, input ])
1265
1654
1266
1655
1267−{-| Add choices to your radio and select menus.
1268−-}
1656+{-| -}
1269type Option value msg
1657type Option value msg
1270 = Option value (OptionState -> Element msg)
1658 = Option value (OptionState -> Element msg)
1271
1659
@@ -1277,46 +1665,21 @@ type OptionState
1277 | Selected
1665 | Selected
1278
1666
1279
1667
1668+{-| Add a choice to your radio element. This will be rendered with the default radio icon.
1280−{-| -}
1669+-}
1281option : value -> Element msg -> Option value msg
1670option : value -> Element msg -> Option value msg
1282option val txt =
1671option val txt =
1283 Option val (defaultRadioOption txt)
1672 Option val (defaultRadioOption txt)
1284
1673
1285
1674
1675+{-| Customize exactly what your radio option should look like in different states.
1286−{-| -}
1676+-}
1287optionWith : value -> (OptionState -> Element msg) -> Option value msg
1677optionWith : value -> (OptionState -> Element msg) -> Option value msg
1288optionWith val view =
1678optionWith val view =
1289 Option val view
1679 Option val view
1290
1680
1291
1681
1292−{-|
1682+{-| -}
1293−
1294− Input.radio
1295− [ padding 10
1296− , spacing 20
1297− ]
1298− { onChange = ChooseLunch
1299− , selected = Just model.lunch
1300− , label = Input.labelAbove (text "Lunch")
1301− , options =
1302− [ Input.styledChoice Burrito <|
1303− \selected ->
1304− Element.row
1305− [ spacing 5 ]
1306− [ el None [] <|
1307− if selected then
1308− text ":D"
1309−
1310− else
1311− text ":("
1312− , text "burrito"
1313− ]
1314− , Input.option Taco (text "Taco!")
1315− , Input.option Gyro (text "Gyro")
1316− ]
1317− }
1318−
1319−-}
1320radio :
1683radio :
1321 List (Attribute msg)
1684 List (Attribute msg)
1322 ->
1685 ->
@@ -1742,7 +2105,11 @@ onKeyLookup lookup =
1742 Json.field "key" Json.string
2105 Json.field "key" Json.string
1743 |> Json.andThen decode
2106 |> Json.andThen decode
1744 in
2107 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
1745− Internal.Attr <| Html.Events.on "keyup" isKey
2110+ Internal.Attr <|
2111+ Html.Events.preventDefaultOn "keydown"
2112+ (Json.map (\fired -> ( fired, True )) isKey)
1746
2113
1747
2114
1748{-| -}
2115{-| -}
@@ -1757,17 +2124,6 @@ onFocusIn msg =
1757 Internal.Attr <| Html.Events.on "focusin" (Json.succeed msg)
2124 Internal.Attr <| Html.Events.on "focusin" (Json.succeed msg)
1758
2125
1759
2126
1760−type_ : String -> Attribute msg
1761−type_ =
1762− Internal.Attr << Html.Attributes.type_
1763−
1764−
1765−
1766−-- checked : Bool -> Attribute msg
1767−-- checked =
1768−-- Internal.Attr << Html.Attributes.checked
1769−
1770−
1771selected : Bool -> Attribute msg
2127selected : Bool -> Attribute msg
1772selected =
2128selected =
1773 Internal.Attr << Html.Attributes.selected
2129 Internal.Attr << Html.Attributes.selected
@@ -1808,7 +2164,11 @@ autofill =
1808 Internal.Attr << Html.Attributes.attribute "autocomplete"
2164 Internal.Attr << Html.Attributes.attribute "autocomplete"
1809
2165
1810
2166
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+
1811−{-| -}
2171+-}
1812focusedOnLoad : Attribute msg
2172focusedOnLoad : Attribute msg
1813focusedOnLoad =
2173focusedOnLoad =
1814 Internal.Attr <| Html.Attributes.autofocus True
2174 Internal.Attr <| Html.Attributes.autofocus True
@@ -1825,8 +2185,9 @@ defaultTextBoxStyle =
1825 , Border.color darkGrey
2185 , Border.color darkGrey
1826 , Background.color white
2186 , Background.color white
1827 , Border.width 1
2187 , Border.width 1
1828− , Element.spacing 3
2188+ , Element.spacing 5
1829 , Element.width Element.fill
2189 , Element.width Element.fill
2190+ , Element.height Element.shrink
1830 ]
2191 ]
1831
2192
1832
2193
@@ -1835,12 +2196,17 @@ defaultTextPadding =
1835 Element.paddingXY 12 12
2196 Element.paddingXY 12 12
1836
2197
1837
2198
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+
1838−{-| -}
2203+-}
1839defaultCheckbox : Bool -> Element msg
2204defaultCheckbox : Bool -> Element msg
1840defaultCheckbox checked =
2205defaultCheckbox checked =
1841 Element.el
2206 Element.el
1842 [ Internal.htmlClass "focusable"
2207 [ Internal.htmlClass "focusable"
1843− , Element.width (Element.px 14)
2208+ , Element.width
2209+ (Element.px 14)
1844 , Element.height (Element.px 14)
2210 , Element.height (Element.px 14)
1845 , Font.color white
2211 , Font.color white
1846 , Element.centerY
2212 , Element.centerY
@@ -1853,7 +2219,7 @@ defaultCheckbox checked =
1853
2219
1854 else
2220 else
1855 Element.rgb (211 / 255) (211 / 255) (211 / 255)
2221 Element.rgb (211 / 255) (211 / 255) (211 / 255)
1856− , Border.shadow <|
2222+ , Border.shadow
1857 { offset = ( 0, 0 )
2223 { offset = ( 0, 0 )
1858 , blur = 1
2224 , blur = 1
1859 , size = 1
2225 , size = 1
@@ -1876,9 +2242,8 @@ defaultCheckbox checked =
1876
2242
1877 else
2243 else
1878 1
2244 1
1879− ]
2245+ , Element.inFront
1880− (if checked then
1881− Element.el
2246+ (Element.el
1882 [ Border.color white
2247 [ Border.color white
1883 , Element.height (Element.px 6)
2248 , Element.height (Element.px 6)
1884 , Element.width (Element.px 9)
2249 , Element.width (Element.px 9)
@@ -1886,6 +2251,7 @@ defaultCheckbox checked =
1886 , Element.centerX
2251 , Element.centerX
1887 , Element.centerY
2252 , Element.centerY
1888 , Element.moveUp 1
2253 , Element.moveUp 1
2254+ , Element.transparent (not checked)
1889 , Border.widthEach
2255 , Border.widthEach
1890 { top = 0
2256 { top = 0
1891 , left = 2
2257 , left = 2
@@ -1894,7 +2260,6 @@ defaultCheckbox checked =
1894 }
2260 }
1895 ]
2261 ]
1896 Element.none
2262 Element.none
1897−
2263+ )
1898− else
2264+ ]
1899− Element.none
2265+ Element.none
1900− )
src/Element/Keyed.elm+13−10
@@ -20,7 +20,7 @@ This means if a key is changed between renders, then the diffing step will be sk
20
20
21-}
21-}
22
22
23−import Element exposing (Attribute, Element, fill, height, width)
23+import Element exposing (Attribute, Element, fill, height, shrink, width)
24import Internal.Model as Internal
24import Internal.Model as Internal
25import Internal.Style exposing (classes)
25import Internal.Style exposing (classes)
26
26
@@ -31,8 +31,8 @@ el attrs child =
31 Internal.element
31 Internal.element
32 Internal.asEl
32 Internal.asEl
33 Internal.div
33 Internal.div
34− (width Element.shrink
34+ (width shrink
35− :: height Element.shrink
35+ :: height shrink
36 :: attrs
36 :: attrs
37 )
37 )
38 (Internal.Keyed [ child ])
38 (Internal.Keyed [ child ])
@@ -44,9 +44,9 @@ row attrs children =
44 Internal.element
44 Internal.element
45 Internal.asRow
45 Internal.asRow
46 Internal.div
46 Internal.div
47− (Internal.htmlClass classes.contentLeft
47+ (Internal.htmlClass (classes.contentLeft ++ " " ++ classes.contentCenterY)
48− :: Internal.htmlClass classes.contentCenterY
49− :: width fill
48+ :: width shrink
49+ :: height shrink
50 :: attrs
50 :: attrs
51 )
51 )
52 (Internal.Keyed children)
52 (Internal.Keyed children)
@@ -58,10 +58,13 @@ column attrs children =
58 Internal.element
58 Internal.element
59 Internal.asColumn
59 Internal.asColumn
60 Internal.div
60 Internal.div
61− (Internal.htmlClass classes.contentTop
61+ (Internal.htmlClass
62+ (classes.contentTop
63+ ++ " "
62− :: Internal.htmlClass classes.contentLeft
64+ ++ classes.contentLeft
65+ )
63− :: height fill
66+ :: height shrink
64− :: width fill
67+ :: width shrink
65 :: attrs
68 :: attrs
66 )
69 )
67 (Internal.Keyed children)
70 (Internal.Keyed children)
src/Element/Region.elm+5−1
@@ -101,7 +101,11 @@ announce =
101 Internal.Describe LivePolite
101 Internal.Describe LivePolite
102
102
103
103
104+{-| Adds an `aria-label`, which is used by accessibility software to identity otherwise unlabeled elements.
105+
106+A common use for this would be to label buttons that only have an icon.
107+
104−{-| -}
108+-}
105description : String -> Attribute msg
109description : String -> Attribute msg
106description =
110description =
107 Internal.Describe << Internal.Label
111 Internal.Describe << Internal.Label
src/Internal/Model.elm+812−639
@@ -16,6 +16,7 @@ module Internal.Model exposing
16 , LayoutContext(..)
16 , LayoutContext(..)
17 , Length(..)
17 , Length(..)
18 , Location(..)
18 , Location(..)
19+ , NearbyChildren(..)
19 , NodeName(..)
20 , NodeName(..)
20 , Option(..)
21 , Option(..)
21 , OptionRecord
22 , OptionRecord
@@ -41,7 +42,7 @@ module Internal.Model exposing
41 , asParagraph
42 , asParagraph
42 , asRow
43 , asRow
43 , asTextColumn
44 , asTextColumn
44− , boxShadowName
45+ , boxShadowClass
45 , columnClass
46 , columnClass
46 , composeTransformation
47 , composeTransformation
47 , contextClasses
48 , contextClasses
@@ -78,31 +79,30 @@ module Internal.Model exposing
78 , onlyStyles
79 , onlyStyles
79 , optionsToRecord
80 , optionsToRecord
80 , paddingName
81 , paddingName
82+ , paddingNameFloat
81 , pageClass
83 , pageClass
82 , paragraphClass
84 , paragraphClass
83 , reduceRecursive
85 , reduceRecursive
84 , reduceStyles
86 , reduceStyles
85 , reduceStylesRecursive
87 , reduceStylesRecursive
86 , removeNever
88 , removeNever
87− , renderFocusStyle
88− -- , renderFont
89−
90 , renderFontClassName
89 , renderFontClassName
91 , renderHeight
90 , renderHeight
92 , renderRoot
91 , renderRoot
92+ , renderVariant
93 , renderWidth
93 , renderWidth
94 , rootStyle
94 , rootStyle
95 , rowClass
95 , rowClass
96 , singleClass
96 , singleClass
97 , spacingName
97 , spacingName
98− , staticRoot
99 , tag
98 , tag
100− , textShadowName
99+ , textShadowClass
101 , toHtml
100 , toHtml
102 , toStyleSheet
101 , toStyleSheet
103 , transformClass
102 , transformClass
104 , unstyled
103 , unstyled
105 , unwrapDecorations
104 , unwrapDecorations
105+ , variantName
106 )
106 )
107
107
108{-| -}
108{-| -}
@@ -112,7 +112,7 @@ import Html.Attributes
112import Html.Keyed
112import Html.Keyed
113import Internal.Flag as Flag exposing (Flag)
113import Internal.Flag as Flag exposing (Flag)
114import Internal.Style exposing (classes, dot)
114import Internal.Style exposing (classes, dot)
115−import Json.Encode as Json
115+import Json.Encode as Encode
116import Set exposing (Set)
116import Set exposing (Set)
117import VirtualDom
117import VirtualDom
118
118
@@ -174,7 +174,7 @@ type Style
174 | Colored String String Color
174 | Colored String String Color
175 | SpacingStyle String Int Int
175 | SpacingStyle String Int Int
176 | BorderWidth String Int Int Int Int
176 | BorderWidth String Int Int Int Int
177− | PaddingStyle String Int Int Int Int
177+ | PaddingStyle String Float Float Float Float
178 | GridTemplateStyle
178 | GridTemplateStyle
179 { spacing : ( Length, Length )
179 { spacing : ( Length, Length )
180 , columns : List Length
180 , columns : List Length
@@ -222,8 +222,7 @@ type Font
222 | ImportFont String String
222 | ImportFont String String
223 | FontWith
223 | FontWith
224 { name : String
224 { name : String
225− , url : Maybe String
226− , adjustment : Adjustment
225+ , adjustment : Maybe Adjustment
227 , variants : List Variant
226 , variants : List Variant
228 }
227 }
229
228
@@ -246,6 +245,18 @@ renderVariant var =
246 "\"" ++ name ++ "\" " ++ String.fromInt index
245 "\"" ++ name ++ "\" " ++ String.fromInt index
247
246
248
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+
249renderVariants typeface =
260renderVariants typeface =
250 case typeface of
261 case typeface of
251 FontWith font ->
262 FontWith font ->
@@ -361,6 +372,13 @@ type NodeName
361 | Embedded String String
372 | Embedded String String
362
373
363
374
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+
364div =
382div =
365 Generic
383 Generic
366
384
@@ -369,7 +387,7 @@ type alias Gathered msg =
369 { node : NodeName
387 { node : NodeName
370 , attributes : List (VirtualDom.Attribute msg)
388 , attributes : List (VirtualDom.Attribute msg)
371 , styles : List Style
389 , styles : List Style
372− , children : List (VirtualDom.Node msg)
390+ , children : NearbyChildren msg
373 , has : Flag.Field
391 , has : Flag.Field
374 }
392 }
375
393
@@ -437,7 +455,10 @@ finalizeNode has node attributes children embedMode parentContext =
437 Embedded nodeName internal ->
455 Embedded nodeName internal ->
438 VirtualDom.node nodeName
456 VirtualDom.node nodeName
439 attributes
457 attributes
458+ [ createNode internal
459+ [ Html.Attributes.class
440− [ createNode internal [ Html.Attributes.class (classes.any ++ " " ++ classes.single) ]
460+ (classes.any ++ " " ++ classes.single)
461+ ]
441 ]
462 ]
442 in
463 in
443 case parentContext of
464 case parentContext of
@@ -514,49 +535,45 @@ finalizeNode has node attributes children embedMode parentContext =
514
535
515
536
516embedWith static opts styles children =
537embedWith 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
517 if static then
547 if static then
518− staticRoot
548+ staticRoot opts
519− :: (styles
549+ :: dynamicStyleSheet
520− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
521− |> Tuple.second
522− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
523− -- |> sortedReduce
524− |> toStyleSheet opts
525− )
526 :: children
550 :: children
527
551
528 else
552 else
529− (styles
553+ dynamicStyleSheet
530− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
531− |> Tuple.second
532− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
533− -- |> sortedReduce
534− |> toStyleSheet opts
535− )
536 :: children
554 :: children
537
555
538
556
539embedKeyed static opts styles children =
557embedKeyed 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
540 if static then
567 if static then
541− ( "static-stylesheet", staticRoot )
568+ ( "static-stylesheet", staticRoot opts )
542 :: ( "dynamic-stylesheet"
569 :: ( "dynamic-stylesheet"
543− , styles
570+ , dynamicStyleSheet
544− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
545− |> Tuple.second
546− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
547− -- |> sortedReduce
548− |> toStyleSheet opts
549 )
571 )
550 :: children
572 :: children
551
573
552 else
574 else
553 ( "dynamic-stylesheet"
575 ( "dynamic-stylesheet"
554− , styles
576+ , dynamicStyleSheet
555− |> List.foldl reduceStyles ( Set.empty, [ renderFocusStyle opts.focus ] )
556− |> Tuple.second
557− -- |> reduceStylesRecursive Set.empty [ ]) --renderFocusStyle opts.focus ]
558− -- |> sortedReduce
559− |> toStyleSheet opts
560 )
577 )
561 :: children
578 :: children
562
579
@@ -872,7 +889,16 @@ skippable flag style =
872 False
889 False
873
890
874
891
875−gatherAttrRecursive : String -> NodeName -> Flag.Field -> Transformation -> List Style -> List (VirtualDom.Attribute msg) -> List (VirtualDom.Node msg) -> List (Attribute aligned msg) -> Gathered msg
892+gatherAttrRecursive :
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
876gatherAttrRecursive classes node has transform styles attrs children elementAttrs =
902gatherAttrRecursive classes node has transform styles attrs children elementAttrs =
877 case elementAttrs of
903 case elementAttrs of
878 [] ->
904 [] ->
@@ -1006,7 +1032,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
1006 in
1032 in
1007 gatherAttrRecursive (classes ++ " " ++ newClass)
1033 gatherAttrRecursive (classes ++ " " ++ newClass)
1008 node
1034 node
1009− (Flag.merge addToFlags has)
1035+ (Flag.merge addToFlags (Flag.add Flag.width has))
1010 transform
1036 transform
1011 (newStyles ++ styles)
1037 (newStyles ++ styles)
1012 attrs
1038 attrs
@@ -1027,7 +1053,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
1027 name =
1053 name =
1028 "height-px-" ++ val
1054 "height-px-" ++ val
1029 in
1055 in
1030− gatherAttrRecursive (name ++ " " ++ classes)
1056+ gatherAttrRecursive (Internal.Style.classes.heightExact ++ " " ++ name ++ " " ++ classes)
1031 node
1057 node
1032 (Flag.add Flag.height has)
1058 (Flag.add Flag.height has)
1033 transform
1059 transform
@@ -1084,7 +1110,7 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
1084 in
1110 in
1085 gatherAttrRecursive (classes ++ " " ++ newClass)
1111 gatherAttrRecursive (classes ++ " " ++ newClass)
1086 node
1112 node
1087− (Flag.merge addToFlags has)
1113+ (Flag.merge addToFlags (Flag.add Flag.height has))
1088 transform
1114 transform
1089 (newStyles ++ styles)
1115 (newStyles ++ styles)
1090 attrs
1116 attrs
@@ -1116,20 +1142,15 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
1116 gatherAttrRecursive classes (addNodeName "h6" node) has transform styles attrs children remaining
1142 gatherAttrRecursive classes (addNodeName "h6" node) has transform styles attrs children remaining
1117
1143
1118 Paragraph ->
1144 Paragraph ->
1119− let
1145+ -- previously we rendered a <p> tag, though apparently this invalidates the html if it has <div>s inside.
1120− newNode =
1146+ -- Since we can't guaranteee that there are no divs, we need another strategy.
1121− case node of
1147+ -- While it's not documented in many places, there apparently is a paragraph aria role
1122− Generic ->
1148+ -- https://github.com/w3c/aria/blob/11f85f41a5b621fdbe85fc9bcdcd270e653a48ba/common/script/roleInfo.js
1123− NodeName "p"
1149+ -- Though we'll need to wait till it gets released in an official wai-aria spec to use it.
1124−
1150+ -- If it's used at the moment, then Lighthouse complains (likely rightfully) that role paragraph is not recognized.
1125− NodeName name ->
1126− NodeName name
1127−
1128− Embedded x y ->
1129− Embedded x y
1130− in
1131− gatherAttrRecursive classes
1151+ gatherAttrRecursive
1132− newNode
1152+ classes
1153+ node
1133 has
1154 has
1134 transform
1155 transform
1135 styles
1156 styles
@@ -1164,75 +1185,16 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
1164
1185
1165 Styled styled ->
1186 Styled styled ->
1166 styles ++ styled.styles
1187 styles ++ styled.styles
1167−
1168− nearbyElement =
1169− Html.div
1170− [ Html.Attributes.class <|
1171− case location of
1172− Above ->
1173− String.join " "
1174− [ Internal.Style.classes.nearby
1175− , Internal.Style.classes.single
1176− , Internal.Style.classes.above
1177− ]
1178−
1179− Below ->
1180− String.join " "
1181− [ Internal.Style.classes.nearby
1182− , Internal.Style.classes.single
1183− , Internal.Style.classes.below
1184− ]
1185−
1186− OnRight ->
1187− String.join " "
1188− [ Internal.Style.classes.nearby
1189− , Internal.Style.classes.single
1190− , Internal.Style.classes.onRight
1191− ]
1192−
1193− OnLeft ->
1194− String.join " "
1195− [ Internal.Style.classes.nearby
1196− , Internal.Style.classes.single
1197− , Internal.Style.classes.onLeft
1198− ]
1199−
1200− InFront ->
1201− String.join " "
1202− [ Internal.Style.classes.nearby
1203− , Internal.Style.classes.single
1204− , Internal.Style.classes.inFront
1205− ]
1206−
1207− Behind ->
1208− String.join " "
1209− [ Internal.Style.classes.nearby
1210− , Internal.Style.classes.single
1211− , Internal.Style.classes.behind
1212− ]
1213− ]
1214− [ case elem of
1215− Empty ->
1216− VirtualDom.text ""
1217−
1218− Text str ->
1219− textElement str
1220−
1221− Unstyled html ->
1222− html asEl
1223−
1224− Styled styled ->
1225− styled.html NoStyleSheet asEl
1226− ]
1227−
1228− newClasses =
1229− if location == Behind then
1230− Internal.Style.classes.hasBehind ++ " " ++ classes
1231−
1232− else
1233− classes
1234 in
1188 in
1235− gatherAttrRecursive newClasses node has transform newStyles attrs (nearbyElement :: children) remaining
1189+ gatherAttrRecursive
1190+ classes
1191+ node
1192+ has
1193+ transform
1194+ newStyles
1195+ attrs
1196+ (addNearbyElement location elem children)
1197+ remaining
1236
1198
1237 AlignX x ->
1199 AlignX x ->
1238 if Flag.present Flag.xAlign has then
1200 if Flag.present Flag.xAlign has then
@@ -1288,6 +1250,106 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
1288 remaining
1250 remaining
1289
1251
1290
1252
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+
1291renderWidth w =
1353renderWidth w =
1292 case w of
1354 case w of
1293 Px px ->
1355 Px px ->
@@ -1374,7 +1436,7 @@ renderHeight h =
1374 "height-px-" ++ val
1436 "height-px-" ++ val
1375 in
1437 in
1376 ( Flag.none
1438 ( Flag.none
1377− , name
1439+ , Internal.Style.classes.heightExact ++ " " ++ name
1378 , [ Single name "height" (val ++ "px") ]
1440 , [ Single name "height" (val ++ "px") ]
1379 )
1441 )
1380
1442
@@ -1397,7 +1459,7 @@ renderHeight h =
1397 , [ Single
1459 , [ Single
1398 (Internal.Style.classes.any
1460 (Internal.Style.classes.any
1399 ++ "."
1461 ++ "."
1400− ++ Internal.Style.classes.row
1462+ ++ Internal.Style.classes.column
1401 ++ " > "
1463 ++ " > "
1402 ++ (Internal.Style.dot <| "height-fill-" ++ String.fromInt portion)
1464 ++ (Internal.Style.dot <| "height-fill-" ++ String.fromInt portion)
1403 )
1465 )
@@ -1416,7 +1478,9 @@ renderHeight h =
1416 Single
1478 Single
1417 cls
1479 cls
1418 "min-height"
1480 "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.
1419− (String.fromInt minSize ++ "px")
1483+ (String.fromInt minSize ++ "px !important")
1420
1484
1421 ( newFlag, newAttrs, newStyle ) =
1485 ( newFlag, newAttrs, newStyle ) =
1422 renderHeight len
1486 renderHeight len
@@ -1494,7 +1558,7 @@ element : LayoutContext -> NodeName -> List (Attribute aligned msg) -> Children
1494element context node attributes children =
1558element context node attributes children =
1495 attributes
1559 attributes
1496 |> List.reverse
1560 |> List.reverse
1497− |> gatherAttrRecursive (contextClasses context) node Flag.none untransformed [] [] []
1561+ |> gatherAttrRecursive (contextClasses context) node Flag.none untransformed [] [] NoNearbyChildren
1498 |> createElement context children
1562 |> createElement context children
1499
1563
1500
1564
@@ -1657,13 +1721,8 @@ createElement context children rendered =
1657 (finalizeNode rendered.has
1721 (finalizeNode rendered.has
1658 rendered.node
1722 rendered.node
1659 rendered.attributes
1723 rendered.attributes
1660− (Keyed <|
1724+ (Keyed
1661− keyed
1662− ++ List.map
1663− (\x ->
1664− ( "nearby-elements-pls", x )
1665− )
1666− rendered.children
1725+ (addKeyedChildren "nearby-element-pls" keyed rendered.children)
1667 )
1726 )
1668 NoStyleSheet
1727 NoStyleSheet
1669 )
1728 )
@@ -1677,13 +1736,7 @@ createElement context children rendered =
1677 rendered.node
1736 rendered.node
1678 rendered.attributes
1737 rendered.attributes
1679 (Keyed
1738 (Keyed
1680− (keyed
1681− ++ List.map
1682− (\x ->
1683− ( "nearby-elements-pls", x )
1684− )
1685− rendered.children
1739+ (addKeyedChildren "nearby-element-pls" keyed rendered.children)
1686− )
1687 )
1740 )
1688 }
1741 }
1689
1742
@@ -1705,7 +1758,7 @@ createElement context children rendered =
1705 rendered.has
1758 rendered.has
1706 rendered.node
1759 rendered.node
1707 rendered.attributes
1760 rendered.attributes
1708− (Unkeyed <| unkeyed ++ rendered.children)
1761+ (Unkeyed (addChildren unkeyed rendered.children))
1709 NoStyleSheet
1762 NoStyleSheet
1710 )
1763 )
1711
1764
@@ -1717,10 +1770,42 @@ createElement context children rendered =
1717 rendered.has
1770 rendered.has
1718 rendered.node
1771 rendered.node
1719 rendered.attributes
1772 rendered.attributes
1720− (Unkeyed (unkeyed ++ rendered.children))
1773+ (Unkeyed (addChildren unkeyed rendered.children))
1721 }
1774 }
1722
1775
1723
1776
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+
1724unit =
1809unit =
1725 0
1810 0
1726
1811
@@ -1732,8 +1817,20 @@ defaultOptions =
1732 }
1817 }
1733
1818
1734
1819
1735−staticRoot =
1820+staticRoot : OptionRecord -> VirtualDom.Node msg
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+ []
1736− VirtualDom.node "style" [] [ VirtualDom.text Internal.Style.rules ]
1827+ [ 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) ] []
1737
1834
1738
1835
1739addWhen ifThis x to =
1836addWhen ifThis x to =
@@ -1851,7 +1948,7 @@ type Spacing
1851
1948
1852
1949
1853type Padding
1950type Padding
1854− = Padding String Int Int Int Int
1951+ = Padding String Float Float Float Float
1855
1952
1856
1953
1857extractSpacingAndPadding : List (Attribute aligned msg) -> ( Maybe Padding, Maybe Spacing )
1954extractSpacingAndPadding : List (Attribute aligned msg) -> ( Maybe Padding, Maybe Spacing )
@@ -1947,34 +2044,44 @@ getHeight attrs =
1947 Nothing
2044 Nothing
1948
2045
1949
2046
2047+textElementClasses : String
2048+textElementClasses =
2049+ classes.any
2050+ ++ " "
2051+ ++ classes.text
2052+ ++ " "
2053+ ++ classes.widthContent
2054+ ++ " "
2055+ ++ classes.heightContent
2056+
2057+
1950textElement : String -> VirtualDom.Node msg
2058textElement : String -> VirtualDom.Node msg
1951textElement str =
2059textElement str =
1952 Html.div
2060 Html.div
1953 [ Html.Attributes.class
2061 [ Html.Attributes.class
1954− (String.join " "
2062+ textElementClasses
1955− [ classes.any
1956− , classes.text
1957− , classes.widthContent
1958− , classes.heightContent
1959− ]
1960− )
1961 ]
2063 ]
1962 [ Html.text str ]
2064 [ Html.text str ]
1963
2065
1964
2066
2067+textElementFillClasses : String
2068+textElementFillClasses =
2069+ classes.any
2070+ ++ " "
2071+ ++ classes.text
2072+ ++ " "
2073+ ++ classes.widthFill
2074+ ++ " "
2075+ ++ classes.heightFill
2076+
2077+
1965textElementFill : String -> VirtualDom.Node msg
2078textElementFill : String -> VirtualDom.Node msg
1966textElementFill str =
2079textElementFill str =
1967− VirtualDom.node "div"
2080+ Html.div
1968 [ Html.Attributes.class
2081 [ Html.Attributes.class
1969− (String.join " "
2082+ textElementFillClasses
1970− [ classes.any
1971− , classes.text
1972− , classes.widthFill
1973− , classes.heightFill
1974− ]
1975− )
1976 ]
2083 ]
1977− [ VirtualDom.text str ]
2084+ [ Html.text str ]
1978
2085
1979
2086
1980type Children x
2087type Children x
@@ -1982,10 +2089,6 @@ type Children x
1982 | Keyed (List ( String, x ))
2089 | Keyed (List ( String, x ))
1983
2090
1984
2091
1985−
1986−-- toHtml : OptionRecord -> Element msg -> VirtualDom.Node msg
1987−
1988−
1989toHtml mode el =
2092toHtml mode el =
1990 case el of
2093 case el of
1991 Unstyled html ->
2094 Unstyled html ->
@@ -2021,8 +2124,7 @@ renderRoot optionList attributes child =
2021
2124
2022
2125
2023type RenderMode
2126type RenderMode
2024− = Viewport
2025− | Layout
2127+ = Layout
2026 | NoStaticStyleSheet
2128 | NoStaticStyleSheet
2027 | WithVirtualCss
2129 | WithVirtualCss
2028
2130
@@ -2071,8 +2173,8 @@ rootStyle =
2071 , SansSerif
2173 , SansSerif
2072 ]
2174 ]
2073 in
2175 in
2074− [ StyleClass Flag.bgColor (Colored ("bg-color-" ++ formatColorClass (Rgba 1 1 1 0)) "background-color" (Rgba 1 1 1 0))
2176+ [ StyleClass Flag.bgColor (Colored ("bg-" ++ formatColorClass (Rgba 1 1 1 0)) "background-color" (Rgba 1 1 1 0))
2075− , StyleClass Flag.fontColor (Colored ("font-color-" ++ formatColorClass (Rgba 0 0 0 1)) "color" (Rgba 0 0 0 1))
2177+ , StyleClass Flag.fontColor (Colored ("fc-" ++ formatColorClass (Rgba 0 0 0 1)) "color" (Rgba 0 0 0 1))
2076 , StyleClass Flag.fontSize (FontSize 20)
2178 , StyleClass Flag.fontSize (FontSize 20)
2077 , StyleClass Flag.fontFamily <|
2179 , StyleClass Flag.fontFamily <|
2078 FontFamily (List.foldl renderFontClassName "font-" families)
2180 FontFamily (List.foldl renderFontClassName "font-" families)
@@ -2115,9 +2217,38 @@ renderFontClassName font current =
2115
2217
2116renderFocusStyle :
2218renderFocusStyle :
2117 FocusStyle
2219 FocusStyle
2118− -> Style
2220+ -> List Style
2119renderFocusStyle focus =
2221renderFocusStyle 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, ")
2120− Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")
2249+ ++ (Internal.Style.dot classes.any ++ ".focusable:focus, ")
2250+ ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")
2251+ )
2121 (List.filterMap identity
2252 (List.filterMap identity
2122 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
2253 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor
2123 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
2254 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor
@@ -2140,6 +2271,7 @@ renderFocusStyle focus =
2140 , Just <| Property "outline" "none"
2271 , Just <| Property "outline" "none"
2141 ]
2272 ]
2142 )
2273 )
2274+ ]
2143
2275
2144
2276
2145focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }
2277focusDefaultStyle : { backgroundColor : Maybe Color, borderColor : Maybe Color, shadow : Maybe Shadow }
@@ -2151,7 +2283,7 @@ focusDefaultStyle =
2151 { color =
2283 { color =
2152 Rgba (155 / 255) (203 / 255) 1 1
2284 Rgba (155 / 255) (203 / 255) 1 1
2153 , offset = ( 0, 0 )
2285 , offset = ( 0, 0 )
2154− , blur = 3
2286+ , blur = 0
2155 , size = 3
2287 , size = 3
2156 }
2288 }
2157 }
2289 }
@@ -2221,7 +2353,31 @@ optionsToRecord options =
2221
2353
2222toStyleSheet : OptionRecord -> List Style -> VirtualDom.Node msg
2354toStyleSheet : OptionRecord -> List Style -> VirtualDom.Node msg
2223toStyleSheet options styleSheet =
2355toStyleSheet options styleSheet =
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+ []
2224− VirtualDom.node "style" [] [ VirtualDom.text (toStyleSheetString options styleSheet) ]
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+ []
2225
2381
2226
2382
2227renderTopLevelValues rules =
2383renderTopLevelValues rules =
@@ -2231,14 +2387,12 @@ renderTopLevelValues rules =
2231 ImportFont _ url ->
2387 ImportFont _ url ->
2232 Just ("@import url('" ++ url ++ "');")
2388 Just ("@import url('" ++ url ++ "');")
2233
2389
2234− FontWith with ->
2390+ -- FontWith with ->
2235− case with.url of
2391+ -- case with.url of
2236− Just x ->
2392+ -- Just x ->
2237− Just ("@import url('" ++ x ++ "');")
2393+ -- Just ("@import url('" ++ x ++ "');")
2238−
2239− Nothing ->
2394+ -- Nothing ->
2240− Nothing
2395+ -- Nothing
2241−
2242 _ ->
2396 _ ->
2243 Nothing
2397 Nothing
2244
2398
@@ -2379,12 +2533,17 @@ typefaceAdjustment typefaces =
2379 Nothing ->
2533 Nothing ->
2380 case face of
2534 case face of
2381 FontWith with ->
2535 FontWith with ->
2382− Just
2536+ case with.adjustment of
2537+ Nothing ->
2538+ found
2539+
2540+ Just adjustment ->
2541+ Just
2383− ( fontAdjustmentRules
2542+ ( fontAdjustmentRules
2384− (.full (convertAdjustment with.adjustment))
2543+ (.full (convertAdjustment adjustment))
2385− , fontAdjustmentRules
2544+ , fontAdjustmentRules
2386− (.capital (convertAdjustment with.adjustment))
2545+ (.capital (convertAdjustment adjustment))
2387− )
2546+ )
2388
2547
2389 _ ->
2548 _ ->
2390 found
2549 found
@@ -2434,489 +2593,492 @@ renderProps force (Property key val) existing =
2434 existing ++ "\n " ++ key ++ ": " ++ val ++ ";"
2593 existing ++ "\n " ++ key ++ ": " ++ val ++ ";"
2435
2594
2436
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+
2437toStyleSheetString : OptionRecord -> List Style -> String
2609toStyleSheetString : OptionRecord -> List Style -> String
2438toStyleSheetString options stylesheet =
2610toStyleSheetString options stylesheet =
2439 let
2611 let
2440− renderStyle maybePseudo selector props =
2612+ combine style rendered =
2441− case maybePseudo of
2613+ { rules = rendered.rules ++ renderStyleRule options style Nothing
2442− Nothing ->
2614+ , topLevel =
2443− selector ++ "{" ++ List.foldl (renderProps False) "" props ++ "\n}"
2615+ case topLevelValue style of
2444−
2616+ Nothing ->
2445− Just pseudo ->
2617+ rendered.topLevel
2446− case pseudo of
2447− Hover ->
2448− case options.hover of
2449− NoHover ->
2450− ""
2451
2618
2452− ForceHover ->
2619+ Just topLevel ->
2453− selector ++ "-hv {" ++ List.foldl (renderProps True) "" props ++ "\n}"
2620+ topLevel :: rendered.topLevel
2621+ }
2622+ in
2623+ case List.foldl combine { topLevel = [], rules = [] } stylesheet of
2624+ { topLevel, rules } ->
2625+ renderTopLevelValues topLevel ++ String.concat rules
2454
2626
2455− AllowHover ->
2456− selector ++ "-hv:hover {" ++ List.foldl (renderProps False) "" props ++ "\n}"
2457
2627
2458− Focus ->
2628+renderStyle : OptionRecord -> Maybe PseudoClass -> String -> List Property -> List String
2459− let
2629+renderStyle options maybePseudo selector props =
2460− renderedProps =
2630+ case maybePseudo of
2631+ Nothing ->
2461− List.foldl (renderProps False) "" props
2632+ [ selector ++ "{" ++ List.foldl (renderProps False) "" props ++ "\n}" ]
2462− in
2463− String.join "\n"
2464− [ selector
2465− ++ "-fs:focus {"
2466− ++ renderedProps
2467− ++ "\n}"
2468− , "."
2469− ++ classes.any
2470− ++ ":focus ~ "
2471− ++ selector
2472− ++ "-fs:not(.focus) {"
2473− ++ renderedProps
2474− ++ "\n}"
2475− , "."
2476− ++ classes.any
2477− ++ ":focus "
2478− ++ selector
2479− ++ "-fs {"
2480− ++ renderedProps
2481− ++ "\n}"
2482− , ".focusable-parent:focus ~ "
2483− ++ "."
2484− ++ classes.any
2485− ++ " "
2486− ++ selector
2487− ++ "-fs {"
2488− ++ renderedProps
2489− ++ "\n}"
2490− ]
2491
2633
2492− Active ->
2634+ Just pseudo ->
2493− selector ++ "-act:active {" ++ List.foldl (renderProps False) "" props ++ "\n}"
2635+ case pseudo of
2636+ Hover ->
2637+ case options.hover of
2638+ NoHover ->
2639+ []
2494
2640
2495− renderStyleRule rule maybePseudo =
2641+ ForceHover ->
2496− case rule of
2642+ [ selector ++ "-hv {" ++ List.foldl (renderProps True) "" props ++ "\n}" ]
2497− Style selector props ->
2498− renderStyle maybePseudo selector props
2499
2643
2500− Shadows name prop ->
2644+ AllowHover ->
2501− renderStyle
2645+ [ selector ++ "-hv:hover {" ++ List.foldl (renderProps False) "" props ++ "\n}" ]
2502− maybePseudo
2503− ("." ++ name)
2504− [ Property "box-shadow" prop
2505− ]
2506
2646
2507− Transparency name transparency ->
2647+ Focus ->
2508 let
2648 let
2509− opacity =
2649+ renderedProps =
2510− (1 - transparency)
2650+ List.foldl (renderProps False) "" props
2511− |> min 1
2512− |> max 0
2513 in
2651 in
2514− renderStyle
2652+ [ selector ++ "-fs:focus {" ++ renderedProps ++ "\n}"
2515− maybePseudo
2653+ , ("." ++ classes.any ++ ":focus " ++ selector ++ "-fs {")
2516− ("." ++ name)
2654+ ++ renderedProps
2517− [ Property "opacity" (String.fromFloat opacity)
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}"
2518− ]
2662+ ]
2519
2663
2520− FontSize i ->
2664+ Active ->
2521− renderStyle
2665+ [ selector ++ "-act:active {" ++ List.foldl (renderProps False) "" props ++ "\n}" ]
2522− maybePseudo
2523− (".font-size-" ++ String.fromInt i)
2524− [ Property "font-size" (String.fromInt i ++ "px")
2525− ]
2526
2666
2527− FontFamily name typefaces ->
2528− let
2529− features =
2530− typefaces
2531− |> List.filterMap renderVariants
2532− |> String.join ", "
2533−
2534− families =
2535− [ Property "font-family"
2536− (typefaces
2537− |> List.map fontName
2538− |> String.join ", "
2539− )
2540− , Property "font-feature-settings" features
2541− , Property "font-variant"
2542− (if List.any hasSmallCaps typefaces then
2543− "small-caps"
2544
2667
2545− else
2668+renderStyleRule : OptionRecord -> Style -> Maybe PseudoClass -> List String
2546− "normal"
2669+renderStyleRule options rule maybePseudo =
2547− )
2670+ case rule of
2548− ]
2671+ Style selector props ->
2549− in
2672+ renderStyle options maybePseudo selector props
2550− String.join " "
2673+
2674+ Shadows name prop ->
2551− [ renderStyle
2675+ renderStyle options
2552− maybePseudo
2676+ maybePseudo
2553− ("." ++ name)
2677+ ("." ++ name)
2554− families
2678+ [ Property "box-shadow" prop
2555− ]
2679+ ]
2556
2680
2557− Single class prop val ->
2681+ Transparency name transparency ->
2682+ let
2683+ opacity =
2684+ (1 - transparency)
2685+ |> min 1
2686+ |> max 0
2687+ in
2558− renderStyle
2688+ renderStyle options
2559− maybePseudo
2689+ maybePseudo
2560− ("." ++ class)
2690+ ("." ++ name)
2561− [ Property prop val
2691+ [ Property "opacity" (String.fromFloat opacity)
2562− ]
2692+ ]
2563
2693
2564− Colored class prop color ->
2694+ FontSize i ->
2565− renderStyle
2695+ renderStyle options
2566− maybePseudo
2696+ maybePseudo
2567− ("." ++ class)
2697+ (".font-size-" ++ String.fromInt i)
2568− [ Property prop (formatColor color)
2698+ [ Property "font-size" (String.fromInt i ++ "px")
2569− ]
2699+ ]
2570
2700
2571− SpacingStyle cls x y ->
2701+ FontFamily name typefaces ->
2572− let
2702+ let
2573− class =
2703+ features =
2574− "." ++ cls
2704+ typefaces
2705+ |> List.filterMap renderVariants
2706+ |> String.join ", "
2707+
2708+ families =
2709+ [ Property "font-family"
2710+ (typefaces
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"
2575
2718
2576− halfX =
2719+ else
2577− String.fromFloat (toFloat x / 2) ++ "px"
2720+ "normal"
2721+ )
2722+ ]
2723+ in
2724+ renderStyle options
2725+ maybePseudo
2726+ ("." ++ name)
2727+ families
2578
2728
2579− halfY =
2729+ Single class prop val ->
2580− String.fromFloat (toFloat y / 2) ++ "px"
2730+ renderStyle options
2731+ maybePseudo
2732+ ("." ++ class)
2733+ [ Property prop val
2734+ ]
2581
2735
2582− xPx =
2736+ Colored class prop color ->
2583− String.fromInt x ++ "px"
2737+ renderStyle options
2738+ maybePseudo
2739+ ("." ++ class)
2740+ [ Property prop (formatColor color)
2741+ ]
2584
2742
2585− yPx =
2743+ SpacingStyle cls x y ->
2586− String.fromInt y ++ "px"
2744+ let
2745+ class =
2746+ "." ++ cls
2587
2747
2588− row =
2748+ halfX =
2589− "." ++ Internal.Style.classes.row
2749+ String.fromFloat (toFloat x / 2) ++ "px"
2590
2750
2591− wrappedRow =
2751+ halfY =
2592− "." ++ Internal.Style.classes.wrapped ++ row
2752+ String.fromFloat (toFloat y / 2) ++ "px"
2593
2753
2594− column =
2754+ xPx =
2595− "." ++ Internal.Style.classes.column
2755+ String.fromInt x ++ "px"
2596
2756
2597− page =
2757+ yPx =
2598− "." ++ Internal.Style.classes.page
2758+ String.fromInt y ++ "px"
2599
2759
2600− paragraph =
2760+ row =
2601− "." ++ Internal.Style.classes.paragraph
2761+ "." ++ Internal.Style.classes.row
2602
2762
2603− left =
2763+ wrappedRow =
2604− "." ++ Internal.Style.classes.alignLeft
2764+ "." ++ Internal.Style.classes.wrapped ++ row
2605
2765
2606− right =
2766+ column =
2607− "." ++ Internal.Style.classes.alignRight
2767+ "." ++ Internal.Style.classes.column
2608
2768
2609− any =
2769+ page =
2610− "." ++ Internal.Style.classes.any
2770+ "." ++ Internal.Style.classes.page
2611
2771
2612− single =
2772+ paragraph =
2613− "." ++ Internal.Style.classes.single
2773+ "." ++ Internal.Style.classes.paragraph
2614− in
2615− String.concat
2616− [ renderStyle maybePseudo (class ++ row ++ " > " ++ any ++ " + " ++ any) [ Property "margin-left" xPx ]
2617−
2618− -- margins don't apply to last element of normal, unwrapped rows
2619− -- , renderStyle maybePseudo (class ++ row ++ " > " ++ any ++ ":first-child") [ Property "margin" "0" ]
2620− -- For wrapped rows, margins always apply because we handle "canceling out" the other margins manually in the element.
2621− , renderStyle maybePseudo
2622− (class ++ wrappedRow ++ " > " ++ any)
2623− [ Property "margin" (halfY ++ " " ++ halfX)
2624− ]
2625
2774
2626− -- , renderStyle maybePseudo
2775+ left =
2627− -- (class ++ wrappedRow ++ " > " ++ any ++ ":last-child")
2776+ "." ++ Internal.Style.classes.alignLeft
2628− -- [ Property "margin-right" "0"
2629− -- ]
2630− -- columns
2631− , renderStyle maybePseudo (class ++ column ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2632− , renderStyle maybePseudo (class ++ page ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2633− , renderStyle maybePseudo (class ++ page ++ " > " ++ left) [ Property "margin-right" xPx ]
2634− , renderStyle maybePseudo (class ++ page ++ " > " ++ right) [ Property "margin-left" xPx ]
2635− , renderStyle
2636− maybePseudo
2637− (class ++ paragraph)
2638− [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2639− ]
2640− , renderStyle
2641− maybePseudo
2642− ("textarea" ++ class)
2643− [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2644− ]
2645
2777
2646− -- , renderStyle
2647− -- maybePseudo
2648− -- (class ++ paragraph ++ " > " ++ any)
2649− -- [ Property "margin-right" xPx
2650− -- , Property "margin-bottom" yPx
2651− -- ]
2652− , renderStyle
2653− maybePseudo
2654− (class ++ paragraph ++ " > " ++ left)
2655− [ Property "margin-right" xPx
2656− ]
2657− , renderStyle
2658− maybePseudo
2659− (class ++ paragraph ++ " > " ++ right)
2778+ right =
2660− [ Property "margin-left" xPx
2779+ "." ++ Internal.Style.classes.alignRight
2661− ]
2662− , renderStyle
2663− maybePseudo
2664− (class ++ paragraph ++ "::after")
2665− [ Property "content" "''"
2666− , Property "display" "block"
2667− , Property "height" "0"
2668− , Property "width" "0"
2669− , Property "margin-top" (String.fromInt (-1 * (y // 2)) ++ "px")
2670− ]
2671− , renderStyle
2672− maybePseudo
2673− (class ++ paragraph ++ "::before")
2674− [ Property "content" "''"
2675− , Property "display" "block"
2676− , Property "height" "0"
2677− , Property "width" "0"
2678− , Property "margin-bottom" (String.fromInt (-1 * (y // 2)) ++ "px")
2679− ]
2680− ]
2681
2780
2682− PaddingStyle cls top right bottom left ->
2781+ any =
2683− let
2782+ "." ++ Internal.Style.classes.any
2684− class =
2685− "."
2686− ++ cls
2687− in
2688− renderStyle
2689− maybePseudo
2690− class
2691− [ Property "padding"
2692− (String.fromInt top
2693− ++ "px "
2694− ++ String.fromInt right
2695− ++ "px "
2696− ++ String.fromInt bottom
2697− ++ "px "
2698− ++ String.fromInt left
2699− ++ "px"
2700− )
2701− ]
2702
2783
2703− BorderWidth cls top right bottom left ->
2784+ single =
2704− let
2785+ "." ++ Internal.Style.classes.single
2705− class =
2706− "."
2707− ++ cls
2708− in
2786+ in
2709− renderStyle
2787+ List.concat
2710− maybePseudo
2788+ [ renderStyle options maybePseudo (class ++ row ++ " > " ++ any ++ " + " ++ any) [ Property "margin-left" xPx ]
2711− class
2789+
2712− [ Property "border-width"
2790+ -- margins don't apply to last element of normal, unwrapped rows
2713− (String.fromInt top
2791+ -- , renderStyle options maybePseudo (class ++ row ++ " > " ++ any ++ ":first-child") [ Property "margin" "0" ]
2714− ++ "px "
2792+ -- For wrapped rows, margins always apply because we handle "canceling out" the other margins manually in the element.
2715− ++ String.fromInt right
2793+ , renderStyle options
2716− ++ "px "
2794+ maybePseudo
2717− ++ String.fromInt bottom
2795+ (class ++ wrappedRow ++ " > " ++ any)
2718− ++ "px "
2796+ [ Property "margin" (halfY ++ " " ++ halfX)
2719− ++ String.fromInt left
2720− ++ "px"
2721− )
2722− ]
2797+ ]
2723
2798
2724− GridTemplateStyle template ->
2799+ -- , renderStyle options maybePseudo
2725− let
2800+ -- (class ++ wrappedRow ++ " > " ++ any ++ ":last-child")
2726− class =
2801+ -- [ Property "margin-right" "0"
2727− ".grid-rows-"
2802+ -- ]
2728− ++ String.join "-" (List.map lengthClassName template.rows)
2729− ++ "-cols-"
2730− ++ String.join "-" (List.map lengthClassName template.columns)
2731− ++ "-space-x-"
2732− ++ lengthClassName (Tuple.first template.spacing)
2733− ++ "-space-y-"
2734− ++ lengthClassName (Tuple.second template.spacing)
2735−
2736− ySpacing =
2737− toGridLength (Tuple.second template.spacing)
2738−
2739− xSpacing =
2740− toGridLength (Tuple.first template.spacing)
2741−
2742− toGridLength x =
2743− toGridLengthHelper Nothing Nothing x
2744−
2745− toGridLengthHelper minimum maximum x =
2746− case x of
2747− Px px ->
2748− String.fromInt px ++ "px"
2749−
2750− Content ->
2751− case ( minimum, maximum ) of
2752− ( Nothing, Nothing ) ->
2753− "max-content"
2754−
2755− ( Just minSize, Nothing ) ->
2756− "minmax(" ++ String.fromInt minSize ++ "px, " ++ "max-content)"
2757−
2758− ( Nothing, Just maxSize ) ->
2759− "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"
2760−
2761− ( Just minSize, Just maxSize ) ->
2762− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"
2763−
2764− Fill i ->
2765− case ( minimum, maximum ) of
2766− ( Nothing, Nothing ) ->
2767− String.fromInt i ++ "fr"
2768−
2769− ( Just minSize, Nothing ) ->
2770− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt i ++ "fr" ++ "fr)"
2771−
2772− ( Nothing, Just maxSize ) ->
2773− "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"
2774−
2775− ( Just minSize, Just maxSize ) ->
2776− "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"
2777−
2778− Min m len ->
2779− toGridLengthHelper (Just m) maximum len
2780−
2781− Max m len ->
2782− toGridLengthHelper minimum (Just m) len
2783−
2784− msColumns =
2785− template.columns
2786− |> List.map toGridLength
2787− |> String.join ySpacing
2788− |> (\x -> "-ms-grid-columns: " ++ x ++ ";")
2789−
2790− msRows =
2791− template.columns
2792− |> List.map toGridLength
2793− |> String.join ySpacing
2794− |> (\x -> "-ms-grid-rows: " ++ x ++ ";")
2795−
2796− base =
2797− class ++ "{" ++ msColumns ++ msRows ++ "}"
2798−
2799− columns =
2800− template.columns
2803+ -- columns
2801− |> List.map toGridLength
2804+ , renderStyle options maybePseudo (class ++ column ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2802− |> String.join " "
2805+ , renderStyle options maybePseudo (class ++ page ++ " > " ++ any ++ " + " ++ any) [ Property "margin-top" yPx ]
2803− |> (\x -> "grid-template-columns: " ++ x ++ ";")
2806+ , renderStyle options maybePseudo (class ++ page ++ " > " ++ left) [ Property "margin-right" xPx ]
2804−
2807+ , renderStyle options maybePseudo (class ++ page ++ " > " ++ right) [ Property "margin-left" xPx ]
2805− rows =
2808+ , renderStyle options
2806− template.rows
2809+ maybePseudo
2807− |> List.map toGridLength
2810+ (class ++ paragraph)
2808− |> String.join " "
2811+ [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2809− |> (\x -> "grid-template-rows: " ++ x ++ ";")
2812+ ]
2810−
2813+ , renderStyle options
2811− gapX =
2814+ maybePseudo
2812− "grid-column-gap:" ++ toGridLength (Tuple.first template.spacing) ++ ";"
2815+ ("textarea" ++ any ++ class)
2813−
2816+ [ Property "line-height" ("calc(1em + " ++ String.fromInt y ++ "px)")
2814− gapY =
2817+ , Property "height" ("calc(100% + " ++ String.fromInt y ++ "px)")
2815− "grid-row-gap:" ++ toGridLength (Tuple.second template.spacing) ++ ";"
2818+ ]
2816−
2817− modernGrid =
2818− class ++ "{" ++ columns ++ rows ++ gapX ++ gapY ++ "}"
2819−
2820− supports =
2821− "@supports (display:grid) {" ++ modernGrid ++ "}"
2822− in
2823− base ++ supports
2824
2819
2825− GridPosition position ->
2820+ -- , renderStyle options
2826− let
2821+ -- maybePseudo
2827− class =
2822+ -- (class ++ paragraph ++ " > " ++ any)
2828− ".grid-pos-"
2823+ -- [ Property "margin-right" xPx
2829− ++ String.fromInt position.row
2824+ -- , Property "margin-bottom" yPx
2830− ++ "-"
2825+ -- ]
2831− ++ String.fromInt position.col
2826+ , renderStyle options
2832− ++ "-"
2827+ maybePseudo
2833− ++ String.fromInt position.width
2828+ (class ++ paragraph ++ " > " ++ left)
2834− ++ "-"
2829+ [ Property "margin-right" xPx
2835− ++ String.fromInt position.height
2830+ ]
2836−
2831+ , renderStyle options
2837− msPosition =
2832+ maybePseudo
2838− String.join " "
2833+ (class ++ paragraph ++ " > " ++ right)
2839− [ "-ms-grid-row: "
2834+ [ Property "margin-left" xPx
2840− ++ String.fromInt position.row
2835+ ]
2841− ++ ";"
2836+ , renderStyle options
2842− , "-ms-grid-row-span: "
2837+ maybePseudo
2843− ++ String.fromInt position.height
2838+ (class ++ paragraph ++ "::after")
2844− ++ ";"
2839+ [ Property "content" "''"
2845− , "-ms-grid-column: "
2840+ , Property "display" "block"
2846− ++ String.fromInt position.col
2841+ , Property "height" "0"
2847− ++ ";"
2842+ , Property "width" "0"
2848− , "-ms-grid-column-span: "
2843+ , Property "margin-top" (String.fromInt (-1 * (y // 2)) ++ "px")
2849− ++ String.fromInt position.width
2844+ ]
2850− ++ ";"
2845+ , renderStyle options
2851− ]
2846+ maybePseudo
2852−
2847+ (class ++ paragraph ++ "::before")
2853− base =
2848+ [ Property "content" "''"
2854− class ++ "{" ++ msPosition ++ "}"
2849+ , Property "display" "block"
2855−
2850+ , Property "height" "0"
2856− modernPosition =
2851+ , Property "width" "0"
2857− String.join " "
2852+ , Property "margin-bottom" (String.fromInt (-1 * (y // 2)) ++ "px")
2858− [ "grid-row: "
2853+ ]
2859− ++ String.fromInt position.row
2854+ ]
2860− ++ " / "
2861− ++ String.fromInt (position.row + position.height)
2862− ++ ";"
2863− , "grid-column: "
2864− ++ String.fromInt position.col
2865− ++ " / "
2866− ++ String.fromInt (position.col + position.width)
2867− ++ ";"
2868− ]
2869−
2870− modernGrid =
2871− class ++ "{" ++ modernPosition ++ "}"
2872−
2873− supports =
2874− "@supports (display:grid) {" ++ modernGrid ++ "}"
2875− in
2876− base ++ supports
2877
2855
2878− PseudoSelector class styles ->
2856+ PaddingStyle cls top right bottom left ->
2857+ let
2858+ class =
2859+ "."
2860+ ++ cls
2861+ in
2862+ renderStyle options
2863+ maybePseudo
2864+ class
2865+ [ Property "padding"
2866+ (String.fromFloat top
2867+ ++ "px "
2868+ ++ String.fromFloat right
2869+ ++ "px "
2870+ ++ String.fromFloat bottom
2871+ ++ "px "
2872+ ++ String.fromFloat left
2873+ ++ "px"
2874+ )
2875+ ]
2876+
2877+ BorderWidth cls top right bottom left ->
2878+ let
2879+ class =
2880+ "."
2881+ ++ cls
2882+ in
2883+ renderStyle options
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+
2898+ GridTemplateStyle template ->
2879− let
2899+ let
2880− renderPseudoRule style =
2900+ class =
2881− renderStyleRule style (Just class)
2901+ ".grid-rows-"
2882− in
2902+ ++ String.join "-" (List.map lengthClassName template.rows)
2883− List.map renderPseudoRule styles
2903+ ++ "-cols-"
2904+ ++ String.join "-" (List.map lengthClassName template.columns)
2905+ ++ "-space-x-"
2906+ ++ lengthClassName (Tuple.first template.spacing)
2907+ ++ "-space-y-"
2908+ ++ lengthClassName (Tuple.second template.spacing)
2909+
2910+ ySpacing =
2911+ toGridLength (Tuple.second template.spacing)
2912+
2913+ xSpacing =
2914+ toGridLength (Tuple.first template.spacing)
2915+
2916+ toGridLength x =
2917+ toGridLengthHelper Nothing Nothing x
2918+
2919+ toGridLengthHelper minimum maximum x =
2920+ case x of
2921+ Px px ->
2922+ String.fromInt px ++ "px"
2923+
2924+ Content ->
2925+ case ( minimum, maximum ) of
2926+ ( Nothing, Nothing ) ->
2927+ "max-content"
2928+
2929+ ( Just minSize, Nothing ) ->
2930+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ "max-content)"
2931+
2932+ ( Nothing, Just maxSize ) ->
2933+ "minmax(max-content, " ++ String.fromInt maxSize ++ "px)"
2934+
2935+ ( Just minSize, Just maxSize ) ->
2936+ "minmax(" ++ String.fromInt minSize ++ "px, " ++ String.fromInt maxSize ++ "px)"
2937+
2938+ Fill i ->
2939+ case ( minimum, maximum ) of
2940+ ( Nothing, Nothing ) ->
2941+ String.fromInt i ++ "fr"
2942+
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
2884 |> String.join " "
2976 |> String.join " "
2977+ |> (\x -> "grid-template-columns: " ++ x ++ ";")
2885
2978
2886− Transform transform ->
2979+ rows =
2887− let
2980+ template.rows
2888− val =
2981+ |> List.map toGridLength
2889− transformValue transform
2982+ |> String.join " "
2983+ |> (\x -> "grid-template-rows: " ++ x ++ ";")
2890
2984
2891− class =
2985+ gapX =
2892− transformClass transform
2986+ "grid-column-gap:" ++ toGridLength (Tuple.first template.spacing) ++ ";"
2893− in
2894− case ( class, val ) of
2895− ( Just cls, Just v ) ->
2896− renderStyle
2897− maybePseudo
2898− ("." ++ cls)
2899− [ Property "transform"
2900− v
2901− ]
2902
2987
2903− _ ->
2988+ gapY =
2904− ""
2989+ "grid-row-gap:" ++ toGridLength (Tuple.second template.spacing) ++ ";"
2905
2990
2906− combine style rendered =
2991+ modernGrid =
2907− { rules = rendered.rules ++ renderStyleRule style Nothing
2992+ class ++ "{" ++ columns ++ rows ++ gapX ++ gapY ++ "}"
2908− , topLevel =
2909− case topLevelValue style of
2910− Nothing ->
2911− rendered.topLevel
2912
2993
2913− Just topLevel ->
2994+ supports =
2914− topLevel :: rendered.topLevel
2995+ "@supports (display:grid) {" ++ modernGrid ++ "}"
2915− }
2996+ in
2997+ [ base
2998+ , supports
2999+ ]
3000+
3001+ GridPosition position ->
3002+ let
3003+ class =
3004+ ".grid-pos-"
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 ++ "}"
2916− in
3051+ in
2917− case List.foldl combine { topLevel = [], rules = "" } stylesheet of
3052+ [ base
2918− { topLevel, rules } ->
3053+ , supports
2919− renderTopLevelValues topLevel ++ rules
3054+ ]
3055+
3056+ PseudoSelector class styles ->
3057+ let
3058+ renderPseudoRule style =
3059+ renderStyleRule options style (Just class)
3060+ in
3061+ List.concatMap renderPseudoRule styles
3062+
3063+ Transform transform ->
3064+ let
3065+ val =
3066+ transformValue transform
3067+
3068+ class =
3069+ transformClass transform
3070+ in
3071+ case ( class, val ) of
3072+ ( Just cls, Just v ) ->
3073+ renderStyle options
3074+ maybePseudo
3075+ ("." ++ cls)
3076+ [ Property "transform"
3077+ v
3078+ ]
3079+
3080+ _ ->
3081+ []
2920
3082
2921
3083
2922lengthClassName : Length -> String
3084lengthClassName : Length -> String
@@ -2956,12 +3118,12 @@ formatTextShadow shadow =
2956 ]
3118 ]
2957
3119
2958
3120
2959−textShadowName shadow =
3121+textShadowClass shadow =
2960 String.concat
3122 String.concat
2961 [ "txt"
3123 [ "txt"
2962− , String.fromFloat (Tuple.first shadow.offset) ++ "px"
3124+ , floatClass (Tuple.first shadow.offset) ++ "px"
2963− , String.fromFloat (Tuple.second shadow.offset) ++ "px"
3125+ , floatClass (Tuple.second shadow.offset) ++ "px"
2964− , String.fromFloat shadow.blur ++ "px"
3126+ , floatClass shadow.blur ++ "px"
2965 , formatColorClass shadow.color
3127 , formatColorClass shadow.color
2966 ]
3128 ]
2967
3129
@@ -2982,17 +3144,17 @@ formatBoxShadow shadow =
2982 ]
3144 ]
2983
3145
2984
3146
2985−boxShadowName shadow =
3147+boxShadowClass shadow =
2986 String.concat <|
3148 String.concat <|
2987 [ if shadow.inset then
3149 [ if shadow.inset then
2988 "box-inset"
3150 "box-inset"
2989
3151
2990 else
3152 else
2991 "box-"
3153 "box-"
2992− , String.fromFloat (Tuple.first shadow.offset) ++ "px"
3154+ , floatClass (Tuple.first shadow.offset) ++ "px"
2993− , String.fromFloat (Tuple.second shadow.offset) ++ "px"
3155+ , floatClass (Tuple.second shadow.offset) ++ "px"
2994− , String.fromFloat shadow.blur ++ "px"
3156+ , floatClass shadow.blur ++ "px"
2995− , String.fromFloat shadow.size ++ "px"
3157+ , floatClass shadow.size ++ "px"
2996 , formatColorClass shadow.color
3158 , formatColorClass shadow.color
2997 ]
3159 ]
2998
3160
@@ -3037,6 +3199,17 @@ paddingName top right bottom left =
3037 ++ String.fromInt left
3199 ++ String.fromInt left
3038
3200
3039
3201
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+
3040getStyleName : Style -> String
3213getStyleName : Style -> String
3041getStyleName style =
3214getStyleName style =
3042 case style of
3215 case style of
src/Internal/Style.elm+135−17
@@ -10,6 +10,7 @@ type Class
10type Rule
10type Rule
11 = Prop String String
11 = Prop String String
12 | Child String (List Rule)
12 | Child String (List Rule)
13+ | AllChildren String (List Rule)
13 | Supports ( String, String ) (List ( String, String ))
14 | Supports ( String, String ) (List ( String, String ))
14 | Descriptor String (List Rule)
15 | Descriptor String (List Rule)
15 | Adjacent String (List Rule)
16 | Adjacent String (List Rule)
@@ -148,6 +149,7 @@ classes =
148 , widthFillPortion = "wfp"
149 , widthFillPortion = "wfp"
149 , heightFill = "hf"
150 , heightFill = "hf"
150 , heightContent = "hc"
151 , heightContent = "hc"
152+ , heightExact = "he"
151 , heightFillPortion = "hfp"
153 , heightFillPortion = "hfp"
152 , seButton = "sbt"
154 , seButton = "sbt"
153
155
@@ -204,6 +206,7 @@ classes =
204
206
205 -- , hoverOpaque = "hover-opaque"
207 -- , hoverOpaque = "hover-opaque"
206 , focus = "fcs"
208 , focus = "fcs"
209+ , focusedWithin = "focus-within"
207
210
208 -- , focusOpaque = "focus-opaque"
211 -- , focusOpaque = "focus-opaque"
209 , active = "atv"
212 , active = "atv"
@@ -251,6 +254,13 @@ classes =
251 -- inputText
254 -- inputText
252 , inputText = "it"
255 , inputText = "it"
253 , inputMultiline = "iml"
256 , inputMultiline = "iml"
257+ , inputMultilineParent = "imlp"
258+ , inputMultilineFiller = "imlf"
259+ , inputMultilineWrapper = "implw"
260+ , inputLabel = "lbl"
261+
262+ -- link
263+ , link = "lnk"
254 }
264 }
255
265
256
266
@@ -552,6 +562,15 @@ renderRules (Intermediate parent) rulesToRender =
552 :: rendered.others
562 :: rendered.others
553 }
563 }
554
564
565+ AllChildren child childRules ->
566+ { rendered
567+ | others =
568+ renderRules
569+ (emptyIntermediate (parent.selector ++ " " ++ child) "")
570+ childRules
571+ :: rendered.others
572+ }
573+
555 Descriptor descriptor descriptorRules ->
574 Descriptor descriptor descriptorRules ->
556 { rendered
575 { rendered
557 | others =
576 | others =
@@ -680,18 +699,30 @@ overrides =
680 ++ dot classes.any
699 ++ dot classes.any
681 ++ dot classes.container
700 ++ dot classes.container
682 ++ " { flex-basis: auto !important; }}"
701 ++ " { flex-basis: auto !important; }}"
683− ++ sliderOverrides
702+ ++ inputTextReset
703+ ++ sliderReset
704+ ++ trackReset
705+ ++ thumbReset
684 ++ explainer
706 ++ explainer
685
707
686
708
687−sliderOverrides =
709+inputTextReset =
688 """
710 """
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+
689
720
690−/* General Input Reset */
721+sliderReset =
722+ """
691input[type=range] {
723input[type=range] {
692− -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
724+ -webkit-appearance: none;
693− /* width: 100%; Specific width is required for Firefox. */
694− background: transparent; /* Otherwise white in Chrome */
725+ background: transparent;
695 position:absolute;
726 position:absolute;
696 left:0;
727 left:0;
697 top:0;
728 top:0;
@@ -701,8 +732,11 @@ input[type=range] {
701 height: 100%;
732 height: 100%;
702 opacity: 0;
733 opacity: 0;
703}
734}
735+"""
736+
704
737
705−/* Hide all syling for track */
738+trackReset =
739+ """
706input[type=range]::-moz-range-track {
740input[type=range]::-moz-range-track {
707 background: transparent;
741 background: transparent;
708 cursor: pointer;
742 cursor: pointer;
@@ -715,8 +749,11 @@ input[type=range]::-webkit-slider-runnable-track {
715 background: transparent;
749 background: transparent;
716 cursor: pointer;
750 cursor: pointer;
717}
751}
752+"""
753+
718
754
719−/* Thumbs */
755+thumbReset =
756+ """
720input[type=range]::-webkit-slider-thumb {
757input[type=range]::-webkit-slider-thumb {
721 -webkit-appearance: none;
758 -webkit-appearance: none;
722 opacity: 0.5;
759 opacity: 0.5;
@@ -856,6 +893,9 @@ elDescription =
856 -- Prop "align-self" "stretch !important"
893 -- Prop "align-self" "stretch !important"
857 Prop "width" "100%"
894 Prop "width" "100%"
858 ]
895 ]
896+ , Child (dot classes.widthFillPortion)
897+ [ Prop "width" "100%"
898+ ]
859 , Child (dot classes.widthContent)
899 , Child (dot classes.widthContent)
860 [ Prop "align-self" "flex-start"
900 [ Prop "align-self" "flex-start"
861 ]
901 ]
@@ -921,6 +961,18 @@ baseSheet =
921 ]
961 ]
922 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)
962 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)
923 [ Prop "display" "block"
963 [ 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+ ]
924 ]
976 ]
925 , Class (dot classes.any ++ ":focus")
977 , Class (dot classes.any ++ ":focus")
926 [ Prop "outline" "none"
978 [ Prop "outline" "none"
@@ -943,6 +995,7 @@ baseSheet =
943 , Child (dot classes.inFront)
995 , Child (dot classes.inFront)
944 [ Descriptor (dot classes.nearby)
996 [ Descriptor (dot classes.nearby)
945 [ Prop "position" "fixed"
997 [ Prop "position" "fixed"
998+ , Prop "z-index" "20"
946 ]
999 ]
947 ]
1000 ]
948 ]
1001 ]
@@ -1190,6 +1243,8 @@ baseSheet =
1190 -- chrome and safari have a minimum recognized line height for text input of 1.05
1243 -- chrome and safari have a minimum recognized line height for text input of 1.05
1191 -- If it's 1, it bumps up to something like 1.2
1244 -- If it's 1, it bumps up to something like 1.2
1192 [ Prop "line-height" "1.05"
1245 [ Prop "line-height" "1.05"
1246+ , Prop "background" "transparent"
1247+ , Prop "text-align" "inherit"
1193 ]
1248 ]
1194 , Descriptor (dot classes.single)
1249 , Descriptor (dot classes.single)
1195 elDescription
1250 elDescription
@@ -1201,15 +1256,16 @@ baseSheet =
1201 , Descriptor (dot classes.widthExact)
1256 , Descriptor (dot classes.widthExact)
1202 [ Prop "flex-basis" "auto"
1257 [ Prop "flex-basis" "auto"
1203 ]
1258 ]
1259+ , Descriptor (dot classes.link)
1260+ [ Prop "flex-basis" "auto"
1261+ ]
1204 ]
1262 ]
1205 , Child (dot classes.heightFill)
1263 , Child (dot classes.heightFill)
1206− [ --Prop "height" "100%"
1207− -- alignTop, centerY, and alignBottom need to be disabled
1264+ [ -- alignTop, centerY, and alignBottom need to be disabled
1208 Prop "align-self" "stretch !important"
1265 Prop "align-self" "stretch !important"
1209 ]
1266 ]
1210 , Child (dot classes.heightFillPortion)
1267 , Child (dot classes.heightFillPortion)
1211− [ --Prop "height" "100%"
1212− -- alignTop, centerY, and alignBottom need to be disabled
1268+ [ -- alignTop, centerY, and alignBottom need to be disabled
1213 Prop "align-self" "stretch !important"
1269 Prop "align-self" "stretch !important"
1214 ]
1270 ]
1215
1271
@@ -1315,10 +1371,29 @@ baseSheet =
1315 , Descriptor (dot classes.spaceEvenly)
1371 , Descriptor (dot classes.spaceEvenly)
1316 [ Prop "justify-content" "space-between"
1372 [ Prop "justify-content" "space-between"
1317 ]
1373 ]
1374+ , Descriptor (dot classes.inputLabel)
1375+ [ Prop "align-items" "baseline"
1376+ ]
1318 ]
1377 ]
1319 , Descriptor (dot classes.column)
1378 , Descriptor (dot classes.column)
1320 [ Prop "display" "flex"
1379 [ Prop "display" "flex"
1321 , Prop "flex-direction" "column"
1380 , 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+ ]
1322 , Child (dot classes.heightFill)
1397 , Child (dot classes.heightFill)
1323 [ Prop "flex-grow" "100000"
1398 [ Prop "flex-grow" "100000"
1324 ]
1399 ]
@@ -1333,7 +1408,7 @@ baseSheet =
1333 Prop "width" "100%"
1408 Prop "width" "100%"
1334 ]
1409 ]
1335
1410
1336− -- TODO:: THIs might be necessary, maybe it should move to widthFill?
1411+ -- TODO:: This might be necessary, maybe it should move to widthFill?
1337 -- , Child (dot classes.widthFill)
1412 -- , Child (dot classes.widthFill)
1338 -- [ Prop "align-self" "stretch"
1413 -- [ Prop "align-self" "stretch"
1339 -- , Descriptor (dot classes.alignedHorizontally)
1414 -- , Descriptor (dot classes.alignedHorizontally)
@@ -1521,24 +1596,67 @@ baseSheet =
1521 )
1596 )
1522 ]
1597 ]
1523 , Descriptor (dot classes.inputMultiline)
1598 , Descriptor (dot classes.inputMultiline)
1524− [ Prop "white-space" "pre-wrap"
1599+ [ Prop "white-space" "pre-wrap !important"
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+ ]
1525 ]
1625 ]
1526 , Descriptor (dot classes.paragraph)
1626 , Descriptor (dot classes.paragraph)
1527 [ Prop "display" "block"
1627 [ Prop "display" "block"
1528 , Prop "white-space" "normal"
1628 , Prop "white-space" "normal"
1629+ , Prop "overflow-wrap" "break-word"
1529 , Descriptor (dot classes.hasBehind)
1630 , Descriptor (dot classes.hasBehind)
1530 [ Prop "z-index" "0"
1631 [ Prop "z-index" "0"
1531 , Child (dot classes.behind)
1632 , Child (dot classes.behind)
1532 [ Prop "z-index" "-1"
1633 [ Prop "z-index" "-1"
1533 ]
1634 ]
1534 ]
1635 ]
1535− , Child (dot classes.text)
1636+ , AllChildren (dot classes.text)
1536 [ Prop "display" "inline"
1637 [ Prop "display" "inline"
1537 , Prop "white-space" "normal"
1638 , Prop "white-space" "normal"
1538 ]
1639 ]
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+ ]
1539− , Child (dot classes.single)
1649+ , AllChildren (dot classes.single)
1540 [ Prop "display" "inline"
1650 [ Prop "display" "inline"
1541 , Prop "white-space" "normal"
1651 , 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+ ]
1542 , Descriptor (dot classes.inFront)
1660 , Descriptor (dot classes.inFront)
1543 [ Prop "display" "flex"
1661 [ Prop "display" "flex"
1544 ]
1662 ]
@@ -1563,7 +1681,7 @@ baseSheet =
1563 ]
1681 ]
1564 ]
1682 ]
1565 , Child (dot classes.row)
1683 , Child (dot classes.row)
1566− [ Prop "display" "inline-flex"
1684+ [ Prop "display" "inline"
1567 ]
1685 ]
1568 , Child (dot classes.column)
1686 , Child (dot classes.column)
1569 [ Prop "display" "inline-flex"
1687 [ Prop "display" "inline-flex"
tests-rendering/automation/build.jsnew file+90
@@ -0,0 +1,90 @@
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.shnew file+1
@@ -0,0 +1 @@
1+elm make --docs docs.json
tests-rendering/automation/publish-file.shnew file+31
@@ -0,0 +1,31 @@
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.jsnew file+304
@@ -0,0 +1,304 @@
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.elmnew file+14
@@ -0,0 +1,14 @@
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.htmlnew file+185
@@ -0,0 +1,185 @@
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.jsnew file+73
@@ -0,0 +1,73 @@
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/Tests/Manual/AlignedForm.elm → tests-rendering/cases/Manual/AlignedForm.elmrenamed

The content is the same.

tests/Tests/Manual/All.elm → tests-rendering/cases/Manual/All.elmrenamed

The content is the same.

tests/Tests/Manual/LazyPerformance.elm → tests-rendering/cases/Manual/LazyPerformance.elmrenamed

The content is the same.

tests/Tests/Manual/OtherScrollbars.elm → tests-rendering/cases/Manual/OtherScrollbars.elmrenamed

The content is the same.

tests/Tests/Manual/Overflow.elm → tests-rendering/cases/Manual/Overflow.elmrenamed

The content is the same.

tests/Tests/Manual/Scrollbars.elm → tests-rendering/cases/Manual/Scrollbars.elmrenamed

The content is the same.

tests/Tests/Manual/ScrollbarsPls.elm → tests-rendering/cases/Manual/ScrollbarsPls.elmrenamed

The content is the same.

tests/Tests/Manual/TextLayout.elm → tests-rendering/cases/Manual/TextLayout.elmrenamed

The content is the same.

tests-rendering/cases/elm.jsonnew file+23
@@ -0,0 +1,23 @@
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.elmnew file+43
@@ -0,0 +1,43 @@
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.elmnew file+28
@@ -0,0 +1,28 @@
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.elmnew file+46
@@ -0,0 +1,46 @@
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.elmnew file+39
@@ -0,0 +1,39 @@
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.elmnew file+50
@@ -0,0 +1,50 @@
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.elmnew file+42
@@ -0,0 +1,42 @@
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.elmnew file+35
@@ -0,0 +1,35 @@
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/cases/resolved/Adjusted.elm → tests-rendering/cases/resolved/Adjusted.elmrenamed

The content is the same.

tests/cases/resolved/BehindContent.elm → tests-rendering/cases/resolved/BehindContent.elmrenamed

The content is the same.

tests-rendering/cases/resolved/ClippedElInFixedWidthColumn.elmnew file+31
@@ -0,0 +1,31 @@
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.elmnew file+40
@@ -0,0 +1,40 @@
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.elmnew file+41
@@ -0,0 +1,41 @@
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.elmnew file+34
@@ -0,0 +1,34 @@
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.elmnew file+25
@@ -0,0 +1,25 @@
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.elmnew file+63
@@ -0,0 +1,63 @@
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.elmnew file+19
@@ -0,0 +1,19 @@
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.elmnew file+24
@@ -0,0 +1,24 @@
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.elmnew file+37
@@ -0,0 +1,37 @@
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.elmnew file+38
@@ -0,0 +1,38 @@
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.elmnew file+44
@@ -0,0 +1,44 @@
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.elmnew file+34
@@ -0,0 +1,34 @@
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.elmnew file+59
@@ -0,0 +1,59 @@
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.elmnew file+74
@@ -0,0 +1,74 @@
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.elmnew file+17
@@ -0,0 +1,17 @@
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.elmnew file+103
@@ -0,0 +1,103 @@
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.elmnew file+46
@@ -0,0 +1,46 @@
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.elmnew file+86
@@ -0,0 +1,86 @@
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.elmnew file+48
@@ -0,0 +1,48 @@
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.elmnew file+40
@@ -0,0 +1,40 @@
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.elmnew file+165
@@ -0,0 +1,165 @@
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.elmnew file+54
@@ -0,0 +1,54 @@
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.elmnew file+37
@@ -0,0 +1,37 @@
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.elmnew file+13
@@ -0,0 +1,13 @@
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.elmnew file+48
@@ -0,0 +1,48 @@
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.elmnew file+82
@@ -0,0 +1,82 @@
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.elmnew file+61
@@ -0,0 +1,61 @@
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.elmnew file+377
@@ -0,0 +1,377 @@
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.elmnew file+61
@@ -0,0 +1,61 @@
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.elmnew file+64
@@ -0,0 +1,64 @@
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.elmnew file+87
@@ -0,0 +1,87 @@
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.elmnew file+55
@@ -0,0 +1,55 @@
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.elmnew file+43
@@ -0,0 +1,43 @@
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.elmnew file+33
@@ -0,0 +1,33 @@
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/cases/resolved/OtherOtherZindex.elm → tests-rendering/cases/resolved/OtherOtherZindex.elmrenamed

The content is the same.

tests/cases/resolved/OtherZIndex.elm → tests-rendering/cases/resolved/OtherZIndex.elmrenamed

The content is the same.

tests-rendering/cases/resolved/OverflowingInput.elmnew file+48
@@ -0,0 +1,48 @@
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.elmnew file+54
@@ -0,0 +1,54 @@
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.elmnew file+95
@@ -0,0 +1,95 @@
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/cases/resolved/ReversedTableOrder.elm → tests-rendering/cases/resolved/ReversedTableOrder.elmrenamed

The content is the same.

tests-rendering/cases/resolved/TextAreaMax.elmnew file+80
@@ -0,0 +1,80 @@
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.elmnew file+32
@@ -0,0 +1,32 @@
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/cases/resolved/ZIndex.elm → tests-rendering/cases/resolved/ZIndex.elmrenamed

The content is the same.

tests/cases/resolved/elm.json → tests-rendering/cases/resolved/elm.jsonrenamed

The content is the same.

tests-rendering/elm.jsonnew file+25
@@ -0,0 +1,25 @@
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/src/Generator.elm → tests-rendering/src/Generator.elmrenamed

The content is the same.

tests/src/Testable.elm → tests-rendering/src/Testable.elmrenamed+337−131
@@ -1,21 +1,48 @@
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)
1+module Testable exposing
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+ )
2
32
3{-| -}
33{-| -}
4
34
5import Dict exposing (Dict)
35import Dict exposing (Dict)
6import Element exposing (Color)
36import Element exposing (Color)
7−import Expect
8import Html exposing (Html)
37import Html exposing (Html)
9import Html.Attributes
38import Html.Attributes
10import Internal.Model as Internal
39import Internal.Model as Internal
11−import Random
12import Test exposing (Test)
40import Test exposing (Test)
13−import Test.Runner
14−import Test.Runner.Failure
15
41
16
42
17type Element msg
43type Element msg
18 = El (List (Attr msg)) (Element msg)
44 = El (List (Attr msg)) (Element msg)
45+ | Link String (List (Attr msg)) (Element msg)
19 | Row (List (Attr msg)) (List (Element msg))
46 | Row (List (Attr msg)) (List (Element msg))
20 | Column (List (Attr msg)) (List (Element msg))
47 | Column (List (Attr msg)) (List (Element msg))
21 | TextColumn (List (Attr msg)) (List (Element msg))
48 | TextColumn (List (Attr msg)) (List (Element msg))
@@ -24,22 +51,104 @@ type Element msg
24 | Empty
51 | Empty
25
52
26
53
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+
27type Attr msg
132type Attr msg
28 = Attr (Element.Attribute msg)
133 = Attr (Element.Attribute msg)
29− | AttrTest (Surroundings -> Test)
134+ | AttrTest
135+ { test : Surroundings msg -> List LayoutExpectation
136+ , label : String
137+ , id : AttributeId
138+ }
30 | Batch (List (Attr msg))
139 | Batch (List (Attr msg))
31 | Spacing Int
140 | Spacing Int
32 | Nearby
141 | Nearby
33 { location : Location
142 { location : Location
34 , element : Element msg
143 , element : Element msg
35− , test : Surroundings -> () -> Expect.Expectation
144+ , test : Surroundings msg -> List LayoutExpectation
36 , label : String
145 , label : String
37 }
146 }
38− | Label String
39 | LabeledTest
147 | LabeledTest
40− { test : Surroundings -> () -> Expect.Expectation
148+ { test : Surroundings msg -> List LayoutExpectation
41 , label : String
149 , label : String
42 , attr : Element.Attribute msg
150 , attr : Element.Attribute msg
151+ , id : AttributeId
43 }
152 }
44
153
45
154
@@ -57,16 +166,20 @@ type LayoutContext
57 | InRow
166 | InRow
58 | InEl
167 | InEl
59 | InColumn
168 | InColumn
169+ | InParagraph
170+ | InTextCol
171+ | AtRoot
60
172
61
173
62−type alias Surroundings =
174+type alias Surroundings msg =
63 { siblings : List Found
175 { siblings : List Found
64 , parent : Found
176 , parent : Found
65 , children : List Found
177 , children : List Found
66 , self : Found
178 , self : Found
179+ , selfElement : Element msg
67
180
68 -- These values are needed to perform some types of tests.
181 -- These values are needed to perform some types of tests.
69− , location : LayoutContext
182+ , parentLayout : LayoutContext
70 , parentSpacing : Int
183 , parentSpacing : Int
71 }
184 }
72
185
@@ -75,9 +188,36 @@ type alias Found =
75 { bbox : BoundingBox
188 { bbox : BoundingBox
76 , style : Style
189 , style : Style
77 , isVisible : Bool
190 , isVisible : Bool
191+ , textMetrics : List TextMetrics
78 }
192 }
79
193
80
194
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+
81{-| -}
221{-| -}
82type alias Style =
222type alias Style =
83 Dict String String
223 Dict String String
@@ -99,6 +239,67 @@ type alias BoundingBox =
99 }
239 }
100
240
101
241
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+
102
303
103{- Retrieve Ids -}
304{- Retrieve Ids -}
104
305
@@ -134,6 +335,9 @@ getElementId level el =
134 El attrs child ->
335 El attrs child ->
135 id :: getElementId (0 :: level) child ++ attributeIDs attrs
336 id :: getElementId (0 :: level) child ++ attributeIDs attrs
136
337
338+ Link _ attrs child ->
339+ id :: getElementId (0 :: level) child ++ attributeIDs attrs
340+
137 Row attrs children ->
341 Row attrs children ->
138 id :: childrenIDs children ++ attributeIDs attrs
342 id :: childrenIDs children ++ attributeIDs attrs
139
343
@@ -157,9 +361,19 @@ getElementId level el =
157{- Render as Html -}
361{- Render as Html -}
158
362
159
363
364+toElement : Element msg -> Element.Element msg
365+toElement el =
366+ renderElement [ 0, 0 ] el
367+
368+
160−render : Element msg -> Html msg
369+toHtml : Element msg -> Html msg
161−render el =
370+toHtml el =
162− Element.layout [ idAttr "0" ] <|
371+ Element.layout
372+ [ idAttr "0"
373+ , Element.width (Element.px 1000)
374+ , Element.height (Element.px 1000)
375+ ]
376+ <|
163 renderElement [ 0, 0 ] el
377 renderElement [ 0, 0 ] el
164
378
165
379
@@ -188,6 +402,13 @@ renderElement level el =
188 (id :: makeAttributes attrs)
402 (id :: makeAttributes attrs)
189 (renderElement (0 :: level) child)
403 (renderElement (0 :: level) child)
190
404
405+ Link url attrs child ->
406+ Element.link
407+ (id :: makeAttributes attrs)
408+ { url = url
409+ , label = renderElement (0 :: level) child
410+ }
411+
191 Row attrs children ->
412 Row attrs children ->
192 Element.row
413 Element.row
193 (id :: makeAttributes attrs)
414 (id :: makeAttributes attrs)
@@ -227,9 +448,6 @@ renderAttribute level attrIndex attr =
227 Spacing _ ->
448 Spacing _ ->
228 []
449 []
229
450
230− Label _ ->
231− []
232−
233 Nearby { location, element } ->
451 Nearby { location, element } ->
234 case location of
452 case location of
235 Above ->
453 Above ->
@@ -262,30 +480,36 @@ renderAttribute level attrIndex attr =
262{- Convert to Test -}
480{- Convert to Test -}
263
481
264
482
265−toTest : String -> Dict String Found -> Element msg -> Test
483+runTests : Dict String Found -> Element msg -> List LayoutTest
266−toTest label harvested el =
484+runTests harvested el =
267 let
485 let
268 maybeFound =
486 maybeFound =
269 Dict.get "se-0" harvested
487 Dict.get "se-0" harvested
270 in
488 in
271 case maybeFound of
489 case maybeFound of
272 Nothing ->
490 Nothing ->
273− Test.describe label
491+ [ { elementDomId = "se-0"
274− [ Test.test "Find Root" <|
492+ , elementType = EmptyType
275− \_ -> Expect.fail "unable to find root"
493+ , label = "Finding root element"
494+ , expectations =
495+ [ Expect
496+ { description = "Locating root element for rendering tests"
497+ , result = False
498+ }
499+ ]
500+ }
276− ]
501+ ]
277
502
278 Just root ->
503 Just root ->
279− Test.describe label <|
280− createTest
504+ createTest
281− { siblings = []
505+ { siblings = []
282− , parent = root
506+ , parent = root
283− , cache = harvested
507+ , cache = harvested
284− , parentSpacing = 0
508+ , parentSpacing = 0
285− , level = [ 0, 0 ]
509+ , level = [ 0, 0 ]
286− , element = el
510+ , element = el
287− , location = InEl
511+ , location = AtRoot
288− }
512+ }
289
513
290
514
291levelToString : List Int -> String
515levelToString : List Int -> String
@@ -305,7 +529,7 @@ createTest :
305 , location : LayoutContext
529 , location : LayoutContext
306 , parentSpacing : Int
530 , parentSpacing : Int
307 }
531 }
308− -> List Test
532+ -> List LayoutTest
309createTest { siblings, parent, cache, level, element, location, parentSpacing } =
533createTest { siblings, parent, cache, level, element, location, parentSpacing } =
310 let
534 let
311 spacing =
535 spacing =
@@ -315,7 +539,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
315 id =
539 id =
316 levelToString level
540 levelToString level
317
541
318− testChildren : Found -> List (Element msg) -> List Test
542+ testChildren : Found -> List (Element msg) -> List LayoutTest
319 testChildren found children =
543 testChildren found children =
320 let
544 let
321 childrenFound =
545 childrenFound =
@@ -343,13 +567,13 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
343 { a
567 { a
344 | index : Int
568 | index : Int
345 , previous : List Found
569 , previous : List Found
346− , tests : List Test
570+ , tests : List LayoutTest
347 , upcoming : List Found
571 , upcoming : List Found
348 }
572 }
349 ->
573 ->
350 { index : Int
574 { index : Int
351 , previous : List Found
575 , previous : List Found
352− , tests : List Test
576+ , tests : List LayoutTest
353 , upcoming : List Found
577 , upcoming : List Found
354 }
578 }
355 applyChildTest found child childTest =
579 applyChildTest found child childTest =
@@ -376,6 +600,9 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
376 El _ _ ->
600 El _ _ ->
377 InEl
601 InEl
378
602
603+ Link _ _ _ ->
604+ InEl
605+
379 Row _ _ ->
606 Row _ _ ->
380 InRow
607 InRow
381
608
@@ -383,10 +610,10 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
383 InColumn
610 InColumn
384
611
385 TextColumn _ _ ->
612 TextColumn _ _ ->
386− InColumn
613+ InTextCol
387
614
388 Paragraph _ _ ->
615 Paragraph _ _ ->
389− InRow
616+ InParagraph
390
617
391 Text _ ->
618 Text _ ->
392 InEl
619 InEl
@@ -413,7 +640,7 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
413 rest
640 rest
414 }
641 }
415
642
416− tests : Found -> List (Attr msg) -> List (Element msg) -> List Test
643+ tests : Found -> List (Attr msg) -> List (Element msg) -> List LayoutTest
417 tests self attributes children =
644 tests self attributes children =
418 let
645 let
419 findBBox elem ( i, gathered ) =
646 findBBox elem ( i, gathered ) =
@@ -453,7 +680,6 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
453
680
454 attributeTests =
681 attributeTests =
455 attributes
682 attributes
456− |> applyLabels
457 |> List.indexedMap
683 |> List.indexedMap
458 -- Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test
684 -- Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test
459 (\i attr ->
685 (\i attr ->
@@ -464,8 +690,9 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
464 { siblings = siblings
690 { siblings = siblings
465 , parent = parent
691 , parent = parent
466 , self = self
692 , self = self
693+ , selfElement = element
467 , children = childrenFoundData
694 , children = childrenFoundData
468− , location = location
695+ , parentLayout = location
469 , parentSpacing = parentSpacing
696 , parentSpacing = parentSpacing
470 }
697 }
471 attr
698 attr
@@ -485,13 +712,26 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
485 []
712 []
486
713
487 _ ->
714 _ ->
488− [ Test.test ("Unable to find " ++ id) (always <| Expect.fail "failed id lookup") ]
715+ [ { elementDomId = id
716+ , elementType = EmptyType
717+ , label = "Finding element in DOM"
718+ , expectations =
719+ [ Expect
720+ { description = "Locating element for rendering test"
721+ , result = False
722+ }
723+ ]
724+ }
725+ ]
489
726
490 Just self ->
727 Just self ->
491 case element of
728 case element of
492 El attrs child ->
729 El attrs child ->
493 tests self attrs [ child ]
730 tests self attrs [ child ]
494
731
732+ Link _ attrs child ->
733+ tests self attrs [ child ]
734+
495 Row attrs children ->
735 Row attrs children ->
496 tests self attrs children
736 tests self attrs children
497
737
@@ -511,59 +751,33 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
511 []
751 []
512
752
513
753
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−
549−createAttributeTest : Found -> Dict String Found -> List Int -> Int -> Surroundings -> Attr msg -> List Test
754+createAttributeTest :
755+ Found
756+ -> Dict String Found
757+ -> List Int
758+ -> Int
759+ -> Surroundings msg
760+ -> Attr msg
761+ -> List LayoutTest
550createAttributeTest parent cache level attrIndex surroundings attr =
762createAttributeTest parent cache level attrIndex surroundings attr =
551 let
763 let
552− indexLabel =
764+ domId =
553− levelToString (attrIndex :: level)
765+ "#" ++ levelToString level
554 in
766 in
555 case attr of
767 case attr of
556 Attr _ ->
768 Attr _ ->
557 []
769 []
558
770
559− Label _ ->
560− []
561−
562 Spacing _ ->
771 Spacing _ ->
563 []
772 []
564
773
565− AttrTest test ->
774+ AttrTest details ->
775+ [ { elementDomId = domId
776+ , elementType =
777+ toElementType surroundings.selfElement
778+ , label = details.label
566− [ test surroundings
779+ , expectations = details.test surroundings
780+ }
567 ]
781 ]
568
782
569 Nearby nearby ->
783 Nearby nearby ->
@@ -574,16 +788,29 @@ createAttributeTest parent cache level attrIndex surroundings attr =
574 , parentSpacing = 0
788 , parentSpacing = 0
575 , level = attrIndex :: -1 :: level
789 , level = attrIndex :: -1 :: level
576 , location = IsNearby nearby.location
790 , location = IsNearby nearby.location
577− , element = addAttribute (AttrTest (\context -> Test.test (nearby.label ++ " #" ++ indexLabel) (nearby.test context))) nearby.element
791+ , element =
792+ addAttribute
793+ (AttrTest
794+ { label = nearby.label
795+ , test =
796+ nearby.test
797+ , id = NoId
798+ }
799+ )
800+ nearby.element
578 }
801 }
579
802
580 Batch batch ->
803 Batch batch ->
581 batch
804 batch
582− |> List.indexedMap (\i attribute -> createAttributeTest parent cache (attrIndex :: level) i surroundings attribute)
805+ |> List.indexedMap (\i attribute -> createAttributeTest parent cache level i surroundings attribute)
583 |> List.concat
806 |> List.concat
584
807
585 LabeledTest { label, test } ->
808 LabeledTest { label, test } ->
809+ [ { elementDomId = domId
810+ , elementType = toElementType surroundings.selfElement
811+ , label = label
586− [ Test.test (label ++ " #" ++ indexLabel) (test surroundings)
812+ , expectations = test surroundings
813+ }
587 ]
814 ]
588
815
589
816
@@ -593,6 +820,9 @@ addAttribute attr el =
593 El attrs child ->
820 El attrs child ->
594 El (attr :: attrs) child
821 El (attr :: attrs) child
595
822
823+ Link url attrs child ->
824+ Link url (attr :: attrs) child
825+
596 Row attrs children ->
826 Row attrs children ->
597 Row (attr :: attrs) children
827 Row (attr :: attrs) children
598
828
@@ -612,48 +842,6 @@ addAttribute attr el =
612 Text str
842 Text str
613
843
614
844
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−
657compareFormattedColor : Color -> String -> Bool
845compareFormattedColor : Color -> String -> Bool
658compareFormattedColor color expected =
846compareFormattedColor color expected =
659 formatColor color == expected || formatColorWithAlpha color == expected
847 formatColor color == expected || formatColorWithAlpha color == expected
@@ -690,6 +878,21 @@ formatColor (Internal.Rgba red green blue alpha) =
690 ++ ")"
878 ++ ")"
691
879
692
880
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+
693getSpacing : Element msg -> Maybe Int
896getSpacing : Element msg -> Maybe Int
694getSpacing el =
897getSpacing el =
695 let
898 let
@@ -715,6 +918,9 @@ getSpacing el =
715 El attrs _ ->
918 El attrs _ ->
716 filterAttrs attrs
919 filterAttrs attrs
717
920
921+ Link _ attrs _ ->
922+ filterAttrs attrs
923+
718 Row attrs _ ->
924 Row attrs _ ->
719 filterAttrs attrs
925 filterAttrs attrs
720
926
tests-rendering/src/Testable/Element.elmnew file+1723
@@ -0,0 +1,1723 @@
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/src/Testable/Element/Background.elm → tests-rendering/src/Testable/Element/Background.elmrenamed+5−4
@@ -5,23 +5,24 @@ module Testable.Element.Background exposing (color)
5import Dict
5import Dict
6import Element exposing (Color)
6import Element exposing (Color)
7import Element.Background as Background
7import Element.Background as Background
8−import Expect
9import Testable
8import Testable
10
9
11
10
12color : Color -> Testable.Attr msg
11color : Color -> Testable.Attr msg
13color clr =
12color clr =
14 Testable.LabeledTest
13 Testable.LabeledTest
15− { label = "background color-" ++ Testable.formatColor clr
14+ { label = "background color"
16 , attr = Background.color clr
15 , attr = Background.color clr
16+ , id = Testable.NoId
17 , test =
17 , test =
18− \context _ ->
18+ \context ->
19 let
19 let
20 selfBackgroundColor =
20 selfBackgroundColor =
21 context.self.style
21 context.self.style
22 |> Dict.get "background-color"
22 |> Dict.get "background-color"
23 |> Maybe.withDefault "notfound"
23 |> Maybe.withDefault "notfound"
24 in
24 in
25− Expect.true ("Expected color: " ++ (Testable.formatColor clr ++ " vs found:" ++ selfBackgroundColor))
25+ [ Testable.true ("expected " ++ (Testable.formatColor clr ++ ", found " ++ selfBackgroundColor))
26 (Testable.compareFormattedColor clr selfBackgroundColor)
26 (Testable.compareFormattedColor clr selfBackgroundColor)
27+ ]
27 }
28 }
tests-rendering/src/Testable/Element/Border.elmnew file+20
@@ -0,0 +1,20 @@
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/src/Testable/Element/Font.elm → tests-rendering/src/Testable/Element/Font.elmrenamed+14−6
@@ -1,29 +1,35 @@
1−module Testable.Element.Font exposing (color)
1+module Testable.Element.Font exposing (bold, color, size)
2
2
3{-| -}
3{-| -}
4
4
5import Dict
5import Dict
6import Element exposing (Color)
6import Element exposing (Color)
7import Element.Font as Font
7import Element.Font as Font
8−import Expect
9import Testable
8import Testable
10
9
11
10
11+bold : Testable.Attr msg
12+bold =
13+ Testable.Attr Font.bold
14+
15+
12color : Color -> Testable.Attr msg
16color : Color -> Testable.Attr msg
13color clr =
17color clr =
14 Testable.LabeledTest
18 Testable.LabeledTest
15 { label = "font color-" ++ Testable.formatColor clr
19 { label = "font color-" ++ Testable.formatColor clr
16 , attr = Font.color clr
20 , attr = Font.color clr
21+ , id = Testable.NoId
17 , test =
22 , test =
18− \context _ ->
23+ \context ->
19 let
24 let
20 selfFontColor =
25 selfFontColor =
21 context.self.style
26 context.self.style
22 |> Dict.get "color"
27 |> Dict.get "color"
23 |> Maybe.withDefault "notfound"
28 |> Maybe.withDefault "notfound"
24 in
29 in
25− Expect.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfFontColor))
30+ [ Testable.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfFontColor))
26 (Testable.compareFormattedColor clr selfFontColor)
31 (Testable.compareFormattedColor clr selfFontColor)
32+ ]
27 }
33 }
28
34
29
35
@@ -32,8 +38,9 @@ size i =
32 Testable.LabeledTest
38 Testable.LabeledTest
33 { label = "font size-" ++ String.fromInt i
39 { label = "font size-" ++ String.fromInt i
34 , attr = Font.size i
40 , attr = Font.size i
41+ , id = Testable.NoId
35 , test =
42 , test =
36− \context _ ->
43+ \context ->
37 let
44 let
38 selfFontSize =
45 selfFontSize =
39 context.self.style
46 context.self.style
@@ -43,6 +50,7 @@ size i =
43 formattedInt =
50 formattedInt =
44 String.fromInt i
51 String.fromInt i
45 in
52 in
46− Expect.true ("Size Match - " ++ (formattedInt ++ " vs " ++ selfFontSize))
53+ [ Testable.true ("Size Match - " ++ (formattedInt ++ " vs " ++ selfFontSize))
47 (formattedInt == selfFontSize)
54 (formattedInt == selfFontSize)
55+ ]
48 }
56 }
tests-rendering/src/Testable/Generator.elmnew file+398
@@ -0,0 +1,398 @@
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.elmnew file+607
@@ -0,0 +1,607 @@
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.elmnew file+49
@@ -0,0 +1,49 @@
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.elmnew file+44
@@ -0,0 +1,44 @@
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.elmnew file+179
@@ -0,0 +1,179 @@
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/Tests/Palette.elm → tests-rendering/src/Tests/Palette.elmrenamed

The content is the same.

tests-rendering/src/Tests/Run.elmnew file+14
@@ -0,0 +1,14 @@
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.elmnew file+36
@@ -0,0 +1,36 @@
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/Tests/Table.elm → tests-rendering/src/Tests/Table.elm.todorenamed+3−3
@@ -1,12 +1,12 @@
1−module Tests.Table exposing (..)
1+module Tests.Table exposing (box, container, main, view)
2
2
3−import Tests.Palette as Palette exposing (..)
4import Html
3import Html
5import Testable
4import Testable
6import Testable.Element as Element exposing (..)
5import Testable.Element as Element exposing (..)
7import Testable.Element.Background as Background
6import Testable.Element.Background as Background
8import Testable.Element.Font as Font
7import Testable.Element.Font as Font
9import Testable.Runner
8import Testable.Runner
9+import Tests.Palette as Palette exposing (..)
10
10
11
11
12{-| -}
12{-| -}
@@ -104,7 +104,7 @@ view =
104 el [ Font.color white ] <|
104 el [ Font.color white ] <|
105 text "Index"
105 text "Index"
106 , view =
106 , view =
107− \i row -> el [ Background.color lightGrey, width fill ] <| text (toString i)
107+ \i row -> el [ Background.color lightGrey, width fill ] <| text (String.fromInt i)
108 }
108 }
109 , { header =
109 , { header =
110 el [ Font.color white ] <|
110 el [ Font.color white ] <|
tests-rendering/src/Tests/TextWrapping.elmnew file+51
@@ -0,0 +1,51 @@
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/Tests/Transparency.elm → tests-rendering/src/Tests/Transparency.elmrenamed

The content is the same.

tests/Tests/WidthHeight.elm → tests-rendering/src/Tests/WidthHeight.elmrenamed+1−1
@@ -1,4 +1,4 @@
1−module Tests.Basic exposing (view)
1+module Tests.WidthHeight exposing (view)
2
2
3{-| -}
3{-| -}
4
4
tests/suite/ClassNames.elm → tests/ClassNames.elmrenamed+17−3
@@ -1,10 +1,23 @@
1−module Main exposing (..)
1+module ClassNames exposing (suite)
2
2
3+{-| -}
4+
3−import Html
5+import Expect
4−import Internal.Flag as Flag
6+import Html exposing (Html)
5import Internal.Style
7import Internal.Style
8+import Test exposing (Test)
9+
10+
11+suite : Test
12+suite =
13+ Test.describe "Classname Collisions"
14+ [ Test.test "No duplicates" <|
15+ \_ ->
16+ Expect.equal [] onlyDuplicates
17+ ]
6
18
7
19
20+main : Html msg
8main =
21main =
9 Html.div []
22 Html.div []
10 [ Html.text "The following names collide"
23 [ Html.text "The following names collide"
@@ -13,6 +26,7 @@ main =
13 ]
26 ]
14
27
15
28
29+viewPair : ( String, String ) -> Html msg
16viewPair ( name, description ) =
30viewPair ( name, description ) =
17 Html.div []
31 Html.div []
18 [ Html.text name
32 [ Html.text name
tests/Flags.elmnew file+78
@@ -0,0 +1,78 @@
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.elmdeleted−54
@@ -1,54 +0,0 @@
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.elmdeleted−176
@@ -1,176 +0,0 @@
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.elmdeleted−68
@@ -1,68 +0,0 @@
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.elmdeleted−111
@@ -1,111 +0,0 @@
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/Tests/Nearby.elmdeleted−438
@@ -1,438 +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.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− [ layeredVisibility
407− , overlappingChildren
408−
409− -- Note: visibility checks like the above
410− -- need to be at the top so they're in the viewport
411− , master
412− , masterParagraph
413− , nearby above "above" box
414− , nearby below "below" box
415− , nearby inFront "inFront" box
416− , nearby onRight "onRight" box
417− , nearby onLeft "onLeft" box
418− , nearby behindContent "behindContent" transparentBox
419− ]
420−
421−
422−layeredVisibility =
423− el
424− [ centerX
425− , inFront (justBox 40 red [ isVisible ])
426− ]
427− (el [ inFront (justBox 30 green []) ]
428− (justBox 50 blue [])
429− )
430−
431−
432−overlappingChildren =
433− row [ centerX ]
434− [ el [ inFront (justBox 40 green []) ]
435− (justBox 40 darkGrey [])
436− , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]
437− (justBox 40 darkGrey [])
438− ]
tests/Tests/RowAlignment.elmdeleted−212
@@ -1,212 +0,0 @@
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.elmdeleted−69
@@ -1,69 +0,0 @@
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.elmdeleted−27
@@ -1,27 +0,0 @@
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/automation/selenium_test.pydeleted−59
@@ -1,59 +0,0 @@
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()
tests/gather-styles.htmldeleted−110
@@ -1,110 +0,0 @@
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.shdeleted−1
@@ -1 +0,0 @@
1−elm-live Main.elm --output=elm.js --open --pushstate
tests/src/Testable/Element.elmdeleted−1102
@@ -1,1102 +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− , column
14− , el
15− , expectRoundedEquality
16− , fill
17− , fillPortion
18− , height
19− , heightHelper
20− , inFront
21− , isVisible
22− , label
23− , maximum
24− , minimum
25− , none
26− , onLeft
27− , onRight
28− , padding
29− , paddingXY
30− , paragraph
31− , px
32− , row
33− , shrink
34− , spacing
35− , text
36− , textColumn
37− , transparent
38− , width
39− , widthHelper
40− )
41−
42−{-| This module should mirror the top level `Element` api, with one important distinction.
43−
44−The resulting `Element msg` structure can either be rendered to Html or transformed into a test suite that can be run.
45−
46−In order to run the test:
47−
48− - render html
49− - gather information from the browser
50− - generate tests
51−
52−-}
53−
54−import Dict
55−import Element
56−import Expect
57−import Html.Attributes
58−import Testable
59−
60−
61−text : String -> Testable.Element msg
62−text =
63− Testable.Text
64−
65−
66−el : List (Testable.Attr msg) -> Testable.Element msg -> Testable.Element msg
67−el =
68− Testable.El
69−
70−
71−row : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
72−row =
73− Testable.Row
74−
75−
76−column : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
77−column =
78− Testable.Column
79−
80−
81−none : Testable.Element msg
82−none =
83− Testable.Empty
84−
85−
86−paragraph : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
87−paragraph =
88− Testable.Paragraph
89−
90−
91−textColumn : List (Testable.Attr msg) -> List (Testable.Element msg) -> Testable.Element msg
92−textColumn =
93− Testable.TextColumn
94−
95−
96−type Length
97− = Px Int
98− | Fill Int
99− | Shrink
100− | Minimum Int Length
101− | Maximum Int Length
102−
103−
104−minimum =
105− Minimum
106−
107−
108−maximum =
109− Maximum
110−
111−
112−px : Int -> Length
113−px =
114− Px
115−
116−
117−fill : Length
118−fill =
119− Fill 1
120−
121−
122−shrink : Length
123−shrink =
124− Shrink
125−
126−
127−fillPortion : Int -> Length
128−fillPortion =
129− Fill
130−
131−
132−label : String -> Testable.Attr msg
133−label =
134− Testable.Label
135−
136−
137−transparent : Bool -> Testable.Attr msg
138−transparent on =
139− Testable.LabeledTest
140− { label =
141− if on then
142− "transparent"
143−
144− else
145− "opaque"
146− , attr = Element.transparent on
147− , test =
148− \context _ ->
149− let
150− selfTransparency =
151− context.self.style
152− |> Dict.get "opacity"
153− |> Maybe.withDefault "notfound"
154−
155− value =
156− if on then
157− "0"
158−
159− else
160− "1"
161− in
162− Expect.equal value selfTransparency
163− }
164−
165−
166−{-| -}
167−isVisible : Testable.Attr msg
168−isVisible =
169− Testable.LabeledTest
170− { label = "is-visible"
171− , attr = Element.htmlAttribute (Html.Attributes.style "not" "applicable")
172− , test =
173− \context _ ->
174− Expect.equal context.self.isVisible True
175− }
176−
177−
178−{-| -}
179−alpha : Float -> Testable.Attr msg
180−alpha a =
181− Testable.LabeledTest
182− { label = "alpha-" ++ String.fromFloat a
183− , attr = Element.alpha a
184− , test =
185− \context _ ->
186− let
187− selfTransparency =
188− context.self.style
189− |> Dict.get "opacity"
190− |> Maybe.withDefault "notfound"
191− in
192− Expect.equal (String.fromFloat a) selfTransparency
193− }
194−
195−
196−{-| -}
197−padding : Int -> Testable.Attr msg
198−padding pad =
199− Testable.LabeledTest
200− { label = "padding " ++ String.fromInt pad
201− , attr = Element.padding pad
202− , test =
203− \found _ ->
204− Expect.true ("Padding " ++ String.fromInt pad ++ " is present")
205− (List.all ((==) pad)
206− [ floor found.self.bbox.padding.left
207− , floor found.self.bbox.padding.right
208− , floor found.self.bbox.padding.top
209− , floor found.self.bbox.padding.bottom
210− ]
211− )
212− }
213−
214−
215−{-| -}
216−paddingXY : Int -> Int -> Testable.Attr msg
217−paddingXY x y =
218− Testable.LabeledTest
219− { label = "paddingXY " ++ String.fromInt x ++ ", " ++ String.fromInt y
220− , attr = Element.paddingXY x y
221− , test =
222− \found _ ->
223− Expect.true ("PaddingXY (" ++ String.fromInt x ++ ", " ++ String.fromInt y ++ ") is present")
224− (List.all ((==) x)
225− [ floor found.self.bbox.padding.left
226− , floor found.self.bbox.padding.right
227− ]
228− && List.all ((==) y)
229− [ floor found.self.bbox.padding.top
230− , floor found.self.bbox.padding.bottom
231− ]
232− )
233− }
234−
235−
236−widthHelper maybeMin maybeMax len =
237− let
238− addMin l =
239− case maybeMin of
240− Nothing ->
241− l
242−
243− Just minPx ->
244− l |> Element.minimum minPx
245−
246− addMax l =
247− case maybeMax of
248− Nothing ->
249− l
250−
251− Just maxPx ->
252− l |> Element.maximum maxPx
253−
254− minLabel =
255− case maybeMin of
256− Nothing ->
257− ""
258−
259− Just i ->
260− " min:" ++ String.fromInt i
261−
262− maxLabel =
263− case maybeMax of
264− Nothing ->
265− ""
266−
267− Just i ->
268− " max:" ++ String.fromInt i
269−
270− minMaxTest actualWidth =
271− case ( maybeMin, maybeMax ) of
272− ( Nothing, Nothing ) ->
273− True
274−
275− ( Just lower, Nothing ) ->
276− lower <= actualWidth
277−
278− ( Just lower, Just higher ) ->
279− lower <= actualWidth && actualWidth <= higher
280−
281− ( Nothing, Just higher ) ->
282− actualWidth <= higher
283− in
284− case len of
285− Minimum m newLen ->
286− widthHelper (Just m) maybeMax newLen
287−
288− Maximum m newLen ->
289− widthHelper maybeMin (Just m) newLen
290−
291− Px val ->
292− -- Pixel values should ignore min and max?
293− Testable.LabeledTest
294− { label = "width " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel
295− , attr =
296− Element.width
297− (Element.px val
298− |> addMin
299− |> addMax
300− )
301− , test =
302− \found _ ->
303− Expect.true "exact width is exact"
304− ((floor found.self.bbox.width == val)
305− && minMaxTest (floor found.self.bbox.width)
306− )
307− }
308−
309− Fill portion ->
310− Testable.LabeledTest
311− { label = "width fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel
312− , attr =
313− Element.width
314− (Element.fillPortion portion
315− |> addMin
316− |> addMax
317− )
318− , test =
319− \context _ ->
320− if List.member context.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
321− Expect.true "width fill doesn't apply to onright/onleft elements" True
322−
323− else
324− let
325− parentAvailableWidth =
326− context.parent.bbox.width - (context.self.bbox.padding.left + context.self.bbox.padding.right)
327− in
328− case context.location of
329− Testable.IsNearby _ ->
330− Expect.true "Nearby Element has fill width"
331− ((floor context.parent.bbox.width == floor context.self.bbox.width)
332− || minMaxTest (floor context.self.bbox.width)
333− )
334−
335− Testable.InColumn ->
336− Expect.true "Element within column has fill width"
337− ((floor parentAvailableWidth == floor context.self.bbox.width)
338− || minMaxTest (floor context.self.bbox.width)
339− )
340−
341− Testable.InEl ->
342− Expect.true "Element within element has fill width" <|
343− (floor parentAvailableWidth == floor context.self.bbox.width)
344− || minMaxTest (floor context.self.bbox.width)
345−
346− _ ->
347− let
348− spacePerPortion =
349− parentAvailableWidth / toFloat (List.length context.siblings + 1)
350− in
351− Expect.true "element has fill width" <|
352− (floor spacePerPortion == floor context.self.bbox.width)
353− || minMaxTest (floor context.self.bbox.width)
354− }
355−
356− Shrink ->
357− Testable.LabeledTest
358− { label = "width shrink" ++ minLabel ++ maxLabel
359− , attr =
360− Element.width
361− (Element.shrink
362− |> addMin
363− |> addMax
364− )
365− , test =
366− \context _ ->
367− let
368− childWidth child =
369− -- TODO: add margin values to widths
370− child.bbox.width
371−
372− totalChildren =
373− context.children
374− |> List.map childWidth
375− |> List.sum
376−
377− horizontalPadding =
378− context.self.bbox.padding.left + context.self.bbox.padding.right
379−
380− spacingValue =
381− toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)
382− in
383− if totalChildren == 0 then
384− -- TODO: The issue is that we have a hard time measuring `text` elements
385− -- So if a element has a text child, then it's width isn't going to show up in the system.
386− expectRoundedEquality context.self.bbox.width context.self.bbox.width
387−
388− else
389− -- This fails if this element is actually a column
390− -- So we need to capture what this element is in order to do this calculation.
391− expectRoundedEquality (totalChildren + horizontalPadding + spacingValue) context.self.bbox.width
392− }
393−
394−
395−heightHelper maybeMin maybeMax len =
396− let
397− addMin l =
398− case maybeMin of
399− Nothing ->
400− l
401−
402− Just minPx ->
403− l |> Element.minimum minPx
404−
405− addMax l =
406− case maybeMax of
407− Nothing ->
408− l
409−
410− Just maxPx ->
411− l |> Element.maximum maxPx
412−
413− minLabel =
414− case maybeMin of
415− Nothing ->
416− ""
417−
418− Just i ->
419− " min:" ++ String.fromInt i
420−
421− maxLabel =
422− case maybeMax of
423− Nothing ->
424− ""
425−
426− Just i ->
427− " max:" ++ String.fromInt i
428−
429− minMaxTest actualheight =
430− case ( maybeMin, maybeMax ) of
431− ( Nothing, Nothing ) ->
432− True
433−
434− ( Just lower, Nothing ) ->
435− lower <= actualheight
436−
437− ( Just lower, Just higher ) ->
438− lower <= actualheight && actualheight <= higher
439−
440− ( Nothing, Just higher ) ->
441− actualheight <= higher
442− in
443− case len of
444− Minimum m newLen ->
445− heightHelper (Just m) maybeMax newLen
446−
447− Maximum m newLen ->
448− heightHelper maybeMin (Just m) newLen
449−
450− Px val ->
451− -- Pixel values should ignore min and max?
452− Testable.LabeledTest
453− { label = "height " ++ String.fromInt val ++ "px" ++ minLabel ++ maxLabel
454− , attr =
455− Element.height
456− (Element.px val
457− |> addMin
458− |> addMax
459− )
460− , test =
461− \found _ ->
462− Expect.true "exact height is exact"
463− ((floor found.self.bbox.height == val)
464− && minMaxTest (floor found.self.bbox.height)
465− )
466− }
467−
468− Fill portion ->
469− Testable.LabeledTest
470− { label = "height fill-" ++ String.fromInt portion ++ minLabel ++ maxLabel
471− , attr =
472− Element.height
473− (Element.fillPortion portion
474− |> addMin
475− |> addMax
476− )
477− , test =
478− \context _ ->
479− if List.member context.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
480− Expect.true "height fill doesn't apply to above/below elements" True
481−
482− else
483− let
484− parentAvailableHeight =
485− context.parent.bbox.height - (context.self.bbox.padding.top + context.self.bbox.padding.bottom)
486− in
487− case context.location of
488− Testable.IsNearby _ ->
489− Expect.true "Nearby Element has fill height"
490− ((floor context.parent.bbox.height == floor context.self.bbox.height)
491− || minMaxTest (floor context.self.bbox.height)
492− )
493−
494− Testable.InColumn ->
495− Expect.true "Element within column has fill height"
496− ((floor parentAvailableHeight == floor context.self.bbox.height)
497− || minMaxTest (floor context.self.bbox.height)
498− )
499−
500− Testable.InEl ->
501− Expect.true "Element within el has fill height" <|
502− (floor parentAvailableHeight == floor context.self.bbox.height)
503− || minMaxTest (floor context.self.bbox.height)
504−
505− _ ->
506− let
507− spacePerPortion =
508− parentAvailableHeight / toFloat (List.length context.siblings + 1)
509− in
510− Expect.true "el has fill height" <|
511− (floor spacePerPortion == floor context.self.bbox.height)
512− || minMaxTest (floor context.self.bbox.height)
513− }
514−
515− Shrink ->
516− Testable.LabeledTest
517− { label = "height shrink" ++ minLabel ++ maxLabel
518− , attr =
519− Element.height
520− (Element.shrink
521− |> addMin
522− |> addMax
523− )
524− , test =
525− \context _ ->
526− let
527− childWidth child =
528− -- TODO: add margin values to heights
529− child.bbox.height
530−
531− totalChildren =
532− context.children
533− |> List.map childWidth
534− |> List.sum
535−
536− verticalPadding =
537− context.self.bbox.padding.top + context.self.bbox.padding.bottom
538−
539− spacingValue =
540− toFloat context.parentSpacing * (toFloat (List.length context.children) - 1)
541− in
542− if totalChildren == 0 then
543− -- TODO: The issue is that we have a hard time measuring `text` elements
544− -- So if a element has a text child, then it's height isn't going to show up in the system.
545− expectRoundedEquality context.self.bbox.height context.self.bbox.height
546−
547− else
548− -- This fails if this element is actually a column
549− -- So we need to capture what this element is in order to do this calculation.
550− expectRoundedEquality (totalChildren + verticalPadding + spacingValue) context.self.bbox.height
551− }
552−
553−
554−width : Length -> Testable.Attr msg
555−width len =
556− widthHelper Nothing Nothing len
557−
558−
559−height : Length -> Testable.Attr msg
560−height len =
561− heightHelper Nothing Nothing len
562−
563−
564−spacing : Int -> Testable.Attr msg
565−spacing space =
566− Testable.Batch
567− [ Testable.Spacing space
568− , Testable.LabeledTest
569− { label = "spacing: " ++ String.fromInt space
570− , attr = Element.spacing space
571− , test =
572− \found _ ->
573− let
574− findDistance child total =
575− List.concatMap
576− (\otherChild ->
577− let
578− horizontal =
579− round <|
580− child.bbox.left
581− - otherChild.bbox.right
582−
583− vertical =
584− round <|
585− child.bbox.top
586− - otherChild.bbox.bottom
587− in
588− [ if horizontal > 0 then
589− horizontal
590−
591− else
592− space
593− , if vertical > 0 then
594− vertical
595−
596− else
597− space
598− ]
599− )
600− found.children
601− ++ total
602−
603− distances =
604− List.foldl findDistance [] found.children
605−
606− allAreSpaced =
607− List.foldl
608− (\x wrong ->
609− if not (x >= space) then
610− x :: wrong
611−
612− else
613− wrong
614− )
615− []
616− distances
617− in
618− Expect.true
619− ("All children are at least "
620− ++ String.fromInt space
621− ++ " pixels apart."
622− ++ Debug.toString allAreSpaced
623− ++ " are not though"
624− )
625− (allAreSpaced == [])
626− }
627− ]
628−
629−
630−{-| alignLeft needs to account for
631−
632− - parent padding
633− - elements to the left
634− - spacing value
635−
636−in order to calculate the expected result.
637−
638−Also need parent rendering context if this is to work with wrapped rows in the future.
639−
640−All sibling elements
641−
642−-}
643−alignLeft : Testable.Attr msg
644−alignLeft =
645− Testable.LabeledTest
646− { label = "alignLeft"
647− , attr = Element.alignLeft
648− , test =
649− \found _ ->
650− if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
651− Expect.true "alignLeft doesn't apply to elements that are onLeft or onRight" True
652−
653− else if
654− List.member found.location
655− [ Testable.IsNearby Testable.InFront
656− , Testable.IsNearby Testable.Behind
657− , Testable.IsNearby Testable.Above
658− , Testable.IsNearby Testable.Below
659− ]
660− then
661− expectRoundedEquality
662− found.self.bbox.left
663− found.parent.bbox.left
664−
665− else if List.length found.siblings == 0 then
666− expectRoundedEquality
667− found.self.bbox.left
668− (found.parent.bbox.left + found.parent.bbox.padding.left)
669−
670− else
671− case found.location of
672− Testable.InRow ->
673− let
674− siblingsOnLeft =
675− List.filter (\x -> x.bbox.right < found.self.bbox.left) found.siblings
676−
677− spacings =
678− toFloat (List.length siblingsOnLeft * found.parentSpacing)
679−
680− widthsOnLeft =
681− siblingsOnLeft
682− |> List.map (.width << .bbox)
683− |> List.sum
684− in
685− expectRoundedEquality
686− found.self.bbox.left
687− (found.parent.bbox.left + (found.parent.bbox.padding.left + widthsOnLeft + spacings))
688−
689− _ ->
690− expectRoundedEquality
691− found.self.bbox.left
692− (found.parent.bbox.left + found.parent.bbox.padding.left)
693− }
694−
695−
696−{-| -}
697−centerX : Testable.Attr msg
698−centerX =
699− Testable.LabeledTest
700− { label = "centerX"
701− , attr = Element.centerX
702− , test =
703− \found _ ->
704− let
705− selfCenter : Float
706− selfCenter =
707− found.self.bbox.left + (found.self.bbox.width / 2)
708−
709− parentCenter : Float
710− parentCenter =
711− found.parent.bbox.left + (found.parent.bbox.width / 2)
712− in
713− if List.member found.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
714− Expect.true "centerX doesn't apply to elements that are onLeft or onRight" True
715−
716− else if List.length found.siblings == 0 then
717− expectRoundedEquality
718− selfCenter
719− parentCenter
720−
721− else
722− case found.location of
723− Testable.InRow ->
724− let
725− siblingsOnLeft =
726− List.filter (\x -> x.bbox.right < found.self.bbox.left) found.siblings
727−
728− siblingsOnRight =
729− List.filter (\x -> x.bbox.left > found.self.bbox.right) found.siblings
730−
731− widthsOnLeft : Float
732− widthsOnLeft =
733− siblingsOnLeft
734− |> List.map (.width << .bbox)
735− |> List.sum
736− |> (\x -> x + (toFloat (List.length siblingsOnLeft) * toFloat found.parentSpacing))
737−
738− widthsOnRight =
739− siblingsOnRight
740− |> List.map (.width << .bbox)
741− |> List.sum
742− |> (\x -> x + (toFloat (List.length siblingsOnRight) * toFloat found.parentSpacing))
743−
744− expectedCenter : Float
745− expectedCenter =
746− found.parent.bbox.left
747− + widthsOnLeft
748− + ((found.parent.bbox.width - (widthsOnRight + widthsOnLeft))
749− / 2
750− )
751− in
752− expectRoundedEquality
753− selfCenter
754− expectedCenter
755−
756− _ ->
757− expectRoundedEquality selfCenter parentCenter
758− }
759−
760−
761−{-| -}
762−alignRight : Testable.Attr msg
763−alignRight =
764− Testable.LabeledTest
765− { label = "alignRight"
766− , attr = Element.alignRight
767− , test =
768− \found _ ->
769− if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
770− Expect.true "alignRight doesn't apply to elements that are onLeft or onRight" True
771−
772− else if
773− List.member found.location
774− [ Testable.IsNearby Testable.InFront
775− , Testable.IsNearby Testable.Behind
776− , Testable.IsNearby Testable.Above
777− , Testable.IsNearby Testable.Below
778− ]
779− then
780− expectRoundedEquality
781− found.self.bbox.right
782− found.parent.bbox.right
783−
784− else if List.length found.siblings == 0 then
785− expectRoundedEquality
786− found.self.bbox.right
787− (found.parent.bbox.right + found.parent.bbox.padding.right)
788−
789− else
790− case found.location of
791− Testable.InRow ->
792− let
793− siblingsOnRight =
794− List.filter (\x -> x.bbox.left > found.self.bbox.right) found.siblings
795−
796− spacings =
797− toFloat (List.length siblingsOnRight * found.parentSpacing)
798−
799− widthsOnRight =
800− siblingsOnRight
801− |> List.map (.width << .bbox)
802− |> List.sum
803− in
804− expectRoundedEquality
805− found.self.bbox.right
806− (found.parent.bbox.right - (found.parent.bbox.padding.right + widthsOnRight + spacings))
807−
808− _ ->
809− expectRoundedEquality
810− found.self.bbox.right
811− (found.parent.bbox.right + found.parent.bbox.padding.right)
812− }
813−
814−
815−{-| -}
816−alignTop : Testable.Attr msg
817−alignTop =
818− Testable.LabeledTest
819− { label = "alignTop"
820− , attr = Element.alignTop
821− , test =
822− \found _ ->
823− if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
824− Expect.true "alignTop doesn't apply to elements that are above or below" True
825−
826− else if
827− List.member found.location
828− [ Testable.IsNearby Testable.InFront
829− , Testable.IsNearby Testable.Behind
830− , Testable.IsNearby Testable.OnRight
831− , Testable.IsNearby Testable.OnLeft
832− ]
833− then
834− expectRoundedEquality
835− found.self.bbox.top
836− found.parent.bbox.top
837−
838− else if List.length found.siblings == 0 then
839− expectRoundedEquality
840− found.self.bbox.top
841− (found.parent.bbox.top + found.parent.bbox.padding.top)
842−
843− else
844− case found.location of
845− Testable.InColumn ->
846− let
847− siblingsAbove =
848− List.filter (\x -> x.bbox.bottom < found.self.bbox.top) found.siblings
849−
850− spacings =
851− toFloat (List.length siblingsAbove * found.parentSpacing)
852−
853− heightsAbove =
854− siblingsAbove
855− |> List.map (.height << .bbox)
856− |> List.sum
857− in
858− expectRoundedEquality
859− found.self.bbox.top
860− (found.parent.bbox.top + (found.parent.bbox.padding.top + heightsAbove + spacings))
861−
862− _ ->
863− expectRoundedEquality
864− found.self.bbox.top
865− found.parent.bbox.top
866− }
867−
868−
869−{-| -}
870−alignBottom : Testable.Attr msg
871−alignBottom =
872− Testable.LabeledTest
873− { label = "alignBottom"
874− , attr = Element.alignBottom
875− , test =
876− \found _ ->
877− if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
878− Expect.true "alignBottom doesn't apply to elements that are above or below" True
879−
880− else if
881− List.member found.location
882− [ Testable.IsNearby Testable.InFront
883− , Testable.IsNearby Testable.Behind
884− , Testable.IsNearby Testable.OnRight
885− , Testable.IsNearby Testable.OnLeft
886− ]
887− then
888− expectRoundedEquality
889− found.self.bbox.bottom
890− found.parent.bbox.bottom
891−
892− else if List.length found.siblings == 0 then
893− expectRoundedEquality
894− found.self.bbox.bottom
895− (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)
896−
897− else
898− case found.location of
899− Testable.InColumn ->
900− let
901− siblingsBelow =
902− List.filter (\x -> x.bbox.top > found.self.bbox.bottom) found.siblings
903−
904− spacings =
905− toFloat (List.length siblingsBelow * found.parentSpacing)
906−
907− heightsBelow =
908− siblingsBelow
909− |> List.map (.height << .bbox)
910− |> List.sum
911− in
912− expectRoundedEquality
913− found.self.bbox.bottom
914− (found.parent.bbox.bottom - (found.parent.bbox.padding.bottom + heightsBelow + spacings))
915−
916− _ ->
917− expectRoundedEquality
918− found.self.bbox.bottom
919− (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)
920− }
921−
922−
923−expectRoundedEquality x y =
924− Expect.true ("within 1 of each other " ++ String.fromFloat x ++ ":" ++ String.fromFloat y)
925− (abs (x - y) < 1)
926−
927−
928−{-| -}
929−centerY : Testable.Attr msg
930−centerY =
931− Testable.LabeledTest
932− { label = "centerY"
933− , attr = Element.centerY
934− , test =
935− \found _ ->
936− let
937− selfCenter =
938− found.self.bbox.top + (found.self.bbox.height / 2)
939−
940− parentCenter =
941− found.parent.bbox.top + (found.parent.bbox.height / 2)
942− in
943− if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
944− Expect.true "centerY doesn't apply to elements that are above or below" True
945−
946− else if List.length found.siblings == 0 then
947− expectRoundedEquality
948− selfCenter
949− parentCenter
950−
951− else
952− case found.location of
953− Testable.InColumn ->
954− let
955− siblingsOnTop =
956− List.filter (\x -> x.bbox.bottom < found.self.bbox.top) found.siblings
957−
958− siblingsBelow =
959− List.filter (\x -> x.bbox.top > found.self.bbox.bottom) found.siblings
960−
961− heightsAbove : Float
962− heightsAbove =
963− siblingsOnTop
964− |> List.map (.height << .bbox)
965− |> List.sum
966− |> (\x -> x + (toFloat (List.length siblingsOnTop) * toFloat found.parentSpacing))
967−
968− heightsBelow =
969− siblingsBelow
970− |> List.map (.height << .bbox)
971− |> List.sum
972− |> (\x -> x + (toFloat (List.length siblingsBelow) * toFloat found.parentSpacing))
973−
974− expectedCenter : Float
975− expectedCenter =
976− found.parent.bbox.top
977− + heightsAbove
978− + ((found.parent.bbox.height - (heightsBelow + heightsAbove))
979− / 2
980− )
981− in
982− expectRoundedEquality
983− selfCenter
984− expectedCenter
985−
986− _ ->
987− expectRoundedEquality selfCenter parentCenter
988− }
989−
990−
991−{-| -}
992−above : Testable.Element msg -> Testable.Attr msg
993−above element =
994− Testable.Nearby
995− { location = Testable.Above
996− , element = element
997− , label = "above"
998− , test =
999− \found _ ->
1000− expectRoundedEquality found.self.bbox.bottom found.parent.bbox.top
1001− }
1002−
1003−
1004−{-| -}
1005−below : Testable.Element msg -> Testable.Attr msg
1006−below element =
1007− Testable.Nearby
1008− { location = Testable.Below
1009− , element = element
1010− , label = "below"
1011− , test =
1012− \found _ ->
1013− expectRoundedEquality found.self.bbox.top found.parent.bbox.bottom
1014− }
1015−
1016−
1017−{-| -}
1018−onRight : Testable.Element msg -> Testable.Attr msg
1019−onRight element =
1020− Testable.Nearby
1021− { location = Testable.OnRight
1022− , element = element
1023− , label = "onRight"
1024− , test =
1025− \found _ ->
1026− expectRoundedEquality found.self.bbox.left found.parent.bbox.right
1027− }
1028−
1029−
1030−{-| -}
1031−onLeft : Testable.Element msg -> Testable.Attr msg
1032−onLeft element =
1033− Testable.Nearby
1034− { location = Testable.OnLeft
1035− , element = element
1036− , label = "onLeft"
1037− , test =
1038− \found _ ->
1039− expectRoundedEquality found.self.bbox.right found.parent.bbox.left
1040− }
1041−
1042−
1043−compare x vs y =
1044− vs (round x) (round y) || vs (floor x) (floor y)
1045−
1046−
1047−{-| -}
1048−inFront : Testable.Element msg -> Testable.Attr msg
1049−inFront element =
1050− Testable.Nearby
1051− { location = Testable.InFront
1052− , element = element
1053− , label = "inFront"
1054− , test =
1055− withinHelper
1056− }
1057−
1058−
1059−withinHelper found _ =
1060− let
1061− horizontalCheck =
1062− if found.self.bbox.width > found.parent.bbox.width then
1063− [ compare found.self.bbox.right (<=) found.parent.bbox.right
1064− || compare found.self.bbox.left (>=) found.parent.bbox.left
1065− ]
1066−
1067− else
1068− [ compare found.self.bbox.right (<=) found.parent.bbox.right
1069− , compare found.self.bbox.left (>=) found.parent.bbox.left
1070− ]
1071−
1072− verticalCheck =
1073− if found.self.bbox.width > found.parent.bbox.width then
1074− [ compare found.self.bbox.top (>=) found.parent.bbox.top
1075− || compare found.self.bbox.bottom (<=) found.parent.bbox.bottom
1076− ]
1077−
1078− else
1079− [ compare found.self.bbox.top (>=) found.parent.bbox.top
1080− , compare found.self.bbox.bottom (<=) found.parent.bbox.bottom
1081− ]
1082− in
1083− Expect.true "within the confines of the parent"
1084− (List.all ((==) True)
1085− (List.concat
1086− [ horizontalCheck
1087− , verticalCheck
1088− ]
1089− )
1090− )
1091−
1092−
1093−{-| -}
1094−behindContent : Testable.Element msg -> Testable.Attr msg
1095−behindContent element =
1096− Testable.Nearby
1097− { location = Testable.Behind
1098− , element = element
1099− , label = "behindContent"
1100− , test =
1101− withinHelper
1102− }
tests/src/Testable/FuzzMain.elmdeleted−629
@@ -1,629 +0,0 @@
1−port module Main exposing (..)
2−
3−{-| -}
4−
5−import AnimationFrame
6−import Color
7−import Dict exposing (Dict)
8−import Element
9−import Element.Background as Background
10−import Element.Border as Border
11−import Element.Font as Font
12−import Expect
13−import Fuzz
14−import Html exposing (Html)
15−import List.Extra
16−import Random
17−import Test
18−import Test.Runner
19−import Test.Runner.Failure
20−import Testable
21−import Tests exposing (Testable)
22−import Time exposing (Time)
23−
24−
25−init : ( Model Msg, Cmd Msg )
26−init =
27− ( { current = Nothing
28− , upcoming =
29− Tests.tests
30−
31− -- generateTests (Random.initialSeed 227852860) 1
32− , finished = []
33− , stage = BeginRendering
34− }
35− , Cmd.none
36− )
37−
38−
39−main : Program Never (Model Msg) Msg
40−main =
41− Html.program
42− { init = init
43− , view = view
44− , update = update
45− , subscriptions = subscriptions
46− }
47−
48−
49−type alias Model msg =
50− { current : Maybe (Testable msg)
51− , upcoming : List (Testable msg)
52− , finished : List (Testable msg)
53− , stage : Stage
54− }
55−
56−
57−type Msg
58− = NoOp
59− | Tick Time
60− | RefreshBoundingBox
61− (List
62− { id : String
63− , bbox : Testable.BoundingBox
64− , style : Testable.Style
65− }
66− )
67−
68−
69−type Stage
70− = Rendered
71− | BeginRendering
72− | GatherData
73− | Finished
74−
75−
76−runTest : Dict String Testable.Found -> Testable msg -> Testable msg
77−runTest boxes test =
78− let
79− tests =
80− Testable.toTest test.label boxes test.element
81−
82− seed =
83− Random.initialSeed 227852860
84−
85− results =
86− Testable.runTests seed (Debug.log "created Tests" tests)
87− |> Debug.log "run tests"
88− in
89− { test | results = Just results }
90−
91−
92−generateTests : Random.Seed -> Int -> List (Testable msg)
93−generateTests seed num =
94− if num <= 0 then
95− []
96− else
97− let
98− ( testable, newSeed ) =
99− generateTest seed
100− in
101− testable :: generateTests newSeed (num - 1)
102−
103−
104−generateTest : Random.Seed -> ( Testable msg, Random.Seed )
105−generateTest seed =
106− testableLayout
107− |> Test.Runner.fuzz
108− |> flip Random.step seed
109− |> (\( ( val, shrinker ), newSeed ) -> ( val, seed ))
110−
111−
112−update : Msg -> Model Msg -> ( Model Msg, Cmd Msg )
113−update msg model =
114− case msg of
115− NoOp ->
116− ( model, Cmd.none )
117−
118− RefreshBoundingBox boxes ->
119− case model.current of
120− Nothing ->
121− ( { model | stage = Finished }
122− , Cmd.none
123− )
124−
125− Just current ->
126− let
127− toTuple box =
128− ( box.id, { style = box.style, bbox = box.bbox } )
129−
130− foundData =
131− boxes
132− |> List.map toTuple
133− |> Dict.fromList
134−
135− currentResults =
136− runTest foundData current
137− in
138− case model.upcoming of
139− [] ->
140− ( { model
141− | stage = Finished
142− , current = Nothing
143− , finished = currentResults :: model.finished
144− }
145− , Cmd.none
146− )
147−
148− newCurrent :: remaining ->
149− ( { model
150− | finished = currentResults :: model.finished
151− , stage = BeginRendering
152− }
153− , Cmd.none
154− )
155−
156− Tick time ->
157− case model.stage of
158− BeginRendering ->
159− case model.upcoming of
160− [] ->
161− ( { model | stage = Rendered }
162− , Cmd.none
163− )
164−
165− current :: remaining ->
166− ( { model
167− | stage = Rendered
168− , upcoming = remaining
169− , current = Just current
170− }
171− , Cmd.none
172− )
173−
174− Rendered ->
175− case model.current of
176− Nothing ->
177− ( { model | stage = Finished }
178− , Cmd.none
179− )
180−
181− Just test ->
182− ( { model | stage = GatherData }
183− , analyze (Testable.getIds test.element)
184− )
185−
186− _ ->
187− ( { model | stage = Rendered }
188− , Cmd.none
189− )
190−
191−
192−subscriptions : { a | stage : Stage } -> Sub Msg
193−subscriptions model =
194− Sub.batch
195− [ styles RefreshBoundingBox
196− , case model.stage of
197− BeginRendering ->
198− AnimationFrame.times Tick
199−
200− Rendered ->
201− AnimationFrame.times Tick
202−
203− _ ->
204− Sub.none
205− ]
206−
207−
208−port analyze : List String -> Cmd msg
209−
210−
211−port styles : (List { id : String, bbox : Testable.BoundingBox, style : Testable.Style } -> msg) -> Sub msg
212−
213−
214−view : Model Msg -> Html Msg
215−view model =
216− case model.current of
217− Nothing ->
218− if model.stage == Finished then
219− Element.layout [] <|
220− Element.column
221− [ Element.spacing 20
222− , Element.padding 20
223− , Element.width (Element.px 800)
224−
225− -- , Background.color Color.grey
226− ]
227− (List.map viewResult model.finished)
228− else
229− Html.text "running?"
230−
231− Just current ->
232− Testable.render current.element
233−
234−
235−viewResult : Testable Msg -> Element.Element Msg
236−viewResult testable =
237− let
238− viewSingle result =
239− case result of
240− ( label, Nothing ) ->
241− Element.el
242− [ Background.color Color.green
243− , Font.color Color.white
244− , Element.paddingXY 20 10
245− , Element.alignLeft
246− , Border.rounded 3
247− ]
248− <|
249− Element.text (label ++ " - " ++ "Success!")
250−
251− ( label, Just { given, description, reason } ) ->
252− Element.row
253− [ Background.color Color.red
254− , Font.color Color.white
255− , Element.paddingXY 20 10
256− , Element.alignLeft
257− , Element.spacing 25
258− , Border.rounded 3
259− ]
260− [ Element.el [ Element.width Element.fill ] <| Element.text label
261−
262− -- , Element.el [ Element.width Element.fill ] <| Element.text description
263− , Element.el [ Element.width Element.fill ] <| Element.text (toString reason)
264− ]
265− in
266− Element.column
267− [ Border.width 1
268− , Border.color Color.lightGrey
269− , Element.padding 20
270− , Element.height Element.shrink
271− , Element.alignLeft
272− ]
273− [ Element.el [ Font.bold ] (Element.text testable.label)
274− , Element.column [ Element.alignLeft, Element.spacing 20 ]
275− (case testable.results of
276− Nothing ->
277− [ Element.text "no results" ]
278−
279− Just results ->
280− List.map viewSingle results
281− )
282− ]
283−
284−
285−{--}
286−type alias Testable msg =
287− { element : Testable.Element msg
288− , label : String
289− , results :
290− Maybe
291− (List
292− ( String
293− , Maybe
294− { given : Maybe String
295− , description : String
296− , reason : Test.Runner.Failure.Reason
297− }
298− )
299− )
300− }
301−
302−
303−attr tag label attr test =
304− Testable.Batch
305− [ Testable.Attr attr
306− , Testable.AttrTest
307− (\found ->
308− Test.test (tag ++ ": " ++ label) <|
309− \_ -> test found
310− )
311− ]
312−
313−
314−widthFill tag =
315− attr tag
316− "width fill"
317− (Element.width Element.fill)
318− (\context ->
319− let
320− spacePerPortion =
321− context.parent.bbox.width / toFloat (List.length context.siblings + 1)
322− in
323− Expect.equal spacePerPortion context.self.bbox.width
324− )
325−
326−
327−heightFill tag =
328− attr tag
329− "height fill"
330− (Element.height Element.fill)
331− (\context ->
332− let
333− spacePerPortion =
334− context.parent.bbox.height / toFloat (List.length context.siblings + 1)
335− in
336− Expect.equal spacePerPortion context.self.bbox.height
337− )
338−
339−
340−heightPx px tag =
341− attr tag
342− ("height at " ++ toString px ++ "px")
343− (Element.height (Element.px (round px)))
344− (\found ->
345− Expect.equal found.self.bbox.height px
346− )
347−
348−
349−widthPx px tag =
350− attr tag
351− ("width at " ++ toString px ++ "px")
352− (Element.width (Element.px (round px)))
353− (\found ->
354− Expect.equal found.self.bbox.width px
355− )
356−
357−
358−type alias PossibleAttributes msg =
359− { width : String -> Testable.Attr msg
360− , height : String -> Testable.Attr msg
361− }
362−
363−
364−possibleToList str { width, height } =
365− width str :: height str :: []
366−
367−
368−availableAttributes : { width : Float, height : Float } -> Fuzz.Fuzzer (PossibleAttributes msg)
369−availableAttributes bounds =
370− Fuzz.map2 PossibleAttributes
371− (Fuzz.oneOf
372− (List.map Fuzz.constant (widths bounds.width))
373− )
374− (Fuzz.oneOf
375− (List.map Fuzz.constant (heights bounds.height))
376− )
377−
378−
379−widths : Float -> List (String -> Testable.Attr msg)
380−widths width =
381− [ \tag ->
382− attr tag
383− (" with width at " ++ toString width ++ "px")
384− (Element.width (Element.px (round width)))
385− (\found ->
386− Expect.equal found.self.bbox.width width
387− )
388− , \tag ->
389− attr tag
390− " with width fill"
391− (Element.width Element.fill)
392− (\context ->
393− let
394− -- {-|
395− -- Calculation is
396− -- totalparentwidth - (paddingLeft ++ paddingRight)
397− -- minus widths of all the other children
398− -- -}
399− otherWidth =
400− -- Debug.log "width" <|
401− List.sum <|
402− -- Debug.log "widths" <|
403− List.map (\child -> child.bbox.width) context.siblings
404−
405− spacePerPortion =
406− context.parent.bbox.width - otherWidth
407− in
408− Expect.equal spacePerPortion context.self.bbox.width
409− )
410− ]
411−
412−
413−heights : Float -> List (String -> Testable.Attr msg)
414−heights height =
415− [ \tag ->
416− attr tag
417− (" with height at " ++ toString height ++ "px")
418− (Element.height (Element.px (round height)))
419− (\found ->
420− Expect.equal found.self.bbox.height height
421− )
422− , \tag ->
423− attr tag
424− " with height fill"
425− (Element.height Element.fill)
426− (\context ->
427− let
428− -- {-|
429− -- Calculation is
430− -- totalparentwidth - (paddingLeft ++ paddingRight)
431− -- minus widths of all the other children
432− -- -}
433− otherHeight =
434− List.sum <|
435− List.map (\child -> child.bbox.height) context.siblings
436−
437− spacePerPortion =
438− context.parent.bbox.height - otherHeight
439− in
440− Expect.equal spacePerPortion context.self.bbox.height
441− )
442− ]
443−
444−
445−content : Testable.Element msg
446−content =
447− Testable.El
448− [ Testable.Attr <| Element.width (Element.px 20)
449− , Testable.Attr <| Element.height (Element.px 20)
450− ]
451− Testable.Empty
452−
453−
454−tests : List (Testable msg)
455−tests =
456− [ { label = "Width/Height 200"
457− , results = Nothing
458− , element =
459− Testable.El
460− [ widthPx 200 "single element"
461− , heightPx 200 "single element"
462− ]
463− Testable.Empty
464− }
465− , { label = "Width Fill/Height Fill - 1"
466− , results = Nothing
467− , element =
468− Testable.El
469− [ widthFill "single element"
470− , heightFill "single element"
471− ]
472− <|
473− content
474− }
475− , { label = "Width Fill/Height Fill - 2"
476− , results = Nothing
477− , element =
478− Testable.El
479− [ widthFill "top element"
480− , heightFill "top element"
481− ]
482− <|
483− Testable.El
484− [ widthFill "embedded element"
485− , heightFill "embedded element"
486− ]
487− <|
488− content
489− }
490− , { label = "Row Width Fill/Height Fill"
491− , results = Nothing
492− , element =
493− Testable.Row
494− [ widthFill "on row"
495− , heightFill "on row"
496− ]
497− [ Testable.El
498− [ widthFill "row - 1"
499− , heightFill "row - 1"
500− ]
501− content
502− , Testable.El
503− [ widthFill "row - 2"
504− , heightFill "row - 2"
505− ]
506− content
507− , Testable.El
508− [ widthFill "row - 3"
509− , heightFill "row - 3"
510− ]
511− content
512− ]
513− }
514− ]
515−
516−
517−
518−{- Generating A Complete Test Suite
519−
520−-}
521−
522−
523−type TestableElement
524− = El
525− | Row
526− | Column
527−
528−
529−allIndividualTestables : List (Fuzz.Fuzzer TestableElement)
530−allIndividualTestables =
531− [ Fuzz.constant El
532− , Fuzz.constant Row
533− , Fuzz.constant Column
534− ]
535−
536−
537−testableLayout : Fuzz.Fuzzer (Testable msg)
538−testableLayout =
539− let
540− asTestable layout =
541− { element = layout
542− , label = "A Sweet Test"
543− , results = Nothing
544− }
545− in
546− Fuzz.map asTestable layout
547−
548−
549−layout : Fuzz.Fuzzer (Testable.Element msg)
550−layout =
551− Fuzz.map4 createContainer
552− (Fuzz.tuple3
553− ( availableAttributes { width = 20, height = 20 }
554− , availableAttributes { width = 20, height = 20 }
555− , availableAttributes { width = 20, height = 20 }
556− )
557− )
558− (availableAttributes { width = 200, height = 200 })
559− (Fuzz.oneOf allIndividualTestables)
560− (Fuzz.oneOf allIndividualTestables)
561−
562−
563−createElement : String -> TestableElement -> PossibleAttributes msg -> Testable.Element msg
564−createElement tag layout possibleAttrs =
565− let
566− attrs =
567− possibleToList tag possibleAttrs
568− in
569− case layout of
570− El ->
571− Testable.El attrs content
572−
573− Row ->
574− Testable.Row attrs
575− [ content
576− , content
577− , content
578− ]
579−
580− Column ->
581− Testable.Column attrs
582− [ content
583− , content
584− , content
585− ]
586−
587−
588−createContainer : ( PossibleAttributes msg, PossibleAttributes msg, PossibleAttributes msg ) -> PossibleAttributes msg -> TestableElement -> TestableElement -> Testable.Element msg
589−createContainer ( a1, a2, a3 ) possibleAttrs parent child =
590− let
591− attrs =
592− possibleToList "0" possibleAttrs
593− in
594− case parent of
595− El ->
596− Testable.El attrs (createElement "0-0" child a1)
597−
598− Row ->
599− Testable.Row attrs
600− [ createElement "0-0" child a1
601− , createElement "0-1" child a2
602− , createElement "0-2" child a3
603− ]
604−
605− Column ->
606− Testable.Column attrs
607− [ createElement "0-0" child a1
608− , createElement "0-1" child a2
609− , createElement "0-2" child a3
610− ]
611−
612−
613−{-| Given a list of a list of possibilities,
614−
615−choose once from each list.
616−
617− [ [width (px 100), width fill]
618− , [height (px 100), height fill]
619− ]
620− ->
621−
622− [ [width (px 100), height (px 100)]
623− , [width (px 100), height fill]
624− ]
625−
626−-}
627−allPossibilities : List (List a) -> List (List a)
628−allPossibilities =
629− List.Extra.cartesianProduct
tests/src/Testable/Runner.elmdeleted−462

This diff is too big to show here.

tests/suite/Flags.elmdeleted−92

This diff is too big to show here.

tests/suite/elm-package.jsondeleted−16

This diff is too big to show here.

yarn.locknew file+1271

This diff is too big to show here.