git.iko.soy/typeable/elm-ui
on master help sign in
Merge branch 'master' of https://github.com/mdgriffith/elm-ui
aa4a4ccElm UI Automation
tests-rendering/cases/open/ClippedElInFixedWidthColumn.elmnew file+31
compare with master
unifiedsplit
@@ -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+main =
29+ layout [ width fill, height fill ] <|
30+ column [ width <| px 300 ]
31+ [ el [ clip ] <| text "The quick brown fox" ]
tests-rendering/cases/open/ElInFixedHeightColumn.elmnew file+36
@@ -0,0 +1,36 @@
1+module ElInFixedHeightColumn exposing (..)
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+][ el [ Border.width 3, Border.color <| rgb255 0 0 0 ] <| text "an element" ]
15+
16+Adding htmlAttribute <| Attr.style "flex-basis" "auto" to the el is a workaround
17+that fixes the problem in this instance.
18+
19+Expected behavior
20+
21+Element should be rendered the same as in Firefox & Chrome, with the border going
22+around the text.
23+
24+-}
25+
26+import Testable.Element exposing (..)
27+import Testable.Element.Border as Border
28+
29+
30+main =
31+ layout [] <|
32+ column
33+ [ width fill
34+ , height <| px 200
35+ ]
36+ [ el [ Border.width 3, Border.color <| rgb 0 0 0 ] <| text "an element" ]
tests-rendering/cases/open/InFrontContainedParentsIssue201.elmnew file+46
@@ -0,0 +1,46 @@
1+module InFrontSize exposing (main)
2+
3+{-|
4+
5+
6+# inFront elements with width fill are contained within the parent's border
7+
8+Though they're expected to be the actual size of the parent.
9+
10+<https://ellie-app.com/8J4KqjL3zGHa1>
11+
12+<https://github.com/mdgriffith/elm-ui/issues/201>
13+
14+-}
15+
16+import Browser
17+import Html exposing (Html)
18+import Testable.Element exposing (..)
19+import Testable.Element.Background as Background
20+import Testable.Element.Border as Border
21+
22+
23+main =
24+ layout []
25+ (el
26+ [ width (px 100)
27+ , height (px 100)
28+ , centerX
29+ , centerY
30+ , Background.color (rgb 0.1 0.1 0.1)
31+ , Border.width 20
32+ , Border.color (rgb 0.5 1 1)
33+
34+ -- the following element should cover the parent's border
35+ , inFront
36+ (el
37+ [ width fill
38+ , height fill
39+ , Background.color (rgb 0.1 0.5 0.9)
40+ , moveUp 40
41+ ]
42+ none
43+ )
44+ ]
45+ none
46+ )
tests-rendering/cases/open/StackedScrollingColumnsHeight.elmnew file+44
@@ -0,0 +1,44 @@
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 Html exposing (Html)
20+import Testable.Element exposing (..)
21+import Testable.Element.Background as Background
22+
23+
24+main : Html msg
25+main =
26+ layout [ height fill ] <|
27+ column [ height fill ]
28+ [ column
29+ [ height fill
30+ , scrollbarY
31+ , Background.color (rgb 0 255 0)
32+ ]
33+ <|
34+ List.map (\_ -> text "Hello") <|
35+ List.range 1 20
36+ , column
37+ [ height fill
38+ , scrollbarY
39+ , Background.color (rgb 255 0 0)
40+ ]
41+ <|
42+ List.map (\_ -> text "Hello") <|
43+ List.range 1 3
44+ ]