add tests cases

tests-rendering/cases/resolved/Input/FocusLinks.elm

@@ -0,0 +1,37 @@
+module FocusLinks exposing (main)
+
+import Element exposing (Color, Element, el, focused, layout, link, row, spacing, text)
+import Element.Border as Border
+import Element.Region as Region
+import Html exposing (Html)
+
+
+main : Html msg
+main =
+    layout [] links
+
+
+links : Element msg
+links =
+    row [ spacing 10 ]
+        [ siteLink "Elm website" "https://elm-lang.org/"
+        , siteLink "Elm-ui" "https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element"
+        ]
+
+
+siteLink : String -> String -> Element msg
+siteLink label url =
+    link [ focused [ Border.glow blue 2 ] ]
+        { url = url
+        , label = text label
+        }
+
+
+blue : Color
+blue =
+    Element.fromRgb255
+        { red = 100
+        , green = 180
+        , blue = 250
+        , alpha = 1
+        }

tests-rendering/cases/resolved/Input/FocusStylePrecedingElements.elm

@@ -1,4 +1,4 @@
-module FocusStylePrecedingElements exposing (view)
+module FocusStylePrecedingElements exposing (main)
 
 {-|
 
@@ -22,12 +22,12 @@ Disabling it produces the correct focus behaviour.
 
 -}
 
