Merge branch 'master' of https://github.com/mdgriffith/elm-ui

tests-rendering/cases/open/ClippedElInFixedWidthColumn.elm

@@ -0,0 +1,31 @@
+module ClippedElInFixedWidthColumn exposing (..)
+
+{-| el [ clip ] inside a fixed-width column rendered with 0px height in Chrome & Firefox
+
+<https://github.com/mdgriffith/elm-ui/issues/191>
+
+If an el [ clip ] is placed inside a fixed-width column which is inside a layout
+with [ width fill, height fill ], then the element is rendered with 0px height in Chrome:
+
+layout [ width fill, height fill ] <|
+column [ width <| px 300 ][ el [ clip ] <| text "The quick brown fox" ]
+
+In Firefox, the element is initially rendered correctly, but is resized to 0px height
+on viewport resize. In Safari, the element is displayed correctly.
+
+The above seems to be the minimal reproduction:
+
+Removing attributes from layout or from column or from el makes the issue disappear.
+Replacing column [ width <| px 300 ] with column [ width fill ] makes the issue disappear.
+Replacing column with el also makes the issue disappear.
+Adding htmlAttribute <| Attr.style "flex-basis" "auto" to clipped el is a workaround.
+
+-}
+
+import Testable.Element exposing (..)
+
+
+main =
+    layout [ width fill, height fill ] <|
+        column [ width <| px 300 ]
+            [ el [ clip ] <| text "The quick brown fox" ]

tests-rendering/cases/open/ElInFixedHeightColumn.elm

@@ -0,0 +1,36 @@
+module ElInFixedHeightColumn exposing (..)
+
+{-| el inside a fixed height column is rendered with zero height in Safari
+
+<https://github.com/mdgriffith/elm-ui/issues/190>
+
+If I put an el into a column of fixed height, the el is rendered with zero height
+in Safari:
+
+layout [] <|
+column
+[ width fill
+, height <| px 200
+][ el [ Border.width 3, Border.color <| rgb255 0 0 0 ] <| text "an element" ]
+
+Adding htmlAttribute <| Attr.style "flex-basis" "auto" to the el is a workaround
+that fixes the problem in this instance.
+
+Expected behavior
+
+Element should be rendered the same as in Firefox & Chrome, with the border going
+around the text.
+
+-}
+
+import Testable.Element exposing (..)
+import Testable.Element.Border as Border
+
+
+main =
+    layout [] <|
+        column
+            [ width fill
+            , height <| px 200
+            ]
+            [ el [ Border.width 3, Border.color <| rgb 0 0 0 ] <| text "an element" ]

tests-rendering/cases/open/InFrontContainedParentsIssue201.elm

@@ -0,0 +1,46 @@
+module InFrontSize exposing (main)
+
+{-|
+
+
+# inFront elements with width fill are contained within the parent's border
+
+Though they're expected to be the actual size of the parent.
+
+<https://ellie-app.com/8J4KqjL3zGHa1>
+
+<https://github.com/mdgriffith/elm-ui/issues/201>
+
+-}
+
+import Browser
+import Html exposing (Html)
+import Testable.Element exposing (..)
+import Testable.Element.Background as Background
+import Testable.Element.Border as Border
+
+
+main =
+    layout []
+        (el
+            [ width (px 100)
+            , height (px 100)
+            , centerX
+            , centerY
+            , Background.color (rgb 0.1 0.1 0.1)
+            , Border.width 20
+            , Border.color (rgb 0.5 1 1)
+
+            -- the following element should cover the parent's border
+            , inFront
+                (el
+                    [ width fill
+                    , height fill
+                    , Background.color (rgb 0.1 0.5 0.9)
+                    , moveUp 40
+                    ]
+                    none
+                )
+            ]
+            none
+        )

tests-rendering/cases/open/StackedScrollingColumnsHeight.elm

@@ -0,0 +1,44 @@
+module StackedScrollingColumnsHeight exposing (..)
+
+{-|
+
+
+# Column height can be set incorrectly for two stacked columns with scrollbarY
+
+<https://github.com/mdgriffith/elm-ui/issues/197>
+
+Both red and green columns should always have equal height.
+
+Currently, the height is set incorrectly if only one column has enough content to scroll.
+
+Both columns are correctly set to the same height only if neither has enough content
+to scroll or if both have enough content to scroll.
+
+-}
+
+import Html exposing (Html)
+import Testable.Element exposing (..)
+import Testable.Element.Background as Background
+
+
+main : Html msg
+main =
+    layout [ height fill ] <|
+        column [ height fill ]
+            [ column
+                [ height fill
+                , scrollbarY
+                , Background.color (rgb 0 255 0)
+                ]
+              <|
+                List.map (\_ -> text "Hello") <|
+                    List.range 1 20
+            , column
+                [ height fill
+                , scrollbarY
+                , Background.color (rgb 255 0 0)
+                ]
+              <|
+                List.map (\_ -> text "Hello") <|
+                    List.range 1 3
+            ]