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

Fixed text decoration tests, Color will now store just a single argb info in 32bit unsigned int internally and covert to a/r/g/b or hex when necessary

Browse Source
This commit is contained in:
PanayotCankov
2017-02-17 13:26:11 +02:00
committed by Panayot Cankov
parent ccde2a4083
commit b2cf286948
16 changed files with 340 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,10 @@
// Place your settings in this file to overwrite default and user settings.
{
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/platforms": true,
"**/*.js": true,
"**/*.js.map": true
}
}

19
apps/app/ui-tests-app/css/letter-spacing.xml
View File

@ -5,14 +5,17 @@
<Label text="labelLabel" style="letter-spacing: -0.1;" /> <Label text="labelLabel" style="letter-spacing: -0.1;" />
<Label text="labelLabel" style="letter-spacing: 0;" /> <Label text="labelLabel" style="letter-spacing: 0;" />
<Label text="labelLabel" style="letter-spacing: 0.1;" /> <Label text="labelLabel" style="letter-spacing: 0.1;" />
<Label>
<Span text="just bold" fontWeight="bold" />
</Label>
</WrapLayout> </WrapLayout>
<Label text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" /> <Label text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;" />
<Label style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;"> <Label style="text-transform: uppercase; text-decoration: underline line-through;letter-spacing: 0.1;">
<Label.formattedText> <Label.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>
<Span text="label" fontAttributes="Bold" foregroundColor="#0000ff" /> <Span text="label" fontWeight="bold" color="#0000ff" />
<Span text="Label" fontAttributes="Italic" foregroundColor="#00ff00" /> <Span text="Label" fontStyle="italic" color="#00ff00" />
</FormattedString.spans> </FormattedString.spans>
</FormattedString> </FormattedString>
</Label.formattedText> </Label.formattedText>
@ -28,8 +31,8 @@
<Button.formattedText> <Button.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>
<Span text="button" fontAttributes="Bold" foregroundColor="#0000ff" /> <Span text="button" fontWeight="bold" color="#0000ff" />
<Span text="Button" fontAttributes="Italic" foregroundColor="#00ff00" /> <Span text="Button" fontStyle="italic" color="#00ff00" />
</FormattedString.spans> </FormattedString.spans>
</FormattedString> </FormattedString>
</Button.formattedText> </Button.formattedText>
@ -46,8 +49,8 @@
<TextField.formattedText> <TextField.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>
<Span text="text" fontAttributes="Bold" foregroundColor="#0000ff" /> <Span text="text" fontWeight="bold" color="#0000ff" />
<Span text="Field" fontAttributes="Italic" foregroundColor="#00ff00" /> <Span text="Field" fontStyle="italic" color="#00ff00" />
</FormattedString.spans> </FormattedString.spans>
</FormattedString> </FormattedString>
</TextField.formattedText> </TextField.formattedText>
@ -64,8 +67,8 @@
<TextView.formattedText> <TextView.formattedText>
<FormattedString> <FormattedString>
<FormattedString.spans> <FormattedString.spans>
<Span text="text" fontAttributes="Bold" foregroundColor="#0000ff" /> <Span text="text" fontWeight="bold" color="#0000ff" />
<Span text="View" fontAttributes="Italic" foregroundColor="#00ff00" /> <Span text="View" fontStyle="italic" color="#00ff00" />
</FormattedString.spans> </FormattedString.spans>
</FormattedString> </FormattedString>
</TextView.formattedText> </TextView.formattedText>

2
apps/package.json
View File

