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

Border/background render fixes

Browse Source
This commit is contained in:
vakrilov
2015-07-06 13:19:00 +03:00
parent 2b292eec7c
commit 62553d9d24
8 changed files with 157 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/tests/pages/background-test.ts
View File

@@ -1,5 +1,3 @@
import observable = require("data/observable");
import pages = require("ui/page");
import view = require("ui/core/view");
export function applyTap(args) {
var el = view.getViewById(view.getAncestor(args.object, "Page"), "test-element");

40
apps/tests/pages/background-test.xml
View File

@@ -1,28 +1,34 @@
<Page loaded="pageLoaded">
<GridLayout rows="auto,*">
<WrapLayout>
<!-- Background and Border -->
<Button width="50" height="50" text="r" tap="resetTap"/>
<Button width="50" height="50" text="1" tap="applyTap" tag="background-color: green;"/>
<Button width="50" height="50" text="2" tap="applyTap" tag="background-color: green; border-color: red; border-radius: 20; border-width: 4;"/>
<Button width="50" height="50" text="3" tap="applyTap" tag="background-image: url('~/pages/test2.png');"/>
<Button width="50" height="50" text="4" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-y;"/>
<Button width="50" height="50" text="5" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-x;"/>
<Button width="50" height="50" text="1" tap="applyTap" tag="margin: 20; background-color: lightgreen;"/>
<Button width="50" height="50" text="2.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 20; border-width: 40;"/>
<Button width="50" height="50" text="2.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 40;"/>
<Button width="50" height="50" text="2.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 20;"/>
<!-- Repeat -->
<Button width="50" height="50" text="3.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png');"/>
<Button width="50" height="50" text="3.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-y;"/>
<Button width="50" height="50" text="3.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x;"/>
<Button width="50" height="50" text="6" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat;"/>
<Button width="50" height="50" text="7" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left top;"/>
<Button width="50" height="50" text="8" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
<Button width="50" height="50" text="9" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: right bottom;"/>
<Button width="50" height="50" text="10" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
<!-- Position -->
<Button width="50" height="50" text="4.1" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat;"/>
<Button width="50" height="50" text="4.2" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: left top;"/>
<Button width="50" height="50" text="4.3" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center;"/>
<Button width="50" height="50" text="4.4" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: right bottom;"/>
<Button width="50" height="50" text="4.5" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: 20% 80%;"/>
<Button width="50" height="50" text="11" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100;"/>
<Button width="50" height="50" text="12" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
<Button width="50" height="50" text="13" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
<Button width="50" height="50" text="14" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
<Button width="50" height="50" text="15" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100; background-color: green;"/>
<!-- Size -->
<Button width="50" height="50" text="5.1" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100;"/>
<Button width="50" height="50" text="5.2" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
<Button width="50" height="50" text="5.3" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: cover;"/>
<Button width="50" height="50" text="5.4" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: contain;"/>
<Button width="50" height="50" text="5.5" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/pages/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100 100; background-color: lightgreen;"/>
<Button width="50" height="50" text="16" tap="applyTap" tag="background-image: url('~/pages/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-color: green; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: red;"/>
<!-- All -->
<Button width="50" height="50" text="6" tap="applyTap" tag="margin: 20; background-image: url('~/pages/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-color: lightgreen; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: lightpink;"/>
</WrapLayout>
<GridLayout id="test-element" row="1">

32
apps/tests/ui/style/style-properties-tests.ts
View File

@@ -39,8 +39,32 @@ export function test_setting_backgroundColor_property_from_CSS_is_applied_to_Sty
test_property_from_CSS_is_applied_to_style("backgroundColor", "background-color", new color.Color("#FF0000"), "#FF0000");
}
export function test_setting_fontSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontSize", "font-size", 32);
export function test_setting_backgroundRepeat_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundRepeat", "background-repeat", "repeat-x");
}
export function test_setting_backgroundSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundSize", "background-size", "10% 20%");
}
export function test_setting_backgroundPosition_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundPosition", "background-position", "left center");
}
export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundImage", "background-image", "url('~/pages/test2.png')");
}
export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5);
}
export function test_setting_borderColor_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new color.Color("#FF0000"), "#FF0000");
}
export function test_setting_borderRadius_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20);
}
export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() {
@@ -81,6 +105,10 @@ export function test_setting_opacity_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("opacity", "opacity", 0.5);
}
export function test_setting_fontSize_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontSize", "font-size", 32);
}
export function test_setting_fontFamily_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontFamily", "font-family", "Helvetica");
}