531e23f · typeable/elm-ui

git.iko.soy/typeable/elm-ui

isVisible test

commit531e23fd07f05897df0c60471f51d70d2284c43a authorMatthew Griffith <mdg.griffith@gmail.com> dateMon 17 Sep 2018, 16:52 (8 years ago) parent81cf517

8 files changed+192−14

compare with master

unifiedsplit

NOTES.md+10 tests/Tests/Nearby.elm+42−1 tests/Tests/Run.elm+4−5 tests/gather-styles.html+29−1 tests/src/Testable.elm+7−3 tests/src/Testable/Element.elm+82−1 tests/src/Testable/Element/Background.elm+1−1 tests/src/Testable/Runner.elm+17−2

NOTES.mdnew file+10

@@ -0,0 +1,10 @@

1+# Rendering Order

3+Nearby elements such as `below`, `above`, `behindContent`, and `inFront` are rendered after the other children of the `Element.

5+This is so:

7+- `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.

8+- 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.

9+- Allows nearby elements to be affected by `focused` for `Input`, because they can be reached by a sibling selector. `.focuesed:focus ~ .focusable-style {}`

10+

tests/Tests/Nearby.elm+42−1

@@ -23,6 +23,28 @@ box attrs =

2323 none

2424

2525

26+justBox size color attrs =

27+ el

28+ ([ width (px size)

29+ , height (px size)

30+ , Background.color color

31+ ]

32+ ++ attrs

33+ )

34+ none

35+

36+

37+littleBox name attrs =

38+ el

39+ ([ label name

40+ , width (px 5)

41+ , height (px 5)

42+ ]

43+ ++ attrs

44+ )

45+ none

46+

47+

2648p attrs =

2749 paragraph

2850 ([ Background.color blue

@@ -389,5 +411,24 @@ view =

389411 , nearby onRight "onRight" box

390412 , nearby onLeft "onLeft" box

391413 , nearby behindContent "behindContent" transparentBox

392− , text "all nearbys, all alignments"

414+ , layeredVisibility

415+ , overlappingChildren

416+ ]

417+

418+

419+layeredVisibility =

420+ el

421+ [ inFront (justBox 40 red [ isVisible ])

422+ ]

423+ (el [ inFront (justBox 30 green []) ]

424+ (justBox 50 blue [])

425+ )

426+

427+

428+overlappingChildren =

429+ row []

430+ [ el [ inFront (justBox 40 green []) ]

431+ (justBox 40 darkGrey [])

432+ , el [ onLeft (littleBox "overlapping" [ isVisible, Background.color red ]) ]

433+ (justBox 40 darkGrey [])

393434 ]

tests/Tests/Run.elm+4−5

@@ -1,4 +1,4 @@

1−port module Tests.Run exposing (..)

1+port module Tests.Run exposing (main)

33{-| -}

@@ -16,13 +16,12 @@ import Tests.Transparency

1616main : Testable.Runner.TestableProgram

1717main =

1818 Testable.Runner.program

19− [ --Tuple.pair "Basic Element" Tests.Basic.view

20− Tuple.pair "Nearby" Tests.Nearby.view

19+ [ Tuple.pair "Basic Element" Tests.Basic.view

20+ , Tuple.pair "Nearby" Tests.Nearby.view

2121 , Tuple.pair "Element Alignment" Tests.ElementAlignment.view

2222 , Tuple.pair "Transparency" Tests.Transparency.view

2323 , Tuple.pair "Column Alignment" Tests.ColumnAlignment.view

24−

25− -- , Tuple.pair "Row Alignment" Tests.RowAlignment.view

24+ , Tuple.pair "Row Alignment" Tests.RowAlignment.view

2625 , Tuple.pair "Column Spacing" Tests.ColumnSpacing.view

2726 , Tuple.pair "Row Spacing" Tests.RowSpacing.view

2827 ]

tests/gather-styles.html+29−1

@@ -34,13 +34,41 @@

3434 }

3535 var style = getStyle(element);

3636 var bbox = getBoundingBox(element);

37− var result = { "bbox": bbox, "style": style, "id": id };

37+

38+ var visible = isVisible(id, bbox);

39+

40+

41+ var result = { "bbox": bbox, "style": style, "id": id, "isVisible": visible };

3842 results.push(result);

3943

4044 }

4145 app.ports.styles.send(results);

4246 });

4347

