@@ -8,6 +8,7 @@ import Testable
88import Testable.Element exposing (..)
99import Testable.Element.Background as Background
1010import Testable.Element.Font as Font
11+import Testable.Generator
1112import Testable.Runner
1213import Tests.Palette as Palette exposing (..)
1314
@@ -57,382 +58,379 @@ p attrs =
5758
5859
5960{-| -}
60−main : Html.Html msg
61−main =
62− Testable.Runner.show view
63−
64−
65−{-| -}
66−view : Testable.Element msg
61+view : List ( String, Testable.Element msg )
6762view =
68− let
69− transparentBox attrs =
70− el
71− ([ Font.color white
72− , width (px 50)
73− , height (px 50)
74− , Background.color white
75− ]
76− ++ attrs
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.elementWith "Nearbys"
70+ (Testable.Generator.nearbys
71+ |> List.map
72+ (\( nearbyLabel, nearby ) ->
73+ Tuple.pair nearbyLabel
74+ [ nearby (box [])
75+ , width (px 200)
76+ , height (px 200)
77+ , Background.color red
78+ ]
79+ )
80+ )
81+ , Testable.Generator.elementWith "Nearbys with alignment"
82+ (Testable.Generator.mapEveryCombo
83+ (\( nearbyLabel, nearby ) ( alignmentLabel, align ) ->
84+ Tuple.pair (nearbyLabel ++ " ++ " ++ alignmentLabel)
85+ [ nearby (box [ align ])
86+ , width (px 200)
87+ , height (px 200)
88+ , Background.color red
89+ ]
7790 )
78− (text "hi")
91+ Testable.Generator.nearbys
92+ Testable.Generator.alignments
93+ )
7994
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
95+ -- , nearby above "above" box
96+ -- , nearby below "below" box
97+ -- , nearby inFront "inFront" box
98+ -- , nearby onRight "onRight" box
99+ -- , nearby onLeft "onLeft" box
100+ -- , nearby behindContent "behindContent" transparentBox
101+ ]
102+
103+
104+layeredVisibility =
105+ el
106+ [ centerX
107+ , inFront (justBox 40 red [ isVisible ])
108+ ]
109+ (el [ inFront (justBox 30 green []) ]
110+ (justBox 50 blue [])
111+ )
112+
113+
114+overlappingChildren =
115+ row [ centerX ]
116+ [ el [ inFront (justBox 40 green []) ]
117+ (justBox 40 darkGrey [])
118+ , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]
119+ (justBox 40 darkGrey [])
120+ ]
121+
122+
123+little name attrs =
124+ el
125+ ([ label name
126+ , width (px 5)
127+ , height (px 5)
128+ , Background.color darkCharcoal
129+ ]
130+ ++ attrs
131+ )
132+ none
133+
134+
135+transparentBox attrs =
136+ el
137+ ([ Font.color white
138+ , width (px 50)
139+ , height (px 50)
140+ , Background.color white
141+ ]
142+ ++ attrs
143+ )
144+ (text "hi")
145+
146+
147+master =
148+ el [ padding 20 ] <|
149+ box
150+ [ above (little "above-left" [ alignLeft ])
151+ , above (little "above-center" [ centerX ])
152+ , above (little "above-right" [ alignRight ])
153+ , below (little "below-left" [ alignLeft ])
154+ , below (little "below-center" [ centerX ])
155+ , below (little "below-right" [ alignRight ])
156+ , onRight (little "onRight-left" [ alignTop ])
157+ , onRight (little "onRight-center" [ centerY ])
158+ , onRight (little "onRight-right" [ alignBottom ])
159+ , onLeft (little "onLeft-left" [ alignTop ])
160+ , onLeft (little "onLeft-center" [ centerY ])
161+ , onLeft (little "onLeft-right" [ alignBottom ])
162+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])
163+ , inFront (little "infront-center-top" [ alignTop, centerX ])
164+ , inFront (little "infront-right-top" [ alignTop, alignRight ])
165+ , inFront (little "infront-left-center" [ centerY, alignLeft ])
166+ , inFront (little "infront-center-center" [ centerY, centerX ])
167+ , inFront (little "infront-right-center" [ centerY, alignRight ])
168+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
169+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
170+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
171+ ]
114172
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− )
173+
174+masterParagraph =
175+ el [ padding 20 ] <|
176+ p
177+ [ above (little "above-left" [ alignLeft ])
178+ , above (little "above-center" [ centerX ])
179+ , above (little "above-right" [ alignRight ])
180+ , below (little "below-left" [ alignLeft ])
181+ , below (little "below-center" [ centerX ])
182+ , below (little "below-right" [ alignRight ])
183+ , onRight (little "onRight-left" [ alignTop ])
184+ , onRight (little "onRight-center" [ centerY ])
185+ , onRight (little "onRight-right" [ alignBottom ])
186+ , onLeft (little "onLeft-left" [ alignTop ])
187+ , onLeft (little "onLeft-center" [ centerY ])
188+ , onLeft (little "onLeft-right" [ alignBottom ])
189+ , inFront (little "infront-left-top" [ alignTop, alignLeft ])
190+ , inFront (little "infront-center-top" [ alignTop, centerX ])
191+ , inFront (little "infront-right-top" [ alignTop, alignRight ])
192+ , inFront (little "infront-left-center" [ centerY, alignLeft ])
193+ , inFront (little "infront-center-center" [ centerY, centerX ])
194+ , inFront (little "infront-right-center" [ centerY, alignRight ])
195+ , inFront (little "infront-left-bottom" [ alignBottom, alignLeft ])
196+ , inFront (little "infront-center-bottom" [ alignBottom, centerX ])
197+ , inFront (little "infront-right-bottom" [ alignBottom, alignRight ])
198+ ]
199+
200+
201+nearbyOld location name render =
202+ column [ spacing 32, label "column" ]
203+ [ el [ padding 20, Background.color green, Font.color white ] (text name)
204+ , row [ height (px 100), width fill, spacing 50 ]
205+ [ render
206+ [ location
207+ (el
208+ [ label name
209+ , width (px 20)
210+ , height (px 20)
211+ , Background.color darkCharcoal
129212 ]
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− )
213+ none
214+ )
215+ ]
216+ , render
217+ [ location
218+ (el
219+ [ label name
220+ , width (px 20)
221+ , height (px 20)
222+ , alignLeft
223+ , Background.color darkCharcoal
141224 ]
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− )
225+ none
226+ )
227+ ]
228+ , render
229+ [ location
230+ (el
231+ [ label name
232+ , width (px 20)
233+ , height (px 20)
234+ , centerX
235+ , Background.color darkCharcoal
153236 ]
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− )
237+ none
238+ )
239+ ]
240+ , render
241+ [ location
242+ (el
243+ [ label name
244+ , width (px 20)
245+ , height (px 20)
246+ , alignRight
247+ , Background.color darkCharcoal
165248 ]
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− )
249+ none
250+ )
251+ ]
252+ , render
253+ [ location
254+ (el
255+ [ label name
256+ , width (px 20)
257+ , height (px 20)
258+ , alignTop
259+ , Background.color darkCharcoal
177260 ]
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− )
261+ none
262+ )
263+ ]
264+ , render
265+ [ location
266+ (el
267+ [ label name
268+ , width (px 20)
269+ , height (px 20)
270+ , centerY
271+ , Background.color darkCharcoal
189272 ]
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− )
273+ none
274+ )
275+ ]
276+ , render
277+ [ location
278+ (el
279+ [ label name
280+ , width (px 20)
281+ , height (px 20)
282+ , alignBottom
283+ , Background.color darkCharcoal
201284 ]
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− )
285+ none
286+ )
287+ ]
288+ ]
289+ , text "widths/heights"
290+ , row [ height (px 100), width fill, spacing 50, label "Row" ]
291+ [ render
292+ [ location
293+ (el
294+ [ label name
295+ , width fill
296+ , height fill
297+ , Background.color darkCharcoal
215298 ]
216− , render
217− [ location
218− (el
219− [ label name
220− , width (px 20)
221− , height fill
222− , Background.color darkCharcoal
223− ]
224− none
225− )
299+ none
300+ )
301+ ]
302+ , render
303+ [ location
304+ (el
305+ [ label name
306+ , width (px 20)
307+ , height fill
308+ , Background.color darkCharcoal
226309 ]
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− )
310+ none
311+ )
312+ ]
313+ , render
314+ [ label "render"
315+ , location
316+ (el
317+ [ label name
318+ , width fill
319+ , height (px 20)
320+ , Background.color darkCharcoal
238321 ]
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− )
322+ none
323+ )
324+ ]
325+ , render
326+ [ location
327+ (el
328+ [ label name
329+ , width (px 20)
330+ , height shrink
331+ , Background.color darkCharcoal
332+ , Font.color white
250333 ]
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− )
334+ (text "h-shrink")
335+ )
336+ ]
337+ , render
338+ [ location
339+ (el
340+ [ label name
341+ , width shrink
342+ , height (px 20)
343+ , Background.color darkCharcoal
344+ , Font.color white
262345 ]
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− )
346+ (text "w-shrink")
347+ )
348+ ]
349+ ]
350+ , text "on paragraph"
351+ , row [ width fill, spacing 50, label "Row" ]
352+ [ p
353+ [ location
354+ (el
355+ [ label name
356+ , width (px 20)
357+ , height (px 20)
358+ , Background.color darkCharcoal
276359 ]
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− )
360+ none
361+ )
362+ ]
363+ , p
364+ [ location
365+ (el
366+ [ label name
367+ , width (px 20)
368+ , height (px 20)
369+ , alignLeft
370+ , Background.color darkCharcoal
288371 ]
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− )
372+ none
373+ )
374+ ]
375+ , p
376+ [ location
377+ (el
378+ [ label name
379+ , width (px 20)
380+ , height (px 20)
381+ , centerX
382+ , Background.color darkCharcoal
300383 ]
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− )
384+ none
385+ )
386+ ]
387+ , p
388+ [ location
389+ (el
390+ [ label name
391+ , width (px 20)
392+ , height (px 20)
393+ , alignRight
394+ , Background.color darkCharcoal
312395 ]
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− )
396+ none
397+ )
398+ ]
399+ , p
400+ [ location
401+ (el
402+ [ label name
403+ , width (px 20)
404+ , height (px 20)
405+ , alignTop
406+ , Background.color darkCharcoal
324407 ]
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− )
408+ none
409+ )
410+ ]
411+ , p
412+ [ location
413+ (el
414+ [ label name
415+ , width (px 20)
416+ , height (px 20)
417+ , centerY
418+ , Background.color darkCharcoal
336419 ]
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− )
420+ none
421+ )
422+ ]
423+ , p
424+ [ location
425+ (el
426+ [ label name
427+ , width (px 20)
428+ , height (px 20)
429+ , alignBottom
430+ , Background.color darkCharcoal
348431 ]
349− ]
432+ none
433+ )
350434 ]
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 [])
435+ ]
438436 ]