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

Frobit setting inline style from code

Browse Source
This commit is contained in:
vakrilov
2015-07-07 14:40:58 +03:00
parent c5748bf73b
commit f3979136a4
10 changed files with 130 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
apps/tests/ui/style/style-tests.ts
View File

@ -99,23 +99,23 @@ export function test_type_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using type selector
// ``` JavaScript
page.css = "button { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using type selector
// ``` JavaScript
page.css = "button { color: red; }";
//// Will be styled
//// Will be styled
btn = new buttonModule.Button();
//// Won't be styled
//// Won't be styled
label = new labelModule.Label();
// ```
// </snippet>
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(label);
stack.addChild(btn);
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(label);
stack.addChild(btn);
return page;
};
@ -135,24 +135,24 @@ export function test_class_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using class selector
// ``` JavaScript
page.css = ".test { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using class selector
// ``` JavaScript
page.css = ".test { color: red; }";
//// Will be styled
//// Will be styled
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "test";
btnWithClass.cssClass = "test";
//// Won't be styled
//// Won't be styled
btnWithNoClass = new buttonModule.Button();
// ```
// </snippet>
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClass);
stack.addChild(btnWithNoClass);
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithClass);
stack.addChild(btnWithNoClass);
return page;
};
@ -199,24 +199,24 @@ export function test_id_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using id selector
// ``` JavaScript
page.css = "#myButton { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using id selector
// ``` JavaScript
page.css = "#myButton { color: red; }";
//// Will be styled
//// Will be styled
btnWithId = new buttonModule.Button();
btnWithId.id = "myButton";
btnWithId.id = "myButton";
//// Won't be styled
//// Won't be styled
btnWithNoId = new buttonModule.Button();
// ```
// </snippet>
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
return page;
};
@ -234,13 +234,13 @@ export function test_state_selector() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn);
page.css = ":pressed { color: red; }";
return page;
@ -260,18 +260,18 @@ export function test_type_and_state_selector() {
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
// <snippet module="ui/styling" title="styling">
// ### Using state selector
// ``` JavaScript
page.css = "button:pressed { color: red; }";
// <snippet module="ui/styling" title="styling">
// ### Using state selector
// ``` JavaScript
page.css = "button:pressed { color: red; }";
//// Will be red when pressed
//// Will be red when pressed
btn = new buttonModule.Button();
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btn);
// ```
// </snippet>
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btn);
return page;
};
@ -287,14 +287,14 @@ export function test_class_and_state_selector() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
btn.cssClass = "test"
testStack.addChild(btn);
btn.cssClass = "test"
testStack.addChild(btn);
page.css = ".test:pressed { color: red; }";
return page;
@ -337,14 +337,14 @@ export function test_id_and_state_selector() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
btn.id = "myButton";
testStack.addChild(btn);
btn.id = "myButton";
testStack.addChild(btn);
page.css = "#myButton:pressed { color: red; }";
return page;
@ -362,16 +362,16 @@ export function test_restore_original_values_when_state_is_changed() {
var page: pageModule.Page;
var btn: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
// Arrange
// Arrange
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn);
page.css = "button { color: blue; } " +
"button:pressed { color: red; } ";
"button:pressed { color: red; } ";
return page;
};
@ -483,7 +483,7 @@ export var test_style_is_applied_when_control_is_added_after_load = function ()
};
helper.navigate(pageFactory);
testStack.addChild(btn);
TKUnit.assert(btn.style.color, "Color property no applied correctly.");
TKUnit.assert(btn.style.color.hex === "#FF0000", "Color property no applied correctly.");
@ -657,20 +657,20 @@ function testSelectorsPrioritiesTemplate(css: string) {
var btnWithId: buttonModule.Button;
var pageFactory = function (): pageModule.Page {
page = new pageModule.Page();
var testStack = new stackModule.StackLayout();
var testStack = new stackModule.StackLayout();
page.content = testStack;
btn = new buttonModule.Button();
testStack.addChild(btn);
testStack.addChild(btn);
btnWithClass = new buttonModule.Button();
btnWithClass.cssClass = "button-class";
testStack.addChild(btnWithClass);
btnWithClass.cssClass = "button-class";
testStack.addChild(btnWithClass);
btnWithId = new buttonModule.Button();
btnWithId.cssClass = "button-class";
btnWithId.id = "myButton"
testStack.addChild(btnWithId);
btnWithId.cssClass = "button-class";
btnWithId.id = "myButton"
testStack.addChild(btnWithId);
page.css = css;
return page;
@ -748,19 +748,12 @@ export function test_setInlineStyle_setsLocalValues() {
});
}
export function test_setInlineStyle_resetsLocalValues() {
export function test_setStyle_throws() {
var testButton = new buttonModule.Button();
testButton.text = "Test";
testButton.style.fontSize = 10;
var stack = new stackModule.StackLayout();
stack.addChild(testButton);
helper.buildUIAndRunTest(stack, function (views: Array<viewModule.View>) {
(<any>testButton)._applyInlineStyle("color: red;");
helper.assertViewColor(testButton, "#FF0000", dependencyObservableModule.ValueSource.Local);
TKUnit.assert(types.isUndefined(testButton.style.fontSize), "Setting inline style should reset font size");
TKUnit.assertEqual(testButton.style._getValueSource(styling.properties.fontSizeProperty), dependencyObservableModule.ValueSource.Default, "valueSource");
});
TKUnit.assertThrows(function () {
(<any>testButton).style = "background-color: red;";
}, "View.style property is read-only.");
}
export var test_CSS_isAppliedOnPage = function () {