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 #3447 from NativeScript/style-properties-tests

Browse Source 
Style-properties tests
This commit is contained in:
Alexander Vakrilov
2017-01-09 17:43:42 +02:00
committed by GitHub
parent 522cf7a09a 14e1da5820
commit e3acdcbc78
11 changed files with 522 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/app/testRunner.ts
View File

@@ -63,7 +63,7 @@ allTests["ABSOLUTELAYOUT"] = require("./ui/layouts/absolute-layout-tests");
allTests["GRIDLAYOUT"] = require("./ui/layouts/grid-layout-tests");
allTests["STACKLAYOUT"] = require("./ui/layouts/stack-layout-tests");
allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
// allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
// allTests["FRAME"] = require("./ui/frame/frame-tests");
// allTests["VIEW"] = require("./ui/view/view-tests");
// allTests["STYLE"] = require("./ui/styling/style-tests");

13
tests/app/ui-test.ts
View File

@@ -1,11 +1,11 @@
import {Page} from "ui/page";
import {View} from "ui/core/view";
import { Page } from "ui/page";
import { View } from "ui/core/view";
import * as trace from "trace";
import * as navHelper from "./ui/helper";
import * as TKUnit from "./TKUnit";
export class UITest<T extends View> implements trace.TraceWriter {
private _testPage: Page;
private _testView: T;
private _errorMessage;
@@ -39,9 +39,8 @@ export class UITest<T extends View> implements trace.TraceWriter {
}
public setUpModule(): void {
var pageFactory = () => {
var page = new Page();
const pageFactory = () => {
const page = new Page();
this._testPage = page;
return page;
};
@@ -56,7 +55,7 @@ export class UITest<T extends View> implements trace.TraceWriter {
trace.removeWriter(this);
}
public setUp() {
public setUp() {
this._testView = this.create();
this._testPage.content = this._testView;
}

289
tests/app/ui/label/label-tests.ts
View File

@@ -14,55 +14,55 @@ import * as enums from "ui/enums";
import * as labelTestsNative from "./label-tests-native";
import * as fs from "file-system";
import {StackLayout} from "ui/layouts/stack-layout";
import {GridLayout} from "ui/layouts/grid-layout";
import {isIOS} from "platform";
import {Label} from "ui/label";
import {LayoutBase} from "ui/layouts/layout-base";
import { StackLayout } from "ui/layouts/stack-layout";
import { GridLayout } from "ui/layouts/grid-layout";
import { isIOS, isAndroid } from "platform";
import { Label } from "ui/label";
import { LayoutBase } from "ui/layouts/layout-base";
import * as helper from "../helper";
export class LabelTest extends testModule.UITest<LabelModule.Label> {
public create(): LabelModule.Label {
var label = new LabelModule.Label();
const label = new LabelModule.Label();
label.text = "Label";
return label;
}
public test_Label_Members() {
var label = new LabelModule.Label();
const label = new LabelModule.Label();
TKUnit.assert(types.isDefined(label.text), "Label.text is not defined");
TKUnit.assert(types.isDefined(label.textWrap), "Label.textWrap is not defined");
}
public snippet_Set_Text_TNS() {
// >> label-settext
var label = new LabelModule.Label();
var expectedValue = "Expected Value";
const label = new LabelModule.Label();
const expectedValue = "Expected Value";
label.text = expectedValue;
// << label-settext
}
public snippet_Set_TextWrap_TNS() {
// >> label-textwrap
var label = new LabelModule.Label();
const label = new LabelModule.Label();
label.textWrap = true;
// << label-textwrap
}
public test_Set_Text_TNS() {
var label = this.testView;
var expectedValue = "Expected Value";
const label = this.testView;
const expectedValue = "Expected Value";
label.text = expectedValue;
TKUnit.assertEqual(label.text, expectedValue, "Text not equal");
}
public test_Set_Text_Native() {
var testLabel = this.testView;
var expectedValue = "Expected Value";
const testLabel = this.testView;
const expectedValue = "Expected Value";
testLabel.text = expectedValue;
var actualNative;
let actualNative;
if (testLabel.ios) {
actualNative = testLabel.ios.text;
}
@@ -75,11 +75,11 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public test_Set_Text_Native_Null() {
var testLabel = this.testView;
var expectedValue = "";
const testLabel = this.testView;
const expectedValue = "";
testLabel.text = null;
var actualNative;
let actualNative;
if (testLabel.ios) {
actualNative = testLabel.ios.text;
}
@@ -92,11 +92,11 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public test_Set_Text_Native_Undefined() {
var testLabel = this.testView;
var expectedValue = "";
const testLabel = this.testView;
const expectedValue = "";
testLabel.text = undefined;
var actualNative;
let actualNative;
if (testLabel.ios) {
actualNative = testLabel.ios.text;
}
@@ -109,118 +109,93 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public test_Set_BackgroundColor_TNS() {
var label = this.testView;
var expectedValue = new colorModule.Color("Red");
const label = this.testView;
const expectedValue = new colorModule.Color("Red");
label.backgroundColor = expectedValue;
var actual = label.style.backgroundColor;
const actual = label.style.backgroundColor;
TKUnit.assertEqual(actual, expectedValue, "BackgroundColor not equal");
}
public test_Set_BackgroundColor_Native() {
var testLabel = this.testView;
var expectedValue = new colorModule.Color("Red");
const testLabel = this.testView;
const expectedValue = new colorModule.Color("Red");
testLabel.backgroundColor = expectedValue;
if (testLabel.android) {
this.waitUntilTestElementIsLoaded();
}
var actualNative = labelTestsNative.getNativeBackgroundColor(testLabel);
const actualNative = labelTestsNative.getNativeBackgroundColor(testLabel);
TKUnit.assertEqual(actualNative, expectedValue);
}
public test_measuredWidth_is_not_clipped() {
var label = this.testView;
const label = this.testView;
label.horizontalAlignment = "left";
label.text = "i";
label.fontSize = 9;
if (label.ios) {
this.waitUntilTestElementLayoutIsValid();
var expectedValue = 3;
var measuredWidth = label.getMeasuredWidth();
const expectedValue = 3;
const measuredWidth = label.getMeasuredWidth();
TKUnit.assertEqual(measuredWidth, expectedValue, "measuredWidth should not be rounded down.");
}
}
public test_Set_TextWrap_Native() {
var testLabel = this.testView;
const testLabel = this.testView;
testLabel.text = "this is very very very very very very very very very very very very very very very very very very very very very very very long text";
testLabel.textWrap = true;
this.waitUntilTestElementLayoutIsValid();
var actualLineBreakMode;
var actualLinesNumber;
var actualEllipsize;
var actualHorizontalScrolling;
var actualTransformationMethod;
if (testLabel.android) {
actualEllipsize = testLabel.android.getEllipsize();
actualLinesNumber = testLabel.android.getLineCount();
actualHorizontalScrolling = testLabel.android.canScrollHorizontally(-1) || testLabel.android.canScrollHorizontally(1);
actualTransformationMethod = testLabel.android.getTransformationMethod();
TKUnit.assertNull(actualEllipsize);
TKUnit.assertEqual(actualLinesNumber, 1, "LinesNumber");
TKUnit.assertEqual(actualHorizontalScrolling, false, "HorizontalScrolling");
TKUnit.assertNull(actualTransformationMethod, "TransformationMethod");
if (isAndroid) {
TKUnit.assertNull(testLabel.android.getEllipsize());
TKUnit.assertTrue(testLabel.android.getLineCount() > 1, "LinesNumber");
const actualHorizontalScrolling = testLabel.android.canScrollHorizontally(-1) || testLabel.android.canScrollHorizontally(1);
TKUnit.assertFalse(actualHorizontalScrolling, "HorizontalScrolling");
TKUnit.assertNull(testLabel.android.getTransformationMethod(), "TransformationMethod");
}
else {
actualLineBreakMode = testLabel.ios.lineBreakMode;
actualLinesNumber = testLabel.ios.numberOfLines;
TKUnit.assertEqual(actualLineBreakMode, NSLineBreakMode.ByTruncatingTail, "LineBreakMode");
TKUnit.assertEqual(actualLinesNumber, 1, "LinesNumber");
if (isIOS) {
TKUnit.assertEqual(testLabel.ios.lineBreakMode, NSLineBreakMode.ByWordWrapping, "LineBreakMode");
TKUnit.assertEqual(testLabel.ios.numberOfLines, 0, "LinesNumber");
}
}
public test_Set_TextWrapFirstTrueThenFalse_Native() {
var testLabel = this.testView;
const testLabel = this.testView;
testLabel.text = "this is very very very very very very very very very very very very very very very very very very very very very very very long text";
testLabel.textWrap = true;
this.waitUntilTestElementLayoutIsValid();
testLabel.textWrap = false;
this.waitUntilTestElementLayoutIsValid();
var expectedLineBreakMode;
var expectedLinesNumber = 1;
var actualLineBreakMode;
var actualLinesNumber;
var actualEllipsize;
var actualHorizontalScrolling;
var actualTransformationMethod;
if (testLabel.android) {
actualEllipsize = testLabel.android.getEllipsize();
actualLinesNumber = testLabel.android.getLineCount();
actualHorizontalScrolling = testLabel.android.canScrollHorizontally(-1) || testLabel.android.canScrollHorizontally(1);
actualTransformationMethod = testLabel.android.getTransformationMethod();
TKUnit.assertEqual(actualEllipsize, android.text.TextUtils.TruncateAt.END, "Ellipsize");
if (isAndroid) {
TKUnit.assertEqual(testLabel.android.getEllipsize(), android.text.TextUtils.TruncateAt.END, "Ellipsize");
const actualHorizontalScrolling = testLabel.android.canScrollHorizontally(-1) || testLabel.android.canScrollHorizontally(1);
TKUnit.assertEqual(actualHorizontalScrolling, false, "HorizontalScrolling");
TKUnit.assert(("" + actualTransformationMethod).indexOf("SingleLineTransformationMethod") > -1, "Expected: SingleLineTransformationMethod, Actual: " + actualTransformationMethod);
}
else {
expectedLineBreakMode = NSLineBreakMode.ByTruncatingTail;
actualLineBreakMode = testLabel.ios.lineBreakMode;
actualLinesNumber = testLabel.ios.numberOfLines;
TKUnit.assert(("" + testLabel.android.getTransformationMethod()).indexOf("SingleLineTransformationMethod") > -1, "Expected: SingleLineTransformationMethod, Actual: " + testLabel.android.getTransformationMethod());
TKUnit.assertEqual(testLabel.android.getLineCount(), 1, "LinesNumber");
TKUnit.assertEqual(actualLineBreakMode, expectedLineBreakMode, "LineBreakMode");
}
if (isIOS) {
TKUnit.assertEqual(testLabel.ios.lineBreakMode, NSLineBreakMode.ByTruncatingTail, "LineBreakMode");
TKUnit.assertEqual(testLabel.ios.numberOfLines, 1, "LinesNumber");
}
TKUnit.assertEqual(actualLinesNumber, expectedLinesNumber, "LinesNumber");
}
public test_SetStyleProperties_via_css_class_Native() {
var label = this.testView;
const label = this.testView;
var fontSize = 14;
var color = "#ffff0000";
var backgroundColor = "#ff00ff00";
var testCss = [".title {background-color: ", backgroundColor, "; ",
const fontSize = 14;
const color = "#ffff0000";
const backgroundColor = "#ff00ff00";
const testCss = [".title {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
@@ -231,30 +206,30 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// << label-cssclass
var actualTextSize;
var expSize;
var actualColors;
var expColor;
var normalColor;
var actualBackgroundColor;
var expBackgroundColor;
let actualTextSize;
let expSize;
let actualColors;
let expColor;
let normalColor;
let actualBackgroundColor;
let expBackgroundColor;
this.testPage.css = testCss;
this.waitUntilTestElementIsLoaded();
var testLabel = label;
const testLabel = label;
if (testLabel.android) {
actualTextSize = testLabel.android.getTextSize();
var density = utils.layout.getDisplayDensity();
const density = utils.layout.getDisplayDensity();
expSize = fontSize * density;
TKUnit.assertAreClose(actualTextSize, expSize, 0.1, "Wrong native FontSize");
actualColors = testLabel.android.getTextColors();
expColor = android.graphics.Color.parseColor(color);
normalColor = actualColors.getDefaultColor()
normalColor = actualColors.getDefaultColor();
TKUnit.assert(normalColor, "Expected: " + expColor + ", Actual: " + normalColor);
var bkg = (<org.nativescript.widgets.BorderDrawable>testLabel.android.getBackground());
const bkg = (<org.nativescript.widgets.BorderDrawable>testLabel.android.getBackground());
actualBackgroundColor = bkg.getBackgroundColor();
expBackgroundColor = android.graphics.Color.parseColor(backgroundColor);
TKUnit.assertEqual(actualBackgroundColor, expBackgroundColor);
@@ -268,8 +243,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
expColor = new colorModule.Color(color);
TKUnit.assertEqual(normalColor.hex, expColor.hex);
var cgColor = (<UILabel>testLabel.ios).layer.backgroundColor;
var uiColor = UIColor.colorWithCGColor(cgColor);
const cgColor = (<UILabel>testLabel.ios).layer.backgroundColor;
const uiColor = UIColor.colorWithCGColor(cgColor);
actualBackgroundColor = utils.ios.getColor(uiColor);
expBackgroundColor = new colorModule.Color(backgroundColor);
TKUnit.assertEqual(actualBackgroundColor.hex, expBackgroundColor.hex);
@@ -277,11 +252,11 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public test_SetStyleProperties_via_css_type_TNS() {
var label = this.testView;
var fontSize = 14;
var color = "#10C2B0";
var backgroundColor = "#C6C6C6";
var testCss = ["label {background-color: ", backgroundColor, "; ",
const label = this.testView;
const fontSize = 14;
const color = "#10C2B0";
const backgroundColor = "#C6C6C6";
const testCss = ["label {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
@@ -294,24 +269,24 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
// testLabel.parentPage.css = "label {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// all labels within the parent page will be styled according to css values
// << label-cssclass-type
var expectedBackgroundColor = new colorModule.Color(backgroundColor);
var actualBackgroundColor = label.style.backgroundColor;
const expectedBackgroundColor = new colorModule.Color(backgroundColor);
const actualBackgroundColor = label.style.backgroundColor;
TKUnit.assertEqual(expectedBackgroundColor.hex, actualBackgroundColor.hex);
var expectedColor = new colorModule.Color(color);
var actualColor = label.style.color;
const expectedColor = new colorModule.Color(color);
const actualColor = label.style.color;
TKUnit.assertEqual(expectedColor.hex, actualColor.hex);
var actualFontSize = label.style.fontSize;
const actualFontSize = label.style.fontSize;
TKUnit.assertEqual(actualFontSize, 14);
}
public test_SetStyleProperties_via_css_id() {
var label = this.testView;
var fontSize = 14;
var color = "#10C2B0";
var backgroundColor = "#C6C6C6";
var testCss = ["#testLabel {background-color: ", backgroundColor, "; ",
const label = this.testView;
const fontSize = 14;
const color = "#10C2B0";
const backgroundColor = "#C6C6C6";
const testCss = ["#testLabel {background-color: ", backgroundColor, "; ",
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
@@ -325,24 +300,24 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
// label.parentPage.css = "#testLabel {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// << label-css-identifier
var expectedBackgroundColor = new colorModule.Color(backgroundColor);
var actualBackgroundColor = label.style.backgroundColor;
const expectedBackgroundColor = new colorModule.Color(backgroundColor);
const actualBackgroundColor = label.style.backgroundColor;
TKUnit.assertEqual(expectedBackgroundColor.hex, actualBackgroundColor.hex);
var expectedColor = new colorModule.Color(color);
var actualColor = label.style.color;
const expectedColor = new colorModule.Color(color);
const actualColor = label.style.color;
TKUnit.assertEqual(expectedColor.hex, actualColor.hex);
var actualFontSize = label.style.fontSize;
const actualFontSize = label.style.fontSize;
TKUnit.assertEqual(fontSize, actualFontSize);
}
public test_BindingToText() {
// >> label-observable
var label = new LabelModule.Label();
var expValue = "Expected Value";
var sourceModel = new observableModule.Observable();
var bindingOptions: bindable.BindingOptions = {
const label = new LabelModule.Label();
const expValue = "Expected Value";
const sourceModel = new observableModule.Observable();
const bindingOptions: bindable.BindingOptions = {
sourceProperty: "sourceProperty",
targetProperty: "text"
};
@@ -355,19 +330,19 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public test_BindingToText_Native() {
var label = this.testView;
const label = this.testView;
this.waitUntilTestElementIsLoaded();
var expValue = "Expected Value";
var sourceModel = new observableModule.Observable();
var bindingOptions: bindable.BindingOptions = {
const expValue = "Expected Value";
const sourceModel = new observableModule.Observable();
const bindingOptions: bindable.BindingOptions = {
sourceProperty: "sourceProperty",
targetProperty: "text"
};
sourceModel.set("sourceProperty", expValue);
label.bind(bindingOptions, sourceModel);
var actualNative;
let actualNative;
if (label.android) {
actualNative = label.android.getText();
}
@@ -379,23 +354,23 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public test_BindingToText_WithBindingContext() {
var label = this.testView;
const label = this.testView;
this.waitUntilTestElementIsLoaded();
var firstExpValue = "Expected Value";
var bindingOptions: bindable.BindingOptions = {
const firstExpValue = "Expected Value";
const bindingOptions: bindable.BindingOptions = {
sourceProperty: "sourceProperty",
targetProperty: "text"
};
label.bind(bindingOptions);
var firstSourceObject = new observableModule.Observable();
const firstSourceObject = new observableModule.Observable();
firstSourceObject.set("sourceProperty", firstExpValue);
this.testPage.bindingContext = firstSourceObject;
TKUnit.assertEqual(label.text, firstExpValue);
var secondExpValue = "Second value";
var secondSourceObject = new observableModule.Observable();
const secondExpValue = "Second value";
const secondSourceObject = new observableModule.Observable();
secondSourceObject.set("sourceProperty", secondExpValue);
this.testPage.bindingContext = secondSourceObject;
@@ -404,22 +379,22 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
// TODO: Check if bindings will be cleared when the target property is set.
// public test_BindingToText_BindingContext_SetingLocalValue() {
// var label = this.testView;
// const label = this.testView;
// this.waitUntilTestElementIsLoaded();
// var firstExpValue = "Expected Value";
// var bindingOptions: bindable.BindingOptions = {
// const firstExpValue = "Expected Value";
// const bindingOptions: bindable.BindingOptions = {
// sourceProperty: "sourceProperty",
// targetProperty: "text"
// };
// label.bind(bindingOptions);
// var firstSourceObject = new observableModule.Observable();
// const firstSourceObject = new observableModule.Observable();
// firstSourceObject.set("sourceProperty", firstExpValue);
// this.testPage.bindingContext = firstSourceObject;
// TKUnit.assertEqual(label.text, firstExpValue);
// var secondExpValue = "Second value";
// const secondExpValue = "Second value";
// label.text = secondExpValue;
// TKUnit.assertEqual(label.text, secondExpValue);
@@ -430,19 +405,19 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
private expectedTextAlignment: "right" = "right";
public testLocalTextAlignmentFromCss() {
var label = this.testView;
const label = this.testView;
this.testPage.css = "label { text-align: " + this.expectedTextAlignment + "; }";
this.waitUntilTestElementIsLoaded();
TKUnit.assertEqual(label.style.textAlignment, this.expectedTextAlignment);
}
public testLocalTextAlignmentFromCssWhenAddingCss() {
var view = this.testView;
var page = this.testPage;
const view = this.testView;
const page = this.testPage;
this.waitUntilTestElementIsLoaded();
page.addCss("label { text-align: " + this.expectedTextAlignment + "; }");
var actualResult = view.style.textAlignment;
const actualResult = view.style.textAlignment;
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
page.addCss("label { text-align: " + enums.TextAlignment.left + "; }");
@@ -450,57 +425,57 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public testLocalTextAlignmentFromCssWhenAddingCssAllSelectorsAreApplied() {
var view = this.testView;
var page = this.testPage;
const view = this.testView;
const page = this.testPage;
this.waitUntilTestElementIsLoaded();
view.id = "testLabel";
page.addCss("#testLabel { text-align: " + this.expectedTextAlignment + "; }");
page.addCss("label { text-align: " + enums.TextAlignment.left + "; }");
var actualResult = view.style.textAlignment;
const actualResult = view.style.textAlignment;
// actual result is taken from #testLabel tag, because it has a greater priority (id vs type).
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
}
public testLocalTextAlignmentFromCssWhenAddingCssFileAllSelectorsAreApplied() {
var view = this.testView;
var page = this.testPage;
const view = this.testView;
const page = this.testPage;
this.waitUntilTestElementIsLoaded();
view.id = "testLabel";
page.addCss("#testLabel { text-align: " + this.expectedTextAlignment + "; }");
page.addCssFile(fs.path.join(__dirname, "label-tests.css"));
var actualResult = view.style.textAlignment;
const actualResult = view.style.textAlignment;
// actual result is taken from #testLabel tag, because it has a greater priority (id vs type).
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
TKUnit.assertEqual(view.style.backgroundColor.hex, "#FF0000");
}
public testNativeTextAlignmentFromCss() {
var view = this.testView;
var page = this.testPage;
const view = this.testView;
const page = this.testPage;
this.waitUntilTestElementIsLoaded();
page.css = "label { text-align: " + this.expectedTextAlignment + "; }";
var actualResult = labelTestsNative.getNativeTextAlignment(view);
const actualResult = labelTestsNative.getNativeTextAlignment(view);
TKUnit.assert(actualResult, this.expectedTextAlignment);
}
public testNativeTextAlignmentFromLocal() {
var view = this.testView;
const view = this.testView;
this.waitUntilTestElementIsLoaded();
view.style.textAlignment = this.expectedTextAlignment;
var actualResult = labelTestsNative.getNativeTextAlignment(view);
const actualResult = labelTestsNative.getNativeTextAlignment(view);
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
}
public testErrorMessageWhenWrongCssIsAddedWithFile() {
var view = this.testView;
var page = this.testPage;
const view = this.testView;
const page = this.testPage;
this.waitUntilTestElementIsLoaded();
view.id = "testLabel";
@@ -509,8 +484,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public testErrorMessageWhenWrongCssIsAdded() {
var view = this.testView;
var page = this.testPage;
const view = this.testView;
const page = this.testPage;
this.waitUntilTestElementIsLoaded();
view.id = "testLabel";
@@ -530,14 +505,14 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
let actualResult = labelTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor);
}
};
public test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormattedText_DoesNotCrash() {
let view = this.testView;
view.text = "NormalText";
this.waitUntilTestElementIsLoaded();
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing");
@@ -549,7 +524,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
this.waitUntilTestElementIsLoaded();
view.formattedText = formattedString;
view.setInlineStyle("text-transform: uppercase; text-decoration: underline; letter-spacing: 1;");
TKUnit.assertEqual(view.style.textTransform, enums.TextTransform.uppercase, "TextTransform");
TKUnit.assertEqual(view.style.textDecoration, enums.TextDecoration.underline, "TextDecoration");
TKUnit.assertEqual(view.style.letterSpacing, 1, "LetterSpacing");

481
tests/app/ui/styling/style-properties-tests.ts
View File

@@ -1,26 +1,24 @@
import * as TKUnit from "../../TKUnit";
import * as helper from "../helper";
import * as buttonModule from "ui/button";
import * as labelModule from "ui/label";
import * as textFieldModule from "ui/text-field";
import * as textViewModule from "ui/text-view";
import * as stackModule from "ui/layouts/stack-layout";
import * as page from "ui/page";
import * as color from "color";
import * as observable from "data/observable";
import * as enums from "ui/enums";
import * as fontModule from "ui/styling/font";
import * as platform from "platform";
import * as viewModule from "ui/core/view";
import { Button } from "ui/button";
import { Label } from "ui/label";
import { TextField } from "ui/text-field";
import { TextView } from "ui/text-view";
import { StackLayout } from "ui/layouts/stack-layout";
import { Page } from "ui/page";
import { Color } from "color";
import { isAndroid, isIOS } from "platform";
import { View } from "ui/core/view";
import { Length, PercentLength } from "ui/core/view";
import * as fontModule from "ui/styling/font";
var testBtn: buttonModule.Button;
var testPage: page.Page;
let testBtn: Button;
let testPage: Page;
export function setUpModule() {
var pageFactory = function () {
testPage = new page.Page();
testBtn = new buttonModule.Button();
const pageFactory = function () {
testPage = new Page();
testBtn = new Button();
testBtn.text = "test";
testBtn.id = "testBtn";
testPage.content = testBtn;
@@ -50,12 +48,12 @@ 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");
export function test_setting_color_property_from_CSS_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("color", "color", new Color("#FF0000"), "#FF0000");
}
export function test_setting_backgroundColor_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("backgroundColor", "background-color", new color.Color("#FF0000"), "#FF0000");
test_property_from_CSS_is_applied_to_style("backgroundColor", "background-color", new Color("#FF0000"), "#FF0000");
}
export function test_setting_backgroundRepeat_property_from_CSS_is_applied_to_Style() {
@@ -75,44 +73,76 @@ export function test_setting_backgroundImage_property_from_CSS_is_applied_to_Sty
}
export function test_setting_borderWidth_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", 5);
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5", true);
}
export function test_setting_borderWidth_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", { value: 5, unit: "dip" }, "5dip", true);
}
export function test_setting_borderWidth_multiple_values_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderWidth", "border-width", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
}
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");
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new Color("#FF0000"), "#FF0000");
}
export function test_setting_borderColorRGB_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new color.Color("#FF0000"), "rgb(255, 0, 0)");
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new Color("#FF0000"), "rgb(255, 0, 0)");
}
export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new color.Color("#FF0000"), "rgba(255,0,0,1)");
test_property_from_CSS_is_applied_to_style("borderColor", "border-color", new Color("#FF0000"), "rgba(255,0,0,1)");
}
export function test_setting_borderRadius_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", 20);
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20", true);
}
export function test_setting_borderRadius_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", { value: 20, unit: "dip" }, "20dip", true);
}
export function test_setting_borderRadius_multiple_values_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("borderRadius", "border-radius", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
}
export function test_setting_textAlignment_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("textAlignment", "text-align", "center");
}
const testLength: PercentLength = { value: 200, unit: "dip" };
export function test_setting_width_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200", true);
}
test_property_from_CSS_is_applied_to_style("width", "width", 200);
export function test_setting_width_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("width", "width", testLength, "200dip", true);
}
export function test_setting_height_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("height", "height", 200);
test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200", true);
}
export function test_setting_height_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("height", "height", testLength, "200dip", true);
}
export function test_setting_minWidth_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("minWidth", "min-width", 200);
test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200", true);
}
export function test_setting_minWidth_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("minWidth", "min-width", testLength, "200dip", true);
}
export function test_setting_minHeight_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("minHeight", "min-height", 200);
test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200", true);
}
export function test_setting_minHeight_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("minHeight", "min-height", testLength, "200dip", true);
}
export function test_setting_verticalAlignment_property_from_CSS_is_applied_to_Style() {
@@ -128,7 +158,35 @@ export function test_setting_horizontalAlignment_property_from_CSS_is_applied_to
}
export function test_setting_visibility_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("visibility", "visibility", "collapsed");
test_property_from_CSS_is_applied_to_style("visibility", "visibility", "collapse");
}
export function test_setting_margin_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10", true);
}
export function test_setting_margin_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 10, unit: "dip" }, "10dip", true);
}
export function test_setting_margin_percent_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("margin", "margin", { value: 0.05, unit: "%" }, "5%", true);
}
export function test_setting_margin_multiple_values_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("margin", "margin", "1dip 2% 3dip 4dip", "1 2% 3 4dip");
}
export function test_setting_padding_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10", true);
}
export function test_setting_padding_dip_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("padding", "padding", { value: 10, unit: "dip" }, "10dip", true);
}
export function test_setting_padding_multiple_values_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("padding", "padding", "1dip 2dip 3dip 4dip", "1 2dip 3 4dip");
}
export function test_setting_opacity_property_from_CSS_is_applied_to_Style() {
@@ -151,15 +209,18 @@ export function test_setting_fontStyle_property_from_CSS_is_applied_to_Style() {
test_property_from_CSS_is_applied_to_style("fontStyle", "font-style", "italic");
}
function test_property_from_CSS_is_applied_to_style(propName: string, cssName: string, value: any, cssValue?: string) {
function test_property_from_CSS_is_applied_to_style(propName: string, cssName: string, value: any, cssValue?: string, useDeepEquals: boolean = false) {
if (!cssValue) {
cssValue = value + "";
}
testPage.css = "#testBtn { " + cssName + ": " + cssValue + " }";
TKUnit.assertEqual(testBtn.style[propName], value, "Setting property " + propName + " with CSS name " + cssName);
if (useDeepEquals) {
TKUnit.assertDeepEqual(testBtn.style[propName], value);
} else {
TKUnit.assertEqual(testBtn.style[propName], value, "Setting property " + propName + " with CSS name " + cssName);
}
testPage.css = "";
}
@@ -188,19 +249,19 @@ export function test_horizontalAlignment_property_is_synced_in_style_and_view()
}
export function test_borderTopColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderTopColor", new color.Color("red"));
test_property_is_synced_in_style_and_view("borderTopColor", new Color("red"));
}
export function test_borderRightColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderRightColor", new color.Color("green"));
test_property_is_synced_in_style_and_view("borderRightColor", new Color("green"));
}
export function test_borderBottomColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderBottomColor", new color.Color("blue"));
test_property_is_synced_in_style_and_view("borderBottomColor", new Color("blue"));
}
export function test_borderLeftColor_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("borderLeftColor", new color.Color("yellow"));
test_property_is_synced_in_style_and_view("borderLeftColor", new Color("yellow"));
}
export function test_borderTopWidth_property_is_synced_in_style_and_view() {
@@ -268,61 +329,61 @@ export function test_paddingRight_property_is_synced_in_style_and_view() {
}
export function test_visibility_property_is_synced_in_style_and_view() {
test_property_is_synced_in_style_and_view("visibility", "collapsed");
test_property_is_synced_in_style_and_view("visibility", "collapse");
}
function test_property_is_synced_in_style_and_view(propName: string, value: any) {
var testView = new buttonModule.Button();
const testView = new Button();
testView[propName] = value;
TKUnit.assertEqual(testView.style[propName], value, "Setting view property " + propName + " does not set style property.");
var testView2 = new buttonModule.Button();
const testView2 = new Button();
testView2[propName] = value;
TKUnit.assertEqual(testView2.style[propName], value, "Setting style property " + propName + " does not set view property.");
}
function test_property_is_synced_in_style_and_layout_view(propName: string, value: any) {
var testView = new stackModule.StackLayout();
const testView = new StackLayout();
testView[propName] = value;
TKUnit.assertEqual(testView.style[propName], value, "Setting view property " + propName + " does not set style property.");
var testView2 = new stackModule.StackLayout();
const testView2 = new StackLayout();
testView2[propName] = value;
TKUnit.assertEqual(testView2.style[propName], value, "Setting style property " + propName + " does not set view property.");
}
export function test_setting_same_color_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
testView.style.color = new color.Color("#FF0000");
const testView = new Button();
testView.style.color = new Color("#FF0000");
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("colorChange", (data) => {
changed = true;
});
testView.style.color = new color.Color("#FF0000");
testView.style.color = new Color("#FF0000");
TKUnit.assert(!changed, "Property changed triggered.");
}
export function test_setting_different_color_triggers_property_change() {
var testView = new buttonModule.Button();
testView.style.color = new color.Color("#FF0000");
const testView = new Button();
testView.style.color = new Color("#FF0000");
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("colorChange", (data) => {
changed = true;
});
testView.style.color = new color.Color("#00FF00");
testView.style.color = new Color("#00FF00");
TKUnit.assert(changed, "Property changed not triggered.");
}
export function test_setting_same_textDecoration_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.textDecoration = "underline";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("textDecorationChange", (data) => {
changed = true;
});
@@ -331,11 +392,11 @@ export function test_setting_same_textDecoration_does_not_trigger_property_chang
}
export function test_setting_different_textDecoration_triggers_property_change() {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.textDecoration = "underline";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("textDecorationChange", (data) => {
changed = true;
});
@@ -344,11 +405,11 @@ export function test_setting_different_textDecoration_triggers_property_change()
}
export function test_setting_same_textTransform_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.textTransform = "uppercase";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("textTransformChange", (data) => {
changed = true;
});
@@ -357,11 +418,11 @@ export function test_setting_same_textTransform_does_not_trigger_property_change
}
export function test_setting_different_textTransform_triggers_property_change() {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.textTransform = "uppercase";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("textTransformChange", (data) => {
changed = true;
});
@@ -370,11 +431,11 @@ export function test_setting_different_textTransform_triggers_property_change()
}
export function test_setting_same_whiteSpace_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.whiteSpace = "normal";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("whiteSpaceChange", (data) => {
changed = true;
});
@@ -383,11 +444,11 @@ export function test_setting_same_whiteSpace_does_not_trigger_property_change()
}
export function test_setting_different_whiteSpace_triggers_property_change() {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.whiteSpace = "normal";
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("whiteSpaceChange", (data) => {
changed = true;
});
@@ -396,44 +457,44 @@ export function test_setting_different_whiteSpace_triggers_property_change() {
}
export function test_setting_same_backgroundColor_does_not_trigger_property_change() {
var testView = new buttonModule.Button();
testView.style.backgroundColor = new color.Color("#FF0000");
const testView = new Button();
testView.style.backgroundColor = new Color("#FF0000");
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("backgroundColorChange", (data) => {
changed = true;
});
testView.style.backgroundColor = new color.Color("#FF0000");
testView.style.backgroundColor = new Color("#FF0000");
TKUnit.assert(!changed, "Property changed triggered.");
}
export function test_setting_different_backgroundColor_triggers_property_change() {
var testView = new buttonModule.Button();
testView.style.backgroundColor = new color.Color("#FF0000");
const testView = new Button();
testView.style.backgroundColor = new Color("#FF0000");
var changed = false;
testView.style.on(observable.Observable.propertyChangeEvent, (data) => {
let changed = false;
testView.style.on("backgroundColorChange", (data) => {
changed = true;
});
testView.style.backgroundColor = new color.Color("#00FF00");
testView.style.backgroundColor = new Color("#00FF00");
TKUnit.assert(changed, "Property changed not triggered.");
}
export function test_setting_border_color_shorthand_property_sets_all_border_colors() {
let red = new color.Color("red");
let green = new color.Color("green");
let blue = new color.Color("blue");
let yellow = new color.Color("yellow");
let red = new Color("red");
let green = new Color("green");
let blue = new Color("blue");
let yellow = new Color("yellow");
test_border_color_shorthand_property("red", red, red, red, red);
test_border_color_shorthand_property("red green", red, green, red, green);
test_border_color_shorthand_property("red green blue", red, green, blue, green);
test_border_color_shorthand_property("red green blue yellow", red, green, blue, yellow);
}
function test_border_color_shorthand_property(short: string, top: color.Color, right: color.Color, bottom: color.Color, left: color.Color) {
var testView = new buttonModule.Button();
function test_border_color_shorthand_property(short: string, top: Color, right: Color, bottom: Color, left: Color) {
const testView = new Button();
testView.style.borderColor = short;
TKUnit.assertEqual(testView.style.borderTopColor, top, "top");
@@ -450,7 +511,7 @@ export function test_setting_border_width_shorthand_property_sets_all_border_wid
}
function test_border_width_shorthand_property(short: string, top: number, right: number, bottom: number, left: number) {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.borderWidth = short;
TKUnit.assertTrue(Length.equals(testView.style.borderTopWidth, top));
@@ -467,13 +528,13 @@ export function test_setting_border_radius_shorthand_property_sets_all_border_ra
}
function test_border_radius_shorthand_property(short: string, topLeft: number, topRight: number, bottomRight: number, bottomLeft: number) {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.borderRadius = short;
TKUnit.assertEqual(testView.style.borderTopLeftRadius, topLeft, "topLeft");
TKUnit.assertEqual(testView.style.borderTopRightRadius, topRight, "topRight");
TKUnit.assertEqual(testView.style.borderBottomRightRadius, bottomRight, "bottomRight");
TKUnit.assertEqual(testView.style.borderBottomLeftRadius, bottomLeft, "bottomLeft");
TKUnit.assertTrue(Length.equals(testView.style.borderTopLeftRadius, topLeft), "topLeft");
TKUnit.assertTrue(Length.equals(testView.style.borderTopRightRadius, topRight), "topRight");
TKUnit.assertTrue(Length.equals(testView.style.borderBottomRightRadius, bottomRight), "bottomRight");
TKUnit.assertTrue(Length.equals(testView.style.borderBottomLeftRadius, bottomLeft), "bottomLeft");
}
export function test_setting_margin_shorthand_property_sets_all_margins() {
@@ -484,7 +545,7 @@ export function test_setting_margin_shorthand_property_sets_all_margins() {
}
function test_margin_shorthand_property(short: string, top: number, right: number, bottom: number, left: number) {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.margin = short;
TKUnit.assertTrue(PercentLength.equals(testView.style.marginTop, top));
@@ -501,7 +562,7 @@ export function test_setting_padding_shorthand_property_sets_all_paddings() {
}
function test_padding_shorthand_property(short: string, top: number, right: number, bottom: number, left: number) {
var testView = new buttonModule.Button();
const testView = new Button();
testView.style.padding = short;
TKUnit.assertTrue(Length.equals(testView.style.paddingTop, top));
@@ -522,7 +583,7 @@ export function test_setting_font_shorthand_property() {
}
function test_font_shorthand_property(short: string, family: string, size: number, style: string, weight: string) {
var testView = new buttonModule.Button();
const testView = new Button();
(<any>testView.style)["font"] = short;
TKUnit.assertEqual(testView.style.fontFamily, family, "style.fontFamily");
@@ -532,7 +593,7 @@ function test_font_shorthand_property(short: string, family: string, size: numbe
}
export function test_setting_font_properties_sets_native_font() {
if (fontModule.ios) {
var basePath = "fonts";
const basePath = "fonts";
fontModule.ios.registerFont(basePath + "/Roboto-Regular.ttf");
fontModule.ios.registerFont(basePath + "/Roboto-Bold.ttf");
fontModule.ios.registerFont(basePath + "/Roboto-BoldItalic.ttf");
@@ -546,21 +607,21 @@ export function test_setting_font_properties_sets_native_font() {
}
function test_native_font(style: "normal" | "italic", weight: "100" | "200" | "300" | "normal" | "400" | "500" | "600" | "bold" | "700" | "800" | "900") {
var testView = new buttonModule.Button();
var fontName = "Roboto";
var fontNameSuffix = "";
const testView = new Button();
const fontName = "Roboto";
let fontNameSuffix = "";
testView.style.fontFamily = fontName;
testView.style.fontWeight = weight;
testView.style.fontStyle = style;
if (style === enums.FontStyle.normal && weight === enums.FontWeight.normal) {
if (style === "normal" && weight === "normal") {
fontNameSuffix += "Regular";
}
if (weight === enums.FontWeight.bold) {
if (weight === "bold") {
fontNameSuffix += "Bold";
}
if (style === enums.FontStyle.italic) {
if (style === "italic") {
fontNameSuffix += "Italic";
}
@@ -570,205 +631,196 @@ function test_native_font(style: "normal" | "italic", weight: "100" | "200" | "3
//TODO: If needed add tests for other platforms
}
export function test_FontWeightsParsedAsNumbersByTheXmlParserAreConvertedToStrings() {
var testView = new buttonModule.Button();
// The XML parser will interpret "100" as a number and feed it to Style, so simulate this here.
(<any>testView.style).fontWeight = 100; TKUnit.assertEqual(testView.style.fontWeight, "100");
(<any>testView.style).fontWeight = 200; TKUnit.assertEqual(testView.style.fontWeight, "200");
(<any>testView.style).fontWeight = 300; TKUnit.assertEqual(testView.style.fontWeight, "300");
(<any>testView.style).fontWeight = 400; TKUnit.assertEqual(testView.style.fontWeight, "400");
(<any>testView.style).fontWeight = "normal"; TKUnit.assertEqual(testView.style.fontWeight, "normal");
(<any>testView.style).fontWeight = 500; TKUnit.assertEqual(testView.style.fontWeight, "500");
(<any>testView.style).fontWeight = 600; TKUnit.assertEqual(testView.style.fontWeight, "600");
(<any>testView.style).fontWeight = 700; TKUnit.assertEqual(testView.style.fontWeight, "700");
(<any>testView.style).fontWeight = "bold"; TKUnit.assertEqual(testView.style.fontWeight, "bold");
(<any>testView.style).fontWeight = 800; TKUnit.assertEqual(testView.style.fontWeight, "800");
(<any>testView.style).fontWeight = 900; TKUnit.assertEqual(testView.style.fontWeight, "900");
}
export var test_setting_button_whiteSpace_normal_sets_native = function () {
var testView = new buttonModule.Button();
export const test_setting_button_whiteSpace_normal_sets_native = function () {
const testView = new Button();
testView.style.whiteSpace = "nowrap";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertEqual((<android.widget.Button>testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByTruncatingMiddle);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 1);
}
});
}
};
export var test_setting_label_whiteSpace_normal_sets_native = function () {
var testView = new labelModule.Label();
export const test_setting_label_whiteSpace_normal_sets_native = function () {
const testView = new Label();
testView.style.whiteSpace = "nowrap";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertEqual((<android.widget.TextView>testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual((<UILabel>testView.ios).lineBreakMode, NSLineBreakMode.ByTruncatingTail);
TKUnit.assertEqual((<UILabel>testView.ios).numberOfLines, 1);
}
});
}
};
export var test_setting_button_whiteSpace_nowrap_sets_native = function () {
var testView = new buttonModule.Button();
export const test_setting_button_whiteSpace_nowrap_sets_native = function () {
const testView = new Button();
testView.style.whiteSpace = "normal";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertNull((<android.widget.Button>testView.android).getEllipsize(), null);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByWordWrapping);
TKUnit.assertEqual((<UIButton>testView.ios).titleLabel.numberOfLines, 0);
}
});
}
};
export var test_setting_label_whiteSpace_nowrap_sets_native = function () {
var testView = new labelModule.Label();
export const test_setting_label_whiteSpace_nowrap_sets_native = function () {
const testView = new Label();
testView.style.whiteSpace = "normal";
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertNull((<android.widget.TextView>testView.android).getEllipsize(), null);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual((<UILabel>testView.ios).lineBreakMode, NSLineBreakMode.ByWordWrapping);
TKUnit.assertEqual((<UILabel>testView.ios).numberOfLines, 0);
}
});
}
};
var initial = "text Text";
var capitalized = "Text Text";
var upper = "TEXT TEXT";
var lower = "text text";
const initial = "text Text";
const capitalized = "Text Text";
const upper = "TEXT TEXT";
const lower = "text text";
function executeTransformTest(testView: viewModule.View, androidTextFunc: (testView: viewModule.View) => string, iOSTextFunc: (testView: viewModule.View) => string) {
helper.buildUIAndRunTest(testView, function (views: Array<viewModule.View>) {
if (platform.device.os === platform.platformNames.android) {
function executeTransformTest(testView: View, androidTextFunc: (testView: View) => string, iOSTextFunc: (testView: View) => string) {
helper.buildUIAndRunTest(testView, function (views: Array<View>) {
if (isAndroid) {
TKUnit.assertEqual(androidTextFunc(testView) + "", capitalized);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual(iOSTextFunc(testView), capitalized);
}
testView.style.textTransform = "uppercase";
if (platform.device.os === platform.platformNames.android) {
if (isAndroid) {
TKUnit.assertEqual(androidTextFunc(testView) + "", upper);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual(iOSTextFunc(testView), upper);
}
testView.style.textTransform = "lowercase";
if (platform.device.os === platform.platformNames.android) {
if (isAndroid) {
TKUnit.assertEqual(androidTextFunc(testView) + "", lower);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual(iOSTextFunc(testView), lower);
}
testView.style.textTransform = "none";
if (platform.device.os === platform.platformNames.android) {
if (isAndroid) {
TKUnit.assertEqual(androidTextFunc(testView) + "", initial);
} else if (platform.device.os === platform.platformNames.ios) {
} else if (isIOS) {
TKUnit.assertEqual(iOSTextFunc(testView), initial);
}
});
}
function androidText(testView: viewModule.View) {
return (<android.widget.TextView>testView.android).getText();;
function androidText(testView: View) {
const tv = <android.widget.TextView>testView.android;
const transform = tv.getTransformationMethod();
const text = tv.getText();
if (transform) {
return transform.getTransformation(text, tv);
} else {
return text;
}
}
function iOSText(testView: viewModule.View) {
function iOSText(testView: View) {
return (<UITextView | UILabel | UITextField>testView.ios).attributedText.string;
}
export var test_setting_label_textTransform_sets_native = function () {
var testView = new labelModule.Label();
export const test_setting_label_textTransform_sets_native = function () {
const testView = new Label();
testView.text = initial;
testView.style.textTransform = "capitalize";
executeTransformTest(testView, androidText, iOSText);
}
};
export var test_setting_textField_textTransform_sets_native = function () {
var testView = new textFieldModule.TextField();
export const test_setting_textField_textTransform_sets_native = function () {
const testView = new TextField();
testView.text = initial;
testView.style.textTransform = "capitalize";
executeTransformTest(testView, androidText, iOSText);
}
};
export var test_setting_textView_textTransform_sets_native = function () {
var testView = new textViewModule.TextView();
export const test_setting_textView_textTransform_sets_native = function () {
const testView = new TextView();
testView.text = initial;
testView.style.textTransform = "capitalize";
executeTransformTest(testView, androidText, iOSText);
}
};
export var test_setting_button_textTransform_sets_native = function () {
var testView = new buttonModule.Button();
export const test_setting_button_textTransform_sets_native = function () {
const testView = new Button();
testView.text = initial;
testView.style.textTransform = "capitalize";
executeTransformTest(testView, androidText, function (v) { return (<UIButton>v.ios).titleForState(UIControlState.Normal); });
}
};
export var test_setting_label_textTransform_and_textDecoration_sets_native = function () {
var testView = new labelModule.Label();
export const test_setting_label_textTransform_and_textDecoration_sets_native = function () {
const testView = new Label();
testView.text = initial;
testView.style.textTransform = "capitalize";
testView.style.textDecoration = "underline";
executeTransformTest(testView, androidText, iOSText);
}
};
export var test_setting_textField_textTransform_and_textDecoration_sets_native = function () {
var testView = new textFieldModule.TextField();
export const test_setting_textField_textTransform_and_textDecoration_sets_native = function () {
const testView = new TextField();
testView.text = initial;
testView.style.textTransform = "capitalize";
testView.style.textDecoration = "underline";
executeTransformTest(testView, androidText, iOSText);
}
};
export var test_setting_textView_textTransform_and_textDecoration_sets_native = function () {
var testView = new textViewModule.TextView();
export const test_setting_textView_textTransform_and_textDecoration_sets_native = function () {
const testView = new TextView();
testView.text = initial;
testView.style.textTransform = "capitalize";
testView.style.textDecoration = "underline";
executeTransformTest(testView, androidText, iOSText);
}
};
export var test_setting_button_textTransform_and_textDecoration_sets_native = function () {
var testView = new buttonModule.Button();
export const test_setting_button_textTransform_and_textDecoration_sets_native = function () {
const testView = new Button();
testView.text = initial;
testView.style.textTransform = "capitalize";
testView.style.textDecoration = "underline";
executeTransformTest(testView, androidText, function (v) { return (<UIButton>v.ios).attributedTitleForState(UIControlState.Normal).string; });
}
};
export function test_border_color() {
let testView = new buttonModule.Button();
let testView = new Button();
let red = new color.Color("red");
let red = new Color("red");
testView.style.borderColor = red;
TKUnit.assertEqual(testView.style.borderColor, red, "all");
TKUnit.assertEqual(testView.style.borderTopColor, red, "top");
TKUnit.assertEqual(testView.style.borderRightColor, red, "right");
TKUnit.assertEqual(testView.style.borderBottomColor, red, "bottom");
TKUnit.assertEqual(testView.style.borderLeftColor, red, "left");
let blue = new color.Color("blue");
let blue = new Color("blue");
let hex = blue.hex;
testView.style.borderColor = hex;
TKUnit.assertEqual((<any>testView.style.borderColor), blue, "all");
@@ -779,39 +831,44 @@ export function test_border_color() {
}
export function test_border_width() {
let testView = new buttonModule.Button();
let testView = new Button();
testView.style.borderWidth = 10;
TKUnit.assertEqual(testView.style.borderWidth, 10, "all");
TKUnit.assertTrue(Length.equals(testView.style.borderTopWidth, { value: 10, unit: "dip" }));
TKUnit.assertTrue(Length.equals(testView.style.borderRightWidth, { value: 10, unit: "dip" }));
TKUnit.assertTrue(Length.equals(testView.style.borderBottomWidth, { value: 10, unit: "dip" }));
TKUnit.assertTrue(Length.equals(testView.style.borderLeftWidth, { value: 10, unit: "dip" }));
let expected: Length = { value: 10, unit: "dip" };
TKUnit.assertTrue(Length.equals(testView.style.borderTopWidth, expected));
TKUnit.assertTrue(Length.equals(testView.style.borderRightWidth, expected));
TKUnit.assertTrue(Length.equals(testView.style.borderBottomWidth, expected));
TKUnit.assertTrue(Length.equals(testView.style.borderLeftWidth, expected));
testView.style.borderWidth = "20";
TKUnit.assertEqual((<any>testView.style.borderWidth), 20, "all");
expected = { value: 20, unit: "dip" };
TKUnit.assertTrue(Length.equals(testView.style.borderTopWidth, { value: 20, unit: "dip" }));
TKUnit.assertTrue(Length.equals(testView.style.borderRightWidth, { value: 20, unit: "dip" }));
TKUnit.assertTrue(Length.equals(testView.style.borderBottomWidth, { value: 20, unit: "dip" }));
TKUnit.assertTrue(Length.equals(testView.style.borderLeftWidth, { value: 20, unit: "dip" }));
TKUnit.assert(Length.equals(<any>testView.style.borderWidth, expected), "all");
TKUnit.assertTrue(Length.equals(testView.style.borderTopWidth, expected));
TKUnit.assertTrue(Length.equals(testView.style.borderRightWidth, expected));
TKUnit.assertTrue(Length.equals(testView.style.borderBottomWidth, expected));
TKUnit.assertTrue(Length.equals(testView.style.borderLeftWidth, expected));
}
export function test_border_radius() {
let testView = new buttonModule.Button();
let testView = new Button();
testView.style.borderRadius = 10;
TKUnit.assertEqual(testView.style.borderRadius, 10, "all");
TKUnit.assertEqual(testView.style.borderTopLeftRadius, 10, "top");
TKUnit.assertEqual(testView.style.borderTopRightRadius, 10, "right");
TKUnit.assertEqual(testView.style.borderBottomRightRadius, 10, "bottom");
TKUnit.assertEqual(testView.style.borderBottomLeftRadius, 10, "left");
let expected: Length = { value: 10, unit: "dip" };
TKUnit.assertTrue(Length.equals(testView.style.borderRadius, expected), "all");
TKUnit.assertTrue(Length.equals(testView.style.borderTopLeftRadius, expected), "top");
TKUnit.assertTrue(Length.equals(testView.style.borderTopRightRadius, expected), "right");
TKUnit.assertTrue(Length.equals(testView.style.borderBottomRightRadius, expected), "bottom");
TKUnit.assertTrue(Length.equals(testView.style.borderBottomLeftRadius, expected), "left");
testView.style.borderRadius = "20";
TKUnit.assertEqual((<any>testView.style.borderRadius), 20, "all");
TKUnit.assertEqual(testView.style.borderTopLeftRadius, 20, "top");
TKUnit.assertEqual(testView.style.borderTopRightRadius, 20, "right");
TKUnit.assertEqual(testView.style.borderBottomRightRadius, 20, "bottom");
TKUnit.assertEqual(testView.style.borderBottomLeftRadius, 20, "left");
expected = { value: 20, unit: "dip" };
TKUnit.assertTrue(Length.equals((<any>testView.style.borderRadius), expected), "all");
TKUnit.assertTrue(Length.equals(testView.style.borderTopLeftRadius, expected), "top");
TKUnit.assertTrue(Length.equals(testView.style.borderTopRightRadius, expected), "right");
TKUnit.assertTrue(Length.equals(testView.style.borderBottomRightRadius, expected), "bottom");
TKUnit.assertTrue(Length.equals(testView.style.borderBottomLeftRadius, expected), "left");
}

10
tns-core-modules/ui/button/button.ios.ts
View File

@@ -47,20 +47,20 @@ export class Button extends ButtonBase {
}
get [whiteSpaceProperty.native](): WhiteSpace {
return WhiteSpace.NORMAL;
return WhiteSpace.NO_WRAP;
}
set [whiteSpaceProperty.native](value: WhiteSpace) {
let nativeView = this.nativeView.titleLabel;
switch(value){
const nativeView = this.nativeView.titleLabel;
switch (value) {
case WhiteSpace.NORMAL:
nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;
nativeView.numberOfLines = 0;
break;
case WhiteSpace.NO_WRAP:
nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
nativeView.lineBreakMode = NSLineBreakMode.ByTruncatingMiddle;
nativeView.numberOfLines = 1;
break;
default:
default:
throw new Error(`Invalid whitespace value: ${value}. Valid values are: "${WhiteSpace.NORMAL}", "${WhiteSpace.NO_WRAP}".`);
}
}

91
tns-core-modules/ui/core/view-common.ts
View File

@@ -13,7 +13,7 @@ import { Font, parseFont, FontStyle, FontWeight } from "ui/styling/font";
import { fontSizeConverter } from "../styling/converters";
// Only types:
import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "ui/layouts/flexbox-layout"
import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "ui/layouts/flexbox-layout";
// TODO: Remove this and start using string as source (for android).
import { fromFileOrResource, fromBase64, fromUrl } from "image-source";
@@ -49,7 +49,7 @@ export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator
}
}
stateEventNames.forEach(s => target[s] = update);
}
};
}
export abstract class ViewCommon extends ViewBase implements ViewDefinition {
@@ -748,7 +748,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
}
_getCurrentLayoutBounds(): { left: number; top: number; right: number; bottom: number } {
return { left: this._oldLeft, top: this._oldTop, right: this._oldRight, bottom: this._oldBottom }
return { left: this._oldLeft, top: this._oldTop, right: this._oldRight, bottom: this._oldBottom };
}
/**
@@ -836,7 +836,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
return {
width: layout.toDeviceIndependentPixels(currentBounds.right - currentBounds.left),
height: layout.toDeviceIndependentPixels(currentBounds.bottom - currentBounds.top),
}
};
}
public animate(animation: any): AnimationPromise {
@@ -877,11 +877,11 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
// }
public _getValue(): never {
throw new Error("The View._setValue is obsolete. There is a new property system.")
throw new Error("The View._setValue is obsolete. There is a new property system.");
}
public _setValue(): never {
throw new Error("The View._setValue is obsolete. There is a new property system.")
throw new Error("The View._setValue is obsolete. There is a new property system.");
}
_updateEffectiveLayoutValues(parent: ViewDefinition): void {
@@ -892,7 +892,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
let parentWidthMeasureMode = layout.getMeasureSpecMode(parentWidthMeasureSpec);
let parentAvailableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
this.effectiveWidth = PercentLength.toDevicePixels(style.width, -2, parentAvailableWidth)
this.effectiveWidth = PercentLength.toDevicePixels(style.width, -2, parentAvailableWidth);
this.effectiveMarginLeft = PercentLength.toDevicePixels(style.marginLeft, 0, parentAvailableWidth);
this.effectiveMarginRight = PercentLength.toDevicePixels(style.marginRight, 0, parentAvailableWidth);
@@ -953,6 +953,23 @@ function equalsCommon(a: PercentLength, b: PercentLength): boolean {
return a.value == b.value && a.unit == b.unit; // tslint:disable-line
}
function convertToStringCommon(length: Length | PercentLength): string {
if (length == "auto") { // tslint:disable-line
return "auto";
}
if (typeof length === "number") {
return length.toString();
}
let val = length.value;
if (length.unit === "%") {
val *= 100;
}
return val + length.unit;
}
function toDevicePixelsCommon(length: Length, auto: number): number;
function toDevicePixelsCommon(length: PercentLength, auto: number, parentSize: number): number;
function toDevicePixelsCommon(length: PercentLength, auto: number, parentAvailableWidth?: number): number {
@@ -1014,7 +1031,7 @@ export namespace PercentLength {
return {
value: numberValue,
unit: type
}
};
} else {
return value;
}
@@ -1022,6 +1039,7 @@ export namespace PercentLength {
export const equals: { (a: PercentLength, b: PercentLength): boolean } = equalsCommon;
export const toDevicePixels: { (length: PercentLength, auto: number, parentAvailableWidth: number): number } = toDevicePixelsCommon;
export const convertToString: { (length: PercentLength): string } = convertToStringCommon;
}
export type Length = "auto" | number | {
@@ -1053,13 +1071,14 @@ export namespace Length {
return {
value: numberValue,
unit: type
}
};
} else {
return value;
}
}
export const equals: { (a: Length, b: Length): boolean } = equalsCommon;
export const toDevicePixels: { (length: Length, auto: number): number } = toDevicePixelsCommon;
export const convertToString: { (length: Length): string } = convertToStringCommon;
}
declare module "ui/core/view" {
@@ -1136,12 +1155,12 @@ heightProperty.register(Style);
const marginProperty = new ShorthandProperty<Style, string | PercentLength>({
name: "margin", cssName: "margin",
getter: function (this: Style) {
if (this.marginTop === this.marginRight &&
this.marginTop === this.marginBottom &&
this.marginTop === this.marginLeft) {
if (PercentLength.equals(this.marginTop, this.marginRight) &&
PercentLength.equals(this.marginTop, this.marginBottom) &&
PercentLength.equals(this.marginTop, this.marginLeft)) {
return this.marginTop;
}
return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`;
return `${PercentLength.convertToString(this.marginTop)} ${PercentLength.convertToString(this.marginRight)} ${PercentLength.convertToString(this.marginBottom)} ${PercentLength.convertToString(this.marginLeft)}`;
},
converter: convertToMargins
});
@@ -1162,12 +1181,12 @@ marginBottomProperty.register(Style);
const paddingProperty = new ShorthandProperty<Style, string | Length>({
name: "padding", cssName: "padding",
getter: function (this: Style) {
if (this.paddingTop === this.paddingRight &&
this.paddingTop === this.paddingBottom &&
this.paddingTop === this.paddingLeft) {
if (Length.equals(this.paddingTop, this.paddingRight) &&
Length.equals(this.paddingTop, this.paddingBottom) &&
Length.equals(this.paddingTop, this.paddingLeft)) {
return this.paddingTop;
}
return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`;
return `${Length.convertToString(this.paddingTop)} ${Length.convertToString(this.paddingRight)} ${Length.convertToString(this.paddingBottom)} ${Length.convertToString(this.paddingLeft)}`;
},
converter: convertToPaddings
});
@@ -1240,10 +1259,10 @@ export const verticalAlignmentProperty = new CssProperty<Style, VerticalAlignmen
verticalAlignmentProperty.register(Style);
interface Thickness {
top: string,
right: string,
bottom: string,
left: string
top: string;
right: string;
bottom: string;
left: string;
}
function parseThickness(value: string): Thickness {
@@ -1288,7 +1307,7 @@ function parseThickness(value: string): Thickness {
right: right,
bottom: bottom,
left: left
}
};
} else {
return value;
}
@@ -1480,7 +1499,7 @@ export const backgroundImageProperty = new CssProperty<Style, string>({
let url: string = newValue;
let isValid = false;
if (url === undefined){
if (url === undefined) {
style.backgroundInternal = currentBackground.withImage(undefined);
return;
}
@@ -1621,7 +1640,7 @@ const borderColorProperty = new ShorthandProperty<Style, string | Color>({
if (Color.equals(this.borderTopColor, this.borderRightColor) &&
Color.equals(this.borderTopColor, this.borderBottomColor) &&
Color.equals(this.borderTopColor, this.borderLeftColor)) {
return this.borderTopColor ? this.borderTopColor.toString() : "";
return this.borderTopColor;
}
else {
return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
@@ -1646,7 +1665,7 @@ const borderColorProperty = new ShorthandProperty<Style, string | Color>({
];
}
}
})
});
borderColorProperty.register(Style);
export const borderTopColorProperty = new CssProperty<Style, Color>({
@@ -1685,13 +1704,13 @@ borderLeftColorProperty.register(Style);
const borderWidthProperty = new ShorthandProperty<Style, string | Length>({
name: "borderWidth", cssName: "border-width",
getter: function (this: Style) {
if (this.borderTopWidth === this.borderRightWidth &&
this.borderTopWidth === this.borderBottomWidth &&
this.borderTopWidth === this.borderLeftWidth) {
if (Length.equals(this.borderTopWidth, this.borderRightWidth) &&
Length.equals(this.borderTopWidth, this.borderBottomWidth) &&
Length.equals(this.borderTopWidth, this.borderLeftWidth)) {
return this.borderTopWidth;
}
else {
return `${this.borderTopWidth} ${this.borderRightWidth} ${this.borderBottomWidth} ${this.borderLeftWidth}`;
return `${Length.convertToString(this.borderTopWidth)} ${Length.convertToString(this.borderRightWidth)} ${Length.convertToString(this.borderBottomWidth)} ${Length.convertToString(this.borderLeftWidth)}`;
}
},
converter: function (value) {
@@ -1713,7 +1732,7 @@ const borderWidthProperty = new ShorthandProperty<Style, string | Length>({
];
}
}
})
});
borderWidthProperty.register(Style);
export const borderTopWidthProperty = new CssProperty<Style, Length>({
@@ -1784,12 +1803,12 @@ borderLeftWidthProperty.register(Style);
const borderRadiusProperty = new ShorthandProperty<Style, string | Length>({
name: "borderRadius", cssName: "border-radius",
getter: function (this: Style) {
if (this.borderTopLeftRadius === this.borderTopRightRadius &&
this.borderTopLeftRadius === this.borderBottomRightRadius &&
this.borderTopLeftRadius === this.borderBottomLeftRadius) {
if (Length.equals(this.borderTopLeftRadius, this.borderTopRightRadius) &&
Length.equals(this.borderTopLeftRadius, this.borderBottomRightRadius) &&
Length.equals(this.borderTopLeftRadius, this.borderBottomLeftRadius)) {
return this.borderTopLeftRadius;
}
return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
return `${Length.convertToString(this.borderTopLeftRadius)} ${Length.convertToString(this.borderTopRightRadius)} ${Length.convertToString(this.borderBottomRightRadius)} ${Length.convertToString(this.borderBottomLeftRadius)}`;
},
converter: function (value) {
if (typeof value === "string") {
@@ -1810,7 +1829,7 @@ const borderRadiusProperty = new ShorthandProperty<Style, string | Length>({
];
}
}
})
});
borderRadiusProperty.register(Style);
export const borderTopLeftRadiusProperty = new CssProperty<Style, Length>({
@@ -1982,7 +2001,7 @@ const fontProperty = new ShorthandProperty<Style, string>({
];
}
}
})
});
fontProperty.register(Style);
export type Visibility = "visible" | "hidden" | "collapse";

6
tns-core-modules/ui/core/view.d.ts vendored
View File

@@ -85,10 +85,15 @@ declare module "ui/core/view" {
* @param auto Value to use for conversion of "auto".
*/
export function toDevicePixels(length: Length, auto: number): number;
export function convertToString(length: Length): string;
}
export type PercentLength = "auto" | number | {
readonly unit: "%" | "dip" | "px";
/**
* Length value. When unit is "%" the value is normalized (ex. for 5% the value is 0.05)
*/
readonly value: number;
}
export namespace PercentLength {
@@ -101,6 +106,7 @@ declare module "ui/core/view" {
* @param parentAvailableWidth Value to use as base when converting percent unit.
*/
export function toDevicePixels(length: PercentLength, auto: number, parentAvailableWidth: number): number;
export function convertToString(length: PercentLength): string;
}
/**

4
tns-core-modules/ui/label/label.ios.ts
View File

@@ -101,10 +101,10 @@ export class Label extends TextBase implements LabelDefinition {
}
get [whiteSpaceProperty.native](): WhiteSpace {
return WhiteSpace.NORMAL;
return WhiteSpace.NO_WRAP;
}
set [whiteSpaceProperty.native](value: WhiteSpace) {
let nativeView = this.nativeView;
const nativeView = this.nativeView;
switch (value) {
case WhiteSpace.NORMAL:
nativeView.lineBreakMode = NSLineBreakMode.ByWordWrapping;

3
tns-core-modules/ui/text-base/text-base-common.ts
View File

@@ -197,10 +197,11 @@ export namespace WhiteSpace {
export const parse = makeParser(isValid, NORMAL);
}
//NB: Default value is deferent for Android and IOS
export const whiteSpaceProperty = new CssProperty<Style, WhiteSpace>({
name: "whiteSpace",
cssName: "white-space",
defaultValue: WhiteSpace.NORMAL,
defaultValue: isIOS ? WhiteSpace.NO_WRAP : WhiteSpace.NORMAL,
valueConverter: WhiteSpace.parse
});
whiteSpaceProperty.register(Style);

80
tns-core-modules/ui/text-base/text-base.android.ts
View File

@@ -10,6 +10,13 @@ export class TextBase extends TextBaseCommon {
_transformationMethod: any;
_nativeView: android.widget.TextView;
public _setFormattedTextPropertyToNative(value: FormattedString) {
if (this._nativeView) {
let newText = value ? value._formattedText : this.text;
this._nativeView.setText(newText);
}
}
//Text
get [textProperty.native](): string {
return this._nativeView.getText();
@@ -55,10 +62,10 @@ export class TextBase extends TextBaseCommon {
if (value instanceof Font) {
// Set value
textView.setTypeface(value.getAndroidTypeface());
if (value.fontSize !== undefined){
if (value.fontSize !== undefined) {
textView.setTextSize(value.fontSize);
}
}
}
else {
// Reset value
textView.setTypeface(value.typeface);
@@ -93,7 +100,7 @@ export class TextBase extends TextBaseCommon {
this._nativeView.setGravity(android.view.Gravity.RIGHT | verticalGravity);
break;
default:
throw new Error(`Invalid text alignment value: ${value}. Valid values are: "${TextAlignment.LEFT}", "${TextAlignment.CENTER}", "${TextAlignment.RIGHT}".`);
throw new Error(`Invalid text alignment value: ${value}. Valid values are: "${TextAlignment.LEFT}", "${TextAlignment.CENTER}", "${TextAlignment.RIGHT}".`);
}
}
@@ -103,8 +110,8 @@ export class TextBase extends TextBaseCommon {
}
set [textDecorationProperty.native](value: TextDecoration) {
let flags: number;
switch(value){
switch (value) {
case TextDecoration.NONE:
flags = 0;
break;
@@ -117,45 +124,23 @@ export class TextBase extends TextBaseCommon {
case TextDecoration.UNDERLINE_LINE_THROUGH:
flags = android.graphics.Paint.UNDERLINE_TEXT_FLAG | android.graphics.Paint.STRIKE_THRU_TEXT_FLAG;
break;
default:
default:
throw new Error(`Invalid text decoration value: ${value}. Valid values are: "${TextDecoration.NONE}", "${TextDecoration.UNDERLINE}", "${TextDecoration.LINE_THROUGH}", "${TextDecoration.UNDERLINE_LINE_THROUGH}".`);
}
this._nativeView.setPaintFlags(flags);
}
//TextTransform
get [textTransformProperty.native](): TextTransform {
return TextTransform.NONE;
get [textTransformProperty.native](): android.text.method.TransformationMethod {
return this._nativeView.getTransformationMethod();
}
set [textTransformProperty.native](value: TextTransform) {
this._setFormattedTextPropertyToNative(this.formattedText);
}
private _originalTransformationMethod: android.text.method.TransformationMethod;
public _setFormattedTextPropertyToNative(value: FormattedString) {
// TODO: Check if there is an option to force call the transformation method without
// creating new native instance.
if (!this._nativeView) {
return;
set [textTransformProperty.native](value: TextTransform | android.text.method.TransformationMethod) {
if (typeof value === "string") {
this._nativeView.setTransformationMethod(new TextTransformation(this.text, this.formattedText, value));
} else {
this._nativeView.setTransformationMethod(value);
}
if (!this._originalTransformationMethod) {
this._originalTransformationMethod = this.android.getTransformationMethod();
}
let newText = value ? value._formattedText : null;//newText is of type android.text.SpannableStringBuilder
if (newText) {
this._nativeView.setTransformationMethod(new TextTransformation(this.text, value, this.style.textTransform));
}
else {
if (this._originalTransformationMethod) {
this.android.setTransformationMethod(this._originalTransformationMethod);
this._originalTransformationMethod = null;
}
}
this._nativeView.setText(newText);
}
//WhiteSpace
@@ -164,7 +149,7 @@ export class TextBase extends TextBaseCommon {
}
set [whiteSpaceProperty.native](value: WhiteSpace) {
let nativeView = this._nativeView;
switch(value){
switch (value) {
case WhiteSpace.NORMAL:
nativeView.setSingleLine(false);
nativeView.setEllipsize(null);
@@ -173,7 +158,7 @@ export class TextBase extends TextBaseCommon {
nativeView.setSingleLine(true);
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
break;
default:
default:
throw new Error(`Invalid whitespace value: ${value}. Valid values are: "${WhiteSpace.NORMAL}", "${WhiteSpace.NO_WRAP}".`);
}
}
@@ -227,11 +212,14 @@ class TextTransformation extends android.text.method.ReplacementTransformationMe
protected getOriginal(): native.Array<string> {
let result: native.Array<string> = [];
if (this.formattedText) {
for(let i = 0, loopLength = this.formattedText._formattedText.length(); i < loopLength; i++) {
if (this.formattedText && this.formattedText._formattedText) {
for (let i = 0, loopLength = this.formattedText._formattedText.length(); i < loopLength; i++) {
result[i] = this.formattedText._formattedText.charAt(i);
}
return result;
} else {
for (let i = 0, loopLength = this.originalText.length; i < loopLength; i++) {
result[i] = this.originalText.charAt(i);
}
}
return result;
}
@@ -244,17 +232,17 @@ class TextTransformation extends android.text.method.ReplacementTransformationMe
let span = this.formattedText.spans.getItem(i);
stringResult += getTransformedText(span.text, textTransform);
}
}
}
else {
stringResult = getTransformedText(this.originalText, textTransform);
}
return stringResult;
return stringResult;
}
protected getReplacement(): native.Array<string> {
let transformedString = this._getTransformedString();
let result: native.Array<string> = [];
for(let i = 0, length = transformedString.length; i < length; i++) {
for (let i = 0, length = transformedString.length; i < length; i++) {
result[i] = transformedString.charAt(i);
}
return result;
@@ -287,6 +275,6 @@ export function getTransformedText(text: string, textTransform: TextTransform):
case TextTransform.CAPITALIZE:
return getCapitalizedString(text);
default:
throw new Error(`Invalid text transform value: ${textTransform}. Valid values are: "${TextTransform.NONE}", "${TextTransform.CAPITALIZE}", "${TextTransform.UPPERCASE}, "${TextTransform.LOWERCASE}".`);
throw new Error(`Invalid text transform value: ${textTransform}. Valid values are: "${TextTransform.NONE}", "${TextTransform.CAPITALIZE}", "${TextTransform.UPPERCASE}", "${TextTransform.LOWERCASE}".`);
}
}

19
tns-core-modules/ui/text-base/text-base.ios.ts
View File

@@ -118,7 +118,7 @@ export class TextBase extends TextBaseCommon {
nativeView.textAlignment = NSTextAlignment.Right;
break;
default:
throw new Error(`Invalid text alignment value: ${value}. Valid values are: "${TextAlignment.LEFT}", "${TextAlignment.CENTER}", "${TextAlignment.RIGHT}".`);
throw new Error(`Invalid text alignment value: ${value}. Valid values are: "${TextAlignment.LEFT}", "${TextAlignment.CENTER}", "${TextAlignment.RIGHT}".`);
}
}
@@ -170,7 +170,7 @@ export function getTransformedText(text: string, textTransform: TextTransform):
case TextTransform.CAPITALIZE:
return NSStringFromNSAttributedString(text).capitalizedString;
default:
throw new Error(`Invalid text transform value: ${textTransform}. Valid values are: "${TextTransform.NONE}", "${TextTransform.CAPITALIZE}", "${TextTransform.UPPERCASE}, "${TextTransform.LOWERCASE}".`);
throw new Error(`Invalid text transform value: ${textTransform}. Valid values are: "${TextTransform.NONE}", "${TextTransform.CAPITALIZE}", "${TextTransform.UPPERCASE}, "${TextTransform.LOWERCASE}".`);
}
}
@@ -181,7 +181,7 @@ function NSStringFromNSAttributedString(source: NSAttributedString | string): NS
function updateFormattedStringTextDecoration(formattedText: FormattedString, textDecoration: TextDecoration): void {
// TODO: Refactor this method so it doesn't modify FormattedString properties.
// Instead it should create NSAttributedString and apply it to the nativeView.
switch(textDecoration) {
switch (textDecoration) {
case TextDecoration.NONE:
formattedText.underline = NSUnderlineStyle.StyleNone;
formattedText.strikethrough = NSUnderlineStyle.StyleNone;
@@ -198,7 +198,7 @@ function updateFormattedStringTextDecoration(formattedText: FormattedString, tex
formattedText.underline = NSUnderlineStyle.StyleSingle;
formattedText.strikethrough = NSUnderlineStyle.StyleSingle;
break;
default:
default:
throw new Error(`Invalid text decoration value: ${textDecoration}. Valid values are: "${TextDecoration.NONE}", "${TextDecoration.UNDERLINE}", "${TextDecoration.LINE_THROUGH}", "${TextDecoration.UNDERLINE_LINE_THROUGH}".`);
}
}
@@ -216,7 +216,8 @@ function setFormattedTextDecorationAndTransform(formattedText: FormattedString,
updateFormattedStringTextDecoration(formattedText, textDecoration);
updateFormattedStringTextTransformation(formattedText, textTransform);
if (typeof letterSpacing === "number" && !isNaN(letterSpacing)) {
const hasLetterSpacing = typeof letterSpacing === "number" && !isNaN(letterSpacing) && letterSpacing !== 0;
if (hasLetterSpacing) {
if (nativeView instanceof UIButton) {
let attrText = NSMutableAttributedString.alloc().initWithAttributedString(nativeView.attributedTitleForState(UIControlState.Normal));
attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing * nativeView.font.pointSize, { location: 0, length: attrText.length });
@@ -230,10 +231,10 @@ function setFormattedTextDecorationAndTransform(formattedText: FormattedString,
}
function setTextDecorationAndTransform(text: string, nativeView: UITextField | UITextView | UILabel | UIButton, textDecoration: TextDecoration, textTransform: TextTransform, letterSpacing: number, color: Color) {
let hasLetterSpacing = typeof letterSpacing === "number" && !isNaN(letterSpacing);
const hasLetterSpacing = typeof letterSpacing === "number" && !isNaN(letterSpacing) && letterSpacing !== 0;
let dict = new Map<string, number>();
switch(textDecoration) {
switch (textDecoration) {
case TextDecoration.NONE:
break;
case TextDecoration.UNDERLINE:
@@ -246,10 +247,10 @@ function setTextDecorationAndTransform(text: string, nativeView: UITextField | U
dict.set(NSUnderlineStyleAttributeName, NSUnderlineStyle.StyleSingle);
dict.set(NSStrikethroughStyleAttributeName, NSUnderlineStyle.StyleSingle);
break;
default:
default:
throw new Error(`Invalid text decoration value: ${textDecoration}. Valid values are: "${TextDecoration.NONE}", "${TextDecoration.UNDERLINE}", "${TextDecoration.LINE_THROUGH}", "${TextDecoration.UNDERLINE_LINE_THROUGH}".`);
}
if (hasLetterSpacing) {
dict.set(NSKernAttributeName, letterSpacing * nativeView.font.pointSize);
}