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

Merge pull request #1079 from NativeScript/white-space

Browse Source 
white-space CSS support added
This commit is contained in:
Vladimir Enchev
2015-11-12 15:39:32 +02:00
parent 94a658d2ed 4c5d1be197
commit d5b77f4897
23 changed files with 321 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,15 @@
import TKUnit = require("../../TKUnit");
import helper = require("../helper");
import buttonModule = require("ui/button");
import labelModule = require("ui/label");
import stackModule = require("ui/layouts/stack-layout");
import page = require("ui/page");
import color = require("color");
import observable = require("data/observable");
import enums = require("ui/enums");
import fontModule = require("ui/styling/font");
import platform = require("platform");
import viewModule = require("ui/core/view");
var testBtn: buttonModule.Button;
var testPage: page.Page;
@@ -33,6 +36,14 @@ export function tearDown() {
testPage.css = "";
}
export function test_setting_textDecoration_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("textDecoration", "text-decoration", "underline");
}
export function test_setting_whiteSpace_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("whiteSpace", "white-space", "nowrap");
}
export function test_CSS_properties_are_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("color", "color", new color.Color("#FF0000"), "#FF0000");
}
@@ -244,6 +255,58 @@ export function test_setting_different_color_triggers_property_change() {
TKUnit.assert(changed, "Property changed not triggered.");
}
export function test_setting_same_textDecoration_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
testView.style.textDecoration = "underline";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
changed = true;
});
testView.style.textDecoration = "underline";
TKUnit.assert(!changed, "Property changed triggered.");
}
export function test_setting_different_textDecoration_triggers_property_change() {
var testView = new buttonModule.Button();
testView.style.textDecoration = "underline";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
changed = true;
});
testView.style.textDecoration = "none";
TKUnit.assert(changed, "Property changed not triggered.");
}
export function test_setting_same_whiteSpace_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
testView.style.whiteSpace = "normal";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
changed = true;
});
testView.style.whiteSpace = "normal";
TKUnit.assert(!changed, "Property changed triggered.");
}
export function test_setting_different_whiteSpace_triggers_property_change() {
var testView = new buttonModule.Button();
testView.style.whiteSpace = "normal";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
changed = true;
});
testView.style.whiteSpace = "nowrap";
TKUnit.assert(changed, "Property changed not triggered.");
}
export function test_setting_same_backgroundColor_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
testView.style.backgroundColor = new color.Color("#FF0000");
@@ -366,3 +429,63 @@ function test_native_font(style: string, weight: string) {
}
//TODO: If needed add tests for other platforms
}
export var test_setting_button_whiteSpace_normal_sets_native = function () {
var testView = new buttonModule.Button();
testView.style.whiteSpace = "nowrap";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
TKUnit.assertEqual((<android.widget.Button>testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END);
} else if (platform.device.os === platform.platformNames.ios) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.NSLineBreakByTruncatingMiddle);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 1);
}
});
}
export var test_setting_label_whiteSpace_normal_sets_native = function () {
var testView = new labelModule.Label();
testView.style.whiteSpace = "nowrap";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
TKUnit.assertEqual((<android.widget.TextView>testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END);
} else if (platform.device.os === platform.platformNames.ios) {
TKUnit.assertEqual((<UILabel>testView.ios).lineBreakMode, NSLineBreakMode.NSLineBreakByTruncatingTail);
TKUnit.assertEqual((<UILabel>testView.ios).numberOfLines, 1);
}
});
}
export var test_setting_button_whiteSpace_nowrap_sets_native = function () {
var testView = new buttonModule.Button();
testView.style.whiteSpace = "normal";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
TKUnit.assertNull((<android.widget.Button>testView.android).getEllipsize(), null);
} else if (platform.device.os === platform.platformNames.ios) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.NSLineBreakByWordWrapping);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 0);
}
});
}
export var test_setting_label_whiteSpace_nowrap_sets_native = function () {
var testView = new labelModule.Label();
testView.style.whiteSpace = "normal";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
TKUnit.assertNull((<android.widget.TextView>testView.android).getEllipsize(), null);
} else if (platform.device.os === platform.platformNames.ios) {
TKUnit.assertEqual((<UILabel>testView.ios).lineBreakMode, NSLineBreakMode.NSLineBreakByWordWrapping);
TKUnit.assertEqual((<UILabel>testView.ios).numberOfLines, 0);
}
});
}

