mdgriffith/elm-ui
1
1
Fork 0
mirror of https://github.com/mdgriffith/elm-ui.git synced 2024-11-27 00:32:09 +03:00
Code Issues Projects Releases Wiki Activity

isVisible test

Browse Source
This commit is contained in:
Matthew Griffith 2018-09-17 16:52:51 -04:00
parent 81cf517315
commit 531e23fd07
8 changed files with 192 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
NOTES.md Normal file
View File

@ -0,0 +1,10 @@
# Rendering Order
Nearby elements such as `below`, `above`, `behindContent`, and `inFront` are rendered after the other children of the `Element.
This is so:
- `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.
- 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.
- Allows nearby elements to be affected by `focused` for `Input`, because they can be reached by a sibling selector. `.focuesed:focus ~ .focusable-style {}`

43
tests/Tests/Nearby.elm
View File

@ -23,6 +23,28 @@ box attrs =
none
justBox size color attrs =
el
([ width (px size)
, height (px size)
, Background.color color
]
++ attrs
)
none
littleBox name attrs =
el
([ label name
, width (px 5)
, height (px 5)
]
++ attrs
)
none
p attrs =
paragraph
([ Background.color blue
@ -389,5 +411,24 @@ view =
, nearby onRight "onRight" box
, nearby onLeft "onLeft" box
, nearby behindContent "behindContent" transparentBox
, text "all nearbys, all alignments"
, layeredVisibility
, overlappingChildren
]
layeredVisibility =
el
[ inFront (justBox 40 red [ isVisible ])
]
(el [ inFront (justBox 30 green []) ]
(justBox 50 blue [])
)
overlappingChildren =
row []
[ el [ inFront (justBox 40 green []) ]
(justBox 40 darkGrey [])
, el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]
(justBox 40 darkGrey [])
]

9
tests/Tests/Run.elm
View File

@ -1,4 +1,4 @@
port module Tests.Run exposing (..)
port module Tests.Run exposing (main)
{-| -}
@ -16,13 +16,12 @@ import Tests.Transparency
main : Testable.Runner.TestableProgram
main =
Testable.Runner.program
[ --Tuple.pair "Basic Element" Tests.Basic.view
Tuple.pair "Nearby" Tests.Nearby.view
[ Tuple.pair "Basic Element" Tests.Basic.view
, Tuple.pair "Nearby" Tests.Nearby.view
, Tuple.pair "Element Alignment" Tests.ElementAlignment.view
, Tuple.pair "Transparency" Tests.Transparency.view
, Tuple.pair "Column Alignment" Tests.ColumnAlignment.view
-- , Tuple.pair "Row Alignment" Tests.RowAlignment.view
, Tuple.pair "Row Alignment" Tests.RowAlignment.view
, Tuple.pair "Column Spacing" Tests.ColumnSpacing.view
, Tuple.pair "Row Spacing" Tests.RowSpacing.view
]

30
tests/gather-styles.html
View File

@ -34,13 +34,41 @@
}
var style = getStyle(element);
var bbox = getBoundingBox(element);
var result = { "bbox": bbox, "style": style, "id": id };
var visible = isVisible(id, bbox);
var result = { "bbox": bbox, "style": style, "id": id, "isVisible": visible };
results.push(result);
}
app.ports.styles.send(results);
});
function isVisible(id, bbox) {
var current = document.getElementById(id);
var result = 0;
if (current == document.elementFromPoint(bbox['left'], bbox['top'])) {
result++;
}
if (current == document.elementFromPoint(bbox['left'], bbox['bottom'] - 1)) {
result++;
}
if (current == document.elementFromPoint(bbox['right'] - 1, bbox['top'])) {
result++;
}
if (current == document.elementFromPoint(bbox['right'] - 1, bbox['bottom'] - 1)) {
result++;
}
if (result == 4) {
return true;
} else {
return false
}
}
function getStyle(element) {
var props = []
var style = window.getComputedStyle(element);

10
tests/src/Testable.elm
View File

@ -1,4 +1,4 @@
module Testable exposing (..)
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)
{-| -}
@ -74,6 +74,7 @@ type alias Surroundings =
type alias Found =
{ bbox : BoundingBox
, style : Style
, isVisible : Bool
}
@ -312,14 +313,13 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }
|> Maybe.withDefault 0
id =
-- Debug.log "create Test" <|
levelToString level
testChildren : Found -> List (Element msg) -> List Test
testChildren found children =
let
childrenFound =
-- Should check taht this lookup doesn't fail.
-- Should check that this lookup doesn't fail.
-- Thoug if it does, it'll fail when the element itself is tested
List.filterMap
(\x ->
@ -535,6 +535,7 @@ applyLabels attrs =
| label =
if newLabel == "" then
labeled.label
else
newLabel ++ ", " ++ labeled.label
}
@ -666,6 +667,7 @@ formatColorWithAlpha (Internal.Rgba red green blue alpha) =
++ (", " ++ String.fromInt (round (blue * 255)))
++ ", 1"
++ ")"
else
("rgba(" ++ String.fromInt (round (red * 255)))
++ (", " ++ String.fromInt (round (green * 255)))
@ -680,6 +682,7 @@ formatColor (Internal.Rgba red green blue alpha) =
++ (", " ++ String.fromInt (round (green * 255)))
++ (", " ++ String.fromInt (round (blue * 255)))
++ ")"
else
("rgb(" ++ String.fromInt (round (red * 255)))
++ (", " ++ String.fromInt (round (green * 255)))
@ -693,6 +696,7 @@ getSpacing el =
getSpacingAttr attr found =
if found /= Nothing then
found
else
case attr of
Spacing i ->