@ -9,7 +9,7 @@
"version": "2.5.0" "version": "2.5.0"
}, },
"tns-android": { "tns-android": {
"version": "2.4.1" "version": "2.5.0"
} }
}, },
"dependencies": { "dependencies": {

43
tests/app/color-tests.ts
View File

@ -14,7 +14,7 @@ export var test_Hex_Color = function () {
TKUnit.assertEqual(color.g, 0, "Color.g not properly parsed"); TKUnit.assertEqual(color.g, 0, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed"); TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, "#FF0000", "Color.hex not properly parsed"); TKUnit.assertEqual(color.hex, "#FF0000", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 0, 0), "Color.argb not properly parsed"); TKUnit.assertEqual(color.argb, 0xFFFF0000, "Color.argb not properly parsed");
} }
export var test_ShortHex_Color = function () { export var test_ShortHex_Color = function () {
@ -27,7 +27,7 @@ export var test_ShortHex_Color = function () {
TKUnit.assertEqual(color.g, 136, "Color.g not properly parsed"); // 0x88 == 136 TKUnit.assertEqual(color.g, 136, "Color.g not properly parsed"); // 0x88 == 136
TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed"); TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, "#FF8800", "Color.hex not properly parsed"); TKUnit.assertEqual(color.hex, "#FF8800", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 136, 0), "Color.argb not properly parsed"); TKUnit.assertEqual(color.argb, 0xFFFF8800, "Color.argb not properly parsed");
} }
export var test_Argb_Color = function () { export var test_Argb_Color = function () {
@ -39,22 +39,21 @@ export var test_Argb_Color = function () {
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed"); TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed"); TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed"); TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(100, 255, 100, 100), "Color.hex not properly parsed"); TKUnit.assertEqual(color.hex, "#64FF6464", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(100, 255, 100, 100), "Color.argb not properly parsed"); TKUnit.assertEqual(color.argb, 0x64FF6464, "Color.argb not properly parsed");
} }
export var test_ArgbInt_Color = function () { export var test_ArgbInt_Color = function () {
// >> color-rgb-single // >> color-rgb-single
// Creates the color with 100 alpha, 100 red, 100 green, 100 blue // Creates the color with 100 alpha, 100 red, 100 green, 100 blue
var argb = (100 << 24) | (100 << 16) | (100 << 8) | 100; var color = new Color(0x64646464);
var color = new Color(argb);
// << color-rgb-single // << color-rgb-single
TKUnit.assertEqual(color.a, 100, "Color.a not properly parsed"); TKUnit.assertEqual(color.a, 100, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 100, "Color.r not properly parsed"); TKUnit.assertEqual(color.r, 100, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed"); TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed"); TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(100, 100, 100, 100), "Color.hex not properly parsed"); TKUnit.assertEqual(color.hex, "#64646464", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(100, 100, 100, 100), "Color.argb not properly parsed"); TKUnit.assertEqual(color.argb, 0x64646464, "Color.argb not properly parsed");
} }
export var test_rgb_Color_CSS = function () { export var test_rgb_Color_CSS = function () {
@ -69,13 +68,13 @@ export var test_rgb_Color_CSS = function () {
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed"); TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed"); TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed"); TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(255, 255, 100, 100), "Color.hex not properly parsed"); TKUnit.assertEqual(color.hex, "#FF6464", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 100, 100), "Color.argb not properly parsed"); TKUnit.assertEqual(color.argb, 0xFFFF6464, "Color.argb not properly parsed");
} }
export var test_rgba_Color_CSS = function () { export var test_rgba_Color_CSS = function () {
var alpha = 0.5; var alpha = 0.5;
var expected = Math.round(alpha * 255); var expected = 0x80;
// <snippet module="color" title="color"> // <snippet module="color" title="color">
// ### Creating a Color from four RGB values // ### Creating a Color from four RGB values
// ``` JavaScript // ``` JavaScript
@ -87,24 +86,6 @@ export var test_rgba_Color_CSS = function () {
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed"); TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed"); TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed"); TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(expected, 255, 100, 100), "Color.hex not properly parsed"); TKUnit.assertEqual(color.hex, "#80FF6464", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(expected, 255, 100, 100), "Color.argb not properly parsed"); TKUnit.assertEqual(color.argb, 0x80FF6464, "Color.argb not properly parsed");
}
var _buildHex = function (a: number, r: number, g: number, b: number): string {
return "#" + _componentToHex(a) + _componentToHex(r) + _componentToHex(g) + _componentToHex(b);
}
var _componentToHex = function (component: number): string {
var hex = component.toString(16);
if (hex.length === 1) {
hex = "0" + hex;
}
return hex;
}
var _parseArgb = function (a: number, r: number, g: number, b: number): number {
// Format is ARGB, so alpha takes the first 8 bits, red the next, green the next and the last 8 bits are for the blue component
return (a << 24) | (r << 16) | (g << 8) | b;
} }

9
tests/app/timer-tests.ts
View File

@ -52,16 +52,17 @@ export function test_setTimeout_callbackCalledAfterSpecifiedTime() {
TKUnit.waitUntilReady(() => completed, 1); TKUnit.waitUntilReady(() => completed, 1);
timer.clearTimeout(id); timer.clearTimeout(id);
TKUnit.assert(completed, "Callback should be called after specified time!"); TKUnit.assert(completed, "Callback should be called after the specified time!");
}; };
export function test_setTimeout_callbackNotCalled() { export function test_setTimeout_callbackNotCalled() {
let completed = false; let completed = false;
const id = timer.setTimeout(() => completed = true, 50);
TKUnit.wait(0.007); const id = timer.setTimeout(() => completed = true, 10);
timer.clearTimeout(id); timer.clearTimeout(id);
TKUnit.assert(!completed, "Callback should be called after specified time!"); TKUnit.wait(30 / 1000);
TKUnit.assert(!completed, "Callback should not be called after the specified time!");
}; };
export function test_setTimeout_shouldReturnNumber() { export function test_setTimeout_shouldReturnNumber() {

45
tests/app/ui/button/button-tests.ts
View File

@ -180,58 +180,60 @@ var _testNativeFontSizeFromLocal = function (views: Array<viewModule.View>) {
helper.assertAreClose(actualResult, expectedFontSize, "FontSizeFromLocal"); helper.assertAreClose(actualResult, expectedFontSize, "FontSizeFromLocal");
} }
var expectedColorHex = "#ffff0000"; var actualColorHex = "#ffff0000";
var expectedNormalizedColorHex = "#FF0000"
var _testLocalColorFromCss = function (views: Array<viewModule.View>) { var _testLocalColorFromCss = function (views: Array<viewModule.View>) {
var button = <buttonModule.Button>views[0]; var button = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1]; var page = <pagesModule.Page>views[1];
page.css = "button { color: " + expectedColorHex + "; }"; page.css = "button { color: " + actualColorHex + "; }";
var actualResult = button.style.color.hex; var actualResult = button.style.color.hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
} }
var _testNativeColorFromCss = function (views: Array<viewModule.View>) { var _testNativeColorFromCss = function (views: Array<viewModule.View>) {
var button = <buttonModule.Button>views[0]; var button = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1]; var page = <pagesModule.Page>views[1];
page.css = "button { color: " + expectedColorHex + "; }"; page.css = "button { color: " + actualColorHex + "; }";
var actualResult = buttonTestsNative.getNativeColor(button).hex; var actualResult = buttonTestsNative.getNativeColor(button).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
} }
var _testNativeColorFromLocal = function (views: Array<viewModule.View>) { var _testNativeColorFromLocal = function (views: Array<viewModule.View>) {
var button = <buttonModule.Button>views[0]; var button = <buttonModule.Button>views[0];
button.style.color = new colorModule.Color(expectedColorHex); button.style.color = new colorModule.Color(actualColorHex);
var actualResult = buttonTestsNative.getNativeColor(button).hex; var actualResult = buttonTestsNative.getNativeColor(button).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
} }
var expectedBackgroundColorHex = "#ff00ff00"; var actualBackgroundColorHex = "#FF00FF00";
var expectedNormalizedBackgroundColorHex = "#00FF00";
var _testLocalBackgroundColorFromCss = function (views: Array<viewModule.View>) { var _testLocalBackgroundColorFromCss = function (views: Array<viewModule.View>) {
var button = <buttonModule.Button>views[0]; var button = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1]; var page = <pagesModule.Page>views[1];
page.css = "button { background-color: " + expectedBackgroundColorHex + "; }"; page.css = "button { background-color: " + actualBackgroundColorHex + "; }";
var actualResult = button.style.backgroundColor.hex; var actualResult = button.style.backgroundColor.hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
} }
var _testNativeBackgroundColorFromCss = function (views: Array<viewModule.View>) { var _testNativeBackgroundColorFromCss = function (views: Array<viewModule.View>) {
var button = <buttonModule.Button>views[0]; var button = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1]; var page = <pagesModule.Page>views[1];
page.css = "button { background-color: " + expectedBackgroundColorHex + "; }"; page.css = "button { background-color: " + actualBackgroundColorHex + "; }";
var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex; var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
} }
var _testNativeBackgroundColorFromLocal = function (views: Array<viewModule.View>) { var _testNativeBackgroundColorFromLocal = function (views: Array<viewModule.View>) {
var button = <buttonModule.Button>views[0]; var button = <buttonModule.Button>views[0];
button.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex); button.style.backgroundColor = new colorModule.Color(actualBackgroundColorHex);
var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex; var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
} }
var expectedTextAlignment: "right" = "right"; var expectedTextAlignment: "right" = "right";
@ -261,13 +263,14 @@ export var test_StateHighlighted_also_fires_pressedState = function () {
helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
var view = <buttonModule.Button>views[0]; var view = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1]; var page = <pagesModule.Page>views[1];
var expectedColor = "#ffff0000"; var expectedColor = "#FFFF0000";
var expectedNormalizedColor = "#FF0000";
page.css = "button:pressed { background-color: " + expectedColor + "; }"; page.css = "button:pressed { background-color: " + expectedColor + "; }";
view._goToVisualState('highlighted'); view._goToVisualState('highlighted');
var actualResult = buttonTestsNative.getNativeBackgroundColor(view); var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor); TKUnit.assert(actualResult.hex === expectedNormalizedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedNormalizedColor);
}); });
} }
@ -275,13 +278,14 @@ export var test_StateHighlighted_also_fires_activeState = function () {
helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
var view = <buttonModule.Button>views[0]; var view = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1]; var page = <pagesModule.Page>views[1];
var expectedColor = "#ffff0000"; var expectedColor = "#FFFF0000";
var expectedNormalizedColor = "#FF0000";
page.css = "button:active { background-color: " + expectedColor + "; }"; page.css = "button:active { background-color: " + expectedColor + "; }";
view._goToVisualState('highlighted'); view._goToVisualState('highlighted');
var actualResult = buttonTestsNative.getNativeBackgroundColor(view); var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor); TKUnit.assert(actualResult.hex === expectedNormalizedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedNormalizedColor);
}); });
} }
@ -289,13 +293,14 @@ export var test_applying_disabled_visual_State_when_button_is_disable = function
helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(_createButtonFunc(), function (views: Array<viewModule.View>) {
var view = <buttonModule.Button>views[0]; var view = <buttonModule.Button>views[0];
var page = <pagesModule.Page>views[1]; var page = <pagesModule.Page>views[1];
var expectedColor = "#ffff0000"; var expectedColor = "#FFFF0000";
var expectedNormalizedColor = "#FF0000";
page.css = "button:disabled { background-color: " + expectedColor + "; }"; page.css = "button:disabled { background-color: " + expectedColor + "; }";
view.isEnabled = false; view.isEnabled = false;
var actualResult = buttonTestsNative.getNativeBackgroundColor(view); var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor); TKUnit.assert(actualResult.hex === expectedNormalizedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedNormalizedColor);
}); });
} }

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

