javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Non-uniform borders

Browse Source
This commit is contained in:
Rossen Hristov
2016-08-30 10:48:28 +03:00
parent 7b2bef85d0
commit a05f842a84
57 changed files with 2643 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/app/ui-tests-app/css/border-playground.css Normal file
View File

@@ -0,0 +1,13 @@
StackLayout {
background-color: lightgray;
}
Button {
font-size: 8;
width: 70;
height: 40;
}
TextView {
font-size: 8;
}

39
apps/app/ui-tests-app/css/border-playground.ts Normal file
View File

@@ -0,0 +1,39 @@
import { EventData } from "data/observable";
import { View } from "ui/core/view";
import { Button } from "ui/button";
import { Color } from "color";
import { TextView } from "ui/text-view";
import { ScrollView } from "ui/scroll-view";
let red = new Color("red");
let green = new Color("green");
export function onToggle(args: EventData){
let button = <Button>args.object;
let target = button.page.getViewById<View>("target");
let debugConsole = button.page.getViewById<TextView>("debugConsole");
let scrollView = button.page.getViewById<ScrollView>("scrollView");
if (button.text === "Color"){
target[button.id] = target[button.id] ? undefined : red;
debugConsole.text += `> border-color: ${target.borderColor}\n`;
}
else if (button.text === "Width"){
target[button.id] = target[button.id] ? 0 : 10;
debugConsole.text += `> border-width: ${target.borderWidth}\n`;
}
else if (button.text === "Radius"){
target[button.id] = target[button.id] ? 0 : 10;
debugConsole.text += `> border-radius: ${target.borderRadius}\n`;
}
else if (button.text === "BGColor"){
target.backgroundColor = target.backgroundColor ? undefined : green;
debugConsole.text += `> background-color: ${target.backgroundColor}\n`;
}
else if (button.text === "BGImage"){
target.backgroundImage = target.backgroundImage ? undefined : `~/ui-tests-app/pages/test2.png`;
debugConsole.text += `> background-image: ${target.backgroundImage}\n`;
}
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
}

39
apps/app/ui-tests-app/css/border-playground.xml Normal file
View File

@@ -0,0 +1,39 @@
<Page>
<GridLayout rows="*,*,*,auto" columns="*,*,*">
<StackLayout id="top-left" class="button-container" row="0" col="0">
<Button text="Radius" id="borderTopLeftRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="top" class="button-container" row="0" col="1">
<Button text="Color" id="borderTopColor" tap="onToggle"/>
<Button text="Width" id="borderTopWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="top-right" class="button-container" row="0" col="2">
<Button text="Radius" id="borderTopRightRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="left" class="button-container" row="1" col="0">
<Button text="Color" id="borderLeftColor" tap="onToggle"/>
<Button text="Width" id="borderLeftWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="target" row="1" col="1">
<Button text="BGColor" tap="onToggle"/>
<Button text="BGImage" tap="onToggle"/>
</StackLayout>
<StackLayout id="right" class="button-container" row="1" col="2">
<Button text="Color" id="borderRightColor" tap="onToggle"/>
<Button text="Width" id="borderRightWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom-left" class="button-container" row="2" col="0">
<Button text="Radius" id="borderBottomLeftRadius" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom" class="button-container" row="2" col="1">
<Button text="Color" id="borderBottomColor" tap="onToggle"/>
<Button text="Width" id="borderBottomWidth" tap="onToggle"/>
</StackLayout>
<StackLayout id="bottom-right" class="button-container" row="2" col="2">
<Button text="Radius" id="borderBottomRightRadius" tap="onToggle"/>
</StackLayout>
<ScrollView id="scrollView" row="3" col="0" colSpan="3" height="200">
<TextView id="debugConsole" text=""/>
</ScrollView>
</GridLayout>
</Page>

78
apps/app/ui-tests-app/css/button-border.css Normal file
View File