-import Testable.Element exposing (..)
-import Testable.Element.Font as Font
-import Testable.Element.Input as Input
+import Element exposing (..)
+import Element.Font as Font
+import Element.Input as Input
 
 
-view =
+main =
     layout [] <|
         column []
             [ Input.button [] { onPress = Nothing, label = text "Button" }

tests-rendering/cases/resolved/Input/InputAlignment.elm

@@ -0,0 +1,44 @@
+module InputAlignment exposing (main)
+
+import Browser
+import Element exposing (fill, padding, width)
+import Element.Border as Border
+import Element.Font as Font
+import Element.Input as Input
+import Html exposing (Html)
+
+
+view : () -> Html ()
+view () =
+    Element.layout [ Font.alignRight ] <|
+        Element.column [ padding 10 ]
+            [ Element.el [ Border.width 1, padding 5, width fill ] <| Element.text "Element.el"
+            , Input.text
+                [ Border.width 1
+                , padding 5
+                , width fill
+                , Border.rounded 0
+                , Font.color (Element.rgb 0 0.5 0.5)
+                ]
+                { onChange = always ()
+                , text = "Input.text"
+                , placeholder = Nothing
+                , label = Input.labelHidden "Input.text"
+                }
+            , Element.paragraph []
+                [ Element.text "Helooooo!" ]
+            , Element.row []
+                [ Element.text "one!"
+                , Element.text "two!"
+                , Element.text "three!"
+                ]
+            ]
+
+
+main : Program () () ()
+main =
+    Browser.sandbox
+        { init = ()
+        , view = view
+        , update = \_ _ -> ()
+        }

tests-rendering/cases/resolved/Input/LabelAlignBaseline.elm

@@ -0,0 +1,34 @@
+module LabelAlignBaseline exposing (..)
+
+import Element exposing (Element, alignRight, centerY, el, fill, padding, rgb255, row, spacing, text, width)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Element.Input as Input
+
+
+type Msg
+    = Msg
+
+
+main =
+    Element.layout [] <|
+        Element.column []
+            [ Element.row []
+                [ Element.text "dissociated label"
+                , Input.text []
+                    { text = "input"
+                    , label = Input.labelHidden "hidden"
+                    , onChange = \_ -> Msg
+                    , placeholder = Nothing
+                    }
+                ]
+            , Element.row []
+                [ Input.text []
+                    { text = "input"
+                    , label = Input.labelLeft [] <| Element.text "associated label"
+                    , onChange = \_ -> Msg
+                    , placeholder = Nothing
+                    }
+                ]
+            ]

tests-rendering/cases/resolved/Input/Placeholder.elm

@@ -0,0 +1,59 @@
+module Placeholder exposing (main)
+
+import Element exposing (..)
+import Element.Background as Background
+import Element.Input as Input
+import Element.Keyed as Keyed
+import Html.Attributes exposing (style)
+
+
+grey =
+    rgb 0.8 0.8 0.8
+
+
+darkGrey =
+    rgb 0.7 0.7 0.7
+
+
+type Msg
+    = NoMsg String
+
+
+main =
+    Element.layout [ width fill, height fill ] <|
+        column
+            [ width fill
+            , inFront
+                (el
+                    [ width fill
+                    , Background.color grey
+                    , padding 20
+                    , below <|
+                        el
+                            [ height (px 300)
+                            , width (px 300)
+                            , Background.color darkGrey
+                            , htmlAttribute <| style "z-index" "1"
+                            , moveRight 50
+                            , padding 50
+                            , alpha 0.5
+                            ]
+                            (el [ alignBottom ] (text "I'm a dropdown menu."))
+                    ]
+                    (text "I'm a toolbar.")
+                )
+            ]
+            [ Input.text []
+                { onChange = NoMsg
+                , text = ""
+                , placeholder = Just (Input.placeholder [] (text "I'm a text input."))
+                , label = Input.labelAbove [] none
+                }
+            , Input.multiline []
+                { onChange = NoMsg
+                , text = ""
+                , placeholder = Just (Input.placeholder [] (text "I'm a multiline input."))
+                , label = Input.labelAbove [] none
+                , spellcheck = False
+                }
+            ]

tests-rendering/cases/resolved/Input/Slider.elm

@@ -0,0 +1,74 @@
+module Slider exposing (main)
+
+import Browser
+import Element as Element exposing (Element)
+import Element.Background as Background
+import Element.Input as Input
+import Html exposing (Html, button, div, text)
+import Html.Events exposing (onClick)
+
+
+type alias Model =
+    { rangeValue : Float }
+
+
+initialModel : Model
+initialModel =
+    { rangeValue = 160.0 }
+
+
+type Msg
+    = UpdateRange Float
+
+
+update : Msg -> Model -> Model
+update msg model =
+    case msg of
+        UpdateRange value ->
+            { model | rangeValue = value }
+
+
+viewModal =
+    Element.el
+        [ Element.width Element.fill
+        , Element.height Element.fill
+        , Element.paddingEach { top = 100, left = 0, bottom = 0, right = 0 }
+        , Background.color <| Element.rgba 0 0 0 0.8
+        ]
+        (Element.el [] (Element.text "Hello Modal"))
+
+
+view : Model -> Html Msg
+view model =
+    Element.layout
+        [--Element.inFront viewModal
+        ]
+    <|
+        Input.slider
+            [ Element.width Element.fill
+            , Element.behindContent <|
+                Element.el
+                    [ Element.width Element.fill
+                    , Element.height (Element.px 2)
+                    , Element.centerY
+                    , Background.color (Element.rgb 0.5 0.5 0.5)
+                    ]
+                    Element.none
+            ]
+            { onChange = UpdateRange
+            , label = Input.labelHidden ""
+            , min = 60.0
+            , max = 280.0
+            , value = model.rangeValue
+            , thumb = Input.defaultThumb
+            , step = Just 1.0
+            }
+
+
+main : Program () Model Msg
+main =
+    Browser.sandbox
+        { init = initialModel
+        , view = view
+        , update = update
+        }

tests-rendering/cases/resolved/Layout/BreaksWithinParagraph.elm

@@ -0,0 +1,17 @@
+module BreaksWithinParagraph exposing (main)
+
+import Browser
+import Element exposing (..)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+
+
+main =
+    layout [ width fill, height fill ] <|
+        paragraph [ Border.width 1, width (px 50) ]
+            [ row []
+                [ text "Thequick"
+                ]
+            , text "redfox"
+            ]

tests-rendering/cases/resolved/Layout/ColumnLayouts.elm

@@ -0,0 +1,103 @@
+module ColumnLayouts exposing (main)
+
+{-| -}
+
+import Element exposing (..)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+
+
+main =
+    layout [] <|
+        column [ spacing 48 ]
+            [ column
+                [ width fill
+                , height <| px 200
+                , spacing 24
+                , Border.width 1
+                , Border.color pink
+                ]
+                [ elem
+                , elem
+                , elem
+                ]
+            , column
+                [ width fill
+                , spacing 24
+                , Border.width 1
+                , Border.color pink
+                ]
+                [ elem
+                , elem
+                , elem
+                ]
+            , el [ height <| px 400 ] <|
+                column [ height fill ]
+                    [ column
+                        [ width fill
+                        , height <| px 200
+                        , spacing 24
+                        , Border.width 1
+                        , Border.color pink
+                        ]
+                        [ elem
+                        , elem
+                        , el [ alignBottom ] elem
+                        ]
+                    , el [ alignBottom ] elem
+                    ]
+            , column
+                [ width fill
+                , height <| px 200
+                , spacing 24
+                , Border.width 1
+                , Border.color pink
+                ]
+                [ elem
+                , el [] box
+                , el [ alignBottom ] elem
+                ]
+            , column
+                [ width fill
+                , height <| px 200
+                , spacing 24
+                , Border.width 1
+                , Border.color pink
+                ]
+                [ elem
+                , el [] box
+                , filled
+                , el [ alignBottom ] elem
+                ]
+            ]
+
+
+filled =
+    el
+        [ width fill
+        , height fill
+        , Background.color pink
+        ]
+        (text "an element")
+
+
+elem =
+    el
+        [ Background.color pink
+        ]
+        (text "an element")
+
+
+box =
+    el
+        [ width (px 50)
+        , height (px 50)
+        , Background.color (rgb (240 / 255) 0 (245 / 255))
+        , Font.color (rgb 1 1 1)
+        ]
+        none
+
+
+pink =
+    rgb (240 / 255) 0 (245 / 255)

tests-rendering/cases/resolved/Layout/Rounded.elm

@@ -0,0 +1,54 @@
+module Rounded exposing (main)
+
+import Element exposing (..)
+import Element.Background as Background
+import Html exposing (Html)
+
+
+sizePadding =
+    10
+
+
+sizeSpacing =
+    11
+
+
+nbElement =
+    10
+
+
+sizeElement =
+    50
+
+
+totalSizeElement =
+    nbElement * sizeElement
+
+
+totalSpacing =
+    (nbElement - 1) * sizeSpacing
+
+
+totalPadding =
+    2 * sizePadding
+
+
+sizeRow =
+    totalSizeElement + totalSpacing + totalPadding
+
+
+main : Html msg
+main =
+    layout [ width fill, height fill ] <|
+        -- The row should have 4.5px of padding to get
+        -- from the 5.5px of margin of the elements on the edge
+        -- up to 10px of padding specified on the wrappedRow.
+        -- Instead the row has 5px of padding.
+        wrappedRow [ width (px sizeRow), padding sizePadding, spacing sizeSpacing, Background.color (rgb 0 0 1) ]
+        <|
+            List.repeat nbElement <|
+                -- Each element has a margin of 5.5px (11px of spacing / 2)
+                el [ width (px sizeElement), height (px sizeElement), Background.color (rgb 1 0 0) ]
+                <|
+                    el [ centerX, centerY ] <|
+                        text "card"

tests-rendering/cases/resolved/Layout/SafariColumnBug.elm

@@ -0,0 +1,14 @@
+module SafariColumnBug exposing (main)
+
+import Browser
+import Element exposing (column, el, fill, height, layout, scrollbarY, text)
+import Html exposing (Html)
+
+
+main =
+    layout [ height fill ] <|
+        column
+            [ height fill ]
+            [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."
+            , text "Text below the el above"
+            ]

tests-rendering/cases/resolved/Layout/SafariTwo.elm

@@ -0,0 +1,40 @@
+module SafariTwo exposing (main)
+
+{-| 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 Element exposing (..)
+
+
+main =
+    layout [] <|
+        column
+            [ width fill
+            , height <| px 200
+            ]
+            [ el
+                []
+              <|
+                text "an element"
+            ]

tests-rendering/cases/resolved/Layout/WrapRow.elm

@@ -0,0 +1,13 @@
+module WrapRow exposing (main)
+
+import Browser
+import Element exposing (..)
+
+
+main =
+    layout [] <|
+        wrappedRow
+            [ padding 10
+            , spacingXY 6 5
+            ]
+            [ text "Higher by 1 px" ]

tests-rendering/cases/resolved/Misc/ImageSizing.elm

@@ -0,0 +1,20 @@
+module ImageSizing exposing (main)
+
+import Element as E exposing (column, el, row, text)
+import Element.Border as Border
+import Element.Font as Font
+import Html exposing (Html)
+
+
+main : Html ()
+main =
+    E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|
+        E.image
+            [ -- E.height (E.px 500)
+              E.width E.fill
+            , E.height E.fill
+            ]
+            -- <| px 500 ]
+            { src = "http://bburdette.github.io/music-reader.png"
+            , description = "music-reader screenshot"
+            }

tests-rendering/cases/resolved/Misc/Scroll.elm

@@ -0,0 +1,48 @@
+module Scroll exposing (main)
+
+import Browser
+import Element exposing (Element, alignTop, centerX, centerY, column, el, fill, fillPortion, height, inFront, layoutWith, none, padding, px, row, scrollbarY, spacing, text, width, wrappedRow)
+import Element.Background as Background
+import Element.Font as Font
+import Element.Input as Input exposing (button)
+import Html exposing (Html)
+import Html.Attributes
+
+
+type alias Model =
+    ()
+
+
+type alias Msg =
+    ()
+
+
+field i =
+    text <| "Scrolling text " ++ String.fromInt i
+
+
+view : Model -> Html Msg
+view model =
+    layoutWith { options = [] } [ height fill ] <|
+        row
+            [ height fill ]
+            [ column
+                [ height fill
+                , scrollbarY
+
+                -- The width fill is required, when using scrollbarY above
+                -- else the width is set to 0.
+                --, width fill
+                ]
+                (List.map field (List.range 1 100))
+            , text "Non scrolling text"
+            ]
+
+
+main : Program () Model Msg
+main =
+    Browser.sandbox
+        { init = ()
+        , view = view
+        , update = \msg model -> model
+        }

tests-rendering/cases/resolved/ZIndex/InFrontIssue.elm

@@ -0,0 +1,91 @@
+module InFrontIssue exposing (main)
+
+import Browser
+import Element as Ui exposing (..)
+import Element.Background as Background
+import Element.Font as Font
+import Html exposing (Html)
+
+
+type alias Model =
+    {}
+
+
+initialModel : Model
+initialModel =
+    {}
+
+
+type Msg
+    = NoOp
+
+
+update : Msg -> Model -> Model
+update msg model =
+    model
+
+
+view : Model -> Html Msg
+view model =
+    let
+        a =
+            el
+                [ width fill
+                , height <| px 30
+                , Background.color <| rgb 0 1 0
+                ]
+            <|
+                text "A"
+
+        b =
+            column
+                [ width fill
+                , height <| px 5000
+                , Background.color <| rgb 1 0 1
+                , spacing 60
+                ]
+                [ text "B"
+                , c
+                ]
+
+        c =
+            el
+                [ width <| px 100
+                , height <| px 100
+                , Background.color <| rgb 0 0 0
+                , Font.color <| rgb 1 1 1
+                , paddingXY 0 30
+                , centerX
+                , above d
+                , below d
+                , onLeft d
+                , onRight d
+                ]
+            <|
+                text "C"
+
+        d =
+            el
+                [ width <| px 100
+                , height <| px 100
+                , centerX
+                , Background.color <| rgb 1 1 1
+                , Font.color <| rgb 0 0 0
+                ]
+            <|
+                text "D"
+    in
+    layout
+        [ inFront a
+        , paddingXY 0 30
+        ]
+        b
+
+
+main : Program () Model Msg
+main =
+    Browser.sandbox
+        { init = initialModel
+        , view = view
+        , update = update
+        }

tests-rendering/cases/resolved/ZIndex/Issue22ZIndex.elm

@@ -0,0 +1,87 @@
+module Issue22ZIndex exposing (main)
+
+import Browser
+import Element as Ui exposing (..)
+import Element.Background as Background
+import Element.Font as Font
+import Html exposing (Html)
+
+
+type alias Model =
+    {}
+
+
+initialModel : Model
+initialModel =
+    {}
+
+
+type Msg
+    = NoOp
+
+
+update : Msg -> Model -> Model
+update msg model =
+    model
+
+
+view : Model -> Html Msg
+view model =
+    let
+        a =
+            el
+                [ width fill
+                , height <| px 30
+                , Background.color <| rgb 0 1 0
+                ]
+            <|
+                text "A"
+
+        b =
+            column
+                [ width fill
+                , height <| px 5000
+                , Background.color <| rgb 1 0 1
+                , spacing 60
+                ]
+                [ text "B"
+                , c
+                ]
+
+        c =
+            el
+                [ width fill
+                , height <| px 100
+                , Background.color <| rgb 0 0 0
+                , Font.color <| rgb 1 1 1
+                , paddingXY 0 30
+                , inFront d
+                ]
+            <|
+                text "C"
+
+        d =
+            el
+                [ width <| px 100
+                , height <| px 100
+                , centerX
+                , Background.color <| rgb 1 1 1
+                , Font.color <| rgb 0 0 0
+                ]
+            <|
+                text "D"
+    in
+    layout
+        [ inFront a
+        , paddingXY 0 30
+        ]
+        b
+
+
+main : Program () Model Msg
+main =
+    Browser.sandbox
+        { init = initialModel
+        , view = view
+        , update = update
+        }

tests-rendering/cases/resolved/ZIndex/OtherInFrontIssue.elm

@@ -0,0 +1,55 @@
+module OtherInFrontIssue exposing (main)
+
+import Browser
+import Element exposing (Element)
+import Element.Background as Background
+import Html exposing (Html, button, div, text)
+import Html.Attributes
+import Html.Events exposing (onClick)
+
+
+
+-- helping hack
+
+
+translateLeft : Element.Attribute msg
+translateLeft =
+    Html.Attributes.style "transform" "translate(-100%)"
+        |> Element.htmlAttribute
+
+
+main =
+    Element.layout
+        [ Element.inFront <|
+            Element.el
+                [ Element.alignLeft
+                , Background.color <| Element.rgb 1 0.5 0.5
+                , Element.height Element.fill
+                ]
+            <|
+                Element.text "Side Menu .........."
+        ]
+        contentPane
+
+
+contentPane =
+    Element.column
+        [ Element.width Element.fill
+        , Element.height Element.fill
+        , Background.color <| Element.rgb 1 0 0
+        ]
+        [ Element.el
+            [ Element.centerX
+            , Element.centerY
+            , Element.onLeft <| Element.text " [ onLeft. onLeft onLeft onLeft onLeft onLeft onLeft ] "
+            ]
+            (Element.text " [ Content: This will remain behind the Side Menu. ]")
+        , Element.el
+            [ Element.centerX
+            , Element.centerY
+            , Element.behindContent <|
+                Element.el [ translateLeft ] <|
+                    Element.text " [ behindContent + translateLeft. behindContent + translateLeft ] "
+            ]
+            (Element.text " [ Content: This will remain behind the Side Menu. ]")
+        ]

tests-rendering/cases/resolved/ZIndex/ZIndexRegression.elm

@@ -0,0 +1,43 @@
+module ZIndexRegression exposing (main)
+
+import Element exposing (..)
+import Element.Background as Background
+import Html exposing (Html)
+
+
+main : Html msg
+main =
+    layout [] <|
+        column [ width fill, height fill ]
+            [ el
+                [ width fill
+                , height (px 100)
+                , Background.color (rgb 0 0 1)
+                , inFront menu
+                ]
+                none
+            , el
+                [ width fill
+                , height fill
+                , inFront menu
+                ]
+                none
+            ]
+
+
+menu : Element msg
+menu =
+    el
+        [ transparent True
+        , mouseOver [ transparent False ]
+        , width fill
+        , height fill
+        , below <|
+            el
+                [ width fill
+                , height (px 500)
+                , Background.color (rgb 1 0 0)
+                ]
+                none
+        ]
+        none