48+ function isVisible(id, bbox) {

49+ var current = document.getElementById(id);

50+ var result = 0;

51+ if (current == document.elementFromPoint(bbox['left'], bbox['top'])) {

52+ result++;

53+ }

54+ if (current == document.elementFromPoint(bbox['left'], bbox['bottom'] - 1)) {

55+ result++;

56+ }

57+ if (current == document.elementFromPoint(bbox['right'] - 1, bbox['top'])) {

58+ result++;

59+ }

60+ if (current == document.elementFromPoint(bbox['right'] - 1, bbox['bottom'] - 1)) {

61+ result++;

62+ }

63+

64+

65+ if (result == 4) {

66+ return true;

67+ } else {

68+ return false

69+ }

70+ }

71+

4472 function getStyle(element) {

4573 var props = []

4674 var style = window.getComputedStyle(element);

tests/src/Testable.elm+7−3

@@ -1,4 +1,4 @@

1−module Testable exposing (..)

1+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)

33{-| -}

@@ -74,6 +74,7 @@ type alias Surroundings =

7474type alias Found =

7575 { bbox : BoundingBox

7676 , style : Style

77+ , isVisible : Bool

7778 }

7879

7980

@@ -312,14 +313,13 @@ createTest { siblings, parent, cache, level, element, location, parentSpacing }

312313 |> Maybe.withDefault 0

313314

314315 id =

315− -- Debug.log "create Test" <|

316316 levelToString level

317317

318318 testChildren : Found -> List (Element msg) -> List Test

319319 testChildren found children =

320320 let

321321 childrenFound =

322− -- Should check taht this lookup doesn't fail.

322+ -- Should check that this lookup doesn't fail.

323323 -- Thoug if it does, it'll fail when the element itself is tested

324324 List.filterMap

325325 (\x ->

@@ -535,6 +535,7 @@ applyLabels attrs =

535535 | label =

536536 if newLabel == "" then

537537 labeled.label

538+

538539 else

539540 newLabel ++ ", " ++ labeled.label

540541 }

@@ -666,6 +667,7 @@ formatColorWithAlpha (Internal.Rgba red green blue alpha) =

666667 ++ (", " ++ String.fromInt (round (blue * 255)))

667668 ++ ", 1"

668669 ++ ")"

670+

669671 else

670672 ("rgba(" ++ String.fromInt (round (red * 255)))

671673 ++ (", " ++ String.fromInt (round (green * 255)))

@@ -680,6 +682,7 @@ formatColor (Internal.Rgba red green blue alpha) =

680682 ++ (", " ++ String.fromInt (round (green * 255)))

681683 ++ (", " ++ String.fromInt (round (blue * 255)))

682684 ++ ")"

685+

683686 else

684687 ("rgb(" ++ String.fromInt (round (red * 255)))

685688 ++ (", " ++ String.fromInt (round (green * 255)))

@@ -693,6 +696,7 @@ getSpacing el =

693696 getSpacingAttr attr found =

694697 if found /= Nothing then

695698 found

699+

696700 else

697701 case attr of

698702 Spacing i ->

tests/src/Testable/Element.elm+82−1

@@ -1,4 +1,43 @@

1−module Testable.Element exposing (..)

1+module Testable.Element exposing

2+ ( Length(..)

3+ , above

4+ , alignBottom

5+ , alignLeft

6+ , alignRight

7+ , alignTop

8+ , alpha

9+ , behindContent

10+ , below

11+ , centerX

12+ , centerY

13+ , column

14+ , el

15+ , expectRoundedEquality

16+ , fill

17+ , fillPortion

18+ , height

19+ , heightHelper

20+ , inFront

21+ , isVisible

22+ , label

23+ , maximum

24+ , minimum

25+ , none

26+ , onLeft

27+ , onRight

28+ , padding

29+ , paddingXY

30+ , paragraph

31+ , px

32+ , row

33+ , shrink

34+ , spacing

35+ , text

36+ , textColumn

37+ , transparent

38+ , width

39+ , widthHelper

40+ )

241