83
tests/src/Testable/Element.elm
View File

@ -1,4 +1,43 @@
module Testable.Element exposing (..)
module Testable.Element exposing
( Length(..)
, above
, alignBottom
, alignLeft
, alignRight
, alignTop
, alpha
, behindContent
, below
, centerX
, centerY
, column
, el
, expectRoundedEquality
, fill
, fillPortion
, height
, heightHelper
, inFront
, isVisible
, label
, maximum
, minimum
, none
, onLeft
, onRight
, padding
, paddingXY
, paragraph
, px
, row
, shrink
, spacing
, text
, textColumn
, transparent
, width
, widthHelper
)
{-| This module should mirror the top level `Element` api, with one important distinction.
@ -15,6 +54,7 @@ In order to run the test:
import Dict
import Element
import Expect
import Html.Attributes
import Testable
@ -100,6 +140,7 @@ transparent on =
{ label =
if on then
"transparent"
else
"opaque"
, attr = Element.transparent on
@ -114,6 +155,7 @@ transparent on =
value =
if on then
"0"
else
"1"
in
@ -121,6 +163,18 @@ transparent on =
}
{-| -}
isVisible : Testable.Attr msg
isVisible =
Testable.LabeledTest
{ label = "is-visible"
, attr = Element.htmlAttribute (Html.Attributes.style "not" "applicable")
, test =
\context _ ->
Expect.equal context.self.isVisible True
}
{-| -}
alpha : Float -> Testable.Attr msg
alpha a =
@ -265,6 +319,7 @@ widthHelper maybeMin maybeMax len =
\context _ ->
if List.member context.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
Expect.true "width fill doesn't apply to onright/onleft elements" True
else
let
parentAvailableWidth =
@ -329,6 +384,7 @@ widthHelper maybeMin maybeMax len =
-- TODO: The issue is that we have a hard time measuring `text` elements
-- So if a element has a text child, then it's width isn't going to show up in the system.
expectRoundedEquality context.self.bbox.width context.self.bbox.width
else
-- This fails if this element is actually a column
-- So we need to capture what this element is in order to do this calculation.
@ -422,6 +478,7 @@ heightHelper maybeMin maybeMax len =
\context _ ->
if List.member context.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
Expect.true "height fill doesn't apply to above/below elements" True
else
let
parentAvailableHeight =
@ -486,6 +543,7 @@ heightHelper maybeMin maybeMax len =
-- TODO: The issue is that we have a hard time measuring `text` elements
-- So if a element has a text child, then it's height isn't going to show up in the system.
expectRoundedEquality context.self.bbox.height context.self.bbox.height
else
-- This fails if this element is actually a column
-- So we need to capture what this element is in order to do this calculation.
@ -529,10 +587,12 @@ spacing space =
in
[ if horizontal > 0 then
horizontal
else
space
, if vertical > 0 then
vertical
else
space
]
@ -548,6 +608,7 @@ spacing space =
(\x wrong ->
if not (x >= space) then
x :: wrong
else
wrong
)
@ -588,6 +649,7 @@ alignLeft =
\found _ ->
if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
Expect.true "alignLeft doesn't apply to elements that are onLeft or onRight" True
else if
List.member found.location
[ Testable.IsNearby Testable.InFront
@ -599,10 +661,12 @@ alignLeft =
expectRoundedEquality
found.self.bbox.left
found.parent.bbox.left
else if List.length found.siblings == 0 then
expectRoundedEquality
found.self.bbox.left
(found.parent.bbox.left + found.parent.bbox.padding.left)
else
case found.location of
Testable.InRow ->
@ -648,10 +712,12 @@ centerX =
in
if List.member found.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then
Expect.true "centerX doesn't apply to elements that are onLeft or onRight" True
else if List.length found.siblings == 0 then
expectRoundedEquality
selfCenter
parentCenter
else
case found.location of
Testable.InRow ->
@ -702,6 +768,7 @@ alignRight =
\found _ ->
if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then
Expect.true "alignRight doesn't apply to elements that are onLeft or onRight" True
else if
List.member found.location
[ Testable.IsNearby Testable.InFront
@ -713,10 +780,12 @@ alignRight =
expectRoundedEquality
found.self.bbox.right
found.parent.bbox.right
else if List.length found.siblings == 0 then
expectRoundedEquality
found.self.bbox.right
(found.parent.bbox.right + found.parent.bbox.padding.right)
else
case found.location of
Testable.InRow ->
@ -753,6 +822,7 @@ alignTop =
\found _ ->
if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
Expect.true "alignTop doesn't apply to elements that are above or below" True
else if
List.member found.location
[ Testable.IsNearby Testable.InFront
@ -764,10 +834,12 @@ alignTop =
expectRoundedEquality
found.self.bbox.top
found.parent.bbox.top
else if List.length found.siblings == 0 then
expectRoundedEquality
found.self.bbox.top
(found.parent.bbox.top + found.parent.bbox.padding.top)
else
case found.location of
Testable.InColumn ->
@ -804,6 +876,7 @@ alignBottom =
\found _ ->
if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
Expect.true "alignBottom doesn't apply to elements that are above or below" True
else if
List.member found.location
[ Testable.IsNearby Testable.InFront
@ -815,10 +888,12 @@ alignBottom =
expectRoundedEquality
found.self.bbox.bottom
found.parent.bbox.bottom
else if List.length found.siblings == 0 then
expectRoundedEquality
found.self.bbox.bottom
(found.parent.bbox.bottom + found.parent.bbox.padding.bottom)
else
case found.location of
Testable.InColumn ->
@ -867,10 +942,12 @@ centerY =
in
if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then
Expect.true "centerY doesn't apply to elements that are above or below" True
else if List.length found.siblings == 0 then
expectRoundedEquality
selfCenter
parentCenter
else
case found.location of
Testable.InColumn ->
@ -978,6 +1055,7 @@ inFront element =
[ (found.self.bbox.right <= found.parent.bbox.right)
|| (found.self.bbox.left >= found.parent.bbox.left)
]
else
[ found.self.bbox.right <= found.parent.bbox.right
, found.self.bbox.left >= found.parent.bbox.left
@ -988,6 +1066,7 @@ inFront element =
[ (found.self.bbox.top >= found.parent.bbox.top)
|| (found.self.bbox.bottom <= found.parent.bbox.bottom)
]
else
[ found.self.bbox.top >= found.parent.bbox.top
, found.self.bbox.bottom <= found.parent.bbox.bottom
@ -1019,6 +1098,7 @@ behindContent element =
[ (found.self.bbox.right <= found.parent.bbox.right)
|| (found.self.bbox.left >= found.parent.bbox.left)
]
else
[ found.self.bbox.right <= found.parent.bbox.right
, found.self.bbox.left >= found.parent.bbox.left
@ -1029,6 +1109,7 @@ behindContent element =
[ (found.self.bbox.top >= found.parent.bbox.top)
|| (found.self.bbox.bottom <= found.parent.bbox.bottom)
]
else
[ found.self.bbox.top >= found.parent.bbox.top
, found.self.bbox.bottom <= found.parent.bbox.bottom

2
tests/src/Testable/Element/Background.elm
View File

@ -22,6 +22,6 @@ color clr =
|> Dict.get "background-color"
|> Maybe.withDefault "notfound"
in
Expect.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfBackgroundColor))
Expect.true ("Expected color: " ++ (Testable.formatColor clr ++ " vs found:" ++ selfBackgroundColor))
(Testable.compareFormattedColor clr selfBackgroundColor)
}

19
tests/src/Testable/Runner.elm
View File

@ -141,6 +141,7 @@ type Msg
(List
{ id : String
, bbox : Testable.BoundingBox
, isVisible : Bool
, style : List ( String, String )
}
)
@ -180,7 +181,12 @@ update msg model =
Just ( label, current ) ->
let
toTuple box =
( box.id, { style = Dict.fromList box.style, bbox = box.bbox } )
( box.id
, { style = Dict.fromList box.style
, bbox = box.bbox
, isVisible = box.isVisible
}
)
foundData =
boxes
@ -443,4 +449,13 @@ port test : String -> Cmd msg
port analyze : List String -> Cmd msg
port styles : (List { id : String, bbox : Testable.BoundingBox, style : List ( String, String ) } -> msg) -> Sub msg
port styles :
(List
{ id : String
, bbox : Testable.BoundingBox
, style : List ( String, String )
, isVisible : Bool
}
-> msg
)
-> Sub msg