@@ -0,0 +1,78 @@
Button {
font-size: 6;
width: 80;
height: 80;
color: black;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/button-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<Button id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<Button id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<Button id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<Button id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<Button id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<Button id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<Button id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<Button id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<Button id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<Button id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<Button id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<Button id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<Button id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<Button id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<Button id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<Button id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<Button id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<Button id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

77
apps/app/ui-tests-app/css/image-border.css Normal file
View File

@@ -0,0 +1,77 @@
Image {
width: 80;
height: 80;
background-color: cyan;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/image-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<Image id="s0" row="0" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s1" row="0" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s2" row="0" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s3" row="1" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s4" row="1" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s5" row="1" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s6" row="2" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s7" row="2" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s8" row="2" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s9" row="3" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s10" row="3" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s11" row="3" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s12" row="4" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s13" row="4" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s14" row="4" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s15" row="5" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s16" row="5" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
<Image id="s17" row="5" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
</GridLayout>
</Page>

77
apps/app/ui-tests-app/css/label-border.css Normal file
View File

@@ -0,0 +1,77 @@
Label {
font-size: 6;
width: 80;
height: 80;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/label-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<Label id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<Label id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<Label id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<Label id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<Label id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<Label id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<Label id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<Label id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<Label id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<Label id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<Label id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<Label id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<Label id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<Label id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<Label id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<Label id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<Label id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<Label id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

80
apps/app/ui-tests-app/css/layout-border.css Normal file
View File

@@ -0,0 +1,80 @@
StackLayout {
width: 80;
height: 80;
}
Label {
font-size: 6;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/layout-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<StackLayout id="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
<StackLayout id="s1" row="0" col="1"><Label textWrap="true" text="border-width: 5; border-color: red;"/></StackLayout>
<StackLayout id="s2" row="0" col="2"><Label textWrap="true" text="border-width: 5; border-color: red red red green;"/></StackLayout>
<StackLayout id="s3" row="1" col="0"><Label textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/></StackLayout>
<StackLayout id="s4" row="1" col="1"><Label textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/></StackLayout>
<StackLayout id="s5" row="1" col="2"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/></StackLayout>
<StackLayout id="s6" row="2" col="0"><Label textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/></StackLayout>
<StackLayout id="s7" row="2" col="1"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/></StackLayout>
<StackLayout id="s8" row="2" col="2"><Label textWrap="true" text="border-width: 5 10; border-color: red green;"/></StackLayout>
<StackLayout id="s9" row="3" col="0"><Label textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/></StackLayout>
<StackLayout id="s10" row="3" col="1"><Label textWrap="true" text="border-width: 5 0; border-color: black;"/></StackLayout>
<StackLayout id="s11" row="3" col="2"><Label textWrap="true" text="background-color: magenta;"/></StackLayout>
<StackLayout id="s12" row="4" col="0"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/></StackLayout>
<StackLayout id="s13" row="4" col="1"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/></StackLayout>
<StackLayout id="s14" row="4" col="2"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/></StackLayout>
<StackLayout id="s15" row="5" col="0"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/></StackLayout>
<StackLayout id="s16" row="5" col="1"><Label textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/></StackLayout>
<StackLayout id="s17" row="5" col="2"><Label textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/></StackLayout>
</GridLayout>
</Page>

27
apps/app/ui-tests-app/css/layouts-border-overlap.css Normal file
View File

@@ -0,0 +1,27 @@
StackLayout, AbsoluteLayout, DockLayout, GridLayout, WrapLayout {
margin: 5;
background-color: yellow;
}
#root {
background-color: white;
}
Label {
font-size: 6;
text-align: left;
vertical-align: top;
background-color: red;
}
.s0 {
border-width: 20;
}
.s1 {
padding: 20;
}
.s2 {
border-width: 20 0 0 20; border-color:black;
}

25
apps/app/ui-tests-app/css/layouts-border-overlap.xml Normal file
View File

@@ -0,0 +1,25 @@
<Page>
<GridLayout rows="*,*,*,*,*" columns="*,*,*" id="root">
<StackLayout class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
<StackLayout class="s1" row="0" col="1"><Label textWrap="true" text="padding: 5;"/></StackLayout>
<StackLayout class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></StackLayout>
<AbsoluteLayout class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 5;"/></AbsoluteLayout>
<AbsoluteLayout class="s1" row="1" col="1"><Label textWrap="true" text="padding: 5;"/></AbsoluteLayout>
<AbsoluteLayout class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></AbsoluteLayout>
<DockLayout class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 5;"/></DockLayout>
<DockLayout class="s1" row="2" col="1"><Label textWrap="true" text="padding: 5;"/></DockLayout>
<DockLayout class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></DockLayout>
<GridLayout class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 5;"/></GridLayout>
<GridLayout class="s1" row="3" col="1"><Label textWrap="true" text="padding: 5;"/></GridLayout>
<GridLayout class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></GridLayout>
<WrapLayout class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 5;"/></WrapLayout>
<WrapLayout class="s1" row="4" col="1"><Label textWrap="true" text="padding: 5;"/></WrapLayout>
<WrapLayout class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></WrapLayout>
</GridLayout>
</Page>

9
apps/app/ui-tests-app/css/main-page.ts
View File

@@ -26,6 +26,15 @@ export function pageLoaded(args: EventData) {
examples.set("padding", "css/padding");
examples.set("label-background-image", "css/label-background-image");
examples.set("transform-decoration-color", "css/transform-decoration-color");
examples.set("layout-border", "css/layout-border");
examples.set("label-border", "css/label-border");
examples.set("button-border", "css/button-border");
examples.set("text-field-border", "css/text-field-border");
examples.set("text-view-border", "css/text-view-border");
examples.set("image-border", "css/image-border");
examples.set("layouts-border-overlap", "css/layouts-border-overlap");
examples.set("measure-tests", "css/measure-tests");
//examples.set("border-playground", "css/border-playground");
let viewModel = new SubMianPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;

11
apps/app/ui-tests-app/css/measure-tests.css Normal file
View File

@@ -0,0 +1,11 @@
.c {
border-width: 5; padding: 5; border-color: magenta; background-color: cyan;
}
.c1 {
border-width: 5; border-color: red green blue yellow; background-color: white; horizontal-align: left; margin: 1;
}
.c2 {
border-width: 5; padding: 10; border-color: red green blue yellow; background-color: white; horizontal-align: left; margin: 1;
}

16
apps/app/ui-tests-app/css/measure-tests.xml Normal file
View File

@@ -0,0 +1,16 @@
<Page>
<StackLayout class="c">
<Label text="Label" class="c1"/>
<Button text="Button" class="c1"/>
<TextField text="TextField" class="c1"/>
<TextView text="TextView" class="c1"/>
<Image src="~/ui-tests-app/image-view/gravatar2.png" class="c1" stretch="none"/>
<Label text="Label" class="c2"/>
<Button text="Button" class="c2"/>
<TextField text="TextField" class="c2"/>
<TextView text="TextView" class="c2" style.horizonhorizontalAlignmenttalAligment="left"/>
<Image src="~/ui-tests-app/image-view/gravatar2.png" class="c2" stretch="none"/>
</StackLayout>
</Page>

77
apps/app/ui-tests-app/css/text-field-border.css Normal file
View File

@@ -0,0 +1,77 @@
TextField {
font-size: 6;
width: 80;
height: 80;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/text-field-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
<TextField id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<TextField id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<TextField id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<TextField id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<TextField id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<TextField id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<TextField id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<TextField id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<TextField id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<TextField id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<TextField id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<TextField id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<TextField id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<TextField id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<TextField id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<TextField id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<TextField id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<TextField id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

77
apps/app/ui-tests-app/css/text-view-border.css Normal file
View File

@@ -0,0 +1,77 @@
TextView {
font-size: 6;
width: 80;
height: 80;
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 6 5 5 5; border-color: green;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}

22
apps/app/ui-tests-app/css/text-view-border.xml Normal file
View File

@@ -0,0 +1,22 @@
<Page>
<GridLayout rows="*,*,*,*,*,*" columns="*,*,*,">
<TextView id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
<TextView id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
<TextView id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
<TextView id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
<TextView id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
<TextView id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
<TextView id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
<TextView id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
<TextView id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
<TextView id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
<TextView id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
<TextView id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
<TextView id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
<TextView id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
<TextView id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
<TextView id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
<TextView id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
<TextView id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
</GridLayout>
</Page>

15
apps/app/ui-tests-app/font/button.ts
View File

@@ -14,9 +14,18 @@ export function resetStyles(args) {
v.style._resetValue(style.paddingRightProperty);
v.style._resetValue(style.paddingTopProperty);
v.style._resetValue(style.paddingBottomProperty);
v.style._resetValue(style.borderColorProperty);
v.style._resetValue(style.borderWidthProperty);
v.style._resetValue(style.borderRadiusProperty);
v.style._resetValue(style.borderTopColorProperty);
v.style._resetValue(style.borderRightColorProperty);
v.style._resetValue(style.borderBottomColorProperty);
v.style._resetValue(style.borderLeftColorProperty);
v.style._resetValue(style.borderTopWidthProperty);
v.style._resetValue(style.borderRightWidthProperty);
v.style._resetValue(style.borderBottomWidthProperty);
v.style._resetValue(style.borderLeftWidthProperty);
v.style._resetValue(style.borderTopLeftRadiusProperty);
v.style._resetValue(style.borderTopRightRadiusProperty);
v.style._resetValue(style.borderBottomRightRadiusProperty);
v.style._resetValue(style.borderBottomLeftRadiusProperty);
return true;
});
}

BIN
apps/app/ui-tests-app/image-view/gravatar2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 B