jest.setTimeout(50000);
const isDom2 = process.env.UNI_APP_X_DOM2 === "true"
const platformInfo = (process.env.uniTestPlatformInfo || '').toLocaleLowerCase()
const isHarmony = platformInfo.includes('harmony')
const isMP = platformInfo.startsWith('mp')
const isWeb = platformInfo.startsWith('web')
const currentPlatform = isWeb ? 'web' : (isMP ? 'mp' : 'app')
const currentMode = isDom2 ? 'dom2' : `dom1-${currentPlatform}`
describe('set css', () => {
if (isMP) {
it('skip', () => {
expect(1).toBe(1)
})
return
}
const TEST_OVERRIDE = null
const sharedCssTests = [
{
path: "/pages/CSS/layout/width",
method: "radioChangeWidth",
valueIndex: 3,
styleName: "width",
expectedValue: {
width: "50px",
widthActual: "50px",
widthActualText: "50px",
widthActualImage: "50px",
widthActualFlat: "50px",
widthActualTextFlat: "50px",
widthActualImageFlat: "50px"
}
},
{
path: "/pages/CSS/layout/min-width",
method: "radioChangeMinWidth",
valueIndex: 4,
styleName: "min-width",
expectedValue: {
minWidth: "120px",
minWidthActual: "120px",
minWidthActualText: "120px",
minWidthActualImage: "120px",
minWidthActualFlat: "120px",
minWidthActualTextFlat: "120px",
minWidthActualImageFlat: "120px"
}
},
{
path: "/pages/CSS/layout/max-width",
method: "radioChangeMaxWidth",
valueIndex: 4,
styleName: "max-width",
expectedValue: {
maxWidth: "120px",
maxWidthActual: "120px",
maxWidthActualText: "120px",
maxWidthActualImage: "120px",
maxWidthActualFlat: "120px",
maxWidthActualTextFlat: "120px",
maxWidthActualImageFlat: "120px"
}
},
{
path: "/pages/CSS/layout/height",
method: "radioChangeHeight",
valueIndex: 4,
styleName: "height",
expectedValue: {
height: "150px",
heightActual: "150px",
heightActualText: "150px",
heightActualImage: "150px",
heightActualFlat: "150px",
heightActualTextFlat: "150px",
heightActualImageFlat: "150px"
}
},
{
path: "/pages/CSS/layout/min-height",
method: "radioChangeMinHeight",
valueIndex: 3,
styleName: "min-height",
expectedValue: {
minHeight: "50px",
minHeightActual: "50px",
minHeightActualText: "50px",
minHeightActualImage: "50px",
minHeightActualFlat: "50px",
minHeightActualTextFlat: "50px",
minHeightActualImageFlat: "50px"
}
},
{
path: "/pages/CSS/layout/max-height",
method: "radioChangeMaxHeight",
valueIndex: 3,
styleName: "max-height",
expectedValue: {
maxHeight: "100px",
maxHeightActual: "100px",
maxHeightActualText: "100px",
maxHeightActualImage: "100px",
maxHeightActualFlat: "100px",
maxHeightActualTextFlat: "100px",
maxHeightActualImageFlat: "100px"
}
},
{
path: "/pages/CSS/layout/visibility",
method: "radioChangeVisibility",
valueIndex: 2,
styleName: "visibility",
expectedValue: {
visibility: "visible",
visibilityActual: "hidden",
visibilityActualText: "hidden",
visibilityActualImage: "hidden"
}
},
{
path: "/pages/CSS/layout/top",
method: "radioChangeTop",
valueIndex: 3,
styleName: "top",
expectedValue: {
top: "10px",
topActual: "10px",
topActualText: "10px",
topActualImage: "10px",
topActualFlat: "10px",
topActualTextFlat: "10px",
topActualImageFlat: "10px"
}
},
{
path: "/pages/CSS/layout/bottom",
method: "radioChangeBottom",
valueIndex: 3,
styleName: "bottom",
expectedValue: {
bottom: "10px",
bottomActual: "10px",
bottomActualText: "10px",
bottomActualImage: "10px",
bottomActualFlat: "10px",
bottomActualTextFlat: "10px",
bottomActualImageFlat: "10px"
}
},
{
path: "/pages/CSS/layout/left",
method: "radioChangeLeft",
valueIndex: 3,
styleName: "left",
expectedValue: {
left: "10px",
leftActual: "10px",
leftActualText: "10px",
leftActualImage: "10px",
leftActualFlat: "10px",
leftActualTextFlat: "10px",
leftActualImageFlat: "10px"
}
},
{
path: "/pages/CSS/layout/right",
method: "radioChangeRight",
valueIndex: 3,
styleName: "right",
expectedValue: {
right: "20px",
rightActual: "20px",
rightActualText: "20px",
rightActualImage: "20px",
rightActualFlat: "20px",
rightActualTextFlat: "20px",
rightActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/layout/position",
method: "radioChangePosition",
valueIndex: 2,
styleName: "position",
expectedValue: {
position: "relative",
positionActual: "relative",
positionActualText: "relative",
positionActualImage: "relative"
}
},
{
path: "/pages/CSS/border/border-style",
method: "radioChangeBorderStyle",
valueIndex: 2,
styleName: "border-style",
expectedValue: {
borderStyleValue: "solid",
borderStyleActual: "solid",
borderStyleActualText: "solid",
borderStyleActualImage: "solid",
borderStyleActualFlat: "solid",
borderStyleActualTextFlat: "solid",
borderStyleActualImageFlat: "solid"
}
},
{
path: "/pages/CSS/border/border-width",
method: "radioChangeBorderWidth",
valueIndex: 3,
styleName: "border-width",
expectedValue: {
borderWidth: "3px",
borderWidthActual: "3px",
borderWidthActualText: "3px",
borderWidthActualImage: "3px",
borderWidthActualFlat: "3px",
borderWidthActualTextFlat: "3px",
borderWidthActualImageFlat: "3px"
}
},
{
path: "/pages/CSS/box-sizing/box-sizing",
method: "radioChangeBoxSizing",
valueIndex: 2,
styleName: "box-sizing",
expectedValue: {
boxSizing: "border-box",
boxSizingActual: "border-box",
boxSizingActualText: "border-box",
boxSizingActualImage: "border-box",
boxSizingActualFlat: "border-box",
boxSizingActualTextFlat: "border-box",
boxSizingActualImageFlat: "border-box"
}
},
{
path: "/pages/CSS/display/flex",
method: "radioChangeDisplay",
valueIndex: 1,
styleName: "display",
expectedValue: {
displayActual: "flex",
displayActualText: "flex",
displayActualImage: "flex"
}
},
{
path: "/pages/CSS/display/none",
method: "radioChangeDisplay",
valueIndex: 2,
styleName: "display",
expectedValue: {
displayActual: "none",
displayActualText: "none",
displayActualImage: "none"
}
},
{
path: "/pages/CSS/flex/flex-direction",
method: "radioChangeFlexDirection",
valueIndex: 2,
styleName: "flex-direction",
expectedValue: {
flexDirection: "row-reverse",
flexDirectionActual: "row-reverse",
flexDirectionActualFlat: "row-reverse"
}
},
{
path: "/pages/CSS/flex/justify-content",
method: "radioChangeJustifyContent",
valueIndex: 3,
styleName: "justify-content",
expectedValue: {
justifyContent: "center",
justifyContentActual: "center",
justifyContentActualFlat: "center"
}
},
{
path: "/pages/CSS/flex/align-content",
method: "radioChangeAlignContent",
valueIndex: 3,
styleName: "align-content",
expectedValue: {
alignContent: "center",
alignContentActual: "center",
alignContentActualFlat: "center"
}
},
{
path: "/pages/CSS/flex/align-items",
method: "radioChangeAlignItems",
valueIndex: 3,
styleName: "align-items",
expectedValue: {
alignItems: "center",
alignItemsActual: "center",
alignItemsActualFlat: "center"
}
},
{
path: "/pages/CSS/flex/flex-basis",
method: "radioChangeFlexBasis",
valueIndex: 3,
styleName: "flex-basis",
expectedValue: {
flexBasis: "50px",
flexBasisActual: "50px",
flexBasisActualFlat: "50px",
flexBasisActualText: "50px",
flexBasisActualImage: "50px",
flexBasisActualTextFlat: "50px",
flexBasisActualImageFlat: "50px"
}
},
{
path: "/pages/CSS/flex/flex-grow",
method: "radioChangeFlexGrow",
valueIndex: 3,
styleName: "flex-grow",
expectedValue: {
flexGrow: "1",
flexGrowActual: "1",
flexGrowActualFlat: "1",
flexGrowActualText: "1",
flexGrowActualImage: "1",
flexGrowActualTextFlat: "1",
flexGrowActualImageFlat: "1"
}
},
{
path: "/pages/CSS/flex/flex-shrink",
method: "radioChangeFlexShrink",
valueIndex: 2,
styleName: "flex-shrink",
expectedValue: {
flexShrink: "1",
flexShrinkActual: "1",
flexShrinkActualFlat: "1",
flexShrinkActualText: "1",
flexShrinkActualImage: "1",
flexShrinkActualTextFlat: "1",
flexShrinkActualImageFlat: "1"
}
},
{
path: "/pages/CSS/flex/align-self",
method: "radioChangeAlignSelf",
valueIndex: 2,
styleName: "align-self",
expectedValue: {
alignSelf: "center",
alignSelfActual: "center",
alignSelfActualText: "center",
alignSelfActualImage: "center",
alignSelfActualFlat: "center",
alignSelfActualTextFlat: "center",
alignSelfActualImageFlat: "center"
}
},
{
path: "/pages/CSS/flex/flex-wrap",
method: "radioChangeFlexWrap",
valueIndex: 2,
styleName: "flex-wrap",
expectedValue: {
flexWrap: "wrap",
flexWrapActual: "wrap",
flexWrapActualFlat: "wrap"
}
},
{
path: "/pages/CSS/margin/margin-bottom",
method: "radioChangeMarginBottom",
valueIndex: 3,
styleName: "margin-bottom",
expectedValue: {
marginBottom: "20px",
marginBottomActual: "20px",
marginBottomActualText: "20px",
marginBottomActualImage: "20px",
marginBottomActualFlat: "20px",
marginBottomActualTextFlat: "20px",
marginBottomActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/margin/margin-left",
method: "radioChangeMarginLeft",
valueIndex: 3,
styleName: "margin-left",
expectedValue: {
marginLeft: "20px",
marginLeftActual: "20px",
marginLeftActualText: "20px",
marginLeftActualImage: "20px",
marginLeftActualFlat: "20px",
marginLeftActualTextFlat: "20px",
marginLeftActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/margin/margin-right",
method: "radioChangeMarginRight",
valueIndex: 3,
styleName: "margin-right",
expectedValue: {
marginRight: "20px",
marginRightActual: "20px",
marginRightActualText: "20px",
marginRightActualImage: "20px",
marginRightActualFlat: "20px",
marginRightActualTextFlat: "20px",
marginRightActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/margin/margin-top",
method: "radioChangeMarginTop",
valueIndex: 3,
styleName: "margin-top",
expectedValue: {
marginTop: "20px",
marginTopActual: "20px",
marginTopActualText: "20px",
marginTopActualImage: "20px",
marginTopActualFlat: "20px",
marginTopActualTextFlat: "20px",
marginTopActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/padding/padding-bottom",
method: "radioChangePaddingBottom",
valueIndex: 3,
styleName: "padding-bottom",
expectedValue: {
paddingBottom: "40px",
paddingBottomActual: "40px",
paddingBottomActualText: "40px",
paddingBottomActualImage: "40px",
paddingBottomActualFlat: "40px",
paddingBottomActualTextFlat: "40px",
paddingBottomActualImageFlat: "40px"
}
},
{
path: "/pages/CSS/padding/padding-left",
method: "radioChangePaddingLeft",
valueIndex: 3,
styleName: "padding-left",
expectedValue: {
paddingLeft: "20px",
paddingLeftActual: "20px",
paddingLeftActualText: "20px",
paddingLeftActualImage: "20px",
paddingLeftActualFlat: "20px",
paddingLeftActualTextFlat: "20px",
paddingLeftActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/padding/padding-right",
method: "radioChangePaddingRight",
valueIndex: 3,
styleName: "padding-right",
expectedValue: {
paddingRight: "20px",
paddingRightActual: "20px",
paddingRightActualText: "20px",
paddingRightActualImage: "20px",
paddingRightActualFlat: "20px",
paddingRightActualTextFlat: "20px",
paddingRightActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/padding/padding-top",
method: "radioChangePaddingTop",
valueIndex: 3,
styleName: "padding-top",
expectedValue: {
paddingTop: "20px",
paddingTopActual: "20px",
paddingTopActualText: "20px",
paddingTopActualImage: "20px",
paddingTopActualFlat: "20px",
paddingTopActualTextFlat: "20px",
paddingTopActualImageFlat: "20px"
}
},
{
path: "/pages/CSS/text/text-align",
method: "radioChangeTextAlign",
valueIndex: 2,
styleName: "text-align",
expectedValue: {
textAlign: "center",
textAlignActual: "center",
textAlignActualFlat: "center"
}
},
{
path: "/pages/CSS/text/font-family",
method: "radioChangeFontFamily",
valueIndex: 5,
styleName: "font-family",
expectedValue: {
fontFamily: "UniFontFamily",
fontFamilyActual: "UniFontFamily",
fontFamilyActualFlat: "UniFontFamily"
}
},
{
path: "/pages/CSS/text/font-size",
method: "radioChangeFontSize",
valueIndex: 4,
styleName: "font-size",
expectedValue: {
fontSizeProp: "20px",
fontSizeActual: "20px",
fontSizeActualFlat: "20px"
}
},
{
path: "/pages/CSS/text/font-weight",
method: "radioChangeFontWeight",
valueIndex: 4,
styleName: "font-weight",
expectedValue: {
fontWeight: "200",
fontWeightActual: "200",
fontWeightActualFlat: "200"
}
},
{
path: "/pages/CSS/text/text-decoration-line",
method: "radioChangeTextDecorationLine",
valueIndex: 2,
styleName: "text-decoration-line",
expectedValue: {
textDecorationLine: "underline",
textDecorationLineActual: "underline",
textDecorationLineActualFlat: "underline"
}
},
{
path: "/pages/CSS/text/text-overflow",
method: "radioChangeTextOverflow",
valueIndex: 2,
styleName: "text-overflow",
expectedValue: {
textOverflow: "ellipsis",
textOverflowActual: "ellipsis",
textOverflowActualFlat: "ellipsis"
}
},
{
path: "/pages/CSS/text/letter-spacing",
method: "radioChangeLetterSpacing",
valueIndex: 5,
styleName: "letter-spacing",
expectedValue: {
letterSpacing: "5px",
letterSpacingActual: "5px",
letterSpacingActualFlat: "5px"
}
},
{
path: "/pages/CSS/text/line-height",
method: "radioChangeLineHeight",
valueIndex: 3,
styleName: "line-height",
expectedValue: {
lineHeight: "25px",
lineHeightActual: "25px",
lineHeightActualFlat: "25px"
}
},
{
path: "/pages/CSS/text/white-space",
method: "radioChangeWhiteSpace",
valueIndex: 3,
styleName: "white-space",
expectedValue: {
whiteSpace: "pre",
whiteSpaceActual: "pre",
whiteSpaceActualFlat: "pre"
}
},
{
path: "/pages/CSS/text/font-style",
method: "radioChangeFontStyle",
valueIndex: 2,
styleName: "font-style",
expectedValue: {
fontStyle: "italic",
fontStyleActual: "italic",
fontStyleActualFlat: "italic"
}
},
{
path: "/pages/CSS/transform/rotate",
method: "radioChangeTransform",
valueIndex: 3,
styleName: "transform",
expectedValue: {
transformValueDynamic: "rotate(90deg)",
transformActual: "rotate(90deg)",
transformActualText: "rotate(90deg)",
transformActualImage: "rotate(90deg)",
transformActualFlat: "rotate(90deg)",
transformActualTextFlat: "rotate(90deg)",
transformActualImageFlat: "rotate(90deg)"
}
},
{
path: "/pages/CSS/transform/transform-origin",
method: "radioChangeTransformOrigin",
valueIndex: 6,
styleName: "transform-origin",
expectedValue: {
transformOrigin: "10px 10px",
transformOriginActual: "10px 10px",
transformOriginActualText: "10px 10px",
transformOriginActualImage: "10px 10px",
transformOriginActualFlat: "10px 10px",
transformOriginActualTextFlat: "10px 10px",
transformOriginActualImageFlat: "10px 10px"
}
},
{
path: "/pages/CSS/transform/translate",
method: "radioChangeTransform",
valueIndex: 4,
styleName: "transform",
expectedValue: {
transformValueDynamic: "translate(50px, 50px)",
transformActual: "translate(50px, 50px)",
transformActualText: "translate(50px, 50px)",
transformActualImage: "translate(50px, 50px)",
transformActualFlat: "translate(50px, 50px)",
transformActualTextFlat: "translate(50px, 50px)",
transformActualImageFlat: "translate(50px, 50px)"
}
},
{
path: "/pages/CSS/transition/transition-delay",
method: "radioChangeTransitionDelay",
valueIndex: 3,
styleName: "transition-delay",
expectedValue: {
transitionDelayActual: "1s",
transitionDelayActualText: "1s",
transitionDelayActualImage: "1s"
}
}
]
const splitCssTests = [
{
path: "/pages/CSS/layout/opacity",
method: "radioChangeOpacity",
valueIndex: 3,
styleName: "opacity",
expectdom2: {
expectedValue: {
opacity: "0.5",
opacityActual: "0.5",
opacityActualText: "0.5",
opacityActualImage: "0.5",
opacityActualFlat: "0.5",
opacityActualTextFlat: "0.5",
opacityActualImageFlat: "0.5"
}
},
expectdom1: {
base: {
expectedValue: {
opacity: "0.5",
opacityActual: "0.5",
opacityActualText: "0.5",
opacityActualImage: "0.5",
opacityActualFlat: "0.5",
opacityActualTextFlat: "0.5",
opacityActualImageFlat: "0.5"
}
}
}
},
{
path: "/pages/CSS/layout/z-index",
method: "radioChangeZIndex",
valueIndex: 4,
styleName: "z-index",
expectdom2: {
expectedValue: {
zIndexActual: "10",
zIndexActualText: "10",
zIndexActualImage: "10"
}
},
expectdom1: {
base: {
expectedValue: {
zIndexActual: "10",
zIndexActualText: "10",
zIndexActualImage: "10"
}
},
mp: {
expectedValue: {
zIndexActual: 10,
zIndexActualText: "10",
zIndexActualImage: "10"
}
}
}
},
{
path: "/pages/CSS/background/background-color",
method: "radioChangeBackgroundColor",
valueIndex: 3,
styleName: "background-color",
expectdom2: {
expectedValue: {
backgroundColor: "rgb(0, 255, 0)",
backgroundColorActual: "#00FF00FF",
backgroundColorActualText: "#00FF00FF",
backgroundColorActualImage: "#00FF00FF",
backgroundColorActualFlat: "#00FF00FF",
backgroundColorActualTextFlat: "#00FF00FF",
backgroundColorActualImageFlat: "#00FF00FF"
}
},
expectdom1: {
base: {
expectedValue: {
backgroundColor: "rgb(0, 255, 0)",
backgroundColorActual: "rgb(0, 255, 0)",
backgroundColorActualText: "rgb(0, 255, 0)",
backgroundColorActualImage: "rgb(0, 255, 0)",
backgroundColorActualFlat: "rgb(0, 255, 0)",
backgroundColorActualTextFlat: "rgb(0, 255, 0)",
backgroundColorActualImageFlat: "rgb(0, 255, 0)"
}
}
}
},
{
path: "/pages/CSS/border/border",
method: "radioChangeBorder",
valueIndex: 3,
styleName: "border",
expectdom2: {
expectedValue: {
border: "2px dashed blue",
borderActual: "2px dashed #0000FFFF",
borderActualText: "2px dashed #0000FFFF",
borderActualImage: "2px dashed #0000FFFF",
borderActualFlat: "2px dashed #0000FFFF",
borderActualTextFlat: "2px dashed #0000FFFF",
borderActualImageFlat: "2px dashed #0000FFFF"
}
},
expectdom1: {
base: {
expectedValue: {
border: "2px dashed blue",
borderActual: "2px dashed blue",
borderActualText: "2px dashed blue",
borderActualImage: "2px dashed blue",
borderActualFlat: "2px dashed blue",
borderActualTextFlat: "2px dashed blue",
borderActualImageFlat: "2px dashed blue"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/border/border-radius",
method: "radioChangeBorderRadius",
valueIndex: 2,
styleName: "border-radius",
expectdom2: {
expectedValue: {
borderRadius: "5px",
borderRadiusActualText: "5px",
borderRadiusActualImage: "5px",
borderRadiusActualFlat: "5px",
borderRadiusActualTextFlat: "5px",
borderRadiusActualImageFlat: "5px"
}
},
expectdom1: {
base: {
expectedValue: {
borderRadius: "5px",
borderRadiusActualText: "5px",
borderRadiusActualImage: "5px",
borderRadiusActualFlat: "5px",
borderRadiusActualTextFlat: "5px",
borderRadiusActualImageFlat: "5px"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/border/border-color",
method: "radioChangeBorderColor",
valueIndex: 2,
styleName: "border-color",
expectdom2: {
expectedValue: {
borderColor: "#0000ff",
borderColorActual: "#0000FFFF",
borderColorActualText: "#0000FFFF",
borderColorActualImage: "#0000FFFF",
borderColorActualFlat: "#0000FFFF",
borderColorActualTextFlat: "#0000FFFF",
borderColorActualImageFlat: "#0000FFFF"
}
},
expectdom1: {
base: {
expectedValue: {
borderColor: "#0000ff",
borderColorActual: "#0000ff",
borderColorActualText: "#0000ff",
borderColorActualImage: "#0000ff",
borderColorActualFlat: "#0000ff",
borderColorActualTextFlat: "#0000ff",
borderColorActualImageFlat: "#0000ff"
}
},
web: {
expectedValue: {
borderColor: "#0000ff",
borderColorActual: "rgb(0, 0, 255)",
borderColorActualText: "rgb(0, 0, 255)",
borderColorActualImage: "rgb(0, 0, 255)",
borderColorActualFlat: "rgb(0, 0, 255)",
borderColorActualTextFlat: "rgb(0, 0, 255)",
borderColorActualImageFlat: "rgb(0, 0, 255)"
}
}
}
},
{
path: "/pages/CSS/border/border-top",
method: "radioChangeBorderTop",
valueIndex: 3,
styleName: "border-top",
expectdom2: {
expectedValue: {
borderTop: "2px dashed blue",
borderTopActual: "2px dashed #0000FFFF",
borderTopActualText: "2px dashed #0000FFFF",
borderTopActualImage: "2px dashed #0000FFFF",
borderTopActualFlat: "2px dashed #0000FFFF",
borderTopActualTextFlat: "2px dashed #0000FFFF",
borderTopActualImageFlat: "2px dashed #0000FFFF"
}
},
expectdom1: {
base: {
expectedValue: {
borderTop: "2px dashed blue",
borderTopActual: "2px dashed blue",
borderTopActualText: "2px dashed blue",
borderTopActualImage: "2px dashed blue",
borderTopActualFlat: "2px dashed blue",
borderTopActualTextFlat: "2px dashed blue",
borderTopActualImageFlat: "2px dashed blue"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/border/border-bottom",
method: "radioChangeBorderBottom",
valueIndex: 3,
styleName: "border-bottom",
expectdom2: {
expectedValue: {
borderBottom: "2px dashed blue",
borderBottomActual: "2px dashed #0000FFFF",
borderBottomActualText: "2px dashed #0000FFFF",
borderBottomActualImage: "2px dashed #0000FFFF",
borderBottomActualFlat: "2px dashed #0000FFFF",
borderBottomActualTextFlat: "2px dashed #0000FFFF",
borderBottomActualImageFlat: "2px dashed #0000FFFF"
}
},
expectdom1: {
base: {
expectedValue: {
borderBottom: "2px dashed blue",
borderBottomActual: "2px dashed blue",
borderBottomActualText: "2px dashed blue",
borderBottomActualImage: "2px dashed blue",
borderBottomActualFlat: "2px dashed blue",
borderBottomActualTextFlat: "2px dashed blue",
borderBottomActualImageFlat: "2px dashed blue"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/border/border-left",
method: "radioChangeBorderLeft",
valueIndex: 3,
styleName: "border-left",
expectdom2: {
expectedValue: {
borderLeft: "2px dashed blue",
borderLeftActual: "2px dashed #0000FFFF",
borderLeftActualText: "2px dashed #0000FFFF",
borderLeftActualImage: "2px dashed #0000FFFF",
borderLeftActualFlat: "2px dashed #0000FFFF",
borderLeftActualTextFlat: "2px dashed #0000FFFF",
borderLeftActualImageFlat: "2px dashed #0000FFFF"
}
},
expectdom1: {
base: {
expectedValue: {
borderLeft: "2px dashed blue",
borderLeftActual: "2px dashed blue",
borderLeftActualText: "2px dashed blue",
borderLeftActualImage: "2px dashed blue",
borderLeftActualFlat: "2px dashed blue",
borderLeftActualTextFlat: "2px dashed blue",
borderLeftActualImageFlat: "2px dashed blue"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/border/border-right",
method: "radioChangeBorderRight",
valueIndex: 3,
styleName: "border-right",
expectdom2: {
expectedValue: {
borderRight: "2px dashed blue",
borderRightActual: "2px dashed #0000FFFF",
borderRightActualText: "2px dashed #0000FFFF",
borderRightActualImage: "2px dashed #0000FFFF",
borderRightActualFlat: "2px dashed #0000FFFF",
borderRightActualTextFlat: "2px dashed #0000FFFF",
borderRightActualImageFlat: "2px dashed #0000FFFF"
}
},
expectdom1: {
base: {
expectedValue: {
borderRight: "2px dashed blue",
borderRightActual: "2px dashed blue",
borderRightActualText: "2px dashed blue",
borderRightActualImage: "2px dashed blue",
borderRightActualFlat: "2px dashed blue",
borderRightActualTextFlat: "2px dashed blue",
borderRightActualImageFlat: "2px dashed blue"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/box-shadow/box-shadow",
method: "radioChangeBoxShadow",
valueIndex: 3,
styleName: "box-shadow",
expectdom2: {
expectedValue: {
boxShadow: "5px 5px 5px black",
boxShadowActual: "5px 5px 5px #000000FF",
boxShadowActualText: "5px 5px 5px #000000FF",
boxShadowActualImage: "5px 5px 5px #000000FF",
boxShadowActualFlat: "5px 5px 5px #000000FF",
boxShadowActualTextFlat: "5px 5px 5px #000000FF",
boxShadowActualImageFlat: "5px 5px 5px #000000FF"
}
},
expectdom1: {
base: {
expectedValue: {
boxShadow: "5px 5px 5px black",
boxShadowActual: "5px 5px 5px black",
boxShadowActualText: "5px 5px 5px black",
boxShadowActualImage: "5px 5px 5px black",
boxShadowActualFlat: "5px 5px 5px black",
boxShadowActualTextFlat: "5px 5px 5px black",
boxShadowActualImageFlat: "5px 5px 5px black"
}
},
web: {
expectedValue: {
boxShadow: "5px 5px 5px black",
boxShadowActual: "black 5px 5px 5px",
boxShadowActualText: "black 5px 5px 5px",
boxShadowActualImage: "black 5px 5px 5px",
boxShadowActualFlat: "black 5px 5px 5px",
boxShadowActualTextFlat: "black 5px 5px 5px",
boxShadowActualImageFlat: "black 5px 5px 5px"
}
}
}
},
{
path: "/pages/CSS/flex/flex-flow",
method: "radioChangeFlexFlow",
valueIndex: 2,
styleName: "flex-flow",
expectdom2: {
expectedValue: {
flexFlow: "row wrap",
flexFlowActual: "row wrap",
flexFlowActualFlat: "row wrap"
}
},
expectdom1: {
base: {
expectedValue: {
flexFlow: "row wrap",
flexFlowActual: "row wrap",
flexFlowActualFlat: "row wrap"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/flex/flex",
method: "radioChangeFlex",
valueIndex: 2,
styleName: "flex",
expectdom2: {
expectedValue: {
flexActual: "1 1 0%",
flexActualFlat: "1 1 0%",
flexActualText: "1 1 0%",
flexActualImage: "1 1 0%",
flexActualTextFlat: "1 1 0%",
flexActualImageFlat: "1 1 0%"
}
},
expectdom1: {
base: {
expectedValue: {
flexActual: "1",
flexActualFlat: "1",
flexActualText: "1",
flexActualImage: "1",
flexActualTextFlat: "1",
flexActualImageFlat: "1"
}
},
harmony: {
skipAssert: true
},
web: {
expectedValue: {
flexActual: "1 1 0%",
flexActualFlat: "1 1 0%",
flexActualText: "1 1 0%",
flexActualImage: "1 1 0%",
flexActualTextFlat: "1 1 0%",
flexActualImageFlat: "1 1 0%"
}
}
}
},
{
path: "/pages/CSS/margin/margin-auto",
method: "radioChangeMargin",
valueIndex: 3,
styleName: "margin",
expectdom2: {
expectedValue: {
margin: "20px",
marginActual: "20px",
marginActualText: "20px",
marginActualImage: "20px",
marginActualFlat: "20px",
marginActualTextFlat: "20px",
marginActualImageFlat: "20px"
}
},
expectdom1: {
base: {
expectedValue: {
margin: "20px",
marginActual: "20px",
marginActualText: "20px",
marginActualImage: "20px",
marginActualFlat: "20px",
marginActualTextFlat: "20px",
marginActualImageFlat: "20px"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/margin/margin",
method: "radioChangeMargin",
valueIndex: 3,
styleName: "margin",
expectdom2: {
expectedValue: {
margin: "20px",
marginActual: "20px",
marginActualText: "20px",
marginActualImage: "20px",
marginActualFlat: "20px",
marginActualTextFlat: "20px",
marginActualImageFlat: "20px",
marginActualScrollView: "20px"
}
},
expectdom1: {
base: {
expectedValue: {
margin: "20px",
marginActual: "20px",
marginActualText: "20px",
marginActualImage: "20px",
marginActualFlat: "20px",
marginActualTextFlat: "20px",
marginActualImageFlat: "20px",
marginActualScrollView: "20px"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/padding/padding",
method: "radioChangePadding",
valueIndex: 3,
styleName: "padding",
expectdom2: {
expectedValue: {
padding: "10px",
paddingActual: "10px",
paddingActualText: "10px",
paddingActualImage: "10px",
paddingActualFlat: "10px",
paddingActualTextFlat: "10px",
paddingActualImageFlat: "10px",
paddingActualScrollView: "10px"
}
},
expectdom1: {
base: {
expectedValue: {
padding: "10px",
paddingActual: "10px",
paddingActualText: "10px",
paddingActualImage: "10px",
paddingActualFlat: "10px",
paddingActualTextFlat: "10px",
paddingActualImageFlat: "10px",
paddingActualScrollView: "10px"
}
},
harmony: {
skipAssert: true
}
}
},
{
path: "/pages/CSS/text/color",
method: "radioChangeColor",
valueIndex: 2,
styleName: "color",
expectdom2: {
expectedValue: {
color: "#942192",
colorActual: "#942192FF",
colorActualFlat: "#942192FF"
}
},
expectdom1: {
base: {
expectedValue: {
color: "#942192",
colorActual: "#942192",
colorActualFlat: "#942192"
}
},
web: {
expectedValue: {
color: "#942192",
colorActual: "rgb(148, 33, 146)",
colorActualFlat: "rgb(148, 33, 146)"
}
}
}
},
{
path: "/pages/CSS/text/text-shadow",
method: "radioChangeTextShadow",
valueIndex: 3,
styleName: "text-shadow",
expectdom2: {
expectedValue: {
textShadow: "5px 5px #558abb",
textShadowActual: "5px 5px 0px #558ABBFF",
textShadowActualFlat: "5px 5px 0px #558ABBFF"
}
},
expectdom1: {
base: {
expectedValue: {
textShadow: "5px 5px #558abb",
textShadowActual: "5px 5px #558abb",
textShadowActualFlat: "5px 5px #558abb"
}
},
harmony: {
skipAssert: true
},
web: {
expectedValue: {
textShadow: "5px 5px #558abb",
textShadowActual: "rgb(85, 138, 187) 5px 5px",
textShadowActualFlat: "rgb(85, 138, 187) 5px 5px"
}
}
}
},
{
path: "/pages/CSS/transform/scale",
method: "radioChangeTransform",
valueIndex: 2,
styleName: "transform",
expectdom2: {
expectedValue: {
transformValueDynamic: "scale(0.5,0.5)",
transformActual: "scale(0.5, 0.5)",
transformActualText: "scale(0.5, 0.5)",
transformActualImage: "scale(0.5, 0.5)",
transformActualFlat: "scale(0.5, 0.5)",
transformActualTextFlat: "scale(0.5, 0.5)",
transformActualImageFlat: "scale(0.5, 0.5)"
}
},
expectdom1: {
base: {
expectedValue: {
transformValueDynamic: "scale(0.5,0.5)",
transformActual: "scale(0.5,0.5)",
transformActualText: "scale(0.5,0.5)",
transformActualImage: "scale(0.5,0.5)",
transformActualFlat: "scale(0.5,0.5)",
transformActualTextFlat: "scale(0.5,0.5)",
transformActualImageFlat: "scale(0.5,0.5)"
}
},
web: {
expectedValue: {
transformValueDynamic: "scale(0.5,0.5)",
transformActual: "scale(0.5, 0.5)",
transformActualText: "scale(0.5, 0.5)",
transformActualImage: "scale(0.5, 0.5)",
transformActualFlat: "scale(0.5, 0.5)",
transformActualTextFlat: "scale(0.5, 0.5)",
transformActualImageFlat: "scale(0.5, 0.5)"
}
}
}
},
{
path: "/pages/CSS/transition/transition-timing-function",
method: "radioChangeTransitionTimingFunction",
valueIndex: 3,
styleName: "transition-timing-function",
expectdom2: {
expectedValue: {
transitionTimingFunctionActual: "ease-out",
transitionTimingFunctionActualText: "ease-out",
transitionTimingFunctionActualImage: "ease-out"
}
},
expectdom1: {
base: {
expectedValue: {
transitionTimingFunctionActual: "ease-out",
transitionTimingFunctionActualText: "ease-out",
transitionTimingFunctionActualImage: "ease-out"
}
}
}
}
]
const cssTests = [...sharedCssTests, ...splitCssTests]
const getDom1Config = (testCase) => {
const dom1Config = testCase.expectdom1 ?? {}
const baseConfig = dom1Config.base ?? {
skipAssert: false,
expectedValue: {}
}
const platformConfig = isHarmony ?
dom1Config.harmony :
(currentPlatform === 'web' ?
dom1Config.web :
(currentPlatform === 'mp' ? dom1Config.mp : dom1Config.app))
return {
skipAssert: platformConfig?.skipAssert ?? baseConfig.skipAssert ?? false,
expectedValue: {
...(baseConfig.expectedValue ?? {}),
...(platformConfig?.expectedValue ?? {})
}
}
}
const getAssertConfig = (testCase) => {
if ('expectedValue' in testCase) {
return {
skipAssert: testCase.skipAssert ?? false,
expectedValue: testCase.expectedValue ?? {}
}
}
if (isDom2) {
const dom2Config = testCase.expectdom2 ?? {}
return {
skipAssert: dom2Config.skipAssert ?? false,
expectedValue: dom2Config.expectedValue ?? {}
}
}
return getDom1Config(testCase)
}
const stringifyLogData = (value) => {
try {
return JSON.stringify(value)
} catch (e) {
return String(value)
}
}
const mergeOverride = (testCase, override) => {
if ('expectedValue' in testCase || 'expectedValue' in override) {
return {
...testCase,
...override
}
}
return {
...testCase,
...override,
expectdom2: {
...(testCase.expectdom2 ?? {}),
...(override.expectdom2 ?? {})
},
expectdom1: {
...(testCase.expectdom1 ?? {}),
...(override.expectdom1 ?? {}),
base: {
...(testCase.expectdom1?.base ?? {}),
...(override.expectdom1?.base ?? {})
},
app: {
...(testCase.expectdom1?.app ?? {}),
...(override.expectdom1?.app ?? {})
},
web: {
...(testCase.expectdom1?.web ?? {}),
...(override.expectdom1?.web ?? {})
},
mp: {
...(testCase.expectdom1?.mp ?? {}),
...(override.expectdom1?.mp ?? {})
},
harmony: {
...(testCase.expectdom1?.harmony ?? {}),
...(override.expectdom1?.harmony ?? {})
}
}
}
}
const overrideMap = TEST_OVERRIDE ?
Object.fromEntries(TEST_OVERRIDE.map(o => [o.path, o])) :
null
const overridePaths = overrideMap ? Object.keys(overrideMap) : null
const filterPath = process.env.TEST_PATH;
const filteredTests = (filterPath ?
cssTests.filter(t => t.path === filterPath) :
overridePaths ?
cssTests.filter(t => overridePaths.includes(t.path)) :
cssTests
).map(t => overrideMap?.[t.path] ? mergeOverride(t, overrideMap[t.path]) : t);
const BATCH_SIZE = 15;
const cssTestBatches = [];
for (let i = 0; i < filteredTests.length; i += BATCH_SIZE) {
cssTestBatches.push(filteredTests.slice(i, i + BATCH_SIZE));
}
cssTestBatches.forEach((batch, batchIndex) => {
describe(`CSS setProperty compatible ${currentMode} Batch ${batchIndex + 1}`, () => {
beforeAll(async () => {
});
afterAll(async () => {
});
test.each(batch)("%s", async (testCase) => {
const page = await program.reLaunch(testCase.path);
await page.waitFor(3000);
await page.callMethod(testCase.method, testCase.valueIndex);
await page.waitFor(100);
const image = await program.screenshot({
fullPage: true
});
expect(image).toSaveImageSnapshot({
customSnapshotIdentifier() {
return `__set-css__/${currentMode}/${testCase.path.replace(/\//g, "-").substring(1)}`
}
});
const assertConfig = getAssertConfig(testCase)
const afterData = await page.data('data');
const expectedValue = assertConfig.expectedValue ?? {}
console.log(`[getPropertyValue] ${testCase.path} (${currentMode}) ${stringifyLogData(afterData)}`);
if (!assertConfig.skipAssert) {
const errors = [];
const softExpect = (received, expected, key) => {
try {
expect(received).toBe(expected);
} catch (e) {
errors.push(` ${key}: expected "${expected}", received "${received}"`);
}
};
if (typeof expectedValue === 'object') {
for (const [key, val] of Object.entries(expectedValue)) {
softExpect(afterData[key], val, key);
}
} else {
const received = afterData[testCase.styleName + 'Actual'] ?? afterData[testCase.styleName];
softExpect(received, expectedValue, testCase.styleName);
}
if (errors.length > 0) {
throw new Error(`[ASSERT FAILED] ${testCase.path} (${currentMode})\n${errors.join("\n")}`);
}
}
await page.waitFor(500);
});
});
});
})