From b8567450367e15ab99246687f5369f653c839a78 Mon Sep 17 00:00:00 2001 From: Nick Saunders Date: Thu, 10 Feb 2022 17:20:27 -0700 Subject: [PATCH] Add outline and constituent properties. (Resolves #84, #85, #144.) --- .github/workflows/ci.yml | 2 +- CHANGELOG.md | 1 + spago.dhall | 3 +- src/CSS.purs | 2 +- src/CSS/Border.purs | 75 ++++++++++++++++++++++++- src/CSS/Size.purs | 12 +++- test.dhall | 6 ++ test/CSS/BorderSpec.purs | 86 ++++++++++++++++++++++++++++ test/Common.purs | 35 ++++++++++++ test/Main.purs | 118 ++++++++++++++++++++++++--------------- 10 files changed, 286 insertions(+), 54 deletions(-) create mode 100644 test.dhall create mode 100644 test/CSS/BorderSpec.purs create mode 100644 test/Common.purs diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ef2046b..1892bf5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -33,7 +33,7 @@ jobs: run: spago build --no-install --purs-args '--censor-lib --strict' - name: Run tests - run: spago test --no-install + run: spago -x test.dhall test - name: Check formatting run: purs-tidy check src test diff --git a/CHANGELOG.md b/CHANGELOG.md index 26e62d4..8752f69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ Breaking changes: - Add support for `calc` expressions (#140 by @nsaunders) - Add table selector (#141 by @plurip-software) - Update the box-shadow implementation (#88 by @vyorkin) +- Add outline and constituent properties (#145 by @nsaunders) New features: - Add smart constructors for generic font families (#68, #136 by @Unisay and @JordanMartinez) diff --git a/spago.dhall b/spago.dhall index 12949c4..432b1cc 100644 --- a/spago.dhall +++ b/spago.dhall @@ -5,7 +5,6 @@ , "console" , "effect" , "either" - , "exceptions" , "exists" , "foldable-traversable" , "maybe" @@ -19,5 +18,5 @@ , "tuples" ] , packages = ./packages.dhall -, sources = [ "src/**/*.purs", "test/**/*.purs" ] +, sources = [ "src/**/*.purs" ] } diff --git a/src/CSS.purs b/src/CSS.purs index 6e9557c..7ba3020 100644 --- a/src/CSS.purs +++ b/src/CSS.purs @@ -2,7 +2,7 @@ module CSS (module X) where import CSS.Animation (AnimationDirection(..), AnimationName(..), FillMode(..), IterationCount(..), alternate, alternateReverse, animation, backwards, forwards, infinite, iterationCount, normalAnimationDirection, reverse) as X import CSS.Background (class Background, class Loc, BackgroundAttachment, BackgroundClip, BackgroundImage, BackgroundOrigin, BackgroundPosition, BackgroundRepeat, BackgroundSize, Direction, Location, Side, angular, attachFixed, attachScroll, background, backgroundAttachment, backgroundAttachments, backgroundClip, backgroundClips, backgroundColor, backgroundImage, backgroundImages, backgroundOrigin, backgroundOrigins, backgroundPosition, backgroundPositions, backgroundRepeat, backgroundRepeats, backgroundSize, backgroundSizes, boxClip, by, contain, cover, location, noRepeat, origin, placed, positioned, repeat, repeatX, repeatY, round, sideBottom, sideCenter, sideLeft, sideMiddle, sideRight, sideTop, space, straight, url, xyRepeat) as X -import CSS.Border (Stroke(..), border, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderSpacing, borderTop, dashed, dotted, double, groove, inset, outset, ridge, solid, wavy) as X +import CSS.Border (Stroke(..), border, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderSpacing, borderTop, dashed, dotted, double, groove, inset, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, outset, ridge, solid, wavy) as X import CSS.Box (BoxType, BoxShadow, borderBox, boxShadow, boxSizing, contentBox, paddingBox) as X import CSS.Color (Color, ColorSpace(..), aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brightness, brown, burlywood, cadetblue, chartreuse, chocolate, complementary, contrast, coral, cornflowerblue, cornsilk, crimson, cssStringHSLA, cssStringRGBA, cyan, darkblue, darkcyan, darken, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, desaturate, dimgray, dimgrey, distance, dodgerblue, firebrick, floralwhite, forestgreen, fromHexString, fromInt, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, graytone, green, greenyellow, grey, honeydew, hotpink, hsl, hsla, indianred, indigo, isLight, isReadable, ivory, khaki, lab, lavender, lavenderblush, lawngreen, lch, lemonchiffon, lightblue, lightcoral, lightcyan, lighten, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, luminance, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, mix, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rgb, rgb', rgba, rgba', rosybrown, rotateHue, royalblue, saddlebrown, salmon, sandybrown, saturate, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, textColor, thistle, toGray, toHSLA, toHexString, toLCh, toLab, toRGBA, toRGBA', toXYZ, tomato, turquoise, violet, wheat, white, whitesmoke, xyz, yellow, yellowgreen) as X import CSS.Display (ClearFloat(..), Display(..), Float(..), Position(..), absolute, block, clear, clearBoth, clearInlineEnd, clearInlineStart, clearLeft, clearRight, display, displayInherit, displayNone, fixed, flex, float, floatLeft, floatRight, grid, inline, inlineBlock, inlineFlex, inlineGrid, inlineTable, listItem, position, relative, runIn, static, displayTable, tableCaption, tableCell, tableColumn, tableColumnGroup, tableFooterGroup, tableHeaderGroup, tableRow, tableRowGroup, zIndex, opacity) as X diff --git a/src/CSS/Border.purs b/src/CSS/Border.purs index 0c29c7d..689682b 100644 --- a/src/CSS/Border.purs +++ b/src/CSS/Border.purs @@ -1,11 +1,49 @@ -module CSS.Border where +module CSS.Border + ( + -- * Stroke type, used for border-style and outline-style. + Stroke(..) + , solid + , dotted + , dashed + , double + , wavy + , groove + , ridge + , inset + , outset + + -- * Border properties. + + , border + , borderTop + , borderLeft + , borderBottom + , borderRight + , borderColor + + -- * Outline properties. + + , outline + , outlineColor + , outlineStyle + , outlineWidth + , outlineOffset + + -- * Border radius. + + , borderRadius + + -- * Collapsing borders model for a table + , borderSpacing + ) where import Prelude import CSS.Color (Color) -import CSS.Property (class Val, Value) +import CSS.Common (class Inherit, class Initial, class Unset) +import CSS.Property (class Val, Value, (!)) import CSS.Size (Size, LengthUnit) -import CSS.String (fromString) +import CSS.String (class IsString, fromString) import CSS.Stylesheet (CSS, key) import Data.Tuple (Tuple(..)) @@ -14,9 +52,21 @@ newtype Stroke = Stroke Value derive instance eqStroke :: Eq Stroke derive instance ordStroke :: Ord Stroke +instance isStringStroke :: IsString Stroke where + fromString = Stroke <<< fromString + instance valStroke :: Val Stroke where value (Stroke v) = v +instance inheritStroke :: Inherit Stroke where + inherit = fromString "inherit" + +instance initialStroke :: Initial Stroke where + initial = fromString "initial" + +instance unsetStroke :: Unset Stroke where + unset = fromString "unset" + solid :: Stroke solid = Stroke $ fromString "solid" @@ -62,6 +112,25 @@ borderRight a b c = key (fromString "border-right") (Tuple a (Tuple b c)) borderColor :: Color -> CSS borderColor = key $ fromString "border-color" +------------------------------------------------------------------------------- + +outline :: Stroke -> Size LengthUnit -> Color -> CSS +outline a b c = key (fromString "outline") (a ! b ! c) + +outlineColor :: Color -> CSS +outlineColor = key (fromString "outline-color") + +outlineStyle :: Stroke -> CSS +outlineStyle = key (fromString "outline-style") + +outlineWidth :: Size LengthUnit -> CSS +outlineWidth = key (fromString "outline-width") + +outlineOffset :: Size LengthUnit -> CSS +outlineOffset = key (fromString "outline-offset") + +------------------------------------------------------------------------------- + borderRadius :: forall a. Size a -> Size a -> Size a -> Size a -> CSS borderRadius a b c d = key (fromString "border-radius") (Tuple (Tuple a b) (Tuple c d)) diff --git a/src/CSS/Size.purs b/src/CSS/Size.purs index a4aa20b..0c0845a 100644 --- a/src/CSS/Size.purs +++ b/src/CSS/Size.purs @@ -1,7 +1,8 @@ module CSS.Size where import Prelude -import CSS.Common (class Auto, browsers) + +import CSS.Common (class Auto, class Inherit, class Initial, class Unset, browsers) import CSS.Property (class Val, Prefixed(Plain), Value(..), plain, value) import CSS.String (class IsString, fromString) import Data.Exists (Exists, mkExists, runExists) @@ -39,6 +40,15 @@ instance valSize :: Val (Size a) where instance autoSize :: Auto (Size a) where auto = fromString "auto" +instance inheritSize :: Inherit (Size a) where + inherit = fromString "inherit" + +instance initialSize :: Initial (Size a) where + initial = fromString "initial" + +instance unsetSize :: Unset (Size a) where + unset = fromString "unset" + -- | Zero size. nil :: forall a. Size a nil = BasicSize $ fromString "0" diff --git a/test.dhall b/test.dhall new file mode 100644 index 0000000..4e5f143 --- /dev/null +++ b/test.dhall @@ -0,0 +1,6 @@ +let conf = ./spago.dhall + +in conf // { + sources = conf.sources # ["test/**/*.purs"], + dependencies = conf.dependencies # ["aff", "control", "exceptions", "partial", "spec"] +} diff --git a/test/CSS/BorderSpec.purs b/test/CSS/BorderSpec.purs new file mode 100644 index 0000000..af04586 --- /dev/null +++ b/test/CSS/BorderSpec.purs @@ -0,0 +1,86 @@ +module CSS.BorderSpec where + +import Prelude + +import CSS.Border (dashed, dotted, double, groove, inset, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, ridge, solid) +import CSS.Color (green) +import CSS.Color as Color +import CSS.Common (inherit, initial, unset) +import CSS.Size (em, px) +import Common (shouldRenderFrom) +import Data.Maybe (fromJust) +import Data.Traversable (traverse_) +import Data.Tuple.Nested ((/\)) +import Partial.Unsafe (unsafePartial) +import Test.Spec (Spec, describe) + +spec :: Spec Unit +spec = do + + describe "outline (Mozilla examples)" $ + "outline: solid 3.0px hsl(120.0, 100.0%, 25.1%)" `shouldRenderFrom` outline solid (px 3.0) green + + describe "outline-style (Mozilla examples)" do + let testOutlineStyle (s /\ v) = ("outline-style: " <> s) `shouldRenderFrom` outlineStyle v + describe "Keyword values" $ + traverse_ + testOutlineStyle + [ "dotted" /\ dotted + , "dashed" /\ dashed + , "solid" /\ solid + , "double" /\ double + , "groove" /\ groove + , "ridge" /\ ridge + , "inset" /\ inset + ] + describe "Global values" $ + traverse_ + testOutlineStyle + [ "inherit" /\ inherit + , "initial" /\ initial + , "unset" /\ unset + ] + + describe "outline-color (Mozilla examples)" $ + let + testOutlineColor (s /\ v) = ("outline-color: " <> s) `shouldRenderFrom` outlineColor v + in + describe " values" $ + traverse_ + testOutlineColor + [ "hsl(0.0, 94.64%, 56.08%)" /\ (unsafePartial $ fromJust $ Color.fromHexString "#f92525") + , "hsl(148.44, 76.19%, 49.41%)" /\ Color.rgb 30 222 121 + , "hsl(240.0, 100.0%, 50.0%)" /\ Color.blue + ] + + describe "outline-width (Mozilla examples)" do + let testOutlineWidth (s /\ v) = ("outline-width: " <> s) `shouldRenderFrom` outlineWidth v + describe " values" $ + traverse_ + testOutlineWidth + [ "1.0px" /\ px 1.0 + , "0.1em" /\ em 0.1 + ] + describe "Global values" $ + traverse_ + testOutlineWidth + [ "inherit" /\ inherit + , "initial" /\ initial + , "unset" /\ unset + ] + + describe "outline-offset (Mozilla examples)" do + let testOutlineOffset (s /\ v) = ("outline-offset: " <> s) `shouldRenderFrom` outlineOffset v + describe " values" $ + traverse_ + testOutlineOffset + [ "3.0px" /\ px 3.0 + , "0.2em" /\ em 0.2 + ] + describe "Global values" $ + traverse_ + testOutlineOffset + [ "inherit" /\ inherit + , "initial" /\ initial + , "unset" /\ unset + ] diff --git a/test/Common.purs b/test/Common.purs new file mode 100644 index 0000000..7abf0b8 --- /dev/null +++ b/test/Common.purs @@ -0,0 +1,35 @@ +module Common where + +import Prelude + +import CSS (renderedInline) +import CSS.Render (render, renderedSheet) +import CSS.Stylesheet (CSS) +import Control.Alt ((<|>)) +import Control.Monad.Error.Class (class MonadThrow) +import Effect.Exception (Error) +import Test.Spec (SpecT, it) +import Test.Spec.Assertions (shouldEqual) + +shouldRenderFrom + :: forall g m + . Monad m + => MonadThrow Error g + => String + -> CSS + -> SpecT g Unit m Unit +shouldRenderFrom expected given = + it ("renders " <> expected) $ expected `shouldRenderItFrom` given + +shouldRenderItFrom + :: forall m + . MonadThrow Error m + => String + -> CSS + -> m Unit +shouldRenderItFrom expected given = + let + r = render given + actual = renderedInline r <|> renderedSheet r + in + actual `shouldEqual` pure expected diff --git a/test/Main.purs b/test/Main.purs index 8ed7a61..55c4d93 100644 --- a/test/Main.purs +++ b/test/Main.purs @@ -2,9 +2,8 @@ module Test.Main where import Prelude -import Effect (Effect) -import Effect.Exception (error, throwException) import CSS (Rendered, Path(..), Predicate(..), Refinement(..), Selector(..), FontFaceSrc(..), FontFaceFormat(..), pct, renderedSheet, renderedInline, fromString, selector, block, display, render, borderBox, boxSizing, contentBox, blue, color, body, a, p, px, dashed, border, inlineBlock, red, gold, teal, olive, black, (?), (&), (|>), (|*), (|+), byId, byClass, (@=), (^=), ($=), (*=), (~=), (|=), hover, fontFaceSrc, fontStyle, deg, rgba, zIndex, textOverflow, opacity, cursor, transform, transition, easeInOut, cubicBezier, ms, direction, width, em, (@+@), (@-@), (@*), (*@), (@/)) +import CSS.BorderSpec as BorderSpec import CSS.Cursor as Cursor import CSS.Flexbox (flex) import CSS.FontStyle as FontStyle @@ -13,8 +12,17 @@ import CSS.Text.Overflow as TextOverflow import CSS.Transform as Transform import CSS.Common (none) import CSS.Box (boxShadow, shadow, shadowWithBlur, shadowWithSpread, bsColor, bsInset) +import Control.Monad.RWS (modify_) +import Control.Monad.State (StateT, execStateT) import Data.Maybe (Maybe(..)) import Data.NonEmpty (singleton, (:|)) +import Effect (Effect) +import Effect.Aff (launchAff_) +import Effect.Class (liftEffect) +import Effect.Class.Console (log) +import Effect.Exception (error, throwException) +import Test.Spec.Reporter (consoleReporter) +import Test.Spec.Runner (runSpec) example1 :: Rendered example1 = render do @@ -200,69 +208,87 @@ calc3 :: Rendered calc3 = render do width $ 5.0 *@ (pct (-20.0) @-@ px 10.0) -assertEqual :: forall a. Eq a => Show a => a -> a -> Effect Unit -assertEqual x y = unless (x == y) <<< throwException <<< error $ "Assertion failed: " <> show x <> " /= " <> show y +assertEqual + :: forall a + . Eq a + => Show a + => a + -> a + -> StateT Int Effect Unit +assertEqual x y = do + liftEffect $ unless (x == y) <<< throwException <<< error $ "Assertion failed: " <> show x <> " /= " <> show y + modify_ (_ + 1) main :: Effect Unit main = do - renderedInline example1 `assertEqual` Just "color: hsl(0.0, 100.0%, 50.0%); display: block" - renderedInline example2 `assertEqual` Just "display: inline-block" - renderedInline example3 `assertEqual` Just "border: dashed 2.0px hsl(240.0, 100.0%, 50.0%)" + count <- flip execStateT 0 do + renderedInline example1 `assertEqual` Just "color: hsl(0.0, 100.0%, 50.0%); display: block" + renderedInline example2 `assertEqual` Just "display: inline-block" + renderedInline example3 `assertEqual` Just "border: dashed 2.0px hsl(240.0, 100.0%, 50.0%)" + + selector (Selector (Refinement [ Id "test" ]) Star) `assertEqual` "#test" + + selector (fromString "#test") `assertEqual` "#test" + + renderedSheet example4 `assertEqual` Just "body { color: hsl(240.0, 100.0%, 50.0%) }\n#world { display: block }\n" - selector (Selector (Refinement [ Id "test" ]) Star) `assertEqual` "#test" + renderedInline example5 `assertEqual` Just "box-sizing: content-box; box-sizing: border-box" - selector (fromString "#test") `assertEqual` "#test" + renderedSheet withSelector `assertEqual` Just "a { color: hsl(240.0, 100.0%, 50.0%) }\na:hover { color: hsl(0.0, 100.0%, 50.0%) }\n" + renderedSheet childSelector `assertEqual` Just "p > a { z-index: 9 }\n" + renderedSheet deepSelector `assertEqual` Just "p a { display: block }\n" + renderedSheet adjacentSelector `assertEqual` Just "a + a { display: inline-block }\n" - renderedSheet example4 `assertEqual` Just "body { color: hsl(240.0, 100.0%, 50.0%) }\n#world { display: block }\n" + renderedSheet nestedNodes `assertEqual` Just "#parent { display: block }\n#parent #child { display: block }\n" - renderedInline example5 `assertEqual` Just "box-sizing: content-box; box-sizing: border-box" + renderedSheet nestedNodesWithEmptyParent `assertEqual` Just "#parent #child { display: block }\n" - renderedSheet withSelector `assertEqual` Just "a { color: hsl(240.0, 100.0%, 50.0%) }\na:hover { color: hsl(0.0, 100.0%, 50.0%) }\n" - renderedSheet childSelector `assertEqual` Just "p > a { z-index: 9 }\n" - renderedSheet deepSelector `assertEqual` Just "p a { display: block }\n" - renderedSheet adjacentSelector `assertEqual` Just "a + a { display: inline-block }\n" + renderedInline example6 `assertEqual` Just "src: url(\"font.woff\") format(\"woff\")" - renderedSheet nestedNodes `assertEqual` Just "#parent { display: block }\n#parent #child { display: block }\n" + renderedInline example7 `assertEqual` Just "z-index: 11; opacity: 0.5" - renderedSheet nestedNodesWithEmptyParent `assertEqual` Just "#parent #child { display: block }\n" + renderedInline example8 `assertEqual` Just "flex: 0.14 1.0 0.0%" - renderedInline example6 `assertEqual` Just "src: url(\"font.woff\") format(\"woff\")" + renderedInline exampleFontStyle1 `assertEqual` Just "font-style: italic" + renderedInline exampleFontStyle2 `assertEqual` Just "font-style: oblique" + renderedInline exampleFontStyle3 `assertEqual` Just "font-style: oblique 45.0deg" - renderedInline example7 `assertEqual` Just "z-index: 11; opacity: 0.5" + renderedInline exampleTextOverflow1 `assertEqual` Just "text-overflow: ellipsis" + renderedInline exampleTextOverflow2 `assertEqual` Just "text-overflow: \"foobar\"" - renderedInline example8 `assertEqual` Just "flex: 0.14 1.0 0.0%" + renderedSheet byClassById `assertEqual` Just "a.bar { color: hsl(0.0, 100.0%, 50.0%) }\np#foo { display: block }\n" + renderedSheet attrVal `assertEqual` Just "p[foo='bar'] { display: block }\n" + renderedSheet attrBegins `assertEqual` Just "p[foo^='bar'] { display: block }\n" + renderedSheet attrEnds `assertEqual` Just "p[foo$='bar'] { display: block }\n" + renderedSheet attrContains `assertEqual` Just "p[foo*='bar'] { display: block }\n" + renderedSheet attrSpace `assertEqual` Just "p[foo~='bar'] { display: block }\n" + renderedSheet attrHyph `assertEqual` Just "p[foo|='bar'] { display: block }\n" - renderedInline exampleFontStyle1 `assertEqual` Just "font-style: italic" - renderedInline exampleFontStyle2 `assertEqual` Just "font-style: oblique" - renderedInline exampleFontStyle3 `assertEqual` Just "font-style: oblique 45.0deg" + renderedInline exampleDirection `assertEqual` Just "direction: rtl" - renderedInline exampleTextOverflow1 `assertEqual` Just "text-overflow: ellipsis" - renderedInline exampleTextOverflow2 `assertEqual` Just "text-overflow: \"foobar\"" + renderedInline exampleCursor `assertEqual` Just "cursor: not-allowed" - renderedSheet byClassById `assertEqual` Just "a.bar { color: hsl(0.0, 100.0%, 50.0%) }\np#foo { display: block }\n" - renderedSheet attrVal `assertEqual` Just "p[foo='bar'] { display: block }\n" - renderedSheet attrBegins `assertEqual` Just "p[foo^='bar'] { display: block }\n" - renderedSheet attrEnds `assertEqual` Just "p[foo$='bar'] { display: block }\n" - renderedSheet attrContains `assertEqual` Just "p[foo*='bar'] { display: block }\n" - renderedSheet attrSpace `assertEqual` Just "p[foo~='bar'] { display: block }\n" - renderedSheet attrHyph `assertEqual` Just "p[foo|='bar'] { display: block }\n" + renderedInline scaleTransform1 `assertEqual` Just "transform: scaleX(1.0); transform: scaleY(0.5); transform: scaleZ(0.5)" + renderedInline scaleTransform2 `assertEqual` Just "transform: scale(0.2, 0.8)" - renderedInline exampleDirection `assertEqual` Just "direction: rtl" + renderedInline transition1 `assertEqual` Just "-webkit-transition: background-color 1.0ms ease-in-out 0.0ms; -moz-transition: background-color 1.0ms ease-in-out 0.0ms; -ms-transition: background-color 1.0ms ease-in-out 0.0ms; -o-transition: background-color 1.0ms ease-in-out 0.0ms; transition: background-color 1.0ms ease-in-out 0.0ms" + renderedInline transition2 `assertEqual` Just "-webkit-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; -moz-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; -ms-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; -o-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms" - renderedInline exampleCursor `assertEqual` Just "cursor: not-allowed" + renderedInline calc1 `assertEqual` Just "width: -webkit-calc((2.0em / 3.0) + 1.0px); width: -moz-calc((2.0em / 3.0) + 1.0px); width: -ms-calc((2.0em / 3.0) + 1.0px); width: -o-calc((2.0em / 3.0) + 1.0px); width: calc((2.0em / 3.0) + 1.0px)" + renderedInline calc2 `assertEqual` Just "width: -webkit-calc(4.0 * (100.0% / 7.0)); width: -moz-calc(4.0 * (100.0% / 7.0)); width: -ms-calc(4.0 * (100.0% / 7.0)); width: -o-calc(4.0 * (100.0% / 7.0)); width: calc(4.0 * (100.0% / 7.0))" + renderedInline calc3 `assertEqual` Just "width: -webkit-calc(5.0 * (-20.0% - 10.0px)); width: -moz-calc(5.0 * (-20.0% - 10.0px)); width: -ms-calc(5.0 * (-20.0% - 10.0px)); width: -o-calc(5.0 * (-20.0% - 10.0px)); width: calc(5.0 * (-20.0% - 10.0px))" - renderedInline scaleTransform1 `assertEqual` Just "transform: scaleX(1.0); transform: scaleY(0.5); transform: scaleZ(0.5)" - renderedInline scaleTransform2 `assertEqual` Just "transform: scale(0.2, 0.8)" + renderedInline calc1 `assertEqual` Just "width: -webkit-calc((2.0em / 3.0) + 1.0px); width: -moz-calc((2.0em / 3.0) + 1.0px); width: -ms-calc((2.0em / 3.0) + 1.0px); width: -o-calc((2.0em / 3.0) + 1.0px); width: calc((2.0em / 3.0) + 1.0px)" + renderedInline calc2 `assertEqual` Just "width: -webkit-calc(4.0 * (100.0% / 7.0)); width: -moz-calc(4.0 * (100.0% / 7.0)); width: -ms-calc(4.0 * (100.0% / 7.0)); width: -o-calc(4.0 * (100.0% / 7.0)); width: calc(4.0 * (100.0% / 7.0))" + renderedInline calc3 `assertEqual` Just "width: -webkit-calc(5.0 * (-20.0% - 10.0px)); width: -moz-calc(5.0 * (-20.0% - 10.0px)); width: -ms-calc(5.0 * (-20.0% - 10.0px)); width: -o-calc(5.0 * (-20.0% - 10.0px)); width: calc(5.0 * (-20.0% - 10.0px))" - renderedInline transition1 `assertEqual` Just "-webkit-transition: background-color 1.0ms ease-in-out 0.0ms; -moz-transition: background-color 1.0ms ease-in-out 0.0ms; -ms-transition: background-color 1.0ms ease-in-out 0.0ms; -o-transition: background-color 1.0ms ease-in-out 0.0ms; transition: background-color 1.0ms ease-in-out 0.0ms" - renderedInline transition2 `assertEqual` Just "-webkit-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; -moz-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; -ms-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; -o-transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms; transition: background-color 1.0ms cubic-bezier(0.3, 0.3, 0.7, 1.4) 0.0ms" + renderedInline noneShadow `assertEqual` Just "-webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none" + renderedInline singleShadow `assertEqual` Just "-webkit-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -moz-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -ms-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -o-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%)" + renderedInline singleShadowWithBlur `assertEqual` Just "-webkit-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -moz-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -ms-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -o-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%)" + renderedInline singleShadowWithSpread `assertEqual` Just "-webkit-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -moz-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -ms-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -o-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2)" + renderedInline multipleShadows `assertEqual` Just "-webkit-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -moz-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -ms-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -o-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%)" - renderedInline calc1 `assertEqual` Just "width: -webkit-calc((2.0em / 3.0) + 1.0px); width: -moz-calc((2.0em / 3.0) + 1.0px); width: -ms-calc((2.0em / 3.0) + 1.0px); width: -o-calc((2.0em / 3.0) + 1.0px); width: calc((2.0em / 3.0) + 1.0px)" - renderedInline calc2 `assertEqual` Just "width: -webkit-calc(4.0 * (100.0% / 7.0)); width: -moz-calc(4.0 * (100.0% / 7.0)); width: -ms-calc(4.0 * (100.0% / 7.0)); width: -o-calc(4.0 * (100.0% / 7.0)); width: calc(4.0 * (100.0% / 7.0))" - renderedInline calc3 `assertEqual` Just "width: -webkit-calc(5.0 * (-20.0% - 10.0px)); width: -moz-calc(5.0 * (-20.0% - 10.0px)); width: -ms-calc(5.0 * (-20.0% - 10.0px)); width: -o-calc(5.0 * (-20.0% - 10.0px)); width: calc(5.0 * (-20.0% - 10.0px))" + log $ "\x1b[32m" <> show count <> " test" <> if count == 1 then "" else "s" <> " passed. These will be migrated to the new format in the future.\x1b[0m\n" - renderedInline noneShadow `assertEqual` Just "-webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none" - renderedInline singleShadow `assertEqual` Just "-webkit-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -moz-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -ms-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); -o-box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%); box-shadow: 60.0px -16.0px hsl(180.0, 100.0%, 25.1%)" - renderedInline singleShadowWithBlur `assertEqual` Just "-webkit-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -moz-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -ms-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); -o-box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%); box-shadow: 10.0px 5.0px 5.0px hsl(0.0, 0.0%, 0.0%)" - renderedInline singleShadowWithSpread `assertEqual` Just "-webkit-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -moz-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -ms-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); -o-box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2); box-shadow: 2.0px 2.0px 2.0px 1.0px hsla(0.0, 0.0%, 0.0%, 0.2)" - renderedInline multipleShadows `assertEqual` Just "-webkit-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -moz-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -ms-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); -o-box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%); box-shadow: 3.0px 3.0px hsl(0.0, 100.0%, 50.0%), -1.0em 0.0em 0.4em hsl(60.0, 100.0%, 25.1%)" + launchAff_ $ + runSpec [ consoleReporter ] BorderSpec.spec