From 14e1da58203b00c9ec494a419abac1446b8de1ac Mon Sep 17 00:00:00 2001 From: vakrilov Date: Fri, 6 Jan 2017 15:35:14 +0200 Subject: [PATCH] Style-properties tests --- tests/app/testRunner.ts | 2 +- tests/app/ui-test.ts | 13 +- tests/app/ui/label/label-tests.ts | 289 +++++------ .../app/ui/styling/style-properties-tests.ts | 481 ++++++++++-------- tns-core-modules/ui/button/button.ios.ts | 10 +- tns-core-modules/ui/core/view-common.ts | 91 ++-- tns-core-modules/ui/core/view.d.ts | 6 + tns-core-modules/ui/label/label.ios.ts | 4 +- .../ui/text-base/text-base-common.ts | 3 +- .../ui/text-base/text-base.android.ts | 80 ++- .../ui/text-base/text-base.ios.ts | 19 +- 11 files changed, 522 insertions(+), 476 deletions(-) diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts index 1679fe14f..9fcced381 100644 --- a/tests/app/testRunner.ts +++ b/tests/app/testRunner.ts @@ -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"); diff --git a/tests/app/ui-test.ts b/tests/app/ui-test.ts index 56fec64ff..6a7084dad 100644 --- a/tests/app/ui-test.ts +++ b/tests/app/ui-test.ts @@ -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 implements trace.TraceWriter { - + private _testPage: Page; private _testView: T; private _errorMessage; @@ -39,9 +39,8 @@ export class UITest 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 implements trace.TraceWriter { trace.removeWriter(this); } - public setUp() { + public setUp() { this._testView = this.create(); this._testPage.content = this._testView; } diff --git a/tests/app/ui/label/label-tests.ts b/tests/app/ui/label/label-tests.ts index 0445237be..8b0afa1ae 100644 --- a/tests/app/ui/label/label-tests.ts +++ b/tests/app/ui/label/label-tests.ts @@ -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 { 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 { } 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 { } 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 { } 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 { // 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 = (testLabel.android.getBackground()); + const bkg = (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 { expColor = new colorModule.Color(color); TKUnit.assertEqual(normalColor.hex, expColor.hex); - var cgColor = (testLabel.ios).layer.backgroundColor; - var uiColor = UIColor.colorWithCGColor(cgColor); + const cgColor = (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 { } 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 { // 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 { // 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 { } 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 { } 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 { // 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 { 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 { } 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 { } 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 { 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 { 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"); diff --git a/tests/app/ui/styling/style-properties-tests.ts b/tests/app/ui/styling/style-properties-tests.ts index a02879f38..26aca5e5e 100644 --- a/tests/app/ui/styling/style-properties-tests.ts +++ b/tests/app/ui/styling/style-properties-tests.ts @@ -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(); (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. - (testView.style).fontWeight = 100; TKUnit.assertEqual(testView.style.fontWeight, "100"); - (testView.style).fontWeight = 200; TKUnit.assertEqual(testView.style.fontWeight, "200"); - (testView.style).fontWeight = 300; TKUnit.assertEqual(testView.style.fontWeight, "300"); - (testView.style).fontWeight = 400; TKUnit.assertEqual(testView.style.fontWeight, "400"); - (testView.style).fontWeight = "normal"; TKUnit.assertEqual(testView.style.fontWeight, "normal"); - (testView.style).fontWeight = 500; TKUnit.assertEqual(testView.style.fontWeight, "500"); - (testView.style).fontWeight = 600; TKUnit.assertEqual(testView.style.fontWeight, "600"); - (testView.style).fontWeight = 700; TKUnit.assertEqual(testView.style.fontWeight, "700"); - (testView.style).fontWeight = "bold"; TKUnit.assertEqual(testView.style.fontWeight, "bold"); - (testView.style).fontWeight = 800; TKUnit.assertEqual(testView.style.fontWeight, "800"); - (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) { - if (platform.device.os === platform.platformNames.android) { + helper.buildUIAndRunTest(testView, function (views: Array) { + if (isAndroid) { TKUnit.assertEqual((testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END); - } else if (platform.device.os === platform.platformNames.ios) { + } else if (isIOS) { TKUnit.assertEqual((testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByTruncatingMiddle); TKUnit.assertEqual((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) { - if (platform.device.os === platform.platformNames.android) { + helper.buildUIAndRunTest(testView, function (views: Array) { + if (isAndroid) { TKUnit.assertEqual((testView.android).getEllipsize(), android.text.TextUtils.TruncateAt.END); - } else if (platform.device.os === platform.platformNames.ios) { + } else if (isIOS) { TKUnit.assertEqual((testView.ios).lineBreakMode, NSLineBreakMode.ByTruncatingTail); TKUnit.assertEqual((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) { - if (platform.device.os === platform.platformNames.android) { + helper.buildUIAndRunTest(testView, function (views: Array) { + if (isAndroid) { TKUnit.assertNull((testView.android).getEllipsize(), null); - } else if (platform.device.os === platform.platformNames.ios) { + } else if (isIOS) { TKUnit.assertEqual((testView.ios).titleLabel.lineBreakMode, NSLineBreakMode.ByWordWrapping); TKUnit.assertEqual((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) { - if (platform.device.os === platform.platformNames.android) { + helper.buildUIAndRunTest(testView, function (views: Array) { + if (isAndroid) { TKUnit.assertNull((testView.android).getEllipsize(), null); - } else if (platform.device.os === platform.platformNames.ios) { + } else if (isIOS) { TKUnit.assertEqual((testView.ios).lineBreakMode, NSLineBreakMode.ByWordWrapping); TKUnit.assertEqual((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) { - 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) { + 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 (testView.android).getText();; +function androidText(testView: View) { + const tv = 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 (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 (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 (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((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((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(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((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((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"); } diff --git a/tns-core-modules/ui/button/button.ios.ts b/tns-core-modules/ui/button/button.ios.ts index 9195d154c..d6cd79b31 100644 --- a/tns-core-modules/ui/button/button.ios.ts +++ b/tns-core-modules/ui/button/button.ios.ts @@ -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}".`); } } diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts index fb40e7215..2cfdf97d4 100644 --- a/tns-core-modules/ui/core/view-common.ts +++ b/tns-core-modules/ui/core/view-common.ts @@ -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({ 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({ 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({ 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({ 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({ ]; } } -}) +}); borderColorProperty.register(Style); export const borderTopColorProperty = new CssProperty({ @@ -1685,13 +1704,13 @@ borderLeftColorProperty.register(Style); const borderWidthProperty = new ShorthandProperty({ 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({ ]; } } -}) +}); borderWidthProperty.register(Style); export const borderTopWidthProperty = new CssProperty({ @@ -1784,12 +1803,12 @@ borderLeftWidthProperty.register(Style); const borderRadiusProperty = new ShorthandProperty({ 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({ ]; } } -}) +}); borderRadiusProperty.register(Style); export const borderTopLeftRadiusProperty = new CssProperty({ @@ -1982,7 +2001,7 @@ const fontProperty = new ShorthandProperty({ ]; } } -}) +}); fontProperty.register(Style); export type Visibility = "visible" | "hidden" | "collapse"; diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts index 7a485462f..911d4fd71 100644 --- a/tns-core-modules/ui/core/view.d.ts +++ b/tns-core-modules/ui/core/view.d.ts @@ -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; } /** diff --git a/tns-core-modules/ui/label/label.ios.ts b/tns-core-modules/ui/label/label.ios.ts index 0e4b86da4..60d5e5ce8 100644 --- a/tns-core-modules/ui/label/label.ios.ts +++ b/tns-core-modules/ui/label/label.ios.ts @@ -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; diff --git a/tns-core-modules/ui/text-base/text-base-common.ts b/tns-core-modules/ui/text-base/text-base-common.ts index d65003f3d..0d5051cdc 100644 --- a/tns-core-modules/ui/text-base/text-base-common.ts +++ b/tns-core-modules/ui/text-base/text-base-common.ts @@ -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({ name: "whiteSpace", cssName: "white-space", - defaultValue: WhiteSpace.NORMAL, + defaultValue: isIOS ? WhiteSpace.NO_WRAP : WhiteSpace.NORMAL, valueConverter: WhiteSpace.parse }); whiteSpaceProperty.register(Style); diff --git a/tns-core-modules/ui/text-base/text-base.android.ts b/tns-core-modules/ui/text-base/text-base.android.ts index 92078902e..020698ff0 100644 --- a/tns-core-modules/ui/text-base/text-base.android.ts +++ b/tns-core-modules/ui/text-base/text-base.android.ts @@ -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 { let result: native.Array = []; - 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 { let transformedString = this._getTransformedString(); let result: native.Array = []; - 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}".`); } } \ No newline at end of file diff --git a/tns-core-modules/ui/text-base/text-base.ios.ts b/tns-core-modules/ui/text-base/text-base.ios.ts index a3f2cfeed..9b3de47f0 100644 --- a/tns-core-modules/ui/text-base/text-base.ios.ts +++ b/tns-core-modules/ui/text-base/text-base.ios.ts @@ -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(); - 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); }