27
apps/ui-tests-app/css/text-decoration.ts
View File

@@ -1,17 +1,18 @@
var obj;
export function loaded(args) {
obj = args.object;
}
import view = require("ui/core/view");
import observable = require("data/observable");
import label = require("ui/label");
export function butonTap(args) {
if (obj.style.textDecoration === "underline") {
obj.style.textDecoration = "line-through";
} else if (obj.style.textDecoration === "line-through") {
obj.style.textDecoration = "line-through underline";
} else if (obj.style.textDecoration === "line-through underline") {
obj.style.textDecoration = "none";
} else if (obj.style.textDecoration === "none") {
obj.style.textDecoration = "underline";
var btn = <view.View>args.object;
var lbl = <label.Label>btn.parent.getViewById("Label1");
if (lbl.style.textDecoration === "underline") {
lbl.style.textDecoration = "line-through";
} else if (lbl.style.textDecoration === "line-through") {
lbl.style.textDecoration = "line-through underline";
} else if (lbl.style.textDecoration === "line-through underline") {
lbl.style.textDecoration = "none";
} else if (lbl.style.textDecoration === "none") {
lbl.style.textDecoration = "underline";
}
}

2
apps/ui-tests-app/css/text-decoration.xml
View File

@@ -2,7 +2,7 @@
<ScrollView>
<StackLayout>
<Button text="Change" tap="butonTap" />
<Label text="Text" style.textDecoration="underline" loaded="loaded"/>
<Label id="Label1" text="Text" style.textDecoration="underline" />
<Label text="Label" style="text-decoration:none" />
<Label text="Label" style="text-decoration:underline" />

14
apps/ui-tests-app/css/white-space.ts Normal file
View File

@@ -0,0 +1,14 @@
import view = require("ui/core/view");
import observable = require("data/observable");
import label = require("ui/label");
export function butonTap(args: observable.EventData) {
var btn = <view.View>args.object;
var lbl = <label.Label>btn.parent.getViewById("Label1");
if (lbl.style.whiteSpace === "normal") {
lbl.style.whiteSpace = "nowrap";
} else if (lbl.style.whiteSpace === "nowrap") {
lbl.style.whiteSpace = "normal";
}
}

20
apps/ui-tests-app/css/white-space.xml Normal file
View File

@@ -0,0 +1,20 @@
<Page >
<ScrollView>
<StackLayout width="50">
<Button text="Change" tap="butonTap" />
<Label id="Label1" text="Text Text" style.whiteSpace="normal" />
<Label text="Label Normal" style="white-space:normal" />
<Label text="Label Nowrap" style="white-space:nowrap" />
<TextField text="TextField Normal" style="white-space:normal" />
<TextField text="TextField Nowrap" style="white-space:nowrap" />
<TextView text="TextView Normal" style="white-space:normal" />
<TextView text="TextView Nowrap" style="white-space:nowrap" />
<Button text="Button Normal" style="white-space:normal" />
<Button text="Button Nowrap" style="white-space:nowrap" />
</StackLayout>
</ScrollView>
</Page>

2
apps/ui-tests-app/mainPage.ts
View File

@@ -90,4 +90,6 @@ examples.set("webview", "web-view/web-view");
examples.set("webtest", "web-view/web-view-test");
examples.set("decoration", "css/text-decoration");
examples.set("whitespace", "css/white-space");
//VM.set("selected", "tabAll");