mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 20:11:24 +08:00
cc97a16800
* chore: move tns-core-modules to nativescript-core * chore: preparing compat generate script * chore: add missing definitions * chore: no need for http-request to be private * chore: packages chore * test: generate tests for tns-core-modules * chore: add anroid module for consistency * chore: add .npmignore * chore: added privateModulesWhitelist * chore(webpack): added bundle-entry-points * chore: scripts * chore: tests changed to use @ns/core * test: add scoped-packages test project * test: fix types * test: update test project * chore: build scripts * chore: update build script * chore: npm scripts cleanup * chore: make the compat pgk work with old wp config * test: generate diff friendly tests * chore: create barrel exports * chore: move files after rebase * chore: typedoc config * chore: compat mode * chore: review of barrels * chore: remove tns-core-modules import after rebase * chore: dev workflow setup * chore: update developer-workflow * docs: experiment with API extractor * chore: api-extractor and barrel exports * chore: api-extractor configs * chore: generate d.ts rollup with api-extractor * refactor: move methods inside Frame * chore: fic tests to use Frame static methods * refactor: create Builder class * refactor: use Builder class in tests * refactor: include Style in ui barrel * chore: separate compat build script * chore: fix tslint errors * chore: update NATIVESCRIPT_CORE_ARGS * chore: fix compat pack * chore: fix ui-test-app build with linked modules * chore: Application, ApplicationSettings, Connectivity and Http * chore: export Trace, Profiling and Utils * refactor: Static create methods for ImageSource * chore: fix deprecated usages of ImageSource * chore: move Span and FormattedString to ui * chore: add events-args and ImageSource to index files * chore: check for CLI >= 6.2 when building for IOS * chore: update travis build * chore: copy Pod file to compat package * chore: update error msg ui-tests-app * refactor: Apply suggestions from code review Co-Authored-By: Martin Yankov <m.i.yankov@gmail.com> * chore: typings and refs * chore: add missing d.ts files for public API * chore: adress code review FB * chore: update api-report * chore: dev-workflow for other apps * chore: api update * chore: update api-report
1838 lines
72 KiB
TypeScript
1838 lines
72 KiB
TypeScript
// >> flexbox-layout-require
|
|
import { FlexboxLayout } from "@nativescript/core/ui/layouts/flexbox-layout";
|
|
// << flexbox-layout-require
|
|
|
|
import { Button } from "@nativescript/core/ui/button";
|
|
|
|
export namespace FlexDirection {
|
|
export const ROW: "row" = "row";
|
|
export const ROW_REVERSE: "row-reverse" = "row-reverse";
|
|
export const COLUMN: "column" = "column";
|
|
export const COLUMN_REVERSE: "column-reverse" = "column-reverse";
|
|
}
|
|
|
|
export namespace FlexWrap {
|
|
export const NOWRAP: "nowrap" = "nowrap";
|
|
export const WRAP: "wrap" = "wrap";
|
|
export const WRAP_REVERSE: "wrap-reverse" = "wrap-reverse";
|
|
}
|
|
|
|
export namespace JustifyContent {
|
|
export const FLEX_START: "flex-start" = "flex-start";
|
|
export const FLEX_END: "flex-end" = "flex-end";
|
|
export const CENTER: "center" = "center";
|
|
export const SPACE_BETWEEN: "space-between" = "space-between";
|
|
export const SPACE_AROUND: "space-around" = "space-around";
|
|
}
|
|
|
|
export namespace AlignItems {
|
|
export const FLEX_START: "flex-start" = "flex-start";
|
|
export const FLEX_END: "flex-end" = "flex-end";
|
|
export const CENTER: "center" = "center";
|
|
export const BASELINE: "baseline" = "baseline";
|
|
export const STRETCH: "stretch" = "stretch";
|
|
}
|
|
|
|
export namespace AlignContent {
|
|
export const FLEX_START: "flex-start" = "flex-start";
|
|
export const FLEX_END: "flex-end" = "flex-end";
|
|
export const CENTER: "center" = "center";
|
|
export const SPACE_BETWEEN: "space-between" = "space-between";
|
|
export const SPACE_AROUND: "space-around" = "space-around";
|
|
export const STRETCH: "stretch" = "stretch";
|
|
}
|
|
|
|
export namespace AlignSelf {
|
|
export const AUTO: "auto" = "auto";
|
|
export const FLEX_START: "flex-start" = "flex-start";
|
|
export const FLEX_END: "flex-end" = "flex-end";
|
|
export const CENTER: "center" = "center";
|
|
export const BASELINE: "baseline" = "baseline";
|
|
export const STRETCH: "stretch" = "stretch";
|
|
}
|
|
|
|
import { View, unsetValue, Length, PercentLength } from "@nativescript/core/ui/core/view";
|
|
import { Label } from "@nativescript/core/ui/label";
|
|
import * as TKUnit from "../../tk-unit";
|
|
import * as helper from "../../ui-helper";
|
|
import { Builder } from "@nativescript/core/ui/builder";
|
|
import { dipToDp, left, top, right, bottom, height, width,
|
|
paddingLeft, paddingTop, paddingRight, paddingBottom,
|
|
equal, closeEnough, notEqual, check,
|
|
heightEqual, widthEqual,
|
|
isLeftAlignedWith, isRightAlignedWith, isTopAlignedWith, isBottomAlignedWith,
|
|
isLeftOf, isRightOf, isBelow, isAbove,
|
|
isLeftWith, isAboveWith, isRightWith, isBelowWith
|
|
} from "./layout-tests-helper";
|
|
|
|
function waitUntilTestElementLayoutIsValid(view: View, timeoutSec?: number): void {
|
|
TKUnit.waitUntilReady(() => {
|
|
return view.isLayoutValid;
|
|
}, timeoutSec || 1);
|
|
}
|
|
|
|
function baseline(view: View): number {
|
|
// TODO: Return View's baseline!
|
|
return 0;
|
|
}
|
|
|
|
export function testFlexboxPage() {
|
|
let page = helper.navigateWithEntry({ moduleName: "ui/layouts/flexbox-layout-page" });
|
|
function view(id: string) {
|
|
return <View>page.getViewById(id);
|
|
}
|
|
TKUnit.waitUntilReady(() => page.isLayoutValid);
|
|
isLeftOf(view("six"), view("one"));
|
|
isAbove(view("one"), view("scrollview"));
|
|
isAbove(view("title"), view("firstlabel"));
|
|
isAbove(view("firstlabel"), view("description"));
|
|
}
|
|
|
|
const noop = () => {
|
|
// no operation
|
|
};
|
|
|
|
// TODO: Order tests!
|
|
|
|
function test<U extends { root: View }>(ui: () => U, setup: (ui: U) => void, test: (ui: U) => void): () => void {
|
|
return () => {
|
|
let i = ui();
|
|
setup(i);
|
|
helper.buildUIAndRunTest(i.root, () => {
|
|
waitUntilTestElementLayoutIsValid(i.root);
|
|
test(i);
|
|
});
|
|
};
|
|
}
|
|
|
|
let getViews = (template: string) => {
|
|
let root = Builder.parse(template);
|
|
|
|
return {
|
|
root,
|
|
flexbox: root.getViewById("flexbox") as FlexboxLayout,
|
|
text1: root.getViewById("text1") as Label,
|
|
text2: root.getViewById("text2") as Label,
|
|
text3: root.getViewById("text3") as Label,
|
|
text4: root.getViewById("text4") as Label,
|
|
text5: root.getViewById("text5") as Label
|
|
};
|
|
};
|
|
|
|
let activity_flex_wrap = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
|
|
flexDirection="${FlexDirection.ROW}"
|
|
flexWrap="${FlexWrap.WRAP}"
|
|
alignContent="${AlignContent.STRETCH}"
|
|
width="320" height="320"
|
|
backgroundColor="gray">
|
|
<Label id="text1" text="1" width="120" height="120" backgroundColor="red" />
|
|
<Label id="text2" text="2" width="120" height="120" backgroundColor="green" />
|
|
<Label id="text3" text="3" width="120" height="120" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export function test_recycling() {
|
|
helper.nativeView_recycling_test(() => new FlexboxLayout());
|
|
}
|
|
|
|
export function test_item_recycling() {
|
|
helper.nativeView_recycling_test(() => new Button(), () => new FlexboxLayout());
|
|
}
|
|
|
|
export const testFlexWrap_wrap = test(
|
|
activity_flex_wrap,
|
|
({ flexbox }) => flexbox.flexWrap = FlexWrap.WRAP,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
// equal(flexbox.getFlexLines().size(), is(1));
|
|
}
|
|
);
|
|
|
|
export const testFlexWrap_nowrap = test(
|
|
activity_flex_wrap,
|
|
({ flexbox }) => flexbox.flexWrap = FlexWrap.NOWRAP,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text3, text2);
|
|
isTopAlignedWith(text3, flexbox);
|
|
// equal(flexbox.getFlexLines().size(), is(1));
|
|
}
|
|
);
|
|
|
|
export const testFlexWrap_wrap_reverse = test(
|
|
activity_flex_wrap,
|
|
({ flexbox }) => flexbox.flexWrap = FlexWrap.WRAP_REVERSE,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isAbove(text3, text1);
|
|
isAbove(text3, text2);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
// equal(flexbox.getFlexLines().size(), is(2));
|
|
}
|
|
);
|
|
|
|
export const testFlexWrap_wrap_flexDirection_column = test(
|
|
activity_flex_wrap,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
isTopAlignedWith(text3, flexbox);
|
|
// equal(flexbox.getFlexLines().size(), is(2));
|
|
}
|
|
);
|
|
|
|
export const testFlexWrap_nowrap_flexDirection_column = test(
|
|
activity_flex_wrap,
|
|
({ flexbox }) => {
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
flexbox.flexWrap = FlexWrap.NOWRAP;
|
|
}, ({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text3, text2);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
// equal(flexbox.getFlexLines().size(), is(1));
|
|
}
|
|
);
|
|
|
|
export const testFlexWrap_wrap_reverse_flexDirection_column = test(
|
|
activity_flex_wrap,
|
|
({ flexbox }) => {
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
|
|
}, ({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isRightAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftOf(text3, text1);
|
|
isLeftOf(text3, text2);
|
|
isTopAlignedWith(text3, flexbox);
|
|
// equal(flexbox.getFlexLines().size(), is(2));
|
|
}
|
|
);
|
|
|
|
let activity_flex_item_match_parent = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
|
|
width="100%"
|
|
verticalAlignment="top"
|
|
flexDirection="${FlexDirection.ROW}"
|
|
flexWrap="${FlexWrap.WRAP}"
|
|
alignItems="${AlignItems.FLEX_START}"
|
|
alignContent="${AlignContent.FLEX_START}"
|
|
backgroundColor="gray">
|
|
<Label id="text1" width="100%" height="80" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="100%" height="80" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="100%" height="80" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFlexItem_match_parent = test(
|
|
activity_flex_item_match_parent,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
widthEqual(text1, flexbox);
|
|
widthEqual(text2, flexbox);
|
|
widthEqual(text3, flexbox);
|
|
equal(height(flexbox), height(text1) + height(text2) + height(text3), `Expected height of ${flexbox} to equal sum of widths for ${text1}, ${text2}, ${text3}`);
|
|
}
|
|
);
|
|
|
|
let activity_flex_item_match_parent_direction_column = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
|
|
height="100%"
|
|
horizontalAlignment="left"
|
|
flexDirection="${FlexDirection.COLUMN}"
|
|
flexWrap="${FlexWrap.WRAP}"
|
|
alignItems="${AlignItems.FLEX_START}"
|
|
alignContent="${AlignContent.FLEX_START}"
|
|
backgroundColor="gray">
|
|
<Label id="text1" width="40" height="100%" text="1" backgroundColor="red"/>
|
|
<Label id="text2" width="40" height="100%" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="40" height="100%" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFlexItem_match_parent_flexDirection_column = test(
|
|
activity_flex_item_match_parent_direction_column,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
heightEqual(text1, flexbox);
|
|
heightEqual(text2, flexbox);
|
|
heightEqual(text3, flexbox);
|
|
equal(width(flexbox), width(text1) + width(text2) + width(text3), `Expected width of ${flexbox} to equal sum of widths for ${text1}, ${text2}, ${text3}`);
|
|
}
|
|
);
|
|
|
|
let activity_flexbox_wrap_content = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
|
|
horizontalAlignment="left"
|
|
verticalAlignment="top"
|
|
flexDirection="${FlexDirection.ROW}"
|
|
flexWrap="${FlexWrap.WRAP}"
|
|
backgroundColor="gray">
|
|
<Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" backgroundColor="red" />
|
|
<Label id="text2" horizontalAlignment="left" verticalAlignment="top" text="2" backgroundColor="green" />
|
|
<Label id="text3" horizontalAlignment="left" verticalAlignment="top" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFlexboxLayout_wrapContent = test(
|
|
activity_flexbox_wrap_content,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBottomAlignedWith(text1, flexbox);
|
|
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isBottomAlignedWith(text2, flexbox);
|
|
|
|
isRightOf(text3, text2);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
}
|
|
);
|
|
|
|
let activity_flexbox_wrapped_with_scrollview = () => getViews(
|
|
`<ScrollView width="100%" verticalAlignment="top">
|
|
<FlexboxLayout iosOverflowSafeArea="false" id="flexbox"
|
|
width="360"
|
|
verticalAlignment="top"
|
|
flexDirection="${FlexDirection.ROW}"
|
|
flexWrap="${FlexWrap.WRAP}"
|
|
backgroundColor="gray">
|
|
<Label id="text1" width="140" height="500" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="140" height="500" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="140" height="500" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>
|
|
</ScrollView>`
|
|
);
|
|
|
|
export const testFlexboxLayout_wrapped_with_ScrollView = test(
|
|
activity_flexbox_wrapped_with_scrollview,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
|
|
equal(height(flexbox), height(text1) + height(text3));
|
|
}
|
|
);
|
|
|
|
let activity_flexbox_wrapped_with_horizontalscrollview = () => getViews(
|
|
`<ScrollView orientation="horizontal" width="100%" verticalAlignment="top">
|
|
<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="400" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="300" height="100%" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="300" height="100%" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="300" height="100%" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>
|
|
</ScrollView>`
|
|
);
|
|
|
|
export const testFlexboxLayout_wrapped_with_HorizontalScrollView = test(
|
|
activity_flexbox_wrapped_with_horizontalscrollview,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
isTopAlignedWith(text3, flexbox);
|
|
|
|
equal(width(flexbox), width(text1) + width(text2) + width(text3));
|
|
}
|
|
);
|
|
|
|
let activity_justify_content_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" justifyContent="${JustifyContent.FLEX_START}" backgroundColor="gray">
|
|
<Label id="text1" width="60" height="60" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="60" height="60" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="60" height="60" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testJustifyContent_flexStart = test(
|
|
activity_justify_content_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isRightOf(text3, text2);
|
|
}
|
|
);
|
|
|
|
let activity_justify_content_with_parent_padding = () => getViews(
|
|
`<GridLayout padding="24" width="100%" height="100%">
|
|
<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" padding="8" flexDirection="${FlexDirection.ROW}" justifyCOntent="${JustifyContent.FLEX_START}" backgroundColor="gray">
|
|
<Label id="text1" width="60" height="60" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="60" height="60" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="60" height="60" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>
|
|
</GridLayout>`
|
|
);
|
|
|
|
export const testJustifyContent_flexStart_withParentPadding = test(
|
|
activity_justify_content_with_parent_padding,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isRightOf(text2, text1);
|
|
isRightOf(text3, text2);
|
|
equal(left(text1), paddingLeft(flexbox), `Expected ${text1}.left to equal ${flexbox}.paddingLeft`);
|
|
equal(top(text1), paddingTop(flexbox), `Expected ${text1}.top to equal ${flexbox}.paddingTop`);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_flexEnd = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => flexbox.justifyContent = JustifyContent.FLEX_END,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
isLeftOf(text2, text3);
|
|
isLeftOf(text1, text2);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_flexEnd_withParentPadding = test(
|
|
activity_justify_content_with_parent_padding,
|
|
({ flexbox }) => flexbox.justifyContent = JustifyContent.FLEX_END,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftOf(text2, text3);
|
|
isLeftOf(text1, text2);
|
|
equal(top(text1), paddingTop(flexbox));
|
|
equal(top(text2), paddingTop(flexbox));
|
|
equal(top(text3), paddingTop(flexbox));
|
|
equal(right(text3), paddingRight(flexbox));
|
|
isRightWith(text2, text3, width(text3));
|
|
isRightWith(text1, text2, width(text2));
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_center = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => flexbox.justifyContent = JustifyContent.CENTER,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text3, text2);
|
|
isTopAlignedWith(text3, flexbox);
|
|
|
|
let space = width(flexbox) - width(text1) - width(text2) - width(text3);
|
|
space = space / 2;
|
|
closeEnough(left(text1), paddingLeft(flexbox) + space);
|
|
closeEnough(right(text3), paddingRight(flexbox) - space);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_center_withParentPadding = test(
|
|
activity_justify_content_with_parent_padding,
|
|
({ flexbox }) => flexbox.justifyContent = JustifyContent.CENTER,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isRightOf(text2, text1);
|
|
isRightOf(text3, text2);
|
|
let space = width(flexbox) - width(text1) - width(text2) - width(text3);
|
|
space = space / 2;
|
|
isLeftWith(flexbox, text1, space);
|
|
isRightWith(text3, flexbox, space);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_spaceBetween = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => flexbox.justifyContent = JustifyContent.SPACE_BETWEEN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
let space = width(flexbox) - width(text1) - width(text2) - width(text3);
|
|
space = space / 2;
|
|
check(space - 1 <= left(text2) - right(text1) && left(text2) - right(text1) <= space + 1);
|
|
check(space - 1 <= left(text3) - right(text2) && left(text3) - right(text2) <= space + 1);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_spaceBetween_withPadding = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.SPACE_BETWEEN;
|
|
flexbox.style.padding = padding;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
let space = width(flexbox) - width(text1) - width(text2) - width(text3) - dipToDp(padding) * 2;
|
|
space = space / 2;
|
|
equal(left(text1), paddingLeft(flexbox));
|
|
closeEnough(right(text1) + space, left(text2));
|
|
closeEnough(right(text2) + space, left(text3));
|
|
equal(right(text3), paddingRight(flexbox));
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_spaceAround = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => flexbox.justifyContent = JustifyContent.SPACE_AROUND,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
|
|
let space = width(flexbox) - width(text1) - width(text2) - width(text3);
|
|
space = space / 6; // Divide by the number of children * 2
|
|
closeEnough(left(text1), paddingLeft(flexbox) + space);
|
|
closeEnough(right(text1) + space * 2, left(text2));
|
|
closeEnough(right(text2) + space * 2, left(text3));
|
|
closeEnough(right(text3), paddingRight(flexbox) - space);
|
|
}
|
|
);
|
|
|
|
const padding: any = 40;
|
|
|
|
export const testJustifyContent_spaceAround_withPadding = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.SPACE_AROUND;
|
|
flexbox.style.padding = padding;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
let space = width(flexbox) - width(text1) - width(text2) - width(text3) - dipToDp(padding) * 2;
|
|
space = space / 6; // Divide by the number of children * 2
|
|
equal(top(text1), paddingTop(flexbox));
|
|
closeEnough(left(text1), paddingLeft(flexbox) + space);
|
|
closeEnough(right(text1) + space * 2, left(text2));
|
|
closeEnough(right(text2) + space * 2, left(text3));
|
|
closeEnough(right(text3), paddingRight(flexbox) - space);
|
|
equal(bottom(text1), paddingBottom(flexbox));
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_flexStart_flexDirection_column = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text3, text2);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_flexEnd_flexDirection_column = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.FLEX_END;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isBottomAlignedWith(text3, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
isAbove(text2, text3);
|
|
isAbove(text1, text2);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_center_flexDirection_column = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.CENTER;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text3, text2);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
|
|
let space = height(flexbox) - height(text1) - height(text2) - height(text3);
|
|
space = space / 2;
|
|
isBelowWith(flexbox, text1, space);
|
|
isAboveWith(text3, flexbox, space);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_spaceBetween_flexDirection_column = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.SPACE_BETWEEN;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
|
|
let space = height(flexbox) - height(text1) - height(text2) - height(text3);
|
|
space = space / 2;
|
|
check(space - 1 <= top(text2) - bottom(text1) && top(text2) - bottom(text1) <= space + 1);
|
|
check(space - 1 <= top(text3) - bottom(text2) && top(text3) - bottom(text2) <= space + 1);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_spaceBetween_flexDirection_column_withPadding = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.SPACE_BETWEEN;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
flexbox.style.padding = padding;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
let space = height(flexbox) - height(text1) - height(text2) - height(text3) - dipToDp(padding) * 2;
|
|
space = space / 2;
|
|
equal(top(text1), paddingTop(flexbox));
|
|
equal(bottom(text3), paddingBottom(flexbox));
|
|
equal(bottom(text1) + space, top(text2));
|
|
equal(bottom(text2) + space, top(text3));
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_spaceAround_flexDirection_column = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.SPACE_AROUND;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
|
|
let space = height(flexbox) - height(text1) - height(text2) - height(text3);
|
|
space = space / 6; // Divide by the number of children * 2
|
|
isBelowWith(flexbox, text1, space);
|
|
closeEnough(bottom(text1) + 2 * space, top(text2));
|
|
closeEnough(bottom(text2) + 2 * space, top(text3));
|
|
isAboveWith(text3, flexbox, space);
|
|
}
|
|
);
|
|
|
|
export const testJustifyContent_spaceAround_flexDirection_column_withPadding = test(
|
|
activity_justify_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.justifyContent = JustifyContent.SPACE_AROUND;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
flexbox.style.padding = padding;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
let space = height(flexbox) - height(text1) - height(text2) - height(text3) - dipToDp(padding) * 2;
|
|
space = space / 6; // Divide by the number of children * 2
|
|
|
|
closeEnough(top(text1), paddingTop(flexbox) + space);
|
|
closeEnough(bottom(text1) + 2 * space, top(text2));
|
|
closeEnough(bottom(text2) + 2 * space, top(text3));
|
|
closeEnough(bottom(text3), paddingBottom(flexbox) - space);
|
|
|
|
equal(left(text1), paddingLeft(flexbox));
|
|
equal(left(text2), paddingLeft(flexbox));
|
|
equal(left(text3), paddingLeft(flexbox));
|
|
|
|
equal(right(text1), paddingRight(flexbox));
|
|
equal(right(text2), paddingRight(flexbox));
|
|
equal(right(text3), paddingRight(flexbox));
|
|
}
|
|
);
|
|
|
|
let activity_flex_grow_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="60" height="60" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="60" height="60" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="60" height="60" text="3" backgroundColor="blue" flexGrow="1" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFlexGrow_withExactParentLength = test(
|
|
activity_flex_grow_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text2);
|
|
|
|
equal(width(text3), width(flexbox) - width(text1) - width(text2));
|
|
}
|
|
);
|
|
|
|
export const testFlexGrow_withExactParentLength_flexDirection_column = test(
|
|
activity_flex_grow_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
isBelow(text3, text2);
|
|
|
|
equal(height(text3), height(flexbox) - height(text1) - height(text2));
|
|
}
|
|
);
|
|
|
|
export const testFlexGrow_including_view_gone = test(
|
|
activity_flex_grow_test,
|
|
({ flexbox, text2 }) => text2.visibility = "collapse",
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
|
|
equal(width(text3), width(flexbox) - width(text1));
|
|
}
|
|
);
|
|
|
|
let activity_align_content_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
|
|
<Label id="text1" width="120" height="120" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="120" height="120" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testAlignContent_stretch = test(
|
|
activity_align_content_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
equal(top(text3), top(flexbox) + height(flexbox) / 2);
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_flexStart = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => flexbox.alignContent = AlignContent.FLEX_START,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
equal(top(text3), top(text1) + height(text1));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_flexEnd = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => flexbox.alignContent = AlignContent.FLEX_END,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
isAbove(text1, text3);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isAbove(text2, text3);
|
|
equal(bottom(text1), top(flexbox) + height(flexbox) - height(text3));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_flexEnd_parentPadding = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignContent = AlignContent.FLEX_END;
|
|
flexbox.style.padding = "32";
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isAbove(text1, text3);
|
|
isAbove(text1, text3);
|
|
isAbove(text2, text3);
|
|
equal(bottom(text3), paddingBottom(flexbox));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_flexEnd_parentPadding_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignContent = AlignContent.FLEX_END;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
flexbox.style.padding = "32";
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftOf(text1, text3);
|
|
isLeftOf(text2, text3);
|
|
equal(right(text3), paddingRight(flexbox));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_center = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => flexbox.alignContent = AlignContent.CENTER,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isBelow(text3, text1);
|
|
|
|
let spaceAboveAndBottom = height(flexbox) - height(text1) - height(text3);
|
|
spaceAboveAndBottom /= 2;
|
|
isBelowWith(flexbox, text1, spaceAboveAndBottom);
|
|
isAboveWith(text3, flexbox, spaceAboveAndBottom);
|
|
|
|
// TODO: equal(flexbox.getFlexLines().size(), is(2));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_spaceBetween = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => flexbox.alignContent = AlignContent.SPACE_BETWEEN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
// TODO: equal(flexbox.getFlexLines().size(), is(2));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_spaceBetween_withPadding = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => flexbox.alignContent = AlignContent.SPACE_BETWEEN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_spaceAround = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => flexbox.alignContent = AlignContent.SPACE_AROUND,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
|
|
let spaceAround = height(flexbox) - height(text1) - height(text3);
|
|
spaceAround /= 4; // Divide by the number of flex lines * 2
|
|
|
|
isBelowWith(flexbox, text1, Math.ceil(spaceAround));
|
|
isBelowWith(text1, text3, height(text1) + 2 * spaceAround);
|
|
isAboveWith(text3, flexbox, Math.ceil(spaceAround));
|
|
isAboveWith(text1, text3, height(text3) + 2 * spaceAround);
|
|
|
|
// TODO: equal(flexbox.getFlexLines().size(), is(2));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_stretch_parentWrapContent = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.height = unsetValue; // TODO: Check that "NaN" is auto-ish
|
|
flexbox.verticalAlignment = "top";
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
|
|
equal(top(text3), bottom(text1));
|
|
// TODO: equal(flexbox.getFlexLines().size(), is(2));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_stretch_flexDirection_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
// the third TextView is wrapped to the next flex line
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
|
|
let flexLineCrossSize = width(flexbox) / 2;
|
|
equal(left(text3), flexLineCrossSize + left(flexbox));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_flexStart_flexDirection_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignContent = AlignContent.FLEX_START;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
equal(left(text3), width(text1) + left(flexbox));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_flexEnd_flexDirection_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignContent = AlignContent.FLEX_END;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isRightAlignedWith(text3, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isLeftOf(text1, text3);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text3);
|
|
equal(right(text1), left(flexbox) + width(flexbox) - width(text3));
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_center_flexDirection_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignContent = AlignContent.CENTER;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isRightOf(text3, text1);
|
|
|
|
let spaceLeftAndRight = width(flexbox) - width(text1) - width(text3);
|
|
spaceLeftAndRight /= 2;
|
|
isLeftWith(flexbox, text1, spaceLeftAndRight);
|
|
isRightWith(text3, flexbox, spaceLeftAndRight);
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_spaceBetween_flexDirection_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignContent = AlignContent.SPACE_BETWEEN;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_spaceAround_flexDirection_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignContent = AlignContent.SPACE_AROUND;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
|
|
let spaceAround = width(flexbox) - width(text1) - width(text3);
|
|
spaceAround /= 4; // Divide by the number of flex lines * 2
|
|
isLeftWith(flexbox, text1, Math.ceil(spaceAround));
|
|
isLeftWith(text1, text3, width(text1) + 2 * spaceAround);
|
|
isRightWith(text3, flexbox, Math.ceil(spaceAround));
|
|
isRightWith(text1, text3, width(text3) + 2 * spaceAround);
|
|
}
|
|
);
|
|
|
|
export const testAlignContent_stretch_parentWrapContent_flexDirection_column = test(
|
|
activity_align_content_test,
|
|
({ flexbox }) => {
|
|
flexbox.width = unsetValue; // TODO: Check default is Number.NaN
|
|
flexbox.horizontalAlignment = "left";
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
equal(left(text3), left(flexbox) + width(text1));
|
|
}
|
|
);
|
|
|
|
let activity_stretch_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" height="360" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" backgroundColor="gray">
|
|
<Label id="text1" width="140" height="80" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="140" height="80" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="140" height="80" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testAlignItems_stretch = test(
|
|
activity_stretch_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
|
|
let flexLineSize = height(flexbox) / 2;
|
|
check(flexLineSize - 1 <= height(text1) && height(text1) <= flexLineSize + 1);
|
|
check(flexLineSize - 1 <= height(text2) && flexLineSize <= flexLineSize + 1);
|
|
check(flexLineSize - 1 <= height(text3) && height(text3) <= flexLineSize + 1);
|
|
}
|
|
);
|
|
|
|
let activity_align_self_stretch_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
|
|
<Label id="text1" width="120" height="120" text="1" backgroundColor="red" alignSelf="${AlignSelf.STRETCH}" />
|
|
<Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="120" height="120" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testAlignSelf_stretch = test(
|
|
activity_align_self_stretch_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
|
|
let flexLineSize = height(flexbox) / 2;
|
|
check(flexLineSize - 1 <= height(text1) && height(text1) <= flexLineSize + 1);
|
|
|
|
// use eps.
|
|
notEqual(height(text2), flexLineSize);
|
|
notEqual(height(text3), flexLineSize);
|
|
}
|
|
);
|
|
|
|
export const testAlignSelf_stretch_flexDirection_column = test(
|
|
activity_align_self_stretch_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
|
|
let flexLineSize = width(flexbox) / 2;
|
|
check(flexLineSize - 1 <= width(text1) && width(text1) <= flexLineSize + 1);
|
|
// use eps.
|
|
notEqual(width(text2), flexLineSize);
|
|
notEqual(width(text3), flexLineSize);
|
|
}
|
|
);
|
|
|
|
let activity_align_items_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignContent="${AlignContent.STRETCH}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
|
|
<Label id="text1" width="120" height="120" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="120" height="120" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testAlignItems_flexStart = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => flexbox.alignItems = AlignItems.FLEX_START,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
|
|
let flexLineSize = height(flexbox) / 2;
|
|
notEqual(height(text1), flexLineSize);
|
|
notEqual(height(text2), flexLineSize);
|
|
notEqual(height(text3), flexLineSize);
|
|
equal(top(flexbox) + flexLineSize, top(text3));
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_flexEnd = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => flexbox.alignItems = AlignItems.FLEX_END,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
|
|
let flexLineSize = height(flexbox) / 2;
|
|
notEqual(height(text1), flexLineSize);
|
|
notEqual(height(text2), flexLineSize);
|
|
notEqual(height(text3), flexLineSize);
|
|
equal(top(flexbox) + flexLineSize, bottom(text1));
|
|
equal(top(flexbox) + flexLineSize, bottom(text2));
|
|
equal(bottom(text3), top(flexbox) + height(flexbox));
|
|
}
|
|
);
|
|
|
|
let activity_align_items_parent_padding_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" padding="16" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_END}" backgroundColor="gray">
|
|
<Label id="text1" width="120" height="120" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="120" height="120" text="2" backgroundColor="green" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testAlignItems_flexEnd_parentPadding = test(
|
|
activity_align_items_parent_padding_test,
|
|
({ flexbox }) => flexbox.alignItems = AlignItems.FLEX_END,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isRightOf(text2, text1);
|
|
isAboveWith(text1, flexbox, Length.toDevicePixels(flexbox.style.paddingBottom, 0));
|
|
isAboveWith(text2, flexbox, Length.toDevicePixels(flexbox.style.paddingBottom, 0));
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_flexEnd_parentPadding_column = test(
|
|
activity_align_items_parent_padding_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignItems = AlignItems.FLEX_END;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isBelow(text2, text1);
|
|
isRightWith(text1, flexbox, Length.toDevicePixels(flexbox.style.paddingRight, 0));
|
|
isRightWith(text2, flexbox, Length.toDevicePixels(flexbox.style.paddingRight, 0));
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_center = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => flexbox.alignItems = AlignItems.CENTER,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
|
|
let flexLineSize = height(flexbox) / 2;
|
|
let spaceAboveAndBelow = (flexLineSize - height(text1)) / 2;
|
|
notEqual(height(text1), flexLineSize);
|
|
notEqual(height(text2), flexLineSize);
|
|
notEqual(height(text3), flexLineSize);
|
|
|
|
isBelowWith(flexbox, text1, spaceAboveAndBelow);
|
|
isBelowWith(flexbox, text2, spaceAboveAndBelow);
|
|
isBelowWith(text1, text3, flexLineSize);
|
|
isBelowWith(text2, text3, flexLineSize);
|
|
|
|
isAboveWith(text3, flexbox, spaceAboveAndBelow);
|
|
isAboveWith(text1, text3, flexLineSize);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_flexEnd_wrapReverse = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => {
|
|
flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
|
|
flexbox.alignItems = AlignItems.FLEX_END;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
|
|
let flexLineSize = height(flexbox) / 2;
|
|
notEqual(height(text1), flexLineSize);
|
|
notEqual(height(text2), flexLineSize);
|
|
notEqual(height(text3), flexLineSize);
|
|
|
|
isBelowWith(flexbox, text1, flexLineSize);
|
|
isBelowWith(flexbox, text2, flexLineSize);
|
|
isBelowWith(text3, text1, flexLineSize);
|
|
isBelowWith(text3, text2, flexLineSize);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_center_wrapReverse = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => {
|
|
flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
|
|
flexbox.alignItems = AlignItems.CENTER;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
|
|
let flexLineSize = height(flexbox) / 2;
|
|
let spaceAboveAndBelow = (flexLineSize - height(text1)) / 2;
|
|
notEqual(height(text1), flexLineSize);
|
|
notEqual(height(text2), flexLineSize);
|
|
notEqual(height(text3), flexLineSize);
|
|
|
|
isBelowWith(flexbox, text3, spaceAboveAndBelow);
|
|
isBelowWith(text3, text1, flexLineSize);
|
|
isBelowWith(text3, text2, flexLineSize);
|
|
|
|
isAboveWith(text3, text1, flexLineSize);
|
|
isAboveWith(text1, flexbox, spaceAboveAndBelow);
|
|
isAboveWith(text2, flexbox, spaceAboveAndBelow);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_flexStart_flexDirection_column = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
|
|
let flexLineSize = width(flexbox) / 2;
|
|
notEqual(width(text1), flexLineSize);
|
|
notEqual(width(text2), flexLineSize);
|
|
notEqual(width(text3), flexLineSize);
|
|
isLeftWith(flexbox, text3, flexLineSize);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_flexEnd_flexDirection_column = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignItems = AlignItems.FLEX_END;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
isRightAlignedWith(text3, flexbox);
|
|
|
|
let flexLineSize = width(flexbox) / 2;
|
|
notEqual(width(text1), flexLineSize);
|
|
notEqual(width(text2), flexLineSize);
|
|
notEqual(width(text3), flexLineSize);
|
|
isRightWith(text1, flexbox, flexLineSize);
|
|
isRightWith(text2, flexbox, flexLineSize);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_center_flexDirection_column = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => {
|
|
flexbox.alignItems = AlignItems.CENTER;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
|
|
let flexLineSize = width(flexbox) / 2;
|
|
let spaceLeftAndRight = (flexLineSize - width(text1)) / 2;
|
|
notEqual(width(text1), flexLineSize);
|
|
notEqual(width(text2), flexLineSize);
|
|
notEqual(width(text3), flexLineSize);
|
|
isLeftWith(flexbox, text1, spaceLeftAndRight);
|
|
isLeftWith(flexbox, text2, spaceLeftAndRight);
|
|
isLeftWith(flexbox, text3, flexLineSize + spaceLeftAndRight);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_flexEnd_wrapReverse_flexDirection_column = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => {
|
|
flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
|
|
flexbox.alignItems = AlignItems.FLEX_END;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
|
|
let flexLineSize = width(flexbox) / 2;
|
|
notEqual(width(text1), flexLineSize);
|
|
notEqual(width(text2), flexLineSize);
|
|
notEqual(width(text3), flexLineSize);
|
|
isLeftWith(flexbox, text1, flexLineSize);
|
|
isLeftWith(flexbox, text2, flexLineSize);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_center_wrapReverse_flexDirection_column = test(
|
|
activity_align_items_test,
|
|
({ flexbox }) => {
|
|
flexbox.flexWrap = FlexWrap.WRAP_REVERSE;
|
|
flexbox.alignItems = AlignItems.CENTER;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isBelow(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
|
|
let flexLineSize = width(flexbox) / 2;
|
|
let spaceLeftAndRight = (flexLineSize - width(text1)) / 2;
|
|
notEqual(width(text1), flexLineSize);
|
|
notEqual(width(text2), flexLineSize);
|
|
notEqual(width(text3), flexLineSize);
|
|
isLeftWith(flexbox, text1, flexLineSize + spaceLeftAndRight);
|
|
isLeftWith(flexbox, text2, flexLineSize + spaceLeftAndRight);
|
|
isLeftWith(flexbox, text3, spaceLeftAndRight);
|
|
isRightWith(text1, flexbox, spaceLeftAndRight);
|
|
isRightWith(text2, flexbox, spaceLeftAndRight);
|
|
isRightWith(text3, flexbox, flexLineSize + spaceLeftAndRight);
|
|
}
|
|
);
|
|
|
|
let activity_align_items_baseline_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.BASELINE}" backgroundColor="gray">
|
|
<Label id="text1" width="30" height="80" text="1" verticalAlignment="bottom" backgroundColor="red" />
|
|
<Label id="text2" width="30" height="80" text="2" verticalAlignment="top" backgroundColor="green" />
|
|
<Label id="text3" width="30" height="80" text="2" verticalAlignment="center" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testAlignItems_baseline = test(
|
|
activity_align_items_baseline_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
let topPluBaseline1 = top(text1) + baseline(text1);
|
|
let topPluBaseline2 = top(text2) + baseline(text2);
|
|
let topPluBaseline3 = top(text3) + baseline(text3);
|
|
|
|
equal(topPluBaseline1, topPluBaseline2);
|
|
equal(topPluBaseline2, topPluBaseline3);
|
|
}
|
|
);
|
|
|
|
export const testAlignItems_baseline_wrapReverse = test(
|
|
activity_align_items_baseline_test,
|
|
({ flexbox }) => flexbox.flexWrap = FlexWrap.WRAP_REVERSE,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
let bottomPluBaseline1 = bottom(text1) + baseline(text1);
|
|
let bottomPluBaseline2 = bottom(text2) + baseline(text2);
|
|
let bottomPluBaseline3 = bottom(text3) + baseline(text3);
|
|
|
|
equal(bottomPluBaseline1, bottomPluBaseline2);
|
|
equal(bottomPluBaseline2, bottomPluBaseline3);
|
|
}
|
|
);
|
|
|
|
let activity_flex_wrap_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" height="300" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="160" height="120" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="160" height="120" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="160" height="120" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFlexDirection_row_reverse = test(
|
|
activity_flex_wrap_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.ROW_REVERSE,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isRightAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isLeftOf(text2, text1);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
isRightAlignedWith(text3, flexbox);
|
|
}
|
|
);
|
|
|
|
export const testFlexDirection_column_reverse = test(
|
|
activity_flex_wrap_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN_REVERSE,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isBottomAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isAbove(text2, text1);
|
|
isRightOf(text3, text1);
|
|
isRightOf(text3, text2);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
}
|
|
);
|
|
|
|
let activity_flex_basis_percent_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="100%" height="100%" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="50%" height="50%" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="60%" height="60%" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="60" height="60" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFlexBasisPercent_wrap = test(
|
|
activity_flex_basis_percent_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
isRightOf(text3, text2);
|
|
|
|
// use eps.
|
|
closeEnough(width(text1), Math.round(width(flexbox) * 0.5));
|
|
closeEnough(width(text2), Math.round(width(flexbox) * 0.6));
|
|
}
|
|
);
|
|
|
|
export const testFlexBasisPercent_nowrap = test(
|
|
activity_flex_basis_percent_test,
|
|
({ flexbox }) => flexbox.flexWrap = FlexWrap.NOWRAP,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text2);
|
|
|
|
let totalWidth = width(text1) + width(text2) + width(text3);
|
|
check(totalWidth >= width(flexbox) - 3 || totalWidth <= width(flexbox) + 3);
|
|
}
|
|
);
|
|
|
|
export const testFlexBasisPercent_wrap_flexDirection_column = test(
|
|
activity_flex_basis_percent_test,
|
|
({ flexbox }) => flexbox.flexDirection = FlexDirection.COLUMN,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isBelow(text3, text2);
|
|
|
|
closeEnough(height(text1), Math.round(height(flexbox) * 0.5));
|
|
closeEnough(height(text2), Math.round(height(flexbox) * 0.6));
|
|
}
|
|
);
|
|
|
|
export const testFlexBasisPercent_nowrap_flexDirection_column = test(
|
|
activity_flex_basis_percent_test,
|
|
({ flexbox }) => {
|
|
flexbox.flexWrap = FlexWrap.NOWRAP;
|
|
flexbox.flexDirection = FlexDirection.COLUMN;
|
|
},
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text2);
|
|
|
|
let totalHeight = height(text1) + height(text2) + height(text3);
|
|
|
|
check(totalHeight >= height(flexbox) - 3 || totalHeight <= height(flexbox) + 3);
|
|
}
|
|
);
|
|
|
|
let activity_minwidth_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" backgroundColor="gray">
|
|
<Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" minWidth="100" backgroundColor="red" />
|
|
<Label id="text2" horizontalAlignment="left" verticalAlignment="top" text="2" minWidth="100" backgroundColor="green" flexGrow="1" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testMinWidth_initial_width_less_than_minWidth = test(
|
|
activity_minwidth_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
let minWidth = 100;
|
|
closeEnough(width(text1), dipToDp(minWidth));
|
|
closeEnough(width(text2), width(flexbox) - dipToDp(minWidth));
|
|
}
|
|
);
|
|
|
|
let activity_minwidth_lower_bound_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" flexWrap="${FlexWrap.NOWRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="200" verticalAlignment="top" text="1" minWidth="150" backgroundColor="red" />
|
|
<Label id="text2" width="200" verticalAlignment="top" text="1" backgroundColor="green" />
|
|
<Label id="text3" width="200" verticalAlignment="top" text="1" backgroundColor="blue" />
|
|
<Label id="text4" width="200" verticalAlignment="top" text="1" backgroundColor="purple" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testMinWidth_works_as_lower_bound_shrink_to = test(
|
|
activity_minwidth_lower_bound_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3, text4 }) => {
|
|
closeEnough(width(text1), dipToDp(150));
|
|
closeEnough(width(flexbox), width(text1) + width(text2) + width(text3) + width(text4));
|
|
}
|
|
);
|
|
|
|
let activity_minheight_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" flexDirection="${FlexDirection.COLUMN}" backgroundColor="gray">
|
|
<Label id="text1" horizontalAlignment="left" verticalAlignment="top" text="1" minHeight="100" backgroundColor="red" />
|
|
<Label id="text2" horizontalAlignment="left" verticalAlignment="top" text="2" backgroundColor="green" flexGrow="1" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testMinHeight_initial_height_less_than_minHeight = test(
|
|
activity_minheight_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2 }) => {
|
|
closeEnough(height(text1), dipToDp(100));
|
|
closeEnough(height(text2), height(flexbox) - dipToDp(100));
|
|
}
|
|
);
|
|
|
|
let activity_minheight_lower_bound_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="400" height="400" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.NOWRAP}" backgroundColor="gray">
|
|
<Label id="text1" horizontalAlignment="left" height="200" text="1" minHeight="150" backgroundColor="red" />
|
|
<Label id="text2" horizontalAlignment="left" height="200" text="2" backgroundColor="green" />
|
|
<Label id="text3" horizontalAlignment="left" height="200" text="3" backgroundColor="blue" />
|
|
<Label id="text4" horizontalAlignment="left" height="200" text="4" backgroundColor="purple" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testMinHeight_works_as_lower_bound_shrink_to = test(
|
|
activity_minheight_lower_bound_test,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3, text4 }) => {
|
|
closeEnough(height(text1), dipToDp(150));
|
|
closeEnough(height(flexbox), height(text1) + height(text2) + height(text3) + height(text4));
|
|
}
|
|
);
|
|
|
|
// We do not support maxWidth/maxHeight
|
|
// omit: testMaxWidth_initial_width_more_than_maxWidth
|
|
// omit: testMaxWidth_works_as_upper_bound_expand_to
|
|
// omit: testMaxHeight_initial_height_more_than_maxHeight
|
|
// omit: testMaxHeight_works_as_lower_bound_expand_to
|
|
|
|
let activity_views_visibility_gone = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" height="300" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="160" height="120" text="1" visibility="collapse" backgroundColor="red" />
|
|
<Label id="text2" width="160" height="120" text="2" visibility="collapse" backgroundColor="green" />
|
|
<Label id="text3" width="160" height="120" text="3" backgroundColor="blue" />
|
|
<Label id="text4" width="160" height="120" text="4" backgroundColor="purple" />
|
|
<Label id="text5" width="160" height="120" text="5" backgroundColor="cyan" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testView_visibility_gone = test(
|
|
activity_views_visibility_gone,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3, text4, text5 }) => {
|
|
isTopAlignedWith(text3, flexbox);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isTopAlignedWith(text4, flexbox);
|
|
isRightOf(text4, text3);
|
|
isLeftAlignedWith(text5, flexbox);
|
|
isBelow(text5, text3);
|
|
|
|
equal(left(text4), right(text3));
|
|
equal(top(text5), bottom(text3));
|
|
}
|
|
);
|
|
|
|
let activity_visibility_gone_first_item_in_flex_line_row = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" verticalAlignment="top" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="160" verticalAlignment="top" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="120" verticalAlignment="top" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="160" verticalAlignment="top" text="3" visibility="collapse" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testView_visibility_gone_first_item_in_flex_line_horizontal = test(
|
|
activity_visibility_gone_first_item_in_flex_line_row,
|
|
noop,
|
|
({ root, flexbox, text1, text2, text3 }) => {
|
|
check(height(flexbox) > 0);
|
|
equal(height(flexbox), height(text1) + height(text3));
|
|
}
|
|
);
|
|
|
|
let activity_visibility_gone_first_item_in_flex_line_column = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="360" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" horizontalAlignment="left" height="160" text="1" backgroundColor="red" />
|
|
<Label id="text2" horizontalAlignment="left" height="160" text="1" backgroundColor="green" />
|
|
<Label id="text3" horizontalAlignment="left" height="160" text="1" visibility="collapse" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testView_visibility_gone_first_item_in_flex_line_vertical = test(
|
|
activity_visibility_gone_first_item_in_flex_line_column,
|
|
noop,
|
|
({ flexbox, text1, text3 }) => {
|
|
check(width(flexbox) > 0);
|
|
equal(width(flexbox), width(text1) + width(text3));
|
|
}
|
|
);
|
|
|
|
let activity_wrap_before_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" horizontalAlignment="left" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" backgroundColor="gray">
|
|
<Label id="text1" width="100" height="80" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="100" height="80" text="2" backgroundColor="green" flexWrapBefore="true" />
|
|
<Label id="text3" width="100" height="80" text="3" backgroundColor="blue" flexWrapBefore="true" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testWrapBefore = test(
|
|
activity_wrap_before_test,
|
|
noop,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isBelow(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text2);
|
|
}
|
|
);
|
|
|
|
export const testWrapBefore2 = test(
|
|
activity_wrap_before_test,
|
|
({ text2 }) => FlexboxLayout.setFlexWrapBefore(text2, false),
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBelow(text3, text1);
|
|
isBelow(text3, text2);
|
|
equal(height(flexbox), height(text1) + height(text3));
|
|
}
|
|
);
|
|
|
|
export const testWrapBefore_nowrap = test(
|
|
activity_wrap_before_test,
|
|
({ flexbox }) => flexbox.flexWrap = FlexWrap.NOWRAP,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isBottomAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isRightOf(text2, text1);
|
|
isBottomAlignedWith(text2, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightOf(text3, text2);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
}
|
|
);
|
|
|
|
let activity_wrap_parent_padding_horizontal_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" verticalAlignment="top" padding="32" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
|
|
<Label id="text1" width="280" height="80" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="30" height="80" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="100" height="80" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testWrap_parentPadding_horizontal = test(
|
|
activity_wrap_parent_padding_horizontal_test,
|
|
noop,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isBelow(text2, text1);
|
|
isRightOf(text3, text2);
|
|
closeEnough(height(flexbox), Length.toDevicePixels(flexbox.style.paddingTop, 0) + Length.toDevicePixels(flexbox.style.paddingBottom, 0) + height(text1) + height(text2));
|
|
}
|
|
);
|
|
|
|
let activity_wrap_parent_padding_vertical_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="360" padding="32" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
|
|
<Label id="text1" width="80" height="280" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="80" height="30" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="80" height="80" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testWrap_parentPadding_vertical = test(
|
|
activity_wrap_parent_padding_vertical_test,
|
|
noop,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isRightOf(text2, text1);
|
|
isBelow(text3, text2);
|
|
closeEnough(width(flexbox), Length.toDevicePixels(flexbox.style.paddingLeft, 0) + Length.toDevicePixels(flexbox.style.paddingRight, 0) + width(text1) + width(text2));
|
|
}
|
|
);
|
|
|
|
let activity_wrap_child_margin_horizontal_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="360" verticalAlignment="top" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
|
|
<Label id="text1" width="280" height="80" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="30" height="80" text="2" margin="32" backgroundColor="green" />
|
|
<Label id="text3" width="100" height="80" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testWrap_childMargin_horizontal = test(
|
|
activity_wrap_child_margin_horizontal_test,
|
|
noop,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isBelow(text2, text1);
|
|
isRightOf(text3, text2);
|
|
closeEnough(height(flexbox), height(text1) + height(text2) + PercentLength.toDevicePixels(text2.style.marginTop, 0, Number.NaN) + PercentLength.toDevicePixels(text2.style.marginBottom, 0, Number.NaN));
|
|
}
|
|
);
|
|
|
|
let activity_first_item_large_horizontal_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.ROW}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" alignContent="${AlignItems.STRETCH}">
|
|
<Label id="text1" width="500" height="60" text="1" />
|
|
<Label id="text2" width="120" height="60" text="2" />
|
|
<Label id="text3" width="300" height="60" text="3" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFirstItemLarge_horizontal = test(
|
|
activity_first_item_large_horizontal_test,
|
|
noop,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text2, flexbox);
|
|
isLeftAlignedWith(text3, flexbox);
|
|
isBottomAlignedWith(text3, flexbox);
|
|
|
|
equal(height(flexbox), height(text1) + height(text2) + height(text3));
|
|
}
|
|
);
|
|
|
|
let activity_first_item_large_vertical_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" width="320" height="320" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.STRETCH}" alignContent="${AlignContent.STRETCH}" backgroundColor="gray">
|
|
<Label id="text1" width="60" height="500" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="60" height="120" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="6" height="300" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFirstItemLarge_vertical = test(
|
|
activity_first_item_large_vertical_test,
|
|
noop,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isTopAlignedWith(text1, flexbox);
|
|
isLeftAlignedWith(text1, flexbox);
|
|
isTopAlignedWith(text2, flexbox);
|
|
isTopAlignedWith(text3, flexbox);
|
|
isRightAlignedWith(text3, flexbox);
|
|
|
|
equal(width(flexbox), width(text1) + width(text2) + width(text3));
|
|
}
|
|
);
|
|
|
|
let activity_wrap_child_margin_vertical_test = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox" horizontalAlignment="left" height="360" flexDirection="${FlexDirection.COLUMN}" flexWrap="${FlexWrap.WRAP}" alignItems="${AlignItems.FLEX_START}" backgroundColor="gray">
|
|
<Label id="text1" width="80" height="280" text="1" backgroundColor="red" />
|
|
<Label id="text2" width="80" height="30" margin="32" text="2" backgroundColor="green" />
|
|
<Label id="text3" width="80" height="80" text="3" backgroundColor="blue" />
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testWrap_childMargin_vertical = test(
|
|
activity_wrap_child_margin_vertical_test,
|
|
noop,
|
|
({ flexbox, text1, text2, text3 }) => {
|
|
isRightOf(text2, text1);
|
|
isBelow(text3, text2);
|
|
// dips anyone?
|
|
closeEnough(width(flexbox), width(text1) + width(text2) + PercentLength.toDevicePixels(text2.marginLeft, 0, Number.NaN) + PercentLength.toDevicePixels(text2.marginRight, 0, Number.NaN));
|
|
}
|
|
);
|
|
|
|
let activity_flexbox_with_proxy_view_container = () => getViews(
|
|
`<FlexboxLayout iosOverflowSafeArea="false" id="flexbox">
|
|
<ProxyViewContainer></ProxyViewContainer>
|
|
</FlexboxLayout>`
|
|
);
|
|
|
|
export const testFlexboxLayout_does_not_crash_with_proxy_view_container = test(
|
|
activity_flexbox_with_proxy_view_container,
|
|
noop,
|
|
({ root, flexbox }) => {
|
|
TKUnit.assert(flexbox.id === "flexbox", "FlexboxLayout actually there");
|
|
}
|
|
);
|
|
|
|
// Omit testEmptyChildren
|
|
// Omit testDivider_directionRow_verticalBeginning
|
|
|
|
// Omit divider test family, we don't draw dividers
|