@ -193,8 +193,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
const label = this.testView; const label = this.testView;
const fontSize = 14; const fontSize = 14;
const color = "#ffff0000"; const color = "#FFFF0000";
const backgroundColor = "#ff00ff00"; const backgroundColor = "#FF00FF00";
const testCss = [".title {background-color: ", backgroundColor, "; ", const testCss = [".title {background-color: ", backgroundColor, "; ",
"color: ", color, "; ", "color: ", color, "; ",
"font-size: ", fontSize, ";}"].join(""); "font-size: ", fontSize, ";}"].join("");
@ -471,14 +471,15 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
let view = this.testView; let view = this.testView;
let page = this.testPage; let page = this.testPage;
this.waitUntilTestElementIsLoaded(); this.waitUntilTestElementIsLoaded();
let expectedColor = "#ffff0000"; let expectedColor = "#FFFF0000";
let expectedNormalizedColor = "#FF0000";
page.css = "label:disabled { background-color: " + expectedColor + "; }"; page.css = "label:disabled { background-color: " + expectedColor + "; }";
view.isEnabled = false; view.isEnabled = false;
let actualResult = labelTestsNative.getNativeBackgroundColor(view); let actualResult = labelTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedColor); TKUnit.assert(actualResult.hex === expectedNormalizedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedNormalizedColor);
}; };
public test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormattedText_DoesNotCrash() { public test_IntegrationTest_Transform_Decoration_Spacing_WithoutFormattedText_DoesNotCrash() {

22
tests/app/ui/page/page-tests-common.ts
View File

@ -295,7 +295,7 @@ export function test_LoadPageFromDeclarativeWithCSS() {
TKUnit.assert(topFrame.currentPage.content instanceof Label, "Content of the test page should be a Label created within test-page-module-css."); TKUnit.assert(topFrame.currentPage.content instanceof Label, "Content of the test page should be a Label created within test-page-module-css.");
let testLabel = <Label>topFrame.currentPage.content; let testLabel = <Label>topFrame.currentPage.content;
TKUnit.assertEqual(testLabel.text, "Label created within a page declarative file with css."); TKUnit.assertEqual(testLabel.text, "Label created within a page declarative file with css.");
TKUnit.assertEqual(testLabel.style.backgroundColor.hex, "#ff00ff00"); TKUnit.assertEqual(testLabel.style.backgroundColor.hex, "#00FF00");
} }
export function test_LoadPageFromModuleWithCSS() { export function test_LoadPageFromModuleWithCSS() {
@ -305,7 +305,7 @@ export function test_LoadPageFromModuleWithCSS() {
TKUnit.assert(topFrame.currentPage.content instanceof Label, "Content of the test page should be a Label created within test-page-module-css."); TKUnit.assert(topFrame.currentPage.content instanceof Label, "Content of the test page should be a Label created within test-page-module-css.");
let testLabel = <Label>topFrame.currentPage.content; let testLabel = <Label>topFrame.currentPage.content;
TKUnit.assertEqual(testLabel.text, "Label created within a page module css."); TKUnit.assertEqual(testLabel.text, "Label created within a page module css.");
TKUnit.assertEqual(testLabel.style.backgroundColor.hex, "#ff00ff00"); TKUnit.assertEqual(testLabel.style.backgroundColor.hex, "#00FF00");
} }
export function test_NavigateToPageCreatedWithNavigationEntry() { export function test_NavigateToPageCreatedWithNavigationEntry() {
@ -334,7 +334,7 @@ export function test_cssShouldBeAppliedToAllNestedElements() {
let stackLayout = new StackLayout(); let stackLayout = new StackLayout();
stackLayout.addChild(label); stackLayout.addChild(label);
testPage.content = stackLayout; testPage.content = stackLayout;
testPage.css = "stackLayout {background-color: #ffff0000;} label {background-color: #ff00ff00;}"; testPage.css = "stackLayout {background-color: #FFFF0000;} label {background-color: #FF00FF00;}";
let pageFactory = function () { let pageFactory = function () {
return testPage; return testPage;
@ -342,8 +342,8 @@ export function test_cssShouldBeAppliedToAllNestedElements() {
helper.navigate(pageFactory); helper.navigate(pageFactory);
TKUnit.assertEqual(label.style.backgroundColor.hex, "#ff00ff00"); TKUnit.assertEqual(label.style.backgroundColor.hex, "#00FF00");
TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#ffff0000"); TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#FF0000");
} }
export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() { export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
@ -356,7 +356,7 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
let stackLayout = new StackLayout(); let stackLayout = new StackLayout();
stackLayout.addChild(label); stackLayout.addChild(label);
testPage.content = stackLayout; testPage.content = stackLayout;
testPage.css = "stackLayout {background-color: #ffff0000;} label {background-color: #ff00ff00;}"; testPage.css = "stackLayout {background-color: #FFFF0000;} label {background-color: #FF00FF00;}";
let pageFactory = function () { let pageFactory = function () {
return testPage; return testPage;
@ -364,12 +364,12 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
helper.navigate(pageFactory); helper.navigate(pageFactory);
TKUnit.assertEqual(label.style.backgroundColor.hex, "#ff00ff00"); TKUnit.assertEqual(label.style.backgroundColor.hex, "#00FF00");
TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#ffff0000"); TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#FF0000");
testPage.css = "stackLayout {background-color: #ff0000ff;} label {background-color: #ffff0000;}"; testPage.css = "stackLayout {background-color: #FF0000FF;} label {background-color: #FFFF0000;}";
TKUnit.assertEqual(label.style.backgroundColor.hex, "#ffff0000"); TKUnit.assertEqual(label.style.backgroundColor.hex, "#FF0000");
TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#ff0000ff"); TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#0000FF");
} }
export function test_page_backgroundColor_is_white() { export function test_page_backgroundColor_is_white() {

10
tests/app/ui/search-bar/search-bar-tests.ts
View File

@ -31,18 +31,18 @@ export var testSearchBarHintColorAndroid = function () {
searchBar.text = ""; searchBar.text = "";
searchBar.hint = "hint color test"; searchBar.hint = "hint color test";
var expectedValue; var expectedNormalizedValue;
var actualValue; var actualValue;
searchBar.textFieldHintColor = new colorModule.Color("blue"); searchBar.textFieldHintColor = new colorModule.Color("blue");
expectedValue = "#ff0000ff"; // blue expectedNormalizedValue = "#0000FF"; // blue
actualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex; actualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex;
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue); TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
searchBar.textFieldHintColor = new colorModule.Color("red"); searchBar.textFieldHintColor = new colorModule.Color("red");
expectedValue = "#ffff0000"; // Red expectedNormalizedValue = "#FF0000"; // red
actualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex; actualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex;
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue); TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
}); });
}; };

28
tests/app/ui/text-field/text-field-tests.ts
View File

@ -397,7 +397,8 @@ export var testNativeFontSizeFromLocal = function () {
}); });
} }
var expectedColorHex = "#ffff0000"; var expectedColorHex = "#FFFF0000";
var expectedNormalizedColorHex = "#FF0000";
export var testLocalColorFromCss = function () { export var testLocalColorFromCss = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0]; var textField = <textFieldModule.TextField>views[0];
@ -405,7 +406,7 @@ export var testLocalColorFromCss = function () {
page.css = "textfield { color: " + expectedColorHex + "; }"; page.css = "textfield { color: " + expectedColorHex + "; }";
var actualResult = textField.style.color.hex; var actualResult = textField.style.color.hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
}); });
} }
@ -416,7 +417,7 @@ export var testNativeColorFromCss = function () {
page.css = "textfield { color: " + expectedColorHex + "; }"; page.css = "textfield { color: " + expectedColorHex + "; }";
var actualResult = textFieldTestsNative.getNativeColor(textField).hex; var actualResult = textFieldTestsNative.getNativeColor(textField).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
}); });
} }
@ -426,11 +427,12 @@ export var testNativeColorFromLocal = function () {
textField.style.color = new colorModule.Color(expectedColorHex); textField.style.color = new colorModule.Color(expectedColorHex);
var actualResult = textFieldTestsNative.getNativeColor(textField).hex; var actualResult = textFieldTestsNative.getNativeColor(textField).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
}); });
} }
var expectedBackgroundColorHex = "#ff00ff00"; var expectedBackgroundColorHex = "#FF00FF00";
var expectedNormalizedBackgroundColorHex = "#00FF00";
export var testLocalBackgroundColorFromCss = function () { export var testLocalBackgroundColorFromCss = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0]; var textField = <textFieldModule.TextField>views[0];
@ -438,7 +440,7 @@ export var testLocalBackgroundColorFromCss = function () {
page.css = "textfield { background-color: " + expectedBackgroundColorHex + "; }"; page.css = "textfield { background-color: " + expectedBackgroundColorHex + "; }";
var actualResult = textField.style.backgroundColor.hex; var actualResult = textField.style.backgroundColor.hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
}); });
} }
@ -449,7 +451,7 @@ export var testNativeBackgroundColorFromCss = function () {
page.css = "textfield { background-color: " + expectedBackgroundColorHex + "; }"; page.css = "textfield { background-color: " + expectedBackgroundColorHex + "; }";
var actualResult = textFieldTestsNative.getNativeBackgroundColor(textField).hex; var actualResult = textFieldTestsNative.getNativeBackgroundColor(textField).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
}); });
} }
@ -459,7 +461,7 @@ export var testNativeBackgroundColorFromLocal = function () {
textField.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex); textField.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex);
var actualResult = textFieldTestsNative.getNativeBackgroundColor(textField).hex; var actualResult = textFieldTestsNative.getNativeBackgroundColor(textField).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
}); });
} }
@ -568,21 +570,23 @@ export function test_IntegrationTest_Transform_Decoration_Spacing_WithFormattedT
export function test_set_placeholder_color() { export function test_set_placeholder_color() {
let view = new textFieldModule.TextField(); let view = new textFieldModule.TextField();
let expectedColorHex = "#ffff0000"; let expectedColorHex = "#FFFF0000";
let expectedNormalizedColorHex = "#FF0000";
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.hint = "Some text for hint"; view.hint = "Some text for hint";
view.setInlineStyle("placeholder-color: " + expectedColorHex + ";"); view.setInlineStyle("placeholder-color: " + expectedColorHex + ";");
let actualColorHex = textFieldTestsNative.getNativePlaceholderColor(view).hex; let actualColorHex = textFieldTestsNative.getNativePlaceholderColor(view).hex;
TKUnit.assertEqual(actualColorHex, expectedColorHex); TKUnit.assertEqual(actualColorHex, expectedNormalizedColorHex);
}); });
} }
export function test_set_placeholder_color_when_hint_is_not_set() { export function test_set_placeholder_color_when_hint_is_not_set() {
let view = new textFieldModule.TextField(); let view = new textFieldModule.TextField();
let expectedColorHex = "#ffff0000"; let expectedColorHex = "#FFFF0000";
let expectedNormalizedColorHex = "#FF0000";
helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(view, function (views: Array<viewModule.View>) {
view.setInlineStyle("placeholder-color: " + expectedColorHex + ";"); view.setInlineStyle("placeholder-color: " + expectedColorHex + ";");
let actualColorHex = textFieldTestsNative.getNativePlaceholderColor(view).hex; let actualColorHex = textFieldTestsNative.getNativePlaceholderColor(view).hex;
TKUnit.assertEqual(actualColorHex, expectedColorHex); TKUnit.assertEqual(actualColorHex, expectedNormalizedColorHex);
}); });
} }