342{-| This module should mirror the top level `Element` api, with one important distinction.

443

@@ -15,6 +54,7 @@ In order to run the test:

1554import Dict

1655import Element

1756import Expect

57+import Html.Attributes

1858import Testable

1959

2060

@@ -100,6 +140,7 @@ transparent on =

100140 { label =

101141 if on then

102142 "transparent"

143+

103144 else

104145 "opaque"

105146 , attr = Element.transparent on

@@ -114,6 +155,7 @@ transparent on =

114155 value =

115156 if on then

116157 "0"

158+

117159 else

118160 "1"

119161 in

@@ -121,6 +163,18 @@ transparent on =

121163 }

122164

123165

166+{-| -}

167+isVisible : Testable.Attr msg

168+isVisible =

169+ Testable.LabeledTest

170+ { label = "is-visible"

171+ , attr = Element.htmlAttribute (Html.Attributes.style "not" "applicable")

172+ , test =

173+ \context _ ->

174+ Expect.equal context.self.isVisible True

175+ }

176+

177+

124178{-| -}

125179alpha : Float -> Testable.Attr msg

126180alpha a =

@@ -265,6 +319,7 @@ widthHelper maybeMin maybeMax len =

265319 \context _ ->

266320 if List.member context.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then

267321 Expect.true "width fill doesn't apply to onright/onleft elements" True

322+

268323 else

269324 let

270325 parentAvailableWidth =

@@ -329,6 +384,7 @@ widthHelper maybeMin maybeMax len =

329384 -- TODO: The issue is that we have a hard time measuring `text` elements

330385 -- So if a element has a text child, then it's width isn't going to show up in the system.

331386 expectRoundedEquality context.self.bbox.width context.self.bbox.width

387+

332388 else

333389 -- This fails if this element is actually a column

334390 -- So we need to capture what this element is in order to do this calculation.

@@ -422,6 +478,7 @@ heightHelper maybeMin maybeMax len =

422478 \context _ ->

423479 if List.member context.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

424480 Expect.true "height fill doesn't apply to above/below elements" True

481+

425482 else

426483 let

427484 parentAvailableHeight =

@@ -486,6 +543,7 @@ heightHelper maybeMin maybeMax len =

486543 -- TODO: The issue is that we have a hard time measuring `text` elements

487544 -- So if a element has a text child, then it's height isn't going to show up in the system.

488545 expectRoundedEquality context.self.bbox.height context.self.bbox.height

546+

489547 else

490548 -- This fails if this element is actually a column

491549 -- So we need to capture what this element is in order to do this calculation.

@@ -529,10 +587,12 @@ spacing space =

529587 in

530588 [ if horizontal > 0 then

531589 horizontal

590+

532591 else

533592 space

534593 , if vertical > 0 then

535594 vertical

595+

536596 else

537597 space

538598 ]

@@ -548,6 +608,7 @@ spacing space =

548608 (\x wrong ->

549609 if not (x >= space) then

550610 x :: wrong

611+

551612 else

552613 wrong

553614 )

@@ -588,6 +649,7 @@ alignLeft =

588649 \found _ ->

589650 if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

590651 Expect.true "alignLeft doesn't apply to elements that are onLeft or onRight" True

652+

591653 else if

592654 List.member found.location

593655 [ Testable.IsNearby Testable.InFront

@@ -599,10 +661,12 @@ alignLeft =

599661 expectRoundedEquality

600662 found.self.bbox.left

601663 found.parent.bbox.left

664+

602665 else if List.length found.siblings == 0 then

603666 expectRoundedEquality

604667 found.self.bbox.left

605668 (found.parent.bbox.left + found.parent.bbox.padding.left)

669+

606670 else

607671 case found.location of

608672 Testable.InRow ->

@@ -648,10 +712,12 @@ centerX =

648712 in

649713 if List.member found.location [ Testable.IsNearby Testable.OnRight, Testable.IsNearby Testable.OnLeft ] then

650714 Expect.true "centerX doesn't apply to elements that are onLeft or onRight" True

715+

651716 else if List.length found.siblings == 0 then

652717 expectRoundedEquality

653718 selfCenter

654719 parentCenter

720+

655721 else

656722 case found.location of

657723 Testable.InRow ->

@@ -702,6 +768,7 @@ alignRight =

702768 \found _ ->

703769 if List.member found.location [ Testable.IsNearby Testable.OnLeft, Testable.IsNearby Testable.OnRight ] then

704770 Expect.true "alignRight doesn't apply to elements that are onLeft or onRight" True

771+

705772 else if

706773 List.member found.location

707774 [ Testable.IsNearby Testable.InFront

@@ -713,10 +780,12 @@ alignRight =

713780 expectRoundedEquality

714781 found.self.bbox.right

715782 found.parent.bbox.right

783+

716784 else if List.length found.siblings == 0 then

717785 expectRoundedEquality

718786 found.self.bbox.right

719787 (found.parent.bbox.right + found.parent.bbox.padding.right)

788+

720789 else

721790 case found.location of

722791 Testable.InRow ->

@@ -753,6 +822,7 @@ alignTop =

753822 \found _ ->

754823 if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

755824 Expect.true "alignTop doesn't apply to elements that are above or below" True

825+

756826 else if

757827 List.member found.location

758828 [ Testable.IsNearby Testable.InFront

@@ -764,10 +834,12 @@ alignTop =

764834 expectRoundedEquality

765835 found.self.bbox.top

766836 found.parent.bbox.top

837+

767838 else if List.length found.siblings == 0 then

768839 expectRoundedEquality

769840 found.self.bbox.top

770841 (found.parent.bbox.top + found.parent.bbox.padding.top)

842+

771843 else

772844 case found.location of

773845 Testable.InColumn ->

@@ -804,6 +876,7 @@ alignBottom =

804876 \found _ ->

805877 if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

806878 Expect.true "alignBottom doesn't apply to elements that are above or below" True

879+

807880 else if

808881 List.member found.location

809882 [ Testable.IsNearby Testable.InFront

@@ -815,10 +888,12 @@ alignBottom =

815888 expectRoundedEquality

816889 found.self.bbox.bottom

817890 found.parent.bbox.bottom

891+

818892 else if List.length found.siblings == 0 then

819893 expectRoundedEquality

820894 found.self.bbox.bottom

821895 (found.parent.bbox.bottom + found.parent.bbox.padding.bottom)

896+

822897 else

823898 case found.location of

824899 Testable.InColumn ->

@@ -867,10 +942,12 @@ centerY =

867942 in

868943 if List.member found.location [ Testable.IsNearby Testable.Above, Testable.IsNearby Testable.Below ] then

869944 Expect.true "centerY doesn't apply to elements that are above or below" True

945+

870946 else if List.length found.siblings == 0 then

871947 expectRoundedEquality

872948 selfCenter

873949 parentCenter

950+

874951 else

875952 case found.location of

876953 Testable.InColumn ->

@@ -978,6 +1055,7 @@ inFront element =

9781055 [ (found.self.bbox.right <= found.parent.bbox.right)

9791056 || (found.self.bbox.left >= found.parent.bbox.left)

9801057 ]

1058+

9811059 else

9821060 [ found.self.bbox.right <= found.parent.bbox.right

9831061 , found.self.bbox.left >= found.parent.bbox.left

@@ -988,6 +1066,7 @@ inFront element =

9881066 [ (found.self.bbox.top >= found.parent.bbox.top)

9891067 || (found.self.bbox.bottom <= found.parent.bbox.bottom)

9901068 ]

1069+

9911070 else

9921071 [ found.self.bbox.top >= found.parent.bbox.top

9931072 , found.self.bbox.bottom <= found.parent.bbox.bottom

@@ -1019,6 +1098,7 @@ behindContent element =

10191098 [ (found.self.bbox.right <= found.parent.bbox.right)

10201099 || (found.self.bbox.left >= found.parent.bbox.left)

10211100 ]

1101+

10221102 else

10231103 [ found.self.bbox.right <= found.parent.bbox.right

10241104 , found.self.bbox.left >= found.parent.bbox.left

@@ -1029,6 +1109,7 @@ behindContent element =

10291109 [ (found.self.bbox.top >= found.parent.bbox.top)

10301110 || (found.self.bbox.bottom <= found.parent.bbox.bottom)

10311111 ]

1112+

10321113 else

10331114 [ found.self.bbox.top >= found.parent.bbox.top

10341115 , found.self.bbox.bottom <= found.parent.bbox.bottom

tests/src/Testable/Element/Background.elm+1−1

@@ -22,6 +22,6 @@ color clr =

2222 |> Dict.get "background-color"

2323 |> Maybe.withDefault "notfound"

2424 in

25− Expect.true ("Color Match - " ++ (Testable.formatColor clr ++ " vs " ++ selfBackgroundColor))

25+ Expect.true ("Expected color: " ++ (Testable.formatColor clr ++ " vs found:" ++ selfBackgroundColor))

2626 (Testable.compareFormattedColor clr selfBackgroundColor)

2727 }

tests/src/Testable/Runner.elm+17−2

@@ -141,6 +141,7 @@ type Msg

141141 (List

142142 { id : String

143143 , bbox : Testable.BoundingBox

144+ , isVisible : Bool

144145 , style : List ( String, String )

145146 }

146147 )

@@ -180,7 +181,12 @@ update msg model =

180181 Just ( label, current ) ->

181182 let

182183 toTuple box =

183− ( box.id, { style = Dict.fromList box.style, bbox = box.bbox } )

184+ ( box.id

185+ , { style = Dict.fromList box.style

186+ , bbox = box.bbox

187+ , isVisible = box.isVisible

188+ }

189+ )

184190

185191 foundData =

186192 boxes

@@ -443,4 +449,13 @@ port test : String -> Cmd msg

443449port analyze : List String -> Cmd msg

444450

445451

446−port styles : (List { id : String, bbox : Testable.BoundingBox, style : List ( String, String ) } -> msg) -> Sub msg

452+port styles :

453+ (List

454+ { id : String

455+ , bbox : Testable.BoundingBox

456+ , style : List ( String, String )

457+ , isVisible : Bool

458+ }

459+ -> msg

460+ )

461+ -> Sub msg