33
tests/app/ui/text-view/text-view-tests.ts
View File

@ -260,22 +260,19 @@ export var testHintColoriOS = function () {
textView.hint = "hint"; textView.hint = "hint";
var expectedValue; var expectedValue;
var expectedNormalizedValue;
var actualValue; var actualValue;
// expectedValue = "#38.1999948ff0000"; // 22% red
// if (utils.ios.MajorVersion > 7) {
// expectedValue = "#38.19999999999aff0000"; // 22% red
// }
actualValue = textViewTestsNative.getNativeColor(textView).hex; actualValue = textViewTestsNative.getNativeColor(textView).hex;
// TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
TKUnit.assert(actualValue.indexOf("#38.19999") === 0, "Expected hint color to start with #38.19999"); TKUnit.assertEqual(actualValue, "#38FF0000", "Expected hint color to be a subtle transparent red: #38FF0000");
TKUnit.assert(actualValue.indexOf("ff0000") !== -1, "Expected hint color to end with ff0000");
textView.text = "text"; textView.text = "text";
expectedValue = "#ffff0000"; // red expectedValue = "#FFFF0000"; // red
expectedNormalizedValue = "#FF0000";
actualValue = textViewTestsNative.getNativeColor(textView).hex; actualValue = textViewTestsNative.getNativeColor(textView).hex;
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue); TKUnit.assert(actualValue === expectedNormalizedValue, "Actual: " + actualValue + "; Expected: " + expectedNormalizedValue);
}); });
} }
@ -377,7 +374,8 @@ export var testNativeFontSizeFromLocal = function () {
}); });
} }
var expectedColorHex = "#ffff0000"; var expectedColorHex = "#FFFF0000";
var expectedNormalizedColorHex = "#FF0000";
export var testLocalColorFromCss = function () { export var testLocalColorFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
var textView = <textViewModule.TextView>views[0]; var textView = <textViewModule.TextView>views[0];
@ -385,7 +383,7 @@ export var testLocalColorFromCss = function () {
page.css = "textview { color: " + expectedColorHex + "; }"; page.css = "textview { color: " + expectedColorHex + "; }";
var actualResult = textView.style.color.hex; var actualResult = textView.style.color.hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
}); });
} }
@ -396,7 +394,7 @@ export var testNativeColorFromCss = function () {
page.css = "textview { color: " + expectedColorHex + "; }"; page.css = "textview { color: " + expectedColorHex + "; }";
var actualResult = textViewTestsNative.getNativeColor(textView).hex; var actualResult = textViewTestsNative.getNativeColor(textView).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
}); });
} }
@ -406,11 +404,12 @@ export var testNativeColorFromLocal = function () {
textView.style.color = new colorModule.Color(expectedColorHex); textView.style.color = new colorModule.Color(expectedColorHex);
var actualResult = textViewTestsNative.getNativeColor(textView).hex; var actualResult = textViewTestsNative.getNativeColor(textView).hex;
TKUnit.assert(actualResult === expectedColorHex, "Actual: " + actualResult + "; Expected: " + expectedColorHex); TKUnit.assert(actualResult === expectedNormalizedColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedColorHex);
}); });
} }
var expectedBackgroundColorHex = "#ff00ff00"; var expectedBackgroundColorHex = "#FF00FF00";
var expectedNormalizedBackgroundColorHex = "#00FF00";
export var testLocalBackgroundColorFromCss = function () { export var testLocalBackgroundColorFromCss = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) { helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
var textView = <textViewModule.TextView>views[0]; var textView = <textViewModule.TextView>views[0];
@ -418,7 +417,7 @@ export var testLocalBackgroundColorFromCss = function () {
page.css = "textview { background-color: " + expectedBackgroundColorHex + "; }"; page.css = "textview { background-color: " + expectedBackgroundColorHex + "; }";
var actualResult = textView.style.backgroundColor.hex; var actualResult = textView.style.backgroundColor.hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
}); });
} }
@ -429,7 +428,7 @@ export var testNativeBackgroundColorFromCss = function () {
page.css = "textview { background-color: " + expectedBackgroundColorHex + "; }"; page.css = "textview { background-color: " + expectedBackgroundColorHex + "; }";
var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex; var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
}); });
} }
@ -439,7 +438,7 @@ export var testNativeBackgroundColorFromLocal = function () {
textView.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex); textView.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex);
var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex; var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex;
TKUnit.assert(actualResult === expectedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedBackgroundColorHex); TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
}); });
} }

4
tests/app/ui/view/view-tests-common.ts
View File

@ -755,8 +755,8 @@ export function testIsVisible() {
export function testSetInlineStyle() { export function testSetInlineStyle() {
const lbl = new Label(); const lbl = new Label();
const expectedColor = "#ff0000"; const expectedColor = "#FF0000";
const expectedBackgroundColor = "#ff0000"; const expectedBackgroundColor = "#FF0000";
lbl.setInlineStyle(`color: ${expectedColor};background-color: ${expectedBackgroundColor};`); lbl.setInlineStyle(`color: ${expectedColor};background-color: ${expectedBackgroundColor};`);

101
tns-core-modules/color/color-common.ts
View File

@ -6,11 +6,6 @@ const SHARP = "#";
const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i; const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i;
export class Color implements definition.Color { export class Color implements definition.Color {
private _a: number;
private _r: number;
private _g: number;
private _b: number;
private _hex: string;
private _argb: number; private _argb: number;
private _name: string; private _name: string;
@ -25,61 +20,48 @@ export class Color implements definition.Color {
this._argb = argbFromRgbOrRgba(arg); this._argb = argbFromRgbOrRgba(arg);
} else if (knownColors.isKnownName(arg)) { } else if (knownColors.isKnownName(arg)) {
// The parameter is a known color name // The parameter is a known color name
this._hex = knownColors.getKnownColor(arg); const hex = knownColors.getKnownColor(arg);
this._name = arg; this._name = arg;
this._argb = this._argbFromString(this._hex); this._argb = this._argbFromString(hex);
} else if (HEX_REGEX.test(arg)) { } else if (HEX_REGEX.test(arg)) {
// The parameter is a "#AARRGGBB" formatted string // The parameter is a "#AARRGGBB" formatted string
this._hex = this._normalizeHex(arg); const hex = this._normalizeHex(arg);
this._argb = this._argbFromString(this._hex); this._argb = this._argbFromString(hex);
} else { } else {
throw new Error("Invalid color: " + arg); throw new Error("Invalid color: " + arg);
} }
} else if (types.isNumber(arg)) { } else if (types.isNumber(arg)) {
// The parameter is a 32-bit unsigned integer where each 8 bits specify a color component // The parameter is a 32-bit unsigned integer where each 8 bits specify a color component
this._argb = arg; // In case a 32-bit signed int (Android, Java has no unsigned types) was provided - convert to unsigned by applyint >>> 0
this._argb = arg >>> 0;
} else { } else {
throw new Error("Expected 1 or 4 constructor parameters."); throw new Error("Expected 1 or 4 constructor parameters.");
} }
this._parseComponents();
if (!this._hex) {
this._hex = this._buildHex();
}
} else if (arguments.length === 4) { } else if (arguments.length === 4) {
// TODO: Alpha may be optional this._argb = (arguments[0] & 0xFF) * 0x01000000
this._a = arguments[0]; + (arguments[1] & 0xFF) * 0x00010000
this._r = arguments[1]; + (arguments[2] & 0xFF) * 0x00000100
this._g = arguments[2]; + (arguments[3] & 0xFF) * 0x00000001;
this._b = arguments[3];
this._buildArgb();
this._hex = this._buildHex();
} else { } else {
throw new Error("Expected 1 or 4 constructor parameters."); throw new Error("Expected 1 or 4 constructor parameters.");
} }
} }
get a(): number { get a(): number { return (this._argb / 0x01000000) & 0xFF; }
return this._a; get r(): number { return (this._argb / 0x00010000) & 0xFF; }
} get g(): number { return (this._argb / 0x00000100) & 0xFF; }
get b(): number { return (this._argb / 0x00000001) & 0xFF; }
get r(): number {
return this._r;
}
get g(): number {
return this._g;
}
get b(): number {
return this._b;
}
get argb(): number { get argb(): number {
return this._argb; return this._argb;
} }
get hex(): string { get hex(): string {
return this._hex; if (this.a === 0xFF) {
return ("#" + this._componentToHex(this.r) + this._componentToHex(this.g) + this._componentToHex(this.b)).toUpperCase();
} else {
return ("#" + this._componentToHex(this.a) + this._componentToHex(this.r) + this._componentToHex(this.g) + this._componentToHex(this.b)).toUpperCase();
}
} }
get name(): string { get name(): string {
@ -95,7 +77,23 @@ export class Color implements definition.Color {
} }
public _argbFromString(hex: string): number { public _argbFromString(hex: string): number {
return undefined; if (hex.charAt(0) === "#") {
hex = hex.substr(1);
}
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
} else if (hex.length === 4) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
}
var intVal = parseInt(hex, 16);
if (hex.length === 6) {
// add the alpha component since the provided string is RRGGBB
intVal = (intVal & 0x00FFFFFF) + 0xFF000000;
}
return intVal;
} }
public equals(value: definition.Color): boolean { public equals(value: definition.Color): boolean {
@ -132,10 +130,6 @@ export class Color implements definition.Color {
return HEX_REGEX.test(value) || isRgbOrRgba(value); return HEX_REGEX.test(value) || isRgbOrRgba(value);
} }
private _buildHex(): string {
return SHARP + this._componentToHex(this._a) + this._componentToHex(this._r) + this._componentToHex(this._g) + this._componentToHex(this._b);
}
private _componentToHex(component: number): string { private _componentToHex(component: number): string {
let hex = component.toString(16); let hex = component.toString(16);
if (hex.length === 1) { if (hex.length === 1) {
@ -145,23 +139,6 @@ export class Color implements definition.Color {
return hex; return hex;
} }
private _parseComponents() {
if (types.isUndefined(this._argb)) {
throw new Error("Missing the ARGB numeric value");
}
// Format is ARGB, so alpha takes the first 8 bits, red the next, green the next and the last 8 bits are for the blue component
this._a = (this._argb >> 24) & 255;
this._r = (this._argb >> 16) & 255;
this._g = (this._argb >> 8) & 255;
this._b = this._argb & 255;
}
private _buildArgb() {
// Format is ARGB, so alpha takes the first 8 bits, red the next, green the next and the last 8 bits are for the blue component
this._argb = (this._a << 24) | (this._r << 16) | (this._g << 8) | this._b;
}
private _normalizeHex(hexStr: string): string { private _normalizeHex(hexStr: string): string {
if (hexStr.charAt(0) === SHARP && hexStr.length === 4) { if (hexStr.charAt(0) === SHARP && hexStr.length === 4) {
// Duplicate each char after the #, so "#123" becomes "#112233" // Duplicate each char after the #, so "#123" becomes "#112233"
@ -208,6 +185,8 @@ function argbFromRgbOrRgba(value: string): number {
a = Math.round(parseFloat(parts[3].trim()) * 255); a = Math.round(parseFloat(parts[3].trim()) * 255);
} }
// Format is ARGB, so alpha takes the first 8 bits, red the next, green the next and the last 8 bits are for the blue component return (a & 0xFF) * 0x01000000
return (a << 24) | (r << 16) | (g << 8) | b; + (r & 0xFF) * 0x00010000
+ (g & 0xFF) * 0x00000100
+ (b & 0xFF) * 0x00000001;
} }

6
tns-core-modules/color/color.android.ts
View File

@ -2,10 +2,6 @@
export class Color extends common.Color { export class Color extends common.Color {
get android(): number { get android(): number {
return this.argb; return this.argb >> 0;
}
public _argbFromString(hex: string): number {
return android.graphics.Color.parseColor(hex);
} }
} }

16
tns-core-modules/color/color.ios.ts
View File

@ -1,7 +1,5 @@
import * as common from "./color-common"; import * as common from "./color-common";
var AMP = "#";
export class Color extends common.Color { export class Color extends common.Color {
private _ios: UIColor; private _ios: UIColor;
@ -12,18 +10,4 @@ export class Color extends common.Color {
} }
return this._ios; return this._ios;
} }
public _argbFromString(hex: string): number {
if (hex.charAt(0) === AMP) {
hex = hex.substr(1);
}
var intVal = parseInt(hex, 16);
if (hex.length === 6) {
// add the alpha component since the provided string is RRGGBB
intVal |= 255 << 24;
}
return intVal;
}
} }

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

@ -6,7 +6,6 @@
import { _isSet as isSet } from "ui/core/properties"; import { _isSet as isSet } from "ui/core/properties";
import { FontWeight, FontStyle } from "ui/styling/font"; import { FontWeight, FontStyle } from "ui/styling/font";
import * as utils from "utils/utils";
export * from "./text-base-common"; export * from "./text-base-common";
@ -23,11 +22,15 @@ export class TextBase extends TextBaseCommon {
return ''; return '';
} }
set [textProperty.native](value: string) { set [textProperty.native](value: string) {
if (this.formattedText) {
return;
}
const newValue = (value === undefined || value === null) ? '' : value.toString(); const newValue = (value === undefined || value === null) ? '' : value.toString();
const nativeView = this.nativeView; const nativeView = this.nativeView;
if (this.textDecorationSet || this.textTransformSet || this.letterSpacingSet) { if (this.textDecorationSet || this.textTransformSet || this.letterSpacingSet) {
const style = this.style; const style = this.style;
setTextDecorationAndTransform(newValue, nativeView, style.textDecoration, style.textTransform, style.letterSpacing, style.color); this.setTextDecorationAndTransform(newValue, nativeView, style.textDecoration, style.textTransform, style.letterSpacing, style.color);
} else if (nativeView instanceof UIButton) { } else if (nativeView instanceof UIButton) {
nativeView.setTitleForState(newValue, UIControlState.Normal); nativeView.setTitleForState(newValue, UIControlState.Normal);
} else { } else {
@ -43,7 +46,7 @@ export class TextBase extends TextBaseCommon {
} }
set [formattedTextProperty.native](value: FormattedString) { set [formattedTextProperty.native](value: FormattedString) {
const style = this.style; const style = this.style;
setFormattedTextDecorationAndTransform(value, this.nativeView, style.textDecoration, style.textTransform, style.letterSpacing); this.setFormattedTextDecorationAndTransform(value, this.nativeView, style.textDecoration, style.textTransform, style.letterSpacing);
textProperty.nativeValueChange(this, !value ? '' : value.toString()); textProperty.nativeValueChange(this, !value ? '' : value.toString());
this._requestLayoutOnTextChanged(); this._requestLayoutOnTextChanged();
} }
@ -130,9 +133,9 @@ export class TextBase extends TextBaseCommon {
this.textDecorationSet = value !== TextDecoration.NONE; this.textDecorationSet = value !== TextDecoration.NONE;
const style = this.style; const style = this.style;
if (this.formattedText) { if (this.formattedText) {
setFormattedTextDecorationAndTransform(this.formattedText, this.nativeView, value, style.textTransform, style.letterSpacing); this.setFormattedTextDecorationAndTransform(this.formattedText, this.nativeView, value, style.textTransform, style.letterSpacing);
} else { } else {
setTextDecorationAndTransform(this.text, this.nativeView, value, style.textTransform, style.letterSpacing, style.color); this.setTextDecorationAndTransform(this.text, this.nativeView, value, style.textTransform, style.letterSpacing, style.color);
} }
} }
@ -144,13 +147,13 @@ export class TextBase extends TextBaseCommon {
this.textTransformSet = value !== TextTransform.NONE; this.textTransformSet = value !== TextTransform.NONE;
const style = this.style; const style = this.style;
if (this.formattedText) { if (this.formattedText) {
setFormattedTextDecorationAndTransform(this.formattedText, this.nativeView, style.textDecoration, value, style.letterSpacing); this.setFormattedTextDecorationAndTransform(this.formattedText, this.nativeView, style.textDecoration, value, style.letterSpacing);
} else { } else {
setTextDecorationAndTransform(this.text, this.nativeView, style.textDecoration, value, style.letterSpacing, style.color); this.setTextDecorationAndTransform(this.text, this.nativeView, style.textDecoration, value, style.letterSpacing, style.color);
} }
} }
// LetterSpacing // LetterSpacing.
get [letterSpacingProperty.native](): number { get [letterSpacingProperty.native](): number {
return 0; return 0;
} }
@ -158,34 +161,14 @@ export class TextBase extends TextBaseCommon {
this.letterSpacingSet = value !== 0; this.letterSpacingSet = value !== 0;
const style = this.style; const style = this.style;
if (this.formattedText) { if (this.formattedText) {
setFormattedTextDecorationAndTransform(this.formattedText, this.nativeView, style.textDecoration, style.textTransform, value); this.setFormattedTextDecorationAndTransform(this.formattedText, this.nativeView, style.textDecoration, style.textTransform, value);
} else { } else {
setTextDecorationAndTransform(this.text, this.nativeView, style.textDecoration, style.textTransform, value, style.color); this.setTextDecorationAndTransform(this.text, this.nativeView, style.textDecoration, style.textTransform, value, style.color);
} }
} }
}
export function getTransformedText(text: string, textTransform: TextTransform): string { setFormattedTextDecorationAndTransform(formattedText: FormattedString, nativeView: UITextField | UITextView | UILabel | UIButton, textDecoration: TextDecoration, textTransform: TextTransform, letterSpacing: number) {
switch (textTransform) { const attrText = this.createNSMutableAttributedString(formattedText);
case TextTransform.NONE:
return text;
case TextTransform.UPPERCASE:
return NSStringFromNSAttributedString(text).uppercaseString;
case TextTransform.LOWERCASE:
return NSStringFromNSAttributedString(text).lowercaseString;
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}".`);
}
}
function NSStringFromNSAttributedString(source: NSAttributedString | string): NSString {
return NSString.stringWithString(source instanceof NSAttributedString && source.string || <string>source);
}
function setFormattedTextDecorationAndTransform(formattedText: FormattedString, nativeView: UITextField | UITextView | UILabel | UIButton, textDecoration: TextDecoration, textTransform: TextTransform, letterSpacing: number) {
const attrText = createNSMutableAttributedString(formattedText);
if (letterSpacing !== 0) { if (letterSpacing !== 0) {
attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing * nativeView.font.pointSize, { location: 0, length: attrText.length }); attrText.addAttributeValueRange(NSKernAttributeName, letterSpacing * nativeView.font.pointSize, { location: 0, length: attrText.length });
} }
@ -196,9 +179,9 @@ function setFormattedTextDecorationAndTransform(formattedText: FormattedString,
else { else {
nativeView.attributedText = attrText; nativeView.attributedText = attrText;
} }
} }
function setTextDecorationAndTransform(text: string, nativeView: UITextField | UITextView | UILabel | UIButton, textDecoration: TextDecoration, textTransform: TextTransform, letterSpacing: number, color: Color) { setTextDecorationAndTransform(text: string, nativeView: UITextField | UITextView | UILabel | UIButton, textDecoration: TextDecoration, textTransform: TextTransform, letterSpacing: number, color: Color) {
let dict = new Map<string, number>(); let dict = new Map<string, number>();
switch (textDecoration) { switch (textDecoration) {
case TextDecoration.NONE: case TextDecoration.NONE:
@ -245,9 +228,9 @@ function setTextDecorationAndTransform(text: string, nativeView: UITextField | U
nativeView.text = source; nativeView.text = source;
} }
} }
} }
function createNSMutableAttributedString(formattedString: FormattedString): NSMutableAttributedString { createNSMutableAttributedString(formattedString: FormattedString): NSMutableAttributedString {
let mas = NSMutableAttributedString.alloc().init(); let mas = NSMutableAttributedString.alloc().init();
if (formattedString) { if (formattedString) {
for (let i = 0, spanStart = 0, length = formattedString.spans.length; i < length; i++) { for (let i = 0, spanStart = 0, length = formattedString.spans.length; i < length; i++) {
@ -255,26 +238,20 @@ function createNSMutableAttributedString(formattedString: FormattedString): NSMu
const text = span.text; const text = span.text;
const textTransform = (<TextBase>formattedString.parent).textTransform; const textTransform = (<TextBase>formattedString.parent).textTransform;
let spanText = (text === null || text === undefined) ? '' : text.toString(); let spanText = (text === null || text === undefined) ? '' : text.toString();
if (textTransform) { if (textTransform !== "none") {
spanText = getTransformedText(spanText, textTransform); spanText = getTransformedText(spanText, textTransform);
} }
const nsAttributedString = createMutableStringForSpan(span, spanText); const nsAttributedString = this.createMutableStringForSpan(span, spanText);
mas.insertAttributedStringAtIndex(nsAttributedString, spanStart); mas.insertAttributedStringAtIndex(nsAttributedString, spanStart);
spanStart += spanText.length; spanStart += spanText.length;
} }
} }
return mas; return mas;
} }
function isBold(fontWeight: FontWeight): boolean { createMutableStringForSpan(span: Span, text: string): NSMutableAttributedString {
return fontWeight === FontWeight.BOLD const viewFont = this.nativeView.font;
|| fontWeight === "700"
|| fontWeight === FontWeight.EXTRA_BOLD
|| fontWeight === FontWeight.BLACK;
}
function createMutableStringForSpan(span: Span, text: string): NSMutableAttributedString {
let attrDict = <{ key: string, value: any }>{}; let attrDict = <{ key: string, value: any }>{};
const style = span.style; const style = span.style;
const bold = isBold(style.fontWeight); const bold = isBold(style.fontWeight);
@ -284,17 +261,21 @@ function createMutableStringForSpan(span: Span, text: string): NSMutableAttribut
let fontSize = span.fontSize; let fontSize = span.fontSize;
if (bold || italic || fontFamily || fontSize) { if (bold || italic || fontFamily || fontSize) {
let font;
if (fontFamily) {
if (!fontSize) { if (!fontSize) {
fontSize = utils.ios.getter(UIFont, UIFont.systemFontSize); fontSize = viewFont.pointSize;
} }
font = UIFont.fontWithNameSize(fontFamily, fontSize); if (!fontFamily) {
fontFamily = viewFont.fontName;
}
let font;
let fontDescriptor: UIFontDescriptor = viewFont.fontDescriptor;
if (fontFamily) {
fontDescriptor = fontDescriptor.fontDescriptorWithFamily(fontFamily);
} }
if (!font) {
const fontDescriptor = UIFontDescriptor.new();
let symbolicTraits; let symbolicTraits;
if (bold) { if (bold) {
symbolicTraits |= UIFontDescriptorSymbolicTraits.TraitBold; symbolicTraits |= UIFontDescriptorSymbolicTraits.TraitBold;
@ -309,7 +290,6 @@ function createMutableStringForSpan(span: Span, text: string): NSMutableAttribut
} else { } else {
font = UIFont.fontWithDescriptorSize(fontDescriptor, fontSize); font = UIFont.fontWithDescriptorSize(fontDescriptor, fontSize);
} }
}
attrDict[NSFontAttributeName] = font; attrDict[NSFontAttributeName] = font;
} }
@ -352,4 +332,31 @@ function createMutableStringForSpan(span: Span, text: string): NSMutableAttribut
} }
return NSMutableAttributedString.alloc().initWithStringAttributes(text, <any>attrDict); return NSMutableAttributedString.alloc().initWithStringAttributes(text, <any>attrDict);
}
}
export function getTransformedText(text: string, textTransform: TextTransform): string {
switch (textTransform) {
case TextTransform.NONE:
return text;
case TextTransform.UPPERCASE:
return NSStringFromNSAttributedString(text).uppercaseString;
case TextTransform.LOWERCASE:
return NSStringFromNSAttributedString(text).lowercaseString;
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}".`);
}
}
function NSStringFromNSAttributedString(source: NSAttributedString | string): NSString {
return NSString.stringWithString(source instanceof NSAttributedString && source.string || <string>source);
}
function isBold(fontWeight: FontWeight): boolean {
return fontWeight === FontWeight.BOLD
|| fontWeight === "700"
|| fontWeight === FontWeight.EXTRA_BOLD
|| fontWeight === FontWeight.BLACK;
} }