From 36ae896933ee716f723065b908a610c060a2c2d6 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Mon, 18 Jul 2016 13:38:57 +0300
Subject: [PATCH 01/21] Fix: Set the binding context of a page automatically
 when navigated to.

Resolves #731
---
 tests/app/ui/layouts/grid-layout-tests.ts |  2 --
 tests/app/ui/page/page-tests-common.ts    | 25 +++++++++++++++++++++++
 tests/package.json                        |  4 ++--
 tns-core-modules/ui/page/page-common.ts   | 13 ++++++++++++
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/tests/app/ui/layouts/grid-layout-tests.ts b/tests/app/ui/layouts/grid-layout-tests.ts
index dc85e7017e..9bc784f375 100644
--- a/tests/app/ui/layouts/grid-layout-tests.ts
+++ b/tests/app/ui/layouts/grid-layout-tests.ts
@@ -17,13 +17,11 @@ class RemovalTrackingGridLayout extends GridLayout {
     public removedCols = 0;
 
     public _onRowRemoved(itemSpec: ItemSpec, index: number) {
-        console.log("_onRowRemoved");
         this.removedRows++;
         super._onRowRemoved(itemSpec, index);
     }
 
     public _onColumnRemoved(itemSpec: ItemSpec, index: number) {
-        console.log("_onColumnRemoved");
         this.removedCols++;
         super._onColumnRemoved(itemSpec, index);
     }
diff --git a/tests/app/ui/page/page-tests-common.ts b/tests/app/ui/page/page-tests-common.ts
index d2988b5813..8bc07ebb0a 100644
--- a/tests/app/ui/page/page-tests-common.ts
+++ b/tests/app/ui/page/page-tests-common.ts
@@ -230,6 +230,31 @@ export function test_NavigateTo_WithContext() {
     TKUnit.assertNull(testPage.navigationContext, "Navigation context should be cleared on navigating back");
 }
 
+//https://github.com/NativeScript/NativeScript/issues/731
+export function test_BindingContext_Becomes_NavigationContext_When_NavigatingTo() {
+    let currentPage = frameModule.topmost().currentPage;
+    let testPage: Page;
+    let bindingContext;
+    let pageFactory = function (): Page {
+        testPage = new Page();
+        testPage.on(pageModule.Page.navigatingToEvent, function (args: NavigatedData) {
+            bindingContext = (<Page>args.object).bindingContext; 
+        });
+        return testPage;
+    };
+    let navEntry = {
+        create: pageFactory,
+        context: "This is the navigation context",
+        animated: false
+    };
+    let topFrame = frameModule.topmost();
+    topFrame.navigate(navEntry);
+    TKUnit.waitUntilReady(() => topFrame.currentPage !== null && topFrame.currentPage !== currentPage && testPage.isLayoutValid);
+    helper.goBack();
+    
+    TKUnit.assertEqual(bindingContext, navEntry.context, "The Page's bindingContext should be set automatically to the navigation context when navigating to.");
+}
+
 export function test_FrameBackStack_WhenNavigatingForwardAndBack() {
     let testPage: Page;
     let pageFactory = function () {
diff --git a/tests/package.json b/tests/package.json
index 17ce53ae68..cca777fa5d 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -6,7 +6,7 @@
   "nativescript": {
     "id": "org.nativescript.tests",
     "tns-ios": {
-      "version": "2.1.0"
+      "version": "2.1.1"
     },
     "tns-android": {
       "version": "2.1.1"
@@ -23,4 +23,4 @@
     "lazy": "1.0.11",
     "typescript": "^1.8.10"
   }
-}
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts
index 0388a0c4be..be89f004ec 100644
--- a/tns-core-modules/ui/page/page-common.ts
+++ b/tns-core-modules/ui/page/page-common.ts
@@ -199,8 +199,15 @@ export class Page extends ContentView implements dts.Page {
         };
     }
 
+    private _originalBindingContext: any;
     public onNavigatingTo(context: any, isBackNavigation: boolean) {
         this._navigationContext = context;
+        
+        //https://github.com/NativeScript/NativeScript/issues/731
+        if (!isBackNavigation && context && this.bindingContext !== context){
+            this._originalBindingContext = this.bindingContext;
+            this.bindingContext = context;
+        }
         this.notify(this.createNavigatedData(Page.navigatingToEvent, isBackNavigation));
     }
 
@@ -216,6 +223,12 @@ export class Page extends ContentView implements dts.Page {
         this.notify(this.createNavigatedData(Page.navigatedFromEvent, isBackNavigation));
 
         this._navigationContext = undefined;
+        
+        //https://github.com/NativeScript/NativeScript/issues/731
+        if (isBackNavigation && this._originalBindingContext && this.bindingContext !== this._originalBindingContext){
+            this.bindingContext = this._originalBindingContext;
+            this._originalBindingContext = undefined;
+        }
     }
 
     public showModal(): Page {

From e76517693f110e8b4fb32540dff911a6d869d5d6 Mon Sep 17 00:00:00 2001
From: SvetoslavTsenov <tsenov.svetoslav@gmail.com>
Date: Sun, 17 Jul 2016 17:32:45 +0300
Subject: [PATCH 02/21] Implement new logic for loading ui tests

---
 .../action-bar/action-item-position.ts        |  39 +++
 .../action-bar/action-item-position.xml       |  16 ++
 apps/app/ui-tests-app/action-bar/main-page.ts |  28 ++
 .../app/ui-tests-app/action-bar/main-page.xml |   6 +
 apps/app/ui-tests-app/bindings/main-page.ts   |  24 ++
 apps/app/ui-tests-app/bindings/main-page.xml  |   6 +
 apps/app/ui-tests-app/css/main-page.ts        |  36 +++
 apps/app/ui-tests-app/css/main-page.xml       |   6 +
 .../ui-tests-app/{padding => css}/padding.xml |   8 +-
 apps/app/ui-tests-app/font/main-page.ts       |  28 ++
 apps/app/ui-tests-app/font/main-page.xml      |   6 +
 apps/app/ui-tests-app/image-view/main-page.ts |  25 ++
 .../app/ui-tests-app/image-view/main-page.xml |   6 +
 apps/app/ui-tests-app/layouts/main-page.ts    |  36 +++
 apps/app/ui-tests-app/layouts/main-page.xml   |   6 +
 apps/app/ui-tests-app/main-page-view-model.ts | 136 ----------
 apps/app/ui-tests-app/mainPage.ts             | 242 +++++++++++++++---
 apps/app/ui-tests-app/mainPage.xml            |  13 +-
 apps/app/ui-tests-app/padding/padding.css     |   3 -
 apps/app/ui-tests-app/pages/main-page.ts      |  31 +++
 apps/app/ui-tests-app/pages/main-page.xml     |   6 +
 apps/app/ui-tests-app/tab-view/main-page.ts   |  31 +++
 apps/app/ui-tests-app/tab-view/main-page.xml  |   6 +
 23 files changed, 565 insertions(+), 179 deletions(-)
 create mode 100644 apps/app/ui-tests-app/action-bar/action-item-position.ts
 create mode 100644 apps/app/ui-tests-app/action-bar/action-item-position.xml
 create mode 100644 apps/app/ui-tests-app/action-bar/main-page.ts
 create mode 100644 apps/app/ui-tests-app/action-bar/main-page.xml
 create mode 100644 apps/app/ui-tests-app/bindings/main-page.ts
 create mode 100644 apps/app/ui-tests-app/bindings/main-page.xml
 create mode 100644 apps/app/ui-tests-app/css/main-page.ts
 create mode 100644 apps/app/ui-tests-app/css/main-page.xml
 rename apps/app/ui-tests-app/{padding => css}/padding.xml (54%)
 create mode 100644 apps/app/ui-tests-app/font/main-page.ts
 create mode 100644 apps/app/ui-tests-app/font/main-page.xml
 create mode 100644 apps/app/ui-tests-app/image-view/main-page.ts
 create mode 100644 apps/app/ui-tests-app/image-view/main-page.xml
 create mode 100644 apps/app/ui-tests-app/layouts/main-page.ts
 create mode 100644 apps/app/ui-tests-app/layouts/main-page.xml
 delete mode 100644 apps/app/ui-tests-app/main-page-view-model.ts
 delete mode 100644 apps/app/ui-tests-app/padding/padding.css
 create mode 100644 apps/app/ui-tests-app/pages/main-page.ts
 create mode 100644 apps/app/ui-tests-app/pages/main-page.xml
 create mode 100644 apps/app/ui-tests-app/tab-view/main-page.ts
 create mode 100644 apps/app/ui-tests-app/tab-view/main-page.xml

diff --git a/apps/app/ui-tests-app/action-bar/action-item-position.ts b/apps/app/ui-tests-app/action-bar/action-item-position.ts
new file mode 100644
index 0000000000..ffbc52da27
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/action-item-position.ts
@@ -0,0 +1,39 @@
+import { EventData } from "data/observable";
+import { Page } from "ui/page";
+import observable = require("data/observable");
+
+export function navigatingTo(args: EventData) {
+    let page = <Page>args.object;
+    page.bindingContext = new ActionItemPostitionView();
+}
+
+export class ActionItemPostitionView extends observable.Observable {
+    private _values = ["-i---", "---i---", "---i-"];
+    private _count: number;
+    private _text: string;
+
+    constructor() {
+        super();
+        this._count = 0;
+    }
+
+    get text(): string {
+        return this._text;
+    }
+
+    set text(value: string) {
+        if (this._text !== value) {
+            this._text = value;
+            this.notifyPropertyChange("text", value)
+        }
+    }
+
+    public onTap() {
+        this.change();
+    }
+
+    public change() {
+        let index = this._count++ % 3;
+        this.text = this._values[index];
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/action-item-position.xml b/apps/app/ui-tests-app/action-bar/action-item-position.xml
new file mode 100644
index 0000000000..b442c297f1
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/action-item-position.xml
@@ -0,0 +1,16 @@
+<Page 
+  xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar>
+    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
+      <ActionItem ios.position="right" >
+        <Button text="{{ text }}" backgroundColor="red" tap="change"/>
+      </ActionItem>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Label text="Tap to change the text in the actionbar" class="title"/>
+    <Button text="Tap" tap="{{ onTap }}" />
+    <Label text="{{ text }}"/> 
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/main-page.ts b/apps/app/ui-tests-app/action-bar/main-page.ts
new file mode 100644
index 0000000000..24f418d931
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/main-page.ts
@@ -0,0 +1,28 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    examples.set("actColor", "action-bar/color");
+    examples.set("actBG", "action-bar/background");
+    examples.set("actStyle", "action-bar/all");
+    examples.set("actIcons", "action-bar/system-icons");
+    examples.set("actView", "action-bar/action-view");
+    examples.set("actionItemPosition", "action-bar/action-item-position");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/main-page.xml b/apps/app/ui-tests-app/action-bar/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/bindings/main-page.ts b/apps/app/ui-tests-app/bindings/main-page.ts
new file mode 100644
index 0000000000..a750b26ef8
--- /dev/null
+++ b/apps/app/ui-tests-app/bindings/main-page.ts
@@ -0,0 +1,24 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    examples.set("basics", "bindings/basics");
+    examples.set("xmlbasics", "bindings/xmlbasics");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/bindings/main-page.xml b/apps/app/ui-tests-app/bindings/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/bindings/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
new file mode 100644
index 0000000000..1dd8ceb1d8
--- /dev/null
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -0,0 +1,36 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    examples.set("background", "css/background");
+    examples.set("formatted", "css/decoration-transform-formattedtext");
+    examples.set("csslv", "css/listview");
+    examples.set("radius", "css/radius");
+    examples.set("styles", "css/styles");
+    examples.set("tabmore", "css/tab-view-more");
+    examples.set("spacing", "css/letter-spacing");
+    examples.set("decoration", "css/text-decoration");
+    examples.set("transform", "css/text-transform");
+    examples.set("whitespace", "css/white-space");
+    examples.set("switch", "css/views");
+    examples.set("zindex", "css/zindex");
+    examples.set("clipPath", "css/clip-path");
+    examples.set("padding", "css/padding");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/main-page.xml b/apps/app/ui-tests-app/css/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/css/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/padding/padding.xml b/apps/app/ui-tests-app/css/padding.xml
similarity index 54%
rename from apps/app/ui-tests-app/padding/padding.xml
rename to apps/app/ui-tests-app/css/padding.xml
index d9f3a8c639..ac7d300b84 100644
--- a/apps/app/ui-tests-app/padding/padding.xml
+++ b/apps/app/ui-tests-app/css/padding.xml
@@ -1,8 +1,8 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" >
   <StackLayout automationText="padding">
-    <Label id="label" text="Label" backgroundColor="red"/>
-    <TextField id="textField" text="TextField" backgroundColor="green"/>
-    <TextView id="textView" text="TextView" backgroundColor="blue"/>
-    <Button id="button" text="Button" backgroundColor="yellow"/>
+    <Label id="label" text="Label" backgroundColor="red" style="padding:50"/>
+    <TextField id="textField" text="TextField" backgroundColor="green" style="padding:50"/>
+    <TextView id="textView" text="TextView" backgroundColor="blue" style="padding:50"/>
+    <Button id="button" text="Button" backgroundColor="yellow" style="padding:50"/>
   </StackLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/font/main-page.ts b/apps/app/ui-tests-app/font/main-page.ts
new file mode 100644
index 0000000000..606c104111
--- /dev/null
+++ b/apps/app/ui-tests-app/font/main-page.ts
@@ -0,0 +1,28 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("fontbtn", "font/button");
+    examples.set("fontlbl", "font/label");
+    examples.set("fontfield", "font/text-field");
+    examples.set("fontview", "font/text-view");
+    examples.set("nordic", "nordic/nordic");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/font/main-page.xml b/apps/app/ui-tests-app/font/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/font/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/image-view/main-page.ts b/apps/app/ui-tests-app/image-view/main-page.ts
new file mode 100644
index 0000000000..80f550fff7
--- /dev/null
+++ b/apps/app/ui-tests-app/image-view/main-page.ts
@@ -0,0 +1,25 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    
+    examples.set("roundbtn", "image-view/rounded-buttons");
+    examples.set("roundimg", "image-view/rounded-images");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/image-view/main-page.xml b/apps/app/ui-tests-app/image-view/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/image-view/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/layouts/main-page.ts b/apps/app/ui-tests-app/layouts/main-page.ts
new file mode 100644
index 0000000000..4155aec49b
--- /dev/null
+++ b/apps/app/ui-tests-app/layouts/main-page.ts
@@ -0,0 +1,36 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("absolute", "layouts/absolute");
+    examples.set("dock", "layouts/dock");
+    examples.set("grid", "layouts/grid");
+    examples.set("myview", "layouts/myview");
+    examples.set("stack", "layouts/stack");
+    examples.set("wrap", "layouts/wrap");
+
+    examples.set("pabsolute", "layouts-percent/absolute");
+    examples.set("pdock", "layouts-percent/dock");
+    examples.set("pgrid", "layouts-percent/grid");
+    examples.set("pmyview", "layouts-percent/myview");
+    examples.set("pstack", "layouts-percent/stack");
+    examples.set("pwrap", "layouts-percent/wrap");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/layouts/main-page.xml b/apps/app/ui-tests-app/layouts/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/layouts/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/main-page-view-model.ts b/apps/app/ui-tests-app/main-page-view-model.ts
deleted file mode 100644
index 5cc958200a..0000000000
--- a/apps/app/ui-tests-app/main-page-view-model.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import frame = require("ui/frame");
-import trace = require("trace");
-import observable = require("data/observable");
-import dialogs = require("ui/dialogs");
-
-export class MianPageViewModel extends observable.Observable {
-    private _exampleName: string;
-    private basePath: string = "";
-
-    public examples: Map<string, string> = new Map<string, string>();
-
-    constructor() {
-        super();
-        trace.enable();
-        trace.setCategories(trace.categories.Test);
-        this.refresh();
-    }
-
-    get exampleName(): string {
-        return this._exampleName;
-    }
-
-    set exampleName(value: string) {
-        if (this._exampleName !== value) {
-            this._exampleName = value;
-            this.notifyPropertyChange("exampleName", value)
-        }
-    }
-
-    public loadExample(exampleName: any) {
-        console.log("exampleName EXAMLE: " + exampleName);
-        this.selectExample(exampleName);
-    }
-
-    public loadExampleFromRun(){
-        this.selectExample(this.exampleName);
-    }
-
-    private selectExample(selectedExample: any) {
-        console.log(" EXAMLE: " + selectedExample);
-
-        if (this.examples.has(selectedExample)) {
-            frame.topmost().navigate("ui-tests-app/" + this.basePath + this.examples.get(selectedExample));
-        }
-        else {
-            dialogs.alert("Cannot find example: " + selectedExample);
-        }
-    }
-
-    private refresh() {
-        this.examples.set("actColor", "action-bar/color");
-        this.examples.set("actBG", "action-bar/background");
-        this.examples.set("actStyle", "action-bar/all");
-        this.examples.set("actIcons", "action-bar/system-icons");
-        this.examples.set("actView", "action-bar/action-view");
-
-        this.examples.set("basics", "bindings/basics");
-        this.examples.set("xmlbasics", "bindings/xmlbasics");
-
-        this.examples.set("background", "css/background");
-        this.examples.set("formatted", "css/decoration-transform-formattedtext");
-        this.examples.set("csslv", "css/listview");
-        this.examples.set("radius", "css/radius");
-        this.examples.set("styles", "css/styles");
-        this.examples.set("tabmore", "css/tab-view-more");
-        this.examples.set("spacing", "css/letter-spacing");
-        this.examples.set("decoration", "css/text-decoration");
-        this.examples.set("transform", "css/text-transform");
-        this.examples.set("whitespace", "css/white-space");
-        this.examples.set("switch", "css/views");
-        this.examples.set("zindex", "css/zindex");
-        this.examples.set("clipPath", "css/clip-path");
-        this.examples.set("dialogs", "dialogs/dialogs");
-
-        this.examples.set("fontbtn", "font/button");
-        this.examples.set("fontlbl", "font/label");
-        this.examples.set("fontfield", "font/text-field");
-        this.examples.set("fontview", "font/text-view");
-
-        this.examples.set("customfonts", "font/custom-fonts");
-        this.examples.set("material", "font/material-icons");
-        this.examples.set("tabfont", "font/tab-view");
-
-        this.examples.set("htmlview", "html-view/html-view");
-
-        this.examples.set("roundbtn", "image-view/rounded-buttons");
-        this.examples.set("roundimg", "image-view/rounded-images");
-
-        this.examples.set("absolute", "layouts/absolute");
-        this.examples.set("dock", "layouts/dock");
-        this.examples.set("grid", "layouts/grid");
-        this.examples.set("myview", "layouts/myview");
-        this.examples.set("stack", "layouts/stack");
-        this.examples.set("wrap", "layouts/wrap");
-
-        this.examples.set("pabsolute", "layouts-percent/absolute");
-        this.examples.set("pdock", "layouts-percent/dock");
-        this.examples.set("pgrid", "layouts-percent/grid");
-        this.examples.set("pmyview", "layouts-percent/myview");
-        this.examples.set("pstack", "layouts-percent/stack");
-        this.examples.set("pwrap", "layouts-percent/wrap");
-
-        this.examples.set("modalview", "modal-view/modal-view");
-        this.examples.set("nordic", "nordic/nordic");
-
-        this.examples.set("padding", "padding/padding");
-        this.examples.set("timePicker", "time-picker/time-picker");
-        this.examples.set("gestures", "pages/gestures");
-        this.examples.set("touch", "pages/touch-event");
-        this.examples.set("pan", "pages/pan-event");
-        this.examples.set("handlers", "pages/handlers");
-
-        this.examples.set("animeBG", "animations/background");
-        this.examples.set("transitions", "transitions/page0");
-
-        //examples.set("listview_binding", "pages/listview_binding");
-        this.examples.set("console", "pages/console");
-        this.examples.set("i61", "pages/i61");
-        this.examples.set("i73", "pages/i73");
-        this.examples.set("i86", "pages/i86");
-
-        this.examples.set("segStyle", "segmented-bar/all");
-
-        this.examples.set("tabColor", "tab-view/color");
-        this.examples.set("tabBG", "tab-view/background");
-        this.examples.set("tabTabsBG", "tab-view/tabsBackground");
-        this.examples.set("tabSelected", "tab-view/selected");
-        this.examples.set("tabStyle", "tab-view/all");
-
-        //examples.set("textfield", "text-field/text-field");
-
-        this.examples.set("webview", "web-view/web-view");
-        this.examples.set("webtest", "web-view/web-view-test");
-    }
-}
-
diff --git a/apps/app/ui-tests-app/mainPage.ts b/apps/app/ui-tests-app/mainPage.ts
index 7e9d73c246..4cd805a185 100644
--- a/apps/app/ui-tests-app/mainPage.ts
+++ b/apps/app/ui-tests-app/mainPage.ts
@@ -1,47 +1,225 @@
 import { EventData } from "data/observable";
 import { Page } from "ui/page";
-import { MianPageViewModel } from "./main-page-view-model";
 import buttonModule = require("ui/button");
 import colorModule = require("color");
 import * as platform from "platform";
+import frame = require("ui/frame");
+import trace = require("trace");
+import observable = require("data/observable");
+import dialogs = require("ui/dialogs");
+import { WrapLayout } from "ui/layouts/wrap-layout";
+
+var examples: Map<string, string> = new Map<string, string>();
+//should be removed
+var oldExamples: Map<string, string> = new Map<string, string>();
 
-var wrapLayout: any;
-var page: Page;
-var colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
-var viewModel: MianPageViewModel;
-var isInitialized: boolean = false;
-// Event handler for Page "navigatingTo" event attached in main-page.xml
 export function pageLoaded(args: EventData) {
-    // Get the event sender
-    page = <Page>args.object;
-    var view = require("ui/core/view");
-    wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
-    viewModel = new MianPageViewModel();
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+    let wrapLayout = <WrapLayout>view.getViewById(page, "wrapLayoutWithExamples");
+
+    examples.set("action-bar", "action-bar/main-page");
+    examples.set("bindings", "bindings/main-page");
+    examples.set("css", "css/main-page");
+    examples.set("fonts", "font/main-page");
+    examples.set("image-view", "image-view/main-page");
+    examples.set("tab-view", "tab-view/main-page");
+    examples.set("layouts", "layouts/main-page");
+    examples.set("pages-events", "pages/main-page");
+
+    examples.set("modalview", "modal-view/modal-view");
+    examples.set("dialogs", "dialogs/dialogs");
+    examples.set("htmlview", "html-view/html-view");
+    examples.set("timePicker", "time-picker/time-picker");
+    examples.set("animeBG", "animations/background");
+    examples.set("transitions", "transitions/page0");
+    examples.set("segStyle", "segmented-bar/all");
+    examples.set("webview", "web-view/web-view");
+
+    //examples.set("listview_binding", "pages/listview_binding");
+    //examples.set("textfield", "text-field/text-field");
+
+    let viewModel = new MianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;
 
-    if (!isInitialized) {
-        loadButtons();
-        isInitialized = true;
+     var parent = page.getViewById('parentLayout');
+     var searchBar = page.getViewById('textView');
+
+    if (parent.android) {
+        parent.android.setFocusableInTouchMode(true);
+        parent.android.setFocusable(true);
+        searchBar.android.clearFocus();
     }
+
+    refresh();
+}
+
+// should be removes
+export function refresh() {
+    oldExamples.set("actStyle", "action-bar/all");
+    oldExamples.set("actIcons", "action-bar/system-icons");
+    oldExamples.set("actView", "action-bar/action-view");
+
+    oldExamples.set("basics", "bindings/basics");
+    oldExamples.set("xmlbasics", "bindings/xmlbasics");
+
+    oldExamples.set("background", "css/background");
+    oldExamples.set("formatted", "css/decoration-transform-formattedtext");
+    oldExamples.set("csslv", "css/listview");
+    oldExamples.set("radius", "css/radius");
+    oldExamples.set("styles", "css/styles");
+    oldExamples.set("tabmore", "css/tab-view-more");
+    oldExamples.set("spacing", "css/letter-spacing");
+    oldExamples.set("decoration", "css/text-decoration");
+    oldExamples.set("transform", "css/text-transform");
+    oldExamples.set("whitespace", "css/white-space");
+    oldExamples.set("switch", "css/views");
+    oldExamples.set("zindex", "css/zindex");
+    oldExamples.set("clipPath", "css/clip-path");
+    oldExamples.set("dialogs", "dialogs/dialogs");
+
+    oldExamples.set("fontbtn", "font/button");
+    oldExamples.set("fontlbl", "font/label");
+    oldExamples.set("fontfield", "font/text-field");
+    oldExamples.set("fontview", "font/text-view");
+
+    oldExamples.set("customfonts", "font/custom-fonts");
+    oldExamples.set("material", "font/material-icons");
+    oldExamples.set("tabfont", "font/tab-view");
+
+    oldExamples.set("htmlview", "html-view/html-view");
+
+    oldExamples.set("roundbtn", "image-view/rounded-buttons");
+    oldExamples.set("roundimg", "image-view/rounded-images");
+
+    oldExamples.set("absolute", "layouts/absolute");
+    oldExamples.set("dock", "layouts/dock");
+    oldExamples.set("grid", "layouts/grid");
+    oldExamples.set("myview", "layouts/myview");
+    oldExamples.set("stack", "layouts/stack");
+    oldExamples.set("wrap", "layouts/wrap");
+
+    oldExamples.set("pabsolute", "layouts-percent/absolute");
+    oldExamples.set("pdock", "layouts-percent/dock");
+    oldExamples.set("pgrid", "layouts-percent/grid");
+    oldExamples.set("pmyview", "layouts-percent/myview");
+    oldExamples.set("pstack", "layouts-percent/stack");
+    oldExamples.set("pwrap", "layouts-percent/wrap");
+
+    oldExamples.set("modalview", "modal-view/modal-view");
+    oldExamples.set("nordic", "nordic/nordic");
+
+    oldExamples.set("padding", "padding/padding");
+    oldExamples.set("timePicker", "time-picker/time-picker");
+    oldExamples.set("gestures", "pages/gestures");
+    oldExamples.set("touch", "pages/touch-event");
+    oldExamples.set("pan", "pages/pan-event");
+    oldExamples.set("handlers", "pages/handlers");
+
+    oldExamples.set("animeBG", "animations/background");
+    oldExamples.set("transitions", "transitions/page0");
+
+    //oldExamples.set("listview_binding", "pages/listview_binding");
+    oldExamples.set("console", "pages/console");
+    oldExamples.set("i61", "pages/i61");
+    oldExamples.set("i73", "pages/i73");
+    oldExamples.set("i86", "pages/i86");
+
+    oldExamples.set("segStyle", "segmented-bar/all");
+
+    oldExamples.set("tabColor", "tab-view/color");
+    oldExamples.set("tabBG", "tab-view/background");
+    oldExamples.set("tabTabsBG", "tab-view/tabsBackground");
+    oldExamples.set("tabSelected", "tab-view/selected");
+    oldExamples.set("tabStyle", "tab-view/all");
+
+    //oldExamples.set("textfield", "text-field/text-field");
+
+    oldExamples.set("webview", "web-view/web-view");
+    oldExamples.set("webtest", "web-view/web-view-test");
 }
 
-function loadButtons() {
-    var count = 0;
+export class MianPageViewModel extends observable.Observable {
+    private _exampleName: string;
+    private basePath: string = "";
+    private colors = ["#ff0000", "#0000cc", "#33cc33", "#33cc33"];
+
+    public examples: Map<string, string> = new Map<string, string>();
 
-    viewModel.examples.forEach((element, key) => {
-        var btn = new buttonModule.Button();
-        if (platform.isIOS) {
-            btn.style.margin = "5";
-        }else{
-            btn.style.margin = "0";
+    constructor(private panel: WrapLayout, private _examples: Map<string, string>) {
+        super();
+        trace.enable();
+        trace.setCategories(trace.categories.Test);
+        this.examples = _examples;
+
+        if (this.shouldLoadBtns()) {
+            this.loadButtons();
+        }
+    }
+
+    get exampleName(): string {
+        return this._exampleName;
+    }
+
+    set exampleName(value: string) {
+        if (this._exampleName !== value) {
+            this._exampleName = value;
+            this.notifyPropertyChange("exampleName", value)
+        }
+    }
+
+    public loadExample(exampleName: any) {
+        console.log("exampleName EXAMLE: " + exampleName);
+        this.selectExample(exampleName);
+    }
+
+    public loadOldExmaples() {
+        if (oldExamples.has(this.exampleName)) {
+            frame.topmost().navigate("ui-tests-app/" + this.basePath + oldExamples.get(this.exampleName));
+        }
+        else {
+            dialogs.alert("Cannot find example: " + this.exampleName);
+        }
+    }
+
+    private shouldLoadBtns(): boolean {
+        return this.panel.getChildrenCount() <= 0;
+    }
+
+    private selectExample(selectedExample: any) {
+        console.log(" EXAMLE: " + selectedExample);
+
+        if (this.examples.has(selectedExample)) {
+            frame.topmost().navigate("ui-tests-app/" + this.basePath + this.examples.get(selectedExample));
+        }
+        else {
+            dialogs.alert("Cannot find example: " + selectedExample);
         }
-        btn.style.color = new colorModule.Color(colors[count++ % 3]);
-        btn.on(buttonModule.Button.tapEvent, function (eventData) {
-            let text = btn.text;
-            viewModel.loadExample(text);
-        }, this);
-
-        btn.text = key;
-        wrapLayout.addChild(btn)
-    });
+    }
+
+    private loadButtons() {
+        var count = 0;
+
+        this.examples.forEach((element, key) => {
+            var btn = new buttonModule.Button();
+
+            if (platform.isAndroid) {
+                btn.style.height = 25;
+                btn.style.fontSize = 10;
+                btn.style.margin = "0";
+                btn.style.padding = "0";
+            } else {
+                btn.style.padding = "5";
+            }
+
+            btn.style.color = new colorModule.Color(this.colors[count++ % 3]);
+            btn.on(buttonModule.Button.tapEvent, function(eventData) {
+                let text = btn.text;
+                this.loadExample(text);
+            }, this);
+
+            btn.text = key;
+            this.panel.addChild(btn)
+        });
+    }
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/mainPage.xml b/apps/app/ui-tests-app/mainPage.xml
index 8073190f8f..354a33508c 100644
--- a/apps/app/ui-tests-app/mainPage.xml
+++ b/apps/app/ui-tests-app/mainPage.xml
@@ -1,10 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Page loaded="pageLoaded">
-  <GridLayout rows="auto, auto, *">
-    <Button automationText="btn" text="Run" tap="{{ loadExampleFromRun }}" />
-    <TextView automationText="tv" row="1" text="{{ exampleName }}"/>
-    <ScrollView orientation="vertical" row="3" >
+  <GridLayout rows="auto, *, *">
+    <StackLayout id="parentLayout">
+      <TextView automationText="tv" id="textView" text="{{ exampleName }}"/>
+      <Button automationText="btn" id="btnRun" text="Run" tap="{{ loadOldExmaples }}"/>
+    </StackLayout>
+    <ScrollView row="1">
       <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
+    <ScrollView row="2">
+      <WrapLayout id="wrapLayoutWithOldExamples"/>
+    </ScrollView>
   </GridLayout>
 </Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/padding/padding.css b/apps/app/ui-tests-app/padding/padding.css
deleted file mode 100644
index 85cfbfec02..0000000000
--- a/apps/app/ui-tests-app/padding/padding.css
+++ /dev/null
@@ -1,3 +0,0 @@
-TextField, TextView, Button, Label {
-    padding: 50;
-}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/pages/main-page.ts b/apps/app/ui-tests-app/pages/main-page.ts
new file mode 100644
index 0000000000..d130dfd169
--- /dev/null
+++ b/apps/app/ui-tests-app/pages/main-page.ts
@@ -0,0 +1,31 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("gestures", "pages/gestures");
+    examples.set("touch", "pages/touch-event");
+    examples.set("pan", "pages/pan-event");
+    examples.set("handlers", "pages/handlers");
+    examples.set("console", "pages/console");
+    examples.set("i61", "pages/i61");
+    examples.set("i73", "pages/i73");
+    examples.set("i86", "pages/i86");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/pages/main-page.xml b/apps/app/ui-tests-app/pages/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/pages/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/tab-view/main-page.ts b/apps/app/ui-tests-app/tab-view/main-page.ts
new file mode 100644
index 0000000000..d130dfd169
--- /dev/null
+++ b/apps/app/ui-tests-app/tab-view/main-page.ts
@@ -0,0 +1,31 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("gestures", "pages/gestures");
+    examples.set("touch", "pages/touch-event");
+    examples.set("pan", "pages/pan-event");
+    examples.set("handlers", "pages/handlers");
+    examples.set("console", "pages/console");
+    examples.set("i61", "pages/i61");
+    examples.set("i73", "pages/i73");
+    examples.set("i86", "pages/i86");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/tab-view/main-page.xml b/apps/app/ui-tests-app/tab-view/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/tab-view/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file

From 0dcb0c9b36269a1440698744e014c12fffc9ad13 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Mon, 18 Jul 2016 14:24:15 +0300
Subject: [PATCH 03/21] Remove the _originalBindingContext caching

---
 tns-core-modules/ui/page/page-common.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts
index be89f004ec..e85b228c69 100644
--- a/tns-core-modules/ui/page/page-common.ts
+++ b/tns-core-modules/ui/page/page-common.ts
@@ -9,6 +9,7 @@ import * as fileSystemModule from "file-system";
 import * as frameModule from "ui/frame";
 import proxy = require("ui/core/proxy");
 import keyframeAnimation = require("ui/animation/keyframe-animation");
+import types = require("utils/types");
 
 let fs: typeof fileSystemModule;
 function ensureFS() {
@@ -199,13 +200,11 @@ export class Page extends ContentView implements dts.Page {
         };
     }
 
-    private _originalBindingContext: any;
     public onNavigatingTo(context: any, isBackNavigation: boolean) {
         this._navigationContext = context;
         
         //https://github.com/NativeScript/NativeScript/issues/731
-        if (!isBackNavigation && context && this.bindingContext !== context){
-            this._originalBindingContext = this.bindingContext;
+        if (!isBackNavigation && !types.isNullOrUndefined(context)){
             this.bindingContext = context;
         }
         this.notify(this.createNavigatedData(Page.navigatingToEvent, isBackNavigation));
@@ -223,12 +222,6 @@ export class Page extends ContentView implements dts.Page {
         this.notify(this.createNavigatedData(Page.navigatedFromEvent, isBackNavigation));
 
         this._navigationContext = undefined;
-        
-        //https://github.com/NativeScript/NativeScript/issues/731
-        if (isBackNavigation && this._originalBindingContext && this.bindingContext !== this._originalBindingContext){
-            this.bindingContext = this._originalBindingContext;
-            this._originalBindingContext = undefined;
-        }
     }
 
     public showModal(): Page {

From c1aeeb51a73330f67b5a7df6ff69a1fa189c1615 Mon Sep 17 00:00:00 2001
From: Panayot Cankov <Panayot.Cankov@telerik.com>
Date: Wed, 22 Jun 2016 13:13:53 +0300
Subject: [PATCH 04/21] Inital by-type split

Split type.class from CssTypeSelector to CssCompositeSelector, probably support type#id.class selectors

Apply review comments, refactor css-selectors internally

Applied refactoring, all tests pass, button does not notify changes

Add tests for the css selectors parser.

Added tests for css-selectors

Added basic implementation of mayMatch and changeMap for css match state

Implemented TKUnit.assertDeepEqual to check key and key/values in Map and Set

Watch for property and pseudoClass changes

Add one child group test

Add typings for animations

Added mechanism to enable/disable listeners for pseudo classes

Count listeners instead of checking handlers, reverse subscription and unsubscription
---
 tests/app/TKUnit.ts                           |  76 ++
 tests/app/testRunner.ts                       |   2 +
 tests/app/ui/animation/css-animation-tests.ts |  38 +-
 tests/app/ui/styling/css-selector-parser.ts   | 141 +++
 tests/app/ui/styling/css-selector.ts          | 235 +++++
 tests/app/ui/styling/style-tests.ts           |  24 +-
 tests/app/ui/styling/value-source-tests.ts    |  18 -
 tests/app/ui/styling/visual-state-tests.ts    |  53 +-
 .../xml-declaration/xml-declaration-tests.ts  |   2 +-
 .../application/application-common.ts         |  14 +-
 tns-core-modules/application/application.d.ts |  12 +-
 tns-core-modules/css/reworkcss.d.ts           |  10 +-
 tns-core-modules/declarations.d.ts            |   4 +
 tns-core-modules/tns-core-modules.base.d.ts   |   1 -
 tns-core-modules/ui/button/button.ios.ts      |  43 +-
 .../ui/core/control-state-change.ios.ts       |   4 +-
 tns-core-modules/ui/core/view-common.ts       | 163 +++-
 tns-core-modules/ui/core/view.d.ts            |  29 +-
 tns-core-modules/ui/page/page-common.ts       |   5 -
 tns-core-modules/ui/page/page.d.ts            |   6 -
 .../ui/styling/css-animation-parser.ts        |   4 +-
 .../ui/styling/css-selector-parser.d.ts       |  39 +
 .../ui/styling/css-selector-parser.ts         | 125 +++
 tns-core-modules/ui/styling/css-selector.d.ts |  96 +-
 tns-core-modules/ui/styling/css-selector.ts   | 842 ++++++++++--------
 tns-core-modules/ui/styling/style-scope.d.ts  |  26 +-
 tns-core-modules/ui/styling/style-scope.ts    | 275 +++---
 tns-core-modules/ui/styling/styling.d.ts      |  20 -
 tns-core-modules/ui/styling/styling.ts        |   8 -
 .../ui/styling/visual-state-constants.d.ts    |  16 -
 .../ui/styling/visual-state-constants.ts      |   3 -
 tns-core-modules/ui/styling/visual-state.ts   | 119 ---
 tsconfig.json                                 |   1 -
 33 files changed, 1504 insertions(+), 950 deletions(-)
 create mode 100644 tests/app/ui/styling/css-selector-parser.ts
 create mode 100644 tests/app/ui/styling/css-selector.ts
 create mode 100644 tns-core-modules/ui/styling/css-selector-parser.d.ts
 create mode 100644 tns-core-modules/ui/styling/css-selector-parser.ts
 delete mode 100644 tns-core-modules/ui/styling/visual-state-constants.d.ts
 delete mode 100644 tns-core-modules/ui/styling/visual-state-constants.ts
 delete mode 100644 tns-core-modules/ui/styling/visual-state.ts

diff --git a/tests/app/TKUnit.ts b/tests/app/TKUnit.ts
index 761724d7b4..e97a594497 100644
--- a/tests/app/TKUnit.ts
+++ b/tests/app/TKUnit.ts
@@ -227,6 +227,82 @@ export function assertEqual(actual: any, expected: any, message?: string) {
     }
 };
 
+/**
+ * Assert two json like objects are deep equal.
+ */
+export function assertDeepEqual(actual, expected, path: any[] = []): void {
+    let typeofActual = typeof actual;
+    let typeofExpected = typeof expected;
+    if (typeofActual !== typeofExpected) {
+        throw new Error("At /" + path.join("/") + " types of actual " + typeofActual + " and expected " + typeofExpected + " differ.");
+    } else if (typeofActual === "object" || typeofActual === "array") {
+        if (expected instanceof Map) {
+            if (actual instanceof Map) {
+                expected.forEach((value, key) => {
+                    if (actual.has(key)) {
+                        assertDeepEqual(actual.get(key), value, path.concat([key]));
+                    } else {
+                        throw new Error("At /" + path.join("/") + " expected Map has key '" + key + "' but actual does not.");
+                    }
+                });
+                actual.forEach((value, key) => {
+                    if (!expected.has(key)) {
+                        throw new Error("At /" + path.join("/") + " actual Map has key '" + key + "' but expected does not.");
+                    }
+                });
+            } else {
+                throw new Error("At /" + path.join("/") + " expected is Map but actual is not.");
+            }
+        }
+        if (expected instanceof Set) {
+            if (actual instanceof Set) {
+                expected.forEach(i => {
+                    if (!actual.has(i)) {
+                        throw new Error("At /" + path.join("/") + " expected Set has item '" + i + "' but actual does not.");
+                    }
+                });
+                actual.forEach(i => {
+                    if (!expected.has(i)) {
+                        throw new Error("At /" + path.join("/") + " actual Set has item '" + i + "' but expected does not.");
+                    }
+                })
+            } else {
+                throw new Error("At /" + path.join("/") + " expected is Set but actual is not.");
+            }
+        }
+        for (let key in actual) {
+            if (!(key in expected)) {
+                throw new Error("At /" + path.join("/") + " found unexpected key " + key + ".");
+            }
+            assertDeepEqual(actual[key], expected[key], path.concat([key]));
+        }
+        for (let key in expected) {
+            if (!(key in actual)) {
+                throw new Error("At /" + path.join("/") + " expected a key " + key + ".");
+            }
+        }
+    } else if (actual !== expected) {
+        throw new Error("At /" + path.join("/") + " actual: '" + actual + "' and expected: '" + expected + "' differ.");
+    }
+}
+
+export function assertDeepSuperset(actual, expected, path: any[] = []): void {
+    let typeofActual = typeof actual;
+    let typeofExpected = typeof expected;
+    if (typeofActual !== typeofExpected) {
+        throw new Error("At /" + path.join("/") + " types of actual " + typeofActual + " and expected " + typeofExpected + " differ.");
+    } else if (typeofActual === "object" || typeofActual === "array") {
+        for (let key in expected) {
+            if (!(key in actual)) {
+                throw new Error("At /" + path.join("/") + " expected a key " + key + ".");
+            }
+            assertDeepSuperset(actual[key], expected[key], path.concat([key]));
+        }
+    } else if (actual !== expected) {
+        throw new Error("At /" + path.join("/") + " actual: '" + actual + "' and expected: '" + expected + "' differ.");
+    }
+}
+
 export function assertNull(actual: any, message?: string) {
     if (actual !== null && actual !== undefined) {
         throw new Error(message + " Actual: " + actual + " is not null/undefined");
diff --git a/tests/app/testRunner.ts b/tests/app/testRunner.ts
index f89ddb7bdb..2fa615c8a9 100644
--- a/tests/app/testRunner.ts
+++ b/tests/app/testRunner.ts
@@ -68,6 +68,8 @@ allTests["VIEW"] = require("./ui/view/view-tests");
 allTests["STYLE"] = require("./ui/styling/style-tests");
 allTests["VISUAL-STATE"] = require("./ui/styling/visual-state-tests");
 allTests["VALUE-SOURCE"] = require("./ui/styling/value-source-tests");
+allTests["CSS-SELECTOR-PARSER"] = require("./ui/styling/css-selector-parser");
+allTests["CSS-SELECTOR"] = require("./ui/styling/css-selector");
 allTests["BUTTON"] = require("./ui/button/button-tests");
 allTests["BORDER"] = require("./ui/border/border-tests");
 allTests["LABEL"] = require("./ui/label/label-tests");
diff --git a/tests/app/ui/animation/css-animation-tests.ts b/tests/app/ui/animation/css-animation-tests.ts
index a73cb68e0e..c4c607e5f5 100644
--- a/tests/app/ui/animation/css-animation-tests.ts
+++ b/tests/app/ui/animation/css-animation-tests.ts
@@ -6,7 +6,9 @@ import helper = require("../../ui/helper");
 import stackModule = require("ui/layouts/stack-layout");
 import labelModule = require("ui/label");
 import color = require("color");
-import selectorModule = require("ui/styling/css-selector");
+
+import {SelectorCore} from "ui/styling/css-selector";
+
 //import styling = require("ui/styling");
 
 function createAnimationFromCSS(css: string, name: string): keyframeAnimation.KeyframeAnimationInfo {
@@ -15,21 +17,15 @@ function createAnimationFromCSS(css: string, name: string): keyframeAnimation.Ke
     scope.ensureSelectors();
     let selector = findSelectorInScope(scope, name);
     if (selector !== undefined) {
-        let animation = selector.animations[0];
+        let animation = scope.getAnimations(selector.ruleset)[0];
         return animation;
     }
     return undefined;
 }
 
-function findSelectorInScope(scope: styleScope.StyleScope, name: string): selectorModule.CssSelector {
-    let selector = undefined;
-    for (let sel of (<any>scope)._mergedCssSelectors) {
-        if (sel.expression === name) {
-            selector = sel;
-            break;
-        }
-    }
-    return selector;
+function findSelectorInScope(scope: styleScope.StyleScope, cssClass: string): SelectorCore {
+    let selectors = scope.query({cssClasses: new Set([cssClass])});
+    return selectors[0];
 }
 
 export function test_ReadAnimationProperties() {
@@ -108,7 +104,7 @@ export function test_ReadKeyframe() {
     scope.ensureSelectors();
     let selector = findSelectorInScope(scope, "test");
     TKUnit.assert(selector !== undefined, "CSS selector was not created!");
-    let animation = selector.animations[0];
+    let animation = scope.getAnimations(selector.ruleset)[0];
     TKUnit.assertEqual(animation.name, "test", "Wrong animation name!");
     TKUnit.assertEqual(animation.keyframes.length, 2, "Keyframes not parsed correctly!");
     TKUnit.assertEqual(animation.keyframes[0].duration, 0, "First keyframe duration should be 0");
@@ -221,15 +217,15 @@ export function test_LoadTwoAnimationsWithTheSameName() {
     scope.css = "@keyframes a1 { from { opacity: 0; } to { opacity: 1; } } @keyframes a1 { from { opacity: 0; } to { opacity: 0.5; } } .a { animation-name: a1; }";
     scope.ensureSelectors();
     let selector = findSelectorInScope(scope, "a");
-    let animation = selector.animations[0];
+    let animation = scope.getAnimations(selector.ruleset)[0];
     TKUnit.assertEqual(animation.keyframes.length, 2);
     TKUnit.assertEqual(animation.keyframes[1].declarations[0].value, 0.5);
     scope = new styleScope.StyleScope();
     scope.css = "@keyframes k { from { opacity: 0; } to { opacity: 1; } } .a { animation-name: k; animation-duration: 2; } .a { animation-name: k; animation-duration: 3; }";
     scope.ensureSelectors();
     selector = findSelectorInScope(scope, "a");
-    TKUnit.assertEqual(selector.animations[0].keyframes.length, 2);
-    TKUnit.assertEqual(selector.animations[0].keyframes.length, 2);
+    TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[0].keyframes.length, 2);
+    TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[0].keyframes.length, 2);
 }
 
 export function test_LoadAnimationProgrammatically() {
@@ -295,11 +291,11 @@ export function test_ReadTwoAnimations() {
     scope.css = ".test { animation: one 0.2s ease-out 1 2, two 2s ease-in; }";
     scope.ensureSelectors();
     let selector = findSelectorInScope(scope, "test");
-    TKUnit.assertEqual(selector.animations.length, 2);
-    TKUnit.assertEqual(selector.animations[0].curve, enums.AnimationCurve.easeOut);
-    TKUnit.assertEqual(selector.animations[1].curve, enums.AnimationCurve.easeIn);
-    TKUnit.assertEqual(selector.animations[1].name, "two");
-    TKUnit.assertEqual(selector.animations[1].duration, 2000);
+    TKUnit.assertEqual(scope.getAnimations(selector.ruleset).length, 2);
+    TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[0].curve, enums.AnimationCurve.easeOut);
+    TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[1].curve, enums.AnimationCurve.easeIn);
+    TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[1].name, "two");
+    TKUnit.assertEqual(scope.getAnimations(selector.ruleset)[1].duration, 2000);
 }
 
 export function test_AnimationCurveInKeyframes() {
@@ -307,7 +303,7 @@ export function test_AnimationCurveInKeyframes() {
     scope.css = "@keyframes an { from { animation-timing-function: linear; background-color: red; } 50% { background-color: green; } to { background-color: black; } } .test { animation-name: an; animation-timing-function: ease-in; }";
     scope.ensureSelectors();
     let selector = findSelectorInScope(scope, "test");
-    let animation = selector.animations[0];
+    let animation = scope.getAnimations(selector.ruleset)[0];
     TKUnit.assertEqual(animation.keyframes[0].curve, enums.AnimationCurve.linear);
     TKUnit.assertEqual(animation.keyframes[1].curve, undefined);
     TKUnit.assertEqual(animation.keyframes[1].curve, undefined);
diff --git a/tests/app/ui/styling/css-selector-parser.ts b/tests/app/ui/styling/css-selector-parser.ts
new file mode 100644
index 0000000000..1b4237e962
--- /dev/null
+++ b/tests/app/ui/styling/css-selector-parser.ts
@@ -0,0 +1,141 @@
+import * as parser from "ui/styling/css-selector-parser";
+import * as TKUnit from "../../TKUnit";
+
+function test(css: string, expected: {}): void {
+    let result = parser.parse(css);
+    TKUnit.assertDeepEqual(result, expected);
+}
+
+export function test_fairly_complex_selector(): void {
+    test(`  listview#products.mark gridlayout:selected[row="2"] a> b   > c >d>e *[src]   `, [
+        { pos: 2, type: "", ident: "listview" },
+        { pos: 10, type: "#", ident: "products" },
+        { pos: 19, type: ".", ident: "mark", comb: " " },
+        { pos: 25, type: "", ident: "gridlayout" },
+        { pos: 35, type: ":", ident: "selected" },
+        { pos: 44, type: "[]", prop: "row", test: "=", value: "2", comb: " " },
+        { pos: 54, type: "", ident: "a", comb: ">" },
+        { pos: 57, type: "", ident: "b", comb: ">" },
+        { pos: 63, type: "", ident: "c", comb: ">" },
+        { pos: 66, type: "", ident: "d", comb: ">" },
+        { pos: 68, type: "", ident: "e", comb: " " },
+        { pos: 70, type: "*" },
+        { pos: 71, type: "[]", prop: "src" }
+    ]);
+}
+
+export function test_typeguard_isUniversal(): void {
+    let selector = parser.parse("*")[0];
+    TKUnit.assertTrue(parser.isUniversal(selector));
+    TKUnit.assertFalse(parser.isType(selector));
+    TKUnit.assertFalse(parser.isClass(selector));
+    TKUnit.assertFalse(parser.isId(selector));
+    TKUnit.assertFalse(parser.isPseudo(selector));
+    TKUnit.assertFalse(parser.isAttribute(selector));
+}
+export function test_typeguard_isType(): void {
+    let selector = parser.parse("button")[0];
+    TKUnit.assertFalse(parser.isUniversal(selector));
+    TKUnit.assertTrue(parser.isType(selector));
+    TKUnit.assertFalse(parser.isClass(selector));
+    TKUnit.assertFalse(parser.isId(selector));
+    TKUnit.assertFalse(parser.isPseudo(selector));
+    TKUnit.assertFalse(parser.isAttribute(selector));
+}
+export function test_typeguard_isClass(): void {
+    let selector = parser.parse(".login")[0];
+    TKUnit.assertFalse(parser.isUniversal(selector));
+    TKUnit.assertFalse(parser.isType(selector));
+    TKUnit.assertTrue(parser.isClass(selector));
+    TKUnit.assertFalse(parser.isId(selector));
+    TKUnit.assertFalse(parser.isPseudo(selector));
+    TKUnit.assertFalse(parser.isAttribute(selector));
+}
+export function test_typeguard_isId(): void {
+    let selector = parser.parse("#login")[0];
+    TKUnit.assertFalse(parser.isUniversal(selector));
+    TKUnit.assertFalse(parser.isType(selector));
+    TKUnit.assertFalse(parser.isClass(selector));
+    TKUnit.assertTrue(parser.isId(selector));
+    TKUnit.assertFalse(parser.isPseudo(selector));
+    TKUnit.assertFalse(parser.isAttribute(selector));
+}
+export function test_typeguard_isPseudo(): void {
+    let selector = parser.parse(":hover")[0];
+    TKUnit.assertFalse(parser.isUniversal(selector));
+    TKUnit.assertFalse(parser.isType(selector));
+    TKUnit.assertFalse(parser.isClass(selector));
+    TKUnit.assertFalse(parser.isId(selector));
+    TKUnit.assertTrue(parser.isPseudo(selector));
+    TKUnit.assertFalse(parser.isAttribute(selector));
+}
+export function test_typeguard_isAttribute(): void {
+    let selector = parser.parse("[src]")[0];
+    TKUnit.assertFalse(parser.isUniversal(selector));
+    TKUnit.assertFalse(parser.isType(selector));
+    TKUnit.assertFalse(parser.isClass(selector));
+    TKUnit.assertFalse(parser.isId(selector));
+    TKUnit.assertFalse(parser.isPseudo(selector));
+    TKUnit.assertTrue(parser.isAttribute(selector));
+}
+
+export function test_universal_selector(): void {
+    test(`*`, [{ pos: 0, type: "*" }]);
+}
+export function test_type_selector(): void {
+    test(`button`, [{ pos: 0, type: "", ident: "button" }]);
+}
+export function test_class_selector(): void {
+    test(`.red`, [{ pos: 0, type: ".", ident: "red" }]);
+}
+export function test_id_selector(): void {
+    test(`#login`, [{ pos: 0, type: "#", ident: "login" }]);
+}
+export function test_pseudoClass(): void {
+    test(`:hover`, [{ pos: 0, type: ":", ident: "hover" }]);
+}
+export function test_attribute_no_value(): void {
+    test(`[src]`, [{ pos: 0, type: "[]", prop: "src" }]);
+}
+export function test_attribute_equal(): void {
+    test(`[src = "res://"]`, [{ pos: 0, type: "[]", prop: "src", test: "=", value: `res://` }]);
+}
+export function test_attribute_all_tests(): void {
+    ["=", "^=", "$=", "*=", "=", "~=", "|="].forEach(t => test(`[src ${t} "val"]`, [{ pos: 0, type: "[]", prop: "src", test: t, value: "val"}]));
+}
+export function test_direct_parent_comb(): void {
+    test(`listview > .image`, [
+        { pos: 0, type: "", ident: "listview", comb: ">" },
+        { pos: 11, type: ".", ident: "image" }
+    ]);
+}
+export function test_ancestor_comb(): void {
+    test(`listview  .image`, [
+        { pos: 0, type: "", ident: "listview", comb: " " },
+        { pos: 10, type: ".", ident: "image" }
+    ]);
+}
+export function test_single_sequence(): void {
+    test(`button:hover`, [
+        { pos: 0, type: "", ident: "button" },
+        { pos: 6, type: ":", ident: "hover" }
+    ]);
+}
+export function test_multiple_sequences(): void {
+    test(`listview>:selected image.product`, [
+        { pos: 0, type: "", ident: "listview", comb: ">" },
+        { pos: 9, type: ":", ident: "selected", comb: " " },
+        { pos: 19, type: "", ident: "image" },
+        { pos: 24, type: ".", ident: "product" }
+    ]);
+}
+export function test_multiple_attribute_and_pseudo_classes(): void {
+    test(`button#login[user][pass]:focused:hovered`, [
+        { pos: 0, type: "", ident: "button" },
+        { pos: 6, type: "#", ident: "login" },
+        { pos: 12, type: "[]", prop: "user" },
+        { pos: 18, type: "[]", prop: "pass" },
+        { pos: 24, type: ":", ident: "focused" },
+        { pos: 32, type: ":", ident: "hovered" }
+    ]);
+}
diff --git a/tests/app/ui/styling/css-selector.ts b/tests/app/ui/styling/css-selector.ts
new file mode 100644
index 0000000000..2228f0f1af
--- /dev/null
+++ b/tests/app/ui/styling/css-selector.ts
@@ -0,0 +1,235 @@
+import * as selector from "ui/styling/css-selector";
+import * as parser from "css";
+
+import * as TKUnit from "../../TKUnit";
+
+function create(css: string, source: string = "css-selectors.ts@test"): { rules: selector.RuleSet[], map: selector.SelectorsMap } {
+    let parse = parser.parse(css, { source });
+    let rulesAst = parse.stylesheet.rules.filter(n => n.type === "rule");
+    let rules = selector.fromAstNodes(rulesAst);
+    let map = new selector.SelectorsMap(rules);
+    return { rules, map };
+}
+
+function createOne(css: string, source: string = "css-selectors.ts@test"): selector.RuleSet {
+    let {rules} = create(css, source);
+    TKUnit.assertEqual(rules.length, 1);
+    return rules[0];
+}
+
+export function test_single_selector() {
+    let rule = createOne(`* { color: red; }`);
+    TKUnit.assertTrue(rule.selectors[0].match({ cssType: "button" }));
+    TKUnit.assertTrue(rule.selectors[0].match({ cssType: "image" }));
+}
+
+export function test_two_selectors() {
+    let rule = createOne(`button, image { color: red; }`);
+    TKUnit.assertTrue(rule.selectors[0].match({ cssType: "button" }));
+    TKUnit.assertTrue(rule.selectors[1].match({ cssType: "image" }));
+    TKUnit.assertFalse(rule.selectors[0].match({ cssType: "stacklayout" }));
+    TKUnit.assertFalse(rule.selectors[1].match({ cssType: "stacklayout" }));
+}
+
+export function test_narrow_selection() {
+    let {map} = create(`
+        .login { color: blue; }
+        button { color: red; }
+        image { color: green; }
+    `);
+
+    let buttonQuerry = map.query({ cssType: "button" }).selectors;
+    TKUnit.assertEqual(buttonQuerry.length, 1);
+    TKUnit.assertDeepSuperset(buttonQuerry[0].ruleset.declarations, [
+        { property: "color", value: "red" }
+    ]);
+
+    let imageQuerry = map.query({ cssType: "image", cssClasses: new Set(["login"]) }).selectors;
+    TKUnit.assertEqual(imageQuerry.length, 2);
+    // Note class before type
+    TKUnit.assertDeepSuperset(imageQuerry[0].ruleset.declarations, [
+        { property: "color", value: "green" }
+    ]);
+    TKUnit.assertDeepSuperset(imageQuerry[1].ruleset.declarations, [
+        { property: "color", value: "blue" }
+    ]);
+}
+
+let positiveMatches = {
+    "*": (view) => true,
+    "type": (view) => view.cssType === "type",
+    "#id": (view) => view.id === "id",
+    ".class": (view) => view.cssClasses.has("class"),
+    ":pseudo": (view) => view.cssPseudoClasses.has("pseudo"),
+    "[src1]": (view) => "src1" in view,
+    "[src2='src-value']": (view) => view['src2'] === 'src-value'
+}
+
+let positivelyMatchingView = {
+    cssType: "type",
+    id: "id",
+    cssClasses: new Set(["class"]),
+    cssPseudoClasses: new Set(["pseudo"]),
+    "src1": "src",
+    "src2": "src-value"
+}
+
+let negativelyMatchingView = {
+    cssType: "nottype",
+    id: "notid",
+    cssClasses: new Set(["notclass"]),
+    cssPseudoClasses: new Set(["notpseudo"]),
+    // Has no "src1"
+    "src2": "not-src-value"
+}
+
+export function test_simple_selectors_match() {
+    for (let sel in positiveMatches) {
+        let css = sel + " { color: red; }";
+        let rule = createOne(css);
+        TKUnit.assertTrue(rule.selectors[0].match(positivelyMatchingView), "Expected successful match for: " + css);
+        if (sel !== "*") {
+            TKUnit.assertFalse(rule.selectors[0].match(negativelyMatchingView), "Expected match failure for: " + css);
+        }
+    }
+}
+
+export function test_two_selector_sequence_positive_match() {
+    for (let firstStr in positiveMatches) {
+        for (let secondStr in positiveMatches) {
+            if (secondStr !== firstStr && secondStr !== "*" && secondStr !== "type") {
+                let css = firstStr + secondStr + " { color: red; }";
+                let rule = createOne(css);
+                TKUnit.assertTrue(rule.selectors[0].match(positivelyMatchingView), "Expected successful match for: " + css);
+                if (firstStr !== "*") {
+                    TKUnit.assertFalse(rule.selectors[0].match(negativelyMatchingView), "Expected match failure for: " + css);
+                }
+            }
+        }
+    }
+}
+
+export function test_direct_parent_combinator() {
+    let rule = createOne(`listview > item:selected { color: red; }`);
+    TKUnit.assertTrue(rule.selectors[0].match({
+        cssType: "item",
+        cssPseudoClasses: new Set(["selected"]),
+        parent: {
+            cssType: "listview"
+        }
+    }), "Item in list view expected to match");
+    TKUnit.assertFalse(rule.selectors[0].match({
+        cssType: "item",
+        cssPseudoClasses: new Set(["selected"]),
+        parent: {
+            cssType: "stacklayout",
+            parent: {
+                cssType: "listview"
+            }
+        }
+    }), "Item in stack in list view NOT expected to match.");
+}
+
+export function test_ancestor_combinator() {
+    let rule = createOne(`listview item:selected { color: red; }`);
+    TKUnit.assertTrue(rule.selectors[0].match({
+        cssType: "item",
+        cssPseudoClasses: new Set(["selected"]),
+        parent: {
+            cssType: "listview"
+        }
+    }), "Item in list view expected to match");
+    TKUnit.assertTrue(rule.selectors[0].match({
+        cssType: "item",
+        cssPseudoClasses: new Set(["selected"]),
+        parent: {
+            cssType: "stacklayout",
+            parent: {
+                cssType: "listview"
+            }
+        }
+    }), "Item in stack in list view expected to match.");
+    TKUnit.assertFalse(rule.selectors[0].match({
+        cssType: "item",
+        cssPseudoClasses: new Set(["selected"]),
+        parent: {
+            cssType: "stacklayout",
+            parent: {
+                cssType: "page"
+            }
+        }
+    }), "Item in stack in page NOT expected to match.");
+}
+
+export function test_backtracking_css_selector() {
+    let sel = createOne(`a>b c { color: red; }`).selectors[0];
+    let child = {
+        cssType: "c",
+        parent: {
+            cssType: "b",
+            parent: {
+                cssType: "fail",
+                parent: {
+                    cssType: "b",
+                    parent: {
+                        cssType: "a"
+                    }
+                }
+            }
+        }
+    }
+    TKUnit.assertTrue(sel.match(child));
+}
+
+function toString() { return this.cssType; }
+
+export function test_simple_query_match() {
+    let {map} = create(`list grid[promotion] button:highlighted { color: red; }`);
+
+    let list, grid, button;
+
+    button = {
+        cssType: "button",
+        cssPseudoClasses: new Set<string>(["highlighted"]),
+        toString,
+        parent: grid = {
+            cssType: "grid",
+            promotion: true,
+            toString,
+            parent: list = {
+                cssType: "list",
+                toString
+            }
+        }
+    }
+
+    let match = map.query(button);
+    TKUnit.assertEqual(match.selectors.length, 1, "Expected match to have one selector.");
+
+    let expected = new Map<Node, selector.Changes>()
+        .set(grid, { attributes: new Set(["promotion"]) })
+        .set(button, { pseudoClasses: new Set(["highlighted"]) });
+
+    TKUnit.assertDeepEqual(match.changeMap, expected);
+}
+
+export function test_query_match_one_child_group() {
+    let {map} = create(`#prod[special] > gridlayout { color: red; }`);
+    let gridlayout, prod;
+
+    gridlayout = {
+        cssType: "gridlayout",
+        toString,
+        parent: prod = {
+            id: "prod",
+            cssType: "listview",
+            toString
+        }
+    };
+
+    let match = map.query(gridlayout);
+    TKUnit.assertEqual(match.selectors.length, 1, "Expected match to have one selector.");
+
+    let expected = new Map<Node, selector.Changes>().set(prod, { attributes: new Set(["special"])} );
+    TKUnit.assertDeepEqual(match.changeMap, expected);
+}
diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts
index beebbb364c..140c1a41d7 100644
--- a/tests/app/ui/styling/style-tests.ts
+++ b/tests/app/ui/styling/style-tests.ts
@@ -12,7 +12,6 @@ import types = require("utils/types");
 import viewModule = require("ui/core/view");
 import styleModule = require("ui/styling/style");
 import dependencyObservableModule = require("ui/core/dependency-observable");
-import {StyleScope} from 'ui/styling/style-scope';
 
 export function test_css_dataURI_is_applied_to_backgroundImageSource() {
     var stack = new stackModule.StackLayout();
@@ -358,10 +357,8 @@ export var test_composite_selector_type_and_class = function () {
     let testFunc = function (views: Array<viewModule.View>) {
         TKUnit.assert(btnWithClass.style.color, "Color property no applied correctly.");
         TKUnit.assert(btnWithClass.style.color.hex === "#FF0000", "Color property no applied correctly.");
-
-        TKUnit.assert(btnWithNoClass.style.color === undefined, "Color should not have a value");
-
-        TKUnit.assert(lblWithClass.style.color === undefined, "Color should not have a value");
+        TKUnit.assert(btnWithNoClass.style.color === undefined, "btnWithNoClass color should not have a value");
+        TKUnit.assert(lblWithClass.style.color === undefined, "lblWithClass color should not have a value");
     }
 
     helper.buildUIAndRunTest(testStack, testFunc, testCss);
@@ -630,13 +627,6 @@ export function test_styling_properties_are_defined() {
     TKUnit.assert(types.isFunction(styling.properties.getPropertyByName), "properties.getPropertyByName function is not defined");
 }
 
-export function test_styling_visualStates_are_defined() {
-    TKUnit.assert(types.isDefined(styling.visualStates), "visualStates module is not defined");
-    TKUnit.assert(types.isString(styling.visualStates.Hovered), "Hovered state is not defined");
-    TKUnit.assert(types.isString(styling.visualStates.Normal), "Normal state is not defined");
-    TKUnit.assert(types.isString(styling.visualStates.Pressed), "Pressed state is not defined");
-}
-
 export function test_styling_stylers_are_defined() {
     TKUnit.assert(types.isFunction(styleModule.registerHandler), "registerHandler function is not defined");
     TKUnit.assert(types.isFunction(styleModule.StylePropertyChangedHandler), "StylePropertyChangedHandler class is not defined");
@@ -1445,16 +1435,6 @@ export function test_CascadingClassNamesAppliesAfterPageLoad() {
     });
 }
 
-export function test_SortingOfCssSelectorsWithSameSpecificity() {
-    let scope = new StyleScope();
-    scope.css = ".button { border-color: #b2b2b2; background-color: hotpink; color: #444; margin: 5; padding: 7 2; border-width: 1; border-style: solid; border-radius: 2; text-align: center; font-size: 18; line-height: 42; } .button-small { background-color: salmon; } .button-large { font-size: 26; } .button-light { border-color: #ddd; background-color: #fff; color: #444; } .button-stable { border-color: #b2b2b2; background-color: #f8f8f8; color: #444; } .button-positive { border-color: #0c60ee; background-color: #387ef5; color: #fff; } .button-calm { border-color: #0a9dc7;background-color: #11c1f3; color: #fff; } .button-balanced { border-color: #28a54c; background-color: #33cd5f; color: #fff; } .button-energized { border-color: #e6b500; background-color: #ffc900; color: #fff; } .button-assertive { border-color: #e42112; background-color: #ef473a; color: #fff; } .button-royal { border-color: #6b46e5; background-color: #886aea; color: #fff; } .button-dark { border-color: #111; background-color: #444; color: #fff; }";
-    scope.ensureSelectors();
-    let expressions = [];
-    (<any>scope)._mergedCssSelectors.forEach((v) => {
-        expressions.push(v.expression);
-    });
-    TKUnit.assertTrue(expressions.indexOf('button') < expressions.indexOf('button-calm'), "button class selector should be before button-calm selector.");
-}
 // <snippet module="ui/styling" title="styling">
 // For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. 
 // </snippet>
diff --git a/tests/app/ui/styling/value-source-tests.ts b/tests/app/ui/styling/value-source-tests.ts
index 8f4ee85aa4..3f96a2dd06 100644
--- a/tests/app/ui/styling/value-source-tests.ts
+++ b/tests/app/ui/styling/value-source-tests.ts
@@ -42,21 +42,3 @@ export function test_value_Local_stronger_than_Css() {
     btn.style.color = undefined;
     TKUnit.assertEqual(btn.style.color, undefined, "style.color should be undefined when set locally.");
 }
-
-export var test_value_VisualState_stronger_than_Local = function () {
-    let testPage = helper.getCurrentPage();
-
-    let testStack = new stack.StackLayout();
-    testPage.content = testStack;
-
-    let btn = new button.Button();
-    btn.style.color = new color.Color("#FF0000");
-    testStack.addChild(btn);
-    testPage.css = "button:pressed { color: #0000FF; }";
-
-    helper.assertViewColor(btn, "#FF0000");
-    btn._goToVisualState("pressed");
-    helper.assertViewColor(btn, "#0000FF");
-    btn._goToVisualState("normal");
-    helper.assertViewColor(btn, "#FF0000");
-}
\ No newline at end of file
diff --git a/tests/app/ui/styling/visual-state-tests.ts b/tests/app/ui/styling/visual-state-tests.ts
index 88e4e385b9..8fde9f2c21 100644
--- a/tests/app/ui/styling/visual-state-tests.ts
+++ b/tests/app/ui/styling/visual-state-tests.ts
@@ -1,37 +1,17 @@
 import TKUnit = require("../../TKUnit");
 import view = require("ui/core/view");
 import page = require("ui/page");
-import vsConstants = require("ui/styling/visual-state-constants");
 import types = require("utils/types");
 import helper = require("../helper");
 
-export var test_VisualStates_Parsed = function () {
-    var test = function (views: Array<view.View>) {
-        var page = <page.Page>views[0];
-        page.css = "button:hovered { color: red; background-color: orange } button:pressed { color: white; background-color: black }";
-
-        var states = page._getStyleScope().getVisualStates(views[1]);
-        TKUnit.assert(types.isDefined(states));
-
-        var counter = 0,
-            hoveredFound = false,
-            pressedFound = false;
-
-        for (var p in states) {
-            counter++;
-            if (p === vsConstants.Hovered) {
-                hoveredFound = true;
-            } else if (p === vsConstants.Pressed) {
-                pressedFound = true;
-            }
-        }
-
-        TKUnit.assert(counter === 2);
-        TKUnit.assert(hoveredFound);
-        TKUnit.assert(pressedFound);
+function assertInState(view: view.View, state: string, knownStates: string[]): void {
+    let pseudo = view.cssPseudoClasses;
+    if (state) {
+        TKUnit.assert(pseudo.has(state), "Expected view " + view + " to have pseudo class " + state);
     }
-
-    helper.do_PageTest_WithButton(test);
+    knownStates.filter(s => s !== state).forEach(s => {
+        TKUnit.assert(!pseudo.has(s), "Expected view " + view + " not to have pseudo class " + s + (state ? " expected just " + state + "." : ""));
+    });
 }
 
 export var test_goToVisualState = function () {
@@ -40,15 +20,19 @@ export var test_goToVisualState = function () {
 
         var btn = views[1];
 
+        assertInState(btn, null, ["hovered", "pressed"]);
+
         btn._goToVisualState("hovered");
 
-        TKUnit.assert(btn.visualState === "hovered");
+        assertInState(btn, "hovered", ["hovered", "pressed"]);
+
         TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === "red");
         TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === "orange");
 
         btn._goToVisualState("pressed");
 
-        TKUnit.assert(btn.visualState === "pressed");
+        assertInState(btn, "pressed", ["hovered", "pressed"]);
+
         TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === "white");
         TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === "black");
     }
@@ -61,17 +45,18 @@ export var test_goToVisualState_NoState_ShouldResetStyledProperties = function (
         (<page.Page>views[0]).css = "button:hovered { color: red; background-color: orange }";
 
         var btn = views[1];
+        assertInState(btn, null, ["hovered", "pressed"]);
 
         btn._goToVisualState("hovered");
 
-        TKUnit.assert(btn.visualState === "hovered");
+        assertInState(btn, "hovered", ["hovered", "pressed"]);
         TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === "red");
         TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === "orange");
 
         btn._goToVisualState("pressed");
 
         // since there are no modifiers for the "Pressed" state, the "Normal" state is returned.
-        TKUnit.assert(btn.visualState === "normal");
+        assertInState(btn, "pressed", ["hovered", "pressed"]);
 
         // properties are reset (set to undefined)
         TKUnit.assert(types.isUndefined(btn.style.color));
@@ -87,16 +72,18 @@ export var test_goToVisualState_NoState_ShouldGoToNormal = function () {
 
         var btn = views[1];
 
+        assertInState(btn, null, ["hovered", "pressed"]);
+
         btn._goToVisualState("hovered");
 
-        TKUnit.assert(btn.visualState === "hovered");
+        assertInState(btn, "hovered", ["hovered", "pressed"]);
         TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === "red");
         TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === "orange");
 
         btn._goToVisualState("pressed");
 
         // since there are no modifiers for the "Pressed" state, the "Normal" state is returned.
-        TKUnit.assert(btn.visualState === "normal");
+        assertInState(btn, "pressed", ["hovered", "pressed"]);
 
         // the actual state is "normal" and properties are reverted to these settings (if any)
         TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === "orange");
diff --git a/tests/app/xml-declaration/xml-declaration-tests.ts b/tests/app/xml-declaration/xml-declaration-tests.ts
index bbf7c6a855..e5ee938f47 100644
--- a/tests/app/xml-declaration/xml-declaration-tests.ts
+++ b/tests/app/xml-declaration/xml-declaration-tests.ts
@@ -455,7 +455,7 @@ export function test_parse_ShouldParseBindingToSpecialProperty() {
     p.bindingContext = obj;
 
     TKUnit.assertEqual(p.content.className, classProp);
-    TKUnit.assertEqual(p.content._cssClasses.length, 1);
+    TKUnit.assertEqual(p.content.cssClasses.size, 1);
 };
 
 export function test_parse_ShouldParseBindingsWithCommaInsideSingleQuote() {
diff --git a/tns-core-modules/application/application-common.ts b/tns-core-modules/application/application-common.ts
index bd9201d0bb..b02a21696a 100644
--- a/tns-core-modules/application/application-common.ts
+++ b/tns-core-modules/application/application-common.ts
@@ -2,7 +2,7 @@
 import definition = require("application");
 import observable = require("data/observable");
 import frame = require("ui/frame");
-import cssSelector = require("ui/styling/css-selector");
+import {RuleSet} from "ui/styling/css-selector";
 import * as fileSystemModule from "file-system";
 import * as styleScopeModule from "ui/styling/style-scope";
 import * as fileResolverModule  from "file-system/file-name-resolver";
@@ -34,9 +34,9 @@ export var mainEntry: frame.NavigationEntry;
 
 export var cssFile: string = "app.css"
 
-export var appSelectors: Array<cssSelector.CssSelector> = [];
-export var additionalSelectors: Array<cssSelector.CssSelector> = [];
-export var cssSelectors: Array<cssSelector.CssSelector> = [];
+export var appSelectors: RuleSet[] = [];
+export var additionalSelectors: RuleSet[] = [];
+export var cssSelectors: RuleSet[] = [];
 export var cssSelectorVersion: number = 0;
 export var keyframes: any = {};
 
@@ -58,12 +58,12 @@ export var android = undefined;
 
 export var ios = undefined;
 
-export function loadCss(cssFile?: string): Array<cssSelector.CssSelector> {
+export function loadCss(cssFile?: string): RuleSet[] {
     if (!cssFile) {
         return undefined;
     }
 
-    var result: Array<cssSelector.CssSelector>;
+    var result: RuleSet[];
 
     var fs: typeof fileSystemModule = require("file-system");
     if (!styleScope) {
@@ -89,7 +89,7 @@ export function mergeCssSelectors(module: any): void {
     module.cssSelectorVersion++;
 }
 
-export function parseCss(cssText: string, cssFileName?: string): Array<cssSelector.CssSelector> {
+export function parseCss(cssText: string, cssFileName?: string): RuleSet[] {
     if (!styleScope) {
         styleScope = require("ui/styling/style-scope");
     }
diff --git a/tns-core-modules/application/application.d.ts b/tns-core-modules/application/application.d.ts
index af7237bc46..2291bc608f 100644
--- a/tns-core-modules/application/application.d.ts
+++ b/tns-core-modules/application/application.d.ts
@@ -2,7 +2,7 @@
  * Contains the application abstraction with all related methods.
  */
 declare module "application" {
-    import cssSelector = require("ui/styling/css-selector");
+    import {RuleSet} from "ui/styling/css-selector";
     import observable = require("data/observable");
     import frame = require("ui/frame");
     import {View} from "ui/core/view";
@@ -123,15 +123,15 @@ declare module "application" {
     export var cssFile: string;
 
     //@private
-    export var appSelectors: Array<cssSelector.CssSelector>;
-    export var additionalSelectors: Array<cssSelector.CssSelector>;
+    export var appSelectors: RuleSet[];
+    export var additionalSelectors: RuleSet[];
     /**
      * Cached css selectors created from the content of the css file.
      */
-    export var cssSelectors: Array<cssSelector.CssSelector>;
+    export var cssSelectors: RuleSet[];
     export var cssSelectorVersion: number;
     export var keyframes: any;
-    export function parseCss(cssText: string, cssFileName?: string): Array<cssSelector.CssSelector>;
+    export function parseCss(cssText: string, cssFileName?: string): RuleSet[];
     export function mergeCssSelectors(module: any): void;
     //@endprivate
 
@@ -141,7 +141,7 @@ declare module "application" {
      * Loads css file and parses to a css syntax tree.
      * @param cssFile Optional parameter to point to an arbitrary css file. If not specified, the cssFile property is used.
      */
-    export function loadCss(cssFile?: string): Array<cssSelector.CssSelector>;
+    export function loadCss(cssFile?: string): RuleSet[];
 
     /**
      * Call this method to start the application. Important: All code after this method call will not be executed!
diff --git a/tns-core-modules/css/reworkcss.d.ts b/tns-core-modules/css/reworkcss.d.ts
index daa036aae0..0edad90e3c 100644
--- a/tns-core-modules/css/reworkcss.d.ts
+++ b/tns-core-modules/css/reworkcss.d.ts
@@ -5,7 +5,7 @@ declare module "css" {
     }
 
     export interface Node {
-        type: string;
+        type: "rule" | "keyframes" | "declaration";
         position: Position;
     }
 
@@ -16,11 +16,15 @@ declare module "css" {
 
     export interface Rule extends Node {
         selectors: string[];
-        declarations: Declaration[];
+        declarations: Node[];
+    }
+
+    export interface Keyframes extends Rule {
+        name: string;
     }
 
     export interface StyleSheet {
-        rules: Rule[];
+        rules: Node[];
     }
 
     export interface SyntaxTree {
diff --git a/tns-core-modules/declarations.d.ts b/tns-core-modules/declarations.d.ts
index 2ee5a2b4a2..f798b8d9b9 100644
--- a/tns-core-modules/declarations.d.ts
+++ b/tns-core-modules/declarations.d.ts
@@ -157,3 +157,7 @@ declare class WeakRef<T> {
 declare var module: NativeScriptModule;
 // Same as module.exports
 declare var exports: any;
+
+interface Array<T> {
+    filter<U extends T>(pred: (a: T) => a is U): U[];
+}
\ No newline at end of file
diff --git a/tns-core-modules/tns-core-modules.base.d.ts b/tns-core-modules/tns-core-modules.base.d.ts
index 1ce9a444ec..c0b7917cfb 100644
--- a/tns-core-modules/tns-core-modules.base.d.ts
+++ b/tns-core-modules/tns-core-modules.base.d.ts
@@ -81,7 +81,6 @@
 /// <reference path="ui/styling/style-scope.d.ts" />
 /// <reference path="ui/styling/style.d.ts" />
 /// <reference path="ui/styling/styling.d.ts" />
-/// <reference path="ui/styling/visual-state-constants.d.ts" />
 /// <reference path="ui/switch/switch.d.ts" />
 /// <reference path="ui/tab-view/tab-view.d.ts" />
 /// <reference path="ui/text-base/text-base-styler.d.ts" />
diff --git a/tns-core-modules/ui/button/button.ios.ts b/tns-core-modules/ui/button/button.ios.ts
index b500aad9e5..a1ecb7c547 100644
--- a/tns-core-modules/ui/button/button.ios.ts
+++ b/tns-core-modules/ui/button/button.ios.ts
@@ -6,8 +6,7 @@ import view = require("ui/core/view");
 import utils = require("utils/utils");
 import enums = require("ui/enums");
 import dependencyObservable = require("ui/core/dependency-observable");
-import styleScope = require("../styling/style-scope");
-import {Property} from "ui/core/dependency-observable";
+import {PseudoClassHandler} from "ui/core/view";
 
 class TapHandlerImpl extends NSObject {
     private _owner: WeakRef<Button>;
@@ -43,27 +42,6 @@ export class Button extends common.Button {
 
         this._tapHandler = TapHandlerImpl.initWithOwner(new WeakRef(this));
         this._ios.addTargetActionForControlEvents(this._tapHandler, "tap", UIControlEvents.UIControlEventTouchUpInside);
-
-        this._stateChangedHandler = new stateChanged.ControlStateChangeListener(this._ios, (s: string) => {
-            this._goToVisualState(s);
-        });
-    }
-
-    public onLoaded() {
-        super.onLoaded();
-        this._updateHandler();
-    }
-
-    public onUnloaded() {
-        super.onUnloaded();
-        this._stateChangedHandler.stop();
-    }
-
-    public _onPropertyChanged(property: Property, oldValue: any, newValue: any) {
-        super._onPropertyChanged(property, oldValue, newValue);
-        if (property.affectsStyle) {
-            this._updateHandler();
-        }
     }
 
     get ios(): UIButton {
@@ -88,16 +66,17 @@ export class Button extends common.Button {
         this.style._updateTextDecoration();
     }
 
-    private _updateHandler() {
-        if (this.parent !== null && this.page !== null) {
-            let rootPage = this.page;
-            let scope: styleScope.StyleScope = (<any>rootPage)._getStyleScope();
-            if (scope.getVisualStates(this) !== undefined) {
-                this._stateChangedHandler.start();
-            }
-            else {
-                this._stateChangedHandler.stop();
+    @PseudoClassHandler("normal", "highlighted")
+    _updateHandler(subscribe: boolean) {
+        if (subscribe) {
+            if (!this._stateChangedHandler) {
+                this._stateChangedHandler = new stateChanged.ControlStateChangeListener(this._ios, (s: string) => {
+                    this._goToVisualState(s);
+                });
             }
+            this._stateChangedHandler.start();
+        } else {
+            this._stateChangedHandler.stop();
         }
     }
 }
diff --git a/tns-core-modules/ui/core/control-state-change.ios.ts b/tns-core-modules/ui/core/control-state-change.ios.ts
index 1739c467c3..a2fe607460 100644
--- a/tns-core-modules/ui/core/control-state-change.ios.ts
+++ b/tns-core-modules/ui/core/control-state-change.ios.ts
@@ -1,6 +1,5 @@
 /* tslint:disable:no-unused-variable */
 import definition = require("ui/core/control-state-change");
-import * as visualStateConstants from "ui/styling/visual-state-constants";
 
 var ObserverClass = NSObject.extend(
     {
@@ -36,6 +35,7 @@ export class ControlStateChangeListener implements definition.ControlStateChange
         if (!this._observing) {
             this._control.addObserverForKeyPathOptionsContext(this._observer, "highlighted", NSKeyValueObservingOptions.NSKeyValueObservingOptionNew, null);
             this._observing = true;
+            this._updateState();
         }
     }
 
@@ -59,7 +59,7 @@ export class ControlStateChangeListener implements definition.ControlStateChange
     }
 
     private _updateState() {
-        var state = visualStateConstants.Normal;
+        var state = "normal";
         if (this._control.highlighted) {
             state = "highlighted";
         }
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 3e39b04800..678361cc6d 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -14,17 +14,9 @@ import {PropertyMetadata, ProxyObject} from "ui/core/proxy";
 import {PropertyMetadataSettings, PropertyChangeData, Property, ValueSource, PropertyMetadata as doPropertyMetadata} from "ui/core/dependency-observable";
 import {registerSpecialProperty} from "ui/builder/special-properties";
 import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
-import * as visualStateConstants from "ui/styling/visual-state-constants";
-import * as visualStateModule from "../styling/visual-state";
 import * as animModule from "ui/animation";
-import { Source } from "utils/debug";
-
-var visualState: typeof visualStateModule;
-function ensureVisualState() {
-    if (!visualState) {
-        visualState = require("../styling/visual-state");
-    }
-}
+import {CssState} from "ui/styling/style-scope";
+import {Source} from "utils/debug";
 
 registerSpecialProperty("class", (instance: definition.View, propertyValue: string) => {
     instance.className = propertyValue;
@@ -104,16 +96,31 @@ export function getAncestor(view: View, criterion: string | Function): definitio
     return null;
 }
 
+export function PseudoClassHandler(... pseudoClasses: string[]): MethodDecorator {
+    let stateEventNames = pseudoClasses.map(s => ":" + s);
+    let listeners = Symbol("listeners");
+    return <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => {
+        function update(change: number) {
+            let prev = this[listeners] || 0;
+            let next = prev + change;
+            if (prev <= 0 && next > 0) {
+                this[propertyKey](true);
+            } else if (prev > 0 && next <= 0) {
+                this[propertyKey](false);
+            }
+        }
+        stateEventNames.forEach(s => target[s] = update);
+    }
+}
+
 var viewIdCounter = 0;
 
 function onCssClassPropertyChanged(data: PropertyChangeData) {
     var view = <View>data.object;
-
+    var classes = view.cssClasses;
+    classes.clear();
     if (types.isString(data.newValue)) {
-        view._cssClasses = (<string>data.newValue).split(" ");
-    }
-    else {
-        view._cssClasses.length = 0;
+        data.newValue.split(" ").forEach(c => classes.add(c));
     }
 }
 
@@ -153,18 +160,22 @@ export class View extends ProxyObject implements definition.View {
     private _parent: definition.View;
     private _style: style.Style;
     private _visualState: string;
-    private _requestedVisualState: string;
     private _isLoaded: boolean;
     private _isLayoutValid: boolean = false;
+    private _cssType: string;
 
     private _updatingInheritedProperties: boolean;
     private _registeredAnimations: Array<keyframeAnimationModule.KeyframeAnimation>;
 
     public _domId: number;
     public _isAddedToNativeVisualTree = false;
-    public _cssClasses: Array<string> = [];
     public _gestureObservers = {};
 
+    public cssClasses: Set<string> = new Set();
+    public cssPseudoClasses: Set<string> = new Set();
+
+    public _cssState: CssState;
+
     public getGestureObservers(type: gestures.GestureTypes): Array<gestures.GesturesObserver> {
         return this._gestureObservers[type];
     }
@@ -174,7 +185,7 @@ export class View extends ProxyObject implements definition.View {
 
         this._style = new style.Style(this);
         this._domId = viewIdCounter++;
-        this._visualState = visualStateConstants.Normal;
+        this._goToVisualState("normal");
     }
 
     observe(type: gestures.GestureTypes, callback: (args: gestures.GestureEventData) => void, thisArg?: any): void {
@@ -510,12 +521,11 @@ export class View extends ProxyObject implements definition.View {
         throw new Error("isLayoutValid is read-only property.");
     }
 
-    get visualState(): string {
-        return this._visualState;
-    }
-
     get cssType(): string {
-        return this.typeName.toLowerCase();
+        if (!this._cssType) {
+            this._cssType = this.typeName.toLowerCase();
+        }
+        return this._cssType;
     }
 
     get parent(): definition.View {
@@ -545,6 +555,9 @@ export class View extends ProxyObject implements definition.View {
     }
 
     public onUnloaded() {
+        this._onCssStateChange(this._cssState, null);
+        this._cssState = null;
+
         this._unloadEachChildView();
 
         this._isLoaded = false;
@@ -651,6 +664,20 @@ export class View extends ProxyObject implements definition.View {
         //
     }
 
+    public addPseudoClass(name: string): void {
+        if (!this.cssPseudoClasses.has(name)) {
+            this.cssPseudoClasses.add(name);
+            this.notifyPseudoClassChanged(name);
+        }
+    }
+
+    public deletePseudoClass(name: string): void {
+        if (this.cssPseudoClasses.has(name)) {
+            this.cssPseudoClasses.delete(name);
+            this.notifyPseudoClassChanged(name);
+        }
+    }
+
     public static resolveSizeAndState(size: number, specSize: number, specMode: number, childMeasuredState: number): number {
         var result = size;
         switch (specMode) {
@@ -1071,15 +1098,13 @@ export class View extends ProxyObject implements definition.View {
         if (trace.enabled) {
             trace.write(this + " going to state: " + state, trace.categories.Style);
         }
-        if (state === this._visualState || this._requestedVisualState === state) {
+        if (state === this._visualState) {
             return;
         }
-        // we use lazy require to prevent cyclic dependencies issues
-        ensureVisualState();
-        this._visualState = visualState.goToState(this, state);
 
-        // TODO: What state should we set here - the requested or the actual one?
-        this._requestedVisualState = state;
+        this.deletePseudoClass(this._visualState);
+        this._visualState = state;
+        this.addPseudoClass(state);
     }
 
     public _applyXmlAttribute(attribute, value): boolean {
@@ -1206,4 +1231,84 @@ export class View extends ProxyObject implements definition.View {
         // Check for a valid _nativeView instance
         return !!this._nativeView;
     }
+
+    private notifyPseudoClassChanged(pseudoClass: string): void {
+        this.notify({ eventName: ":" + pseudoClass, object: this });
+    }
+
+    // TODO: Make sure the state is set to null and this is called on unloaded to clean up change listeners...
+    _onCssStateChange(previous: CssState, next: CssState): void {
+
+        if (!this._invalidateCssHandler) {
+            this._invalidateCssHandler = () => {
+                if (this._invalidateCssHandlerSuspended) {
+                    return;
+                }
+                this.applyCssState();
+            };
+        }
+
+        try {
+            this._invalidateCssHandlerSuspended = true;
+
+            if (next) {
+                next.changeMap.forEach((changes, view) => {
+                    if (changes.attributes) {
+                        changes.attributes.forEach(attribute => {
+                            view.addEventListener(attribute + "Change", this._invalidateCssHandler)
+                        });
+                    }
+                    if (changes.pseudoClasses) {
+                        changes.pseudoClasses.forEach(pseudoClass => {
+                            let eventName = ":" + pseudoClass;
+                            view.addEventListener(":" + pseudoClass, this._invalidateCssHandler);
+                            if (view[eventName]) {
+                                view[eventName](+1);
+                            }
+                        });
+                    }
+                });
+            }
+
+            if (previous) {
+                previous.changeMap.forEach((changes, view) => {
+                    if (changes.attributes) {
+                        changes.attributes.forEach(attribute => {
+                            view.removeEventListener("onPropertyChanged:" + attribute, this._invalidateCssHandler)
+                        });
+                    }
+                    if (changes.pseudoClasses) {
+                        changes.pseudoClasses.forEach(pseudoClass => {
+                            let eventName = ":" + pseudoClass;
+                            view.removeEventListener(eventName, this._invalidateCssHandler)
+                            if (view[eventName]) {
+                                view[eventName](-1);
+                            }
+                        });
+                    }
+                });
+            }
+
+        } finally {
+            this._invalidateCssHandlerSuspended = false;
+        }
+
+        this.applyCssState();
+    }
+
+    /**
+     * Notify that some attributes or pseudo classes that may affect the current CssState had changed.
+     */
+    private _invalidateCssHandler;
+    private _invalidateCssHandlerSuspended: boolean;
+
+    private applyCssState(): void {
+        if (!this._cssState) {
+            return;
+        }
+
+        this.style._beginUpdate();
+        this._cssState.apply();
+        this.style._endUpdate();
+    }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index 0fe721c5c9..a9672de516 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -33,6 +33,8 @@ declare module "ui/core/view" {
 
     export function isEventOrGesture(name: string, view: View): boolean;
 
+    export function PseudoClassHandler(... pseudoClasses: string[]): MethodDecorator;
+
     /**
      * The Point interface describes a two dimensional location. 
      * It has two properties x and y, representing the x and y coordinate of the location. 
@@ -289,9 +291,14 @@ declare module "ui/core/view" {
          */
         isLayoutValid: boolean;
 
+        /**
+         * Gets the CSS fully qualified type name.
+         * Using this as element type should allow for PascalCase and kebap-case selectors, when fully qualified, to match the element.
+         */
         cssType: string;
 
-        visualState: string;
+        cssClasses: Set<string>;
+        cssPseudoClasses: Set<string>;
 
         /**
          * Gets owner page. This is a read-only property.
@@ -477,6 +484,20 @@ declare module "ui/core/view" {
          * Returns the actual size of the view in device-independent pixels.
          */
         public getActualSize(): Size;
+
+        /**
+         * @protected
+         * @unstable
+         * A widget can call this method to add a matching css pseudo class.
+         */
+        public addPseudoClass(name: string): void;
+
+        /**
+         * @protected
+         * @unstable
+         * A widget can call this method to discard mathing css pseudo class.
+         */
+        public deletePseudoClass(name: string): void;
         
         // Lifecycle events
         onLoaded(): void;
@@ -505,7 +526,9 @@ declare module "ui/core/view" {
         _gestureObservers: any;
         _isInheritedChange(): boolean;
         _domId: number;
-        _cssClasses: Array<string>;
+
+        _cssState: any /* "ui/styling/style-scope" */;
+        _onCssStateChange(previous: any /* "ui/styling/style-scope" */, any /* "ui/styling/style-scope" */);
 
         _registerAnimation(animation: keyframeAnimationModule.KeyframeAnimation);
         _unregisterAnimation(animation: keyframeAnimationModule.KeyframeAnimation);
@@ -560,7 +583,7 @@ declare module "ui/core/view" {
      */
     export class CustomLayoutView extends View {
     }
-    
+
     /**
      * Defines an interface for a View factory function.
      * Commonly used to specify the visualization of data objects.
diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts
index 0388a0c4be..fe76dc8bd8 100644
--- a/tns-core-modules/ui/page/page-common.ts
+++ b/tns-core-modules/ui/page/page-common.ts
@@ -177,11 +177,6 @@ export class Page extends ContentView implements dts.Page {
         }
     }
 
-    public removeCssSelectors(selectorExpression: string) {
-        this._styleScope.removeSelectors(selectorExpression);
-        this._refreshCss();
-    }
-
     public getKeyframeAnimationWithName(animationName: string): keyframeAnimation.KeyframeAnimationInfo {
         return this._styleScope.getKeyframeAnimationWithName(animationName);
     }
diff --git a/tns-core-modules/ui/page/page.d.ts b/tns-core-modules/ui/page/page.d.ts
index 4ff7c9cddb..df88b82364 100644
--- a/tns-core-modules/ui/page/page.d.ts
+++ b/tns-core-modules/ui/page/page.d.ts
@@ -118,12 +118,6 @@ declare module "ui/page" {
          */
         addCssFile(cssFileName: string): void;
 
-        /**
-         * Removes all selectors matching the specified selector expression.
-         * @param selectorExpression - A valid selector expression.
-         */
-        removeCssSelectors(selectorExpression: string): void;
-
         /**
          * Returns a CSS keyframe animation with the specified name, if it exists.
          */
diff --git a/tns-core-modules/ui/styling/css-animation-parser.ts b/tns-core-modules/ui/styling/css-animation-parser.ts
index be6f47dba7..efe5c829b4 100644
--- a/tns-core-modules/ui/styling/css-animation-parser.ts
+++ b/tns-core-modules/ui/styling/css-animation-parser.ts
@@ -1,6 +1,5 @@
 import animationModule = require("ui/animation");
 import keyframeAnimationModule = require("ui/animation/keyframe-animation");
-import cssParser = require("css");
 import converters = require("../styling/converters");
 import types = require("utils/types");
 import colorModule = require("color");
@@ -22,8 +21,7 @@ let animationProperties = {
 };
 
 export class CssAnimationParser {
-
-    public static keyframeAnimationsFromCSSDeclarations(declarations: cssParser.Declaration[]): Array<keyframeAnimationModule.KeyframeAnimationInfo> {
+    public static keyframeAnimationsFromCSSDeclarations(declarations: { property: string, value: string }[]): Array<keyframeAnimationModule.KeyframeAnimationInfo> {
         let animations: Array<keyframeAnimationModule.KeyframeAnimationInfo>  = new Array<keyframeAnimationModule.KeyframeAnimationInfo>();
         let animationInfo: keyframeAnimationModule.KeyframeAnimationInfo = undefined;
         if (declarations === null || declarations === undefined) {
diff --git a/tns-core-modules/ui/styling/css-selector-parser.d.ts b/tns-core-modules/ui/styling/css-selector-parser.d.ts
new file mode 100644
index 0000000000..c94e409ca3
--- /dev/null
+++ b/tns-core-modules/ui/styling/css-selector-parser.d.ts
@@ -0,0 +1,39 @@
+//@private
+declare module "ui/styling/css-selector-parser" {
+    export interface SimpleSelector {
+        pos: number;
+        type: "" | "*" | "#" | "." | ":" | "[]";
+        comb?: "+" | "~" | ">" | " ";
+    }
+    export interface SimpleIdentifierSelector extends SimpleSelector {
+        ident: string;
+    }
+    export interface UniversalSelector extends SimpleSelector {
+        type: "*";
+    }
+    export interface TypeSelector extends SimpleIdentifierSelector {
+        type: "";
+    }
+    export interface ClassSelector extends SimpleIdentifierSelector {
+        type: ".";
+    }
+    export interface IdSelector extends SimpleIdentifierSelector {
+        type: "#";
+    }
+    export interface PseudoClassSelector extends SimpleIdentifierSelector {
+        type: ":";
+    }
+    export interface AttributeSelector extends SimpleSelector {
+        type: "[]";
+        prop: string;
+        test?: "=" | "^=" | "$=" | "*=" | "=" | "~=" | "|=";
+        value?: string;
+    }
+    export function isUniversal(sel: SimpleSelector): sel is UniversalSelector;
+    export function isType(sel: SimpleSelector): sel is TypeSelector;
+    export function isClass(sel: SimpleSelector): sel is ClassSelector;
+    export function isId(sel: SimpleSelector): sel is IdSelector;
+    export function isPseudo(sel: SimpleSelector): sel is PseudoClassSelector;
+    export function isAttribute(sel: SimpleSelector): sel is AttributeSelector;
+    export function parse(selector: string): SimpleSelector[];
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/css-selector-parser.ts b/tns-core-modules/ui/styling/css-selector-parser.ts
new file mode 100644
index 0000000000..01c3e76260
--- /dev/null
+++ b/tns-core-modules/ui/styling/css-selector-parser.ts
@@ -0,0 +1,125 @@
+/// <reference path="./css-selector-parser.d.ts" />
+export interface SimpleSelector {
+    pos: number;
+    type: "" | "*" | "#" | "." | ":" | "[]";
+    comb?: "+" | "~" | ">" | " ";
+}
+export interface SimpleIdentifierSelector extends SimpleSelector {
+    ident: string;
+}
+export interface UniversalSelector extends SimpleSelector {
+    type: "*";
+}
+export interface TypeSelector extends SimpleIdentifierSelector {
+    type: "";
+}
+export interface ClassSelector extends SimpleIdentifierSelector {
+    type: ".";
+}
+export interface IdSelector extends SimpleIdentifierSelector {
+    type: "#";
+}
+export interface PseudoClassSelector extends SimpleIdentifierSelector {
+    type: ":";
+}
+export interface AttributeSelector extends SimpleSelector {
+    type: "[]";
+    prop: string;
+    test?: "=" | "^=" | "$=" | "*=" | "=" | "~=" | "|=";
+    value?: string;
+}
+
+export function isUniversal(sel: SimpleSelector): sel is UniversalSelector {
+    return sel.type === "*";
+}
+export function isType(sel: SimpleSelector): sel is TypeSelector {
+    return sel.type === "";
+}
+export function isClass(sel: SimpleSelector): sel is ClassSelector {
+    return sel.type === ".";
+}
+export function isId(sel: SimpleSelector): sel is IdSelector {
+    return sel.type === "#";
+}
+export function isPseudo(sel: SimpleSelector): sel is PseudoClassSelector {
+    return sel.type === ":";
+}
+export function isAttribute(sel: SimpleSelector): sel is AttributeSelector {
+    return sel.type === "[]";
+}
+
+var regex = /(\s*)(?:(\*)|(#|\.|:|\b)([_-\w][_-\w\d]*)|\[\s*([_-\w][_-\w\d]*)\s*(?:(=|\^=|\$=|\*=|\~=|\|=)\s*(?:([_-\w][_-\w\d]*)|"((?:[^\\"]|\\(?:"|n|r|f|\\|0-9a-f))*)"|'((?:[^\\']|\\(?:'|n|r|f|\\|0-9a-f))*)')\s*)?\])(?:\s*(\+|~|>|\s))?/g;
+// no lead ws     univ   type pref and ident          [    prop                   =                            ident    -or-    "string escapes \" \00aaff"    -or-   'string    escapes \' urf-8: \00aaff'       ]        combinator
+
+export function parse(selector: string): SimpleSelector[] {
+    let selectors: any[] = [];
+
+    var result: RegExpExecArray;
+    var lastIndex = regex.lastIndex = 0;
+    while(result = regex.exec(selector)) {
+        let pos = result.index;
+        if (lastIndex !== pos) {
+            throw new Error(`Unexpected characters at index, near: ${lastIndex}: ${result.input.substr(lastIndex, 32)}`);
+        } else if (!result[0] || result[0].length === 0) {
+            throw new Error(`Last selector match got zero character result at index ${lastIndex}, near: ${result.input.substr(lastIndex, 32)}`);
+        }
+        pos += getLeadingWhiteSpace(result).length;
+        lastIndex = regex.lastIndex;
+
+        var type = getType(result);
+        let selector: SimpleSelector | SimpleIdentifierSelector | AttributeSelector;
+        switch(type) {
+            case "*":
+                selector = { pos, type };
+                break;
+            case "#":
+            case ".":
+            case ":":
+            case "":
+                let ident = getIdentifier(result);
+                selector = { pos, type, ident };
+                break;
+            case "[]":
+                let prop = getProperty(result);
+                let test = getPropertyTest(result);
+                // TODO: Unescape escape sequences. Unescape UTF-8 characters.
+                let value = getPropertyValue(result);
+                selector = test ? { pos, type, prop, test, value } : { pos, type, prop };
+                break;
+            default:
+                throw new Error("Unhandled type.");
+        }
+
+        let comb = getCombinator(result);
+        if (comb) {
+            selector.comb = comb;
+        }
+        selectors.push(selector);
+    }
+
+    if (selectors.length > 0) {
+        delete selectors[selectors.length - 1].comb;
+    }
+    return selectors;
+}
+function getLeadingWhiteSpace(result: RegExpExecArray): string {
+    return result[1] || "";
+}
+function getType(result: RegExpExecArray): "" | "*" | "." | "#" | ":" | "[]" {
+    return <"[]">(result[5] && "[]") || <"*">result[2] || <"" | "." | "#" | ":">result[3];
+}
+function getIdentifier(result: RegExpExecArray): string {
+    return result[4];
+}
+function getProperty(result: RegExpExecArray): string {
+    return result[5];
+}
+function getPropertyTest(result: RegExpExecArray): string {
+    return result[6] || undefined;
+}
+function getPropertyValue(result: RegExpExecArray): string {
+    return result[7] || result[8] || result[9];
+}
+function getCombinator(result: RegExpExecArray): "+" | "~" | ">" | " " {
+    return <("+" | "~" | ">" | " ")>result[result.length - 1] || undefined;
+}
diff --git a/tns-core-modules/ui/styling/css-selector.d.ts b/tns-core-modules/ui/styling/css-selector.d.ts
index 2334d97877..758fcf3e9b 100644
--- a/tns-core-modules/ui/styling/css-selector.d.ts
+++ b/tns-core-modules/ui/styling/css-selector.d.ts
@@ -1,60 +1,72 @@
 declare module "ui/styling/css-selector" {
-    import view = require("ui/core/view");
-    import cssParser = require("css");
-    import styleProperty = require("ui/styling/style-property");
-    import keyframeAnimation = require("ui/animation/keyframe-animation");
-
-    export class CssSelector {
-        constructor(expression: string, declarations: cssParser.Declaration[]);
-
-        expression: string;
-        attrExpression: string;
-
-        declarations(): Array<{ property: string; value: any }>;
-
-        specificity: number;
-
-        animations: Array<keyframeAnimation.KeyframeAnimationInfo>;
-
-        matches(view: view.View): boolean;
-
-        apply(view: view.View, valueSourceModifier: number);
-
-        eachSetter(callback: (property: styleProperty.Property, resolvedValue: any) => void);
+    import * as parser from "css";
+
+    /**
+     * An interface describing the shape of a type on which the selectors may apply.
+     * Note, the ui/core/view.View implements Node.
+     */
+    interface Node {
+        parent?: Node;
+
+        id?: string;
+        cssType?: string;
+        cssClasses?: Set<string>;
+        cssPseudoClasses?: Set<string>;
     }
 
-    class CssTypeSelector extends CssSelector {
-        specificity: number;
-        matches(view: view.View): boolean;
+    interface Declaration {
+        property: string;
+        value: string;
     }
 
-    class CssIdSelector extends CssSelector {
-        specificity: number;
-        matches(view: view.View): boolean;
+    class SelectorCore {
+        /**
+         * Dynamic selectors depend on attributes and pseudo classes.
+         */
+        dynamic: boolean;
+        match(node: Node): boolean;
+        ruleset: RuleSet;
     }
 
-    class CssClassSelector extends CssSelector {
-        specificity: number;
-        matches(view: view.View): boolean;
+    class RuleSet {
+        /**
+         * Gets the selectors in this ruleset's selector group.
+         */
+        selectors: SelectorCore[];
+
+        /**
+         * Gets the key-value list of declarations for the ruleset.
+         */
+        declarations: Declaration[];
     }
 
-    export class CssVisualStateSelector extends CssSelector {
-        specificity: number;
+    class SelectorsMap {
+        constructor(rules: RuleSet[]);
 
-        key: string;
+        /**
+         * Get a list of selectors that are likely to match the node.
+         */
+        query<T extends Node>(node: T): SelectorsMatch<T>;
+    }
 
-        state: string;
+    type ChangeMap<T extends Node> = Map<T, Changes>;
 
-        constructor(expression: string, declarations: cssParser.Declaration[]);
-        matches(view: view.View): boolean;
+    interface Changes {
+        attributes?: Set<string>;
+        pseudoClasses?: Set<string>;
     }
 
-    export function createSelector(expression: string, declarations: cssParser.Declaration[]): CssSelector;
+    class SelectorsMatch<T extends Node> {
+        /**
+         * Gets the static selectors that match the queried node and the dynamic selectors that may potentially match the queried node.
+         */
+        selectors: SelectorCore[];
 
-    class InlineStyleSelector extends CssSelector {
-        constructor(declarations: cssParser.Declaration[]);
-        apply(view: view.View);
+        /**
+         * Gets a map of nodes to attributes and pseudo classes, that may affect the state of the dynamic 
+         */
+        changeMap: ChangeMap<T>;
     }
 
-    export function applyInlineSyle(view: view.View, declarations: cssParser.Declaration[]);
+    export function fromAstNodes(astRules: parser.Node[]): RuleSet[];
 }
diff --git a/tns-core-modules/ui/styling/css-selector.ts b/tns-core-modules/ui/styling/css-selector.ts
index fc689485a6..0d8a08e214 100644
--- a/tns-core-modules/ui/styling/css-selector.ts
+++ b/tns-core-modules/ui/styling/css-selector.ts
@@ -1,485 +1,541 @@
-import view = require("ui/core/view");
-import observable = require("ui/core/dependency-observable");
-import cssParser = require("css");
-import * as trace from "trace";
-import {StyleProperty, ResolvedStylePropertyHandler, withStyleProperty} from "ui/styling/style-property";
-import * as types from "utils/types";
-import * as utils from "utils/utils";
-import keyframeAnimation = require("ui/animation/keyframe-animation");
-import cssAnimationParser = require("./css-animation-parser");
-import {getSpecialPropertySetter} from "ui/builder/special-properties";
-
-let ID_SPECIFICITY = 1000000;
-let ATTR_SPECIFITY = 10000;
-let CLASS_SPECIFICITY = 100;
-let TYPE_SPECIFICITY = 1;
-
-export class CssSelector {
-    public animations: Array<keyframeAnimation.KeyframeAnimationInfo>;
-
-    private _expression: string;
-    private _declarations: cssParser.Declaration[];
-    private _attrExpression: string;
-
-    constructor(expression: string, declarations: cssParser.Declaration[]) {
-        if (expression) {
-            let leftSquareBracketIndex = expression.indexOf(LSBRACKET);
-            if (leftSquareBracketIndex >= 0) {
-                // extracts what is inside square brackets ([target = 'test'] will extract "target = 'test'")
-                let paramsRegex = /\[\s*(.*)\s*\]/;
-                let attrParams = paramsRegex.exec(expression);
-                if (attrParams && attrParams.length > 1) {
-                    this._attrExpression = attrParams[1].trim();
-                }
-                this._expression = expression.substr(0, leftSquareBracketIndex);
-            }
-            else {
-                this._expression = expression;
-            }
-        }
-        this._declarations = declarations;
-        this.animations = cssAnimationParser.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(declarations);
-    }
+import {Node, Declaration, Changes, ChangeMap} from "ui/styling/css-selector";
+import {isNullOrUndefined} from "utils/types";
+import {escapeRegexSymbols} from "utils/utils";
+
+import * as cssParser from "css";
+import * as selectorParser from "./css-selector-parser";
+
+const enum Specificity {
+    Inline =        0x01000000,
+    Id =            0x00010000,
+    Attribute =     0x00000100,
+    Class =         0x00000100,
+    PseudoClass =   0x00000100,
+    Type =          0x00000001,
+    Universal =     0x00000000,
+    Invalid =       0x00000000
+}
 
-    get expression(): string {
-        return this._expression;
-    }
+const enum Rarity {
+    Invalid = 4,
+    Id = 3,
+    Class = 2,
+    Type = 1,
+    PseudoClass = 0,
+    Attribute = 0,
+    Universal = 0,
+    Inline = 0
+}
 
-    get attrExpression(): string {
-        return this._attrExpression;
-    }
+interface LookupSorter {
+    sortById(id: string, sel: SelectorCore);
+    sortByClass(cssClass: string, sel: SelectorCore);
+    sortByType(cssType: string, sel: SelectorCore);
+    sortAsUniversal(sel: SelectorCore);
+}
 
-    get declarations(): Array<{ property: string; value: any }> {
-        return this._declarations;
-    }
+namespace Match {
+    /**
+     * Depends on attributes or pseudoclasses state;
+     */
+    export var Dynamic = true;
+    /**
+     * Depends only on the tree structure.
+     */
+    export var Static = false;
+}
 
-    get specificity(): number {
-        throw "Specificity property is abstract";
+function SelectorProperties(specificity: Specificity, rarity: Rarity, dynamic: boolean = false): ClassDecorator {
+    return cls => {
+        cls.prototype.specificity = specificity;
+        cls.prototype.rarity = rarity;
+        cls.prototype.combinator = "";
+        cls.prototype.dynamic = dynamic;
+        return cls;
     }
+}
 
-    protected get valueSourceModifier(): number {
-        return observable.ValueSource.Css;
-    }
+declare type Combinator = "+" | ">" | "~" | " ";
+@SelectorProperties(Specificity.Universal, Rarity.Universal, Match.Static)
+export abstract class SelectorCore {
+    public specificity: number;
+    public rarity: Rarity;
+    public combinator: Combinator;
+    public ruleset: RuleSet;
+    public dynamic: boolean;
+    public abstract match(node: Node): boolean;
+    /**
+     * If the selector is static returns if it matches the node.
+     * If the selector is dynamic returns if it may match the node, and accumulates any changes that may affect its state.
+     */
+    public abstract accumulateChanges(node: Node, map: ChangeAccumulator): boolean;
+    public lookupSort(sorter: LookupSorter, base?: SelectorCore): void { sorter.sortAsUniversal(base || this); }
+}
 
-    public matches(view: view.View): boolean {
+export abstract class SimpleSelector extends SelectorCore {
+    public accumulateChanges(node: Node, map?: ChangeAccumulator): boolean {
+        if (!this.dynamic) {
+            return this.match(node);
+        } else if (this.mayMatch(node)) {
+            this.trackChanges(node, map);
+            return true;
+        }
         return false;
     }
+    public mayMatch(node: Node): boolean { return this.match(node); }
+    public trackChanges(node: Node, map: ChangeAccumulator): void {
+        // No-op, silence the tslint 'block is empty'.
+        // Some derived classes (dynamic) will actually fill the map with stuff here, some (static) won't do anything.
+    }
+}
 
-    public apply(view: view.View, valueSourceModifier: number) {
-        let modifier = valueSourceModifier || this.valueSourceModifier;
-        this.eachSetter((property, value) => {
-            if (types.isString(property)) {
-                const propertyName = <string>property;
-                let attrHandled = false;
-                let specialSetter = getSpecialPropertySetter(propertyName);
-
-                if (!attrHandled && specialSetter) {
-                    specialSetter(view, value);
-                    attrHandled = true;
-                }
+function wrap(text: string): string {
+    return text ? ` ${text} ` : "";
+}
 
-                if (!attrHandled && propertyName in view) {
-                    view[propertyName] = utils.convertString(value);
-                }
-            } else {
-                const resolvedProperty = <StyleProperty>property;
-                try {
-                    view.style._setValue(resolvedProperty, value, modifier);
-                } catch (ex) {
-                    if (trace.enabled) {
-                        trace.write("Error setting property: " + resolvedProperty.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error);
-                    }
-                }
-            }
-        });
-        if (this.animations && view.isLoaded && view._nativeView !== undefined) {
-            for (let animationInfo of this.animations) {
-                let animation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo, modifier);
-                if (animation) {
-                    view._registerAnimation(animation);
-                    animation.play(view)
-                        .then(() => { view._unregisterAnimation(animation);  })
-                        .catch((e) => { view._unregisterAnimation(animation); });
-                }
-            }
-        }
+@SelectorProperties(Specificity.Invalid, Rarity.Invalid, Match.Static)
+export class InvalidSelector extends SimpleSelector {
+    constructor(public e: Error) { super(); }
+    public toString(): string { return `<error: ${this.e}>`; }
+    public match(node: Node): boolean { return false; }
+    public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
+        // No-op, silence the tslint 'block is empty'.
+        // It feels like tslint has problems with simple polymorphism...
+        // This selector is invalid and will never match so we won't bother sorting it to further appear in queries.
     }
+}
 
-    public eachSetter(callback: ResolvedStylePropertyHandler) {
-        for (let i = 0; i < this._declarations.length; i++) {
-            let declaration = this._declarations[i];
-            let name = declaration.property;
-            let resolvedValue = declaration.value;
-            withStyleProperty(name, resolvedValue, callback);
-        }
-    }
+@SelectorProperties(Specificity.Universal, Rarity.Universal, Match.Static)
+export class UniversalSelector extends SimpleSelector {
+    public toString(): string { return `*${wrap(this.combinator)}`; }
+    public match(node: Node): boolean { return true; }
+}
 
-    public get declarationText(): string {
-        return this.declarations.map((declaration) => `${declaration.property}: ${declaration.value}`).join("; ");
-    }
+@SelectorProperties(Specificity.Id, Rarity.Id, Match.Static)
+export class IdSelector extends SimpleSelector {
+    constructor(public id: string) { super(); }
+    public toString(): string { return `#${this.id}${wrap(this.combinator)}`; }
+    public match(node: Node): boolean { return node.id === this.id; }
+    public lookupSort(sorter: LookupSorter, base?: SelectorCore): void { sorter.sortById(this.id, base || this); }
+}
 
-    public get attrExpressionText(): string  {
-        if (this.attrExpression) {
-            return `[${this.attrExpression}]`;
-        } else {
-            return "";
-        }
-    }
+@SelectorProperties(Specificity.Type, Rarity.Type, Match.Static)
+export class TypeSelector extends SimpleSelector {
+    constructor(public cssType: string) { super(); }
+    public toString(): string { return `${this.cssType}${wrap(this.combinator)}`; }
+    public match(node: Node): boolean { return node.cssType === this.cssType; }
+    public lookupSort(sorter: LookupSorter, base?: SelectorCore): void { sorter.sortByType(this.cssType, base || this); }
 }
 
-class CssTypeSelector extends CssSelector {
-    get specificity(): number {
-        let result = TYPE_SPECIFICITY;
-        let dotIndex = this.expression.indexOf(DOT);
-        if (dotIndex > -1) {
-            result += CLASS_SPECIFICITY;
-        }
-        return result;
-    }
-    public matches(view: view.View): boolean {
-        let result = matchesType(this.expression, view);
-        if (result && this.attrExpression) {
-            return matchesAttr(this.attrExpression, view);
-        }
-        return result;
-    }
-    public toString(): string {
-        return `CssTypeSelector ${this.expression}${this.attrExpressionText} { ${this.declarationText} }`;
-    }
+@SelectorProperties(Specificity.Class, Rarity.Class, Match.Static)
+export class ClassSelector extends SimpleSelector {
+    constructor(public cssClass: string) { super(); }
+    public toString(): string { return `.${this.cssClass}${wrap(this.combinator)}`; }
+    public match(node: Node): boolean { return node.cssClasses && node.cssClasses.has(this.cssClass); }
+    public lookupSort(sorter: LookupSorter, base?: SelectorCore): void { sorter.sortByClass(this.cssClass, base || this); }
 }
 
-function matchesType(expression: string, view: view.View): boolean {
-    let exprArr = expression.split(".");
-    let exprTypeName = exprArr[0];
-    let exprClassName = exprArr[1];
+declare type AttributeTest = "=" | "^=" | "$=" | "*=" | "=" | "~=" | "|=";
+@SelectorProperties(Specificity.Attribute, Rarity.Attribute, Match.Dynamic)
+export class AttributeSelector extends SimpleSelector {
+    constructor(public attribute: string, public test?: AttributeTest, public value?: string) {
+        super();
 
-    let typeCheck = exprTypeName.toLowerCase() === view.typeName.toLowerCase() ||
-        exprTypeName.toLowerCase() === view.typeName.split(/(?=[A-Z])/).join("-").toLowerCase();
+        if (!test) {
+            // HasAttribute
+            this.match = node => !isNullOrUndefined(node[attribute]);
+            return;
+        }
 
-    if (typeCheck) {
-        if (exprClassName) {
-            return view._cssClasses.some((cssClass, i, arr) => { return cssClass === exprClassName });
+        if (!value) {
+            this.match = node => false;
         }
-        else {
-            return typeCheck;
+
+        let escapedValue = escapeRegexSymbols(value);
+        let regexp: RegExp = null;
+        switch(test) {
+            case "^=": // PrefixMatch
+                regexp = new RegExp("^" + escapedValue);
+                break;
+            case "$=": // SuffixMatch
+                regexp = new RegExp(escapedValue + "$");
+                break;
+            case "*=": // SubstringMatch
+                regexp = new RegExp(escapedValue);
+                break;
+            case "=": // Equals
+                regexp = new RegExp("^" + escapedValue + "$");
+                break;
+            case "~=": // Includes
+                if (/\s/.test(value)) {
+                    this.match = node => false;
+                    return;
+                }
+                regexp = new RegExp("(^|\\s)" + escapedValue + "(\\s|$)");
+                break;
+            case "|=": // DashMatch
+                regexp = new RegExp("^" + escapedValue + "(-|$)");
+                break;
         }
-    }
-    else {
-        return false;
-    }
-}
 
-class CssIdSelector extends CssSelector {
-    get specificity(): number {
-        return ID_SPECIFICITY;
-    }
-    public matches(view: view.View): boolean {
-        let result = this.expression === view.id;
-        if (result && this.attrExpression) {
-            return matchesAttr(this.attrExpression, view);
+        if (regexp) {
+            this.match = node => regexp.test(node[attribute] + "");
+            return;
+        } else {
+            this.match = node => false;
+            return;
         }
-        return result;
     }
+    public get specificity(): number { return Specificity.Attribute; }
+    public get rarity(): number { return Specificity.Attribute; }
+    public toString(): string { return `[${this.attribute}${wrap(this.test)}${(this.test && this.value) || ''}]${wrap(this.combinator)}`; }
+    public match(node: Node): boolean { return false; }
+    public mayMatch(node: Node): boolean { return true; }
+    public trackChanges(node: Node, map: ChangeAccumulator): void { map.addAttribute(node, this.attribute); }
+}
 
-    public toString(): string {
-        return `CssIdSelector ${this.expression}${this.attrExpressionText} { ${this.declarationText} }`;
-    }
+@SelectorProperties(Specificity.PseudoClass, Rarity.PseudoClass, Match.Dynamic)
+export class PseudoClassSelector extends SimpleSelector {
+    constructor(public cssPseudoClass: string) { super(); }
+    public toString(): string { return `:${this.cssPseudoClass}${wrap(this.combinator)}`; }
+    public match(node: Node): boolean { return node.cssPseudoClasses && node.cssPseudoClasses.has(this.cssPseudoClass); }
+    public mayMatch(node: Node): boolean { return true; }
+    public trackChanges(node: Node, map: ChangeAccumulator): void { map.addPseudoClass(node, this.cssPseudoClass); }
 }
 
-class CssClassSelector extends CssSelector {
-    get specificity(): number {
-        return CLASS_SPECIFICITY;
+export class SimpleSelectorSequence extends SimpleSelector {
+    private head: SimpleSelector;
+    constructor(public selectors: SimpleSelector[]) {
+        super();
+        this.specificity = selectors.reduce((sum, sel) => sel.specificity + sum, 0);
+        this.head = this.selectors.reduce((prev, curr) => !prev || (curr.rarity > prev.rarity) ? curr : prev, null);
+        this.dynamic = selectors.some(sel => sel.dynamic);
     }
-    public matches(view: view.View): boolean {
-        let expectedClass = this.expression;
-        let result = view._cssClasses.some((cssClass, i, arr) => { return cssClass === expectedClass });
-        if (result && this.attrExpression) {
-            return matchesAttr(this.attrExpression, view);
-        }
-        return result;
+    public toString(): string { return `${this.selectors.join("")}${wrap(this.combinator)}`; }
+    public match(node: Node): boolean { return this.selectors.every(sel => sel.match(node)); }
+    public mayMatch(node: Node): boolean {
+        return this.selectors.every(sel => sel.mayMatch(node));
     }
-    public toString(): string {
-        return `CssClassSelector ${this.expression}${this.attrExpressionText} { ${this.declarationText} }`;
+    public trackChanges(node, map): void {
+        this.selectors.forEach(sel => sel.trackChanges(node, map));
+    }
+    public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
+        this.head.lookupSort(sorter, base || this);
     }
-
 }
 
-class CssCompositeSelector extends CssSelector {
-    get specificity(): number {
-        let result = 0;
-        for (let i = 0; i < this.parentCssSelectors.length; i++) {
-            result += this.parentCssSelectors[i].selector.specificity;
-        }
-        return result;
+export class Selector extends SelectorCore {
+    // Grouped by ancestor combinators, then by direct child combinators.
+    private groups: Selector.ChildGroup[];
+    private last: SelectorCore;
+
+    constructor(public selectors: SimpleSelector[]) {
+        super();
+        let lastGroup: SimpleSelector[];
+        let groups: SimpleSelector[][] = [];
+        selectors.reverse().forEach(sel => {
+            switch(sel.combinator) {
+                case undefined:
+                case " ":
+                    groups.push(lastGroup = []);
+                case ">":
+                    lastGroup.push(sel);
+                    break;
+                default:
+                    throw new Error(`Unsupported combinator "${sel.combinator}".`);
+            }
+        });
+        this.groups = groups.map(g => new Selector.ChildGroup(g));
+        this.last = selectors[0];
+        this.specificity = selectors.reduce((sum, sel) => sel.specificity + sum, 0);
+        this.dynamic = selectors.some(sel => sel.dynamic);
     }
 
-    private parentCssSelectors: [{ selector: CssSelector, onlyDirectParent: boolean }];
+    public toString(): string { return this.selectors.join(""); }
 
-    private splitExpression(expression) {
-        let result = [];
-        let tempArr = [];
-        let validSpace = true;
-        for (let i = 0; i < expression.length; i++) {
-            if (expression[i] === LSBRACKET) {
-                validSpace = false;
-            }
-            if (expression[i] === RSBRACKET) {
-                validSpace = true;
-            }
-            if ((expression[i] === SPACE && validSpace) || (expression[i] === GTHAN)) {
-                if (tempArr.length > 0) {
-                    result.push(tempArr.join(""));
-                    tempArr = [];
-                }
-                if (expression[i] === GTHAN) {
-                    result.push(GTHAN);
+    public match(node: Node): boolean {
+        return this.groups.every((group, i) => {
+            if (i === 0) {
+                node = group.match(node);
+                return !!node;
+            } else {
+                let ancestor = node;
+                while(ancestor = ancestor.parent) {
+                    if (node = group.match(ancestor)) {
+                        return true;
+                    }
                 }
-                continue;
+                return false;
             }
-            tempArr.push(expression[i]);
-        }
-        if (tempArr.length > 0) {
-            result.push(tempArr.join(""));
-        }
-        return result;
+        });
     }
 
-    constructor(expr: string, declarations: cssParser.Declaration[]) {
-        super(expr, declarations);
-        let expressions = this.splitExpression(expr);
-        let onlyParent = false;
-        this.parentCssSelectors = <any>[];
-        for (let i = expressions.length - 1; i >= 0; i--) {
-            if (expressions[i].trim() === GTHAN) {
-                onlyParent = true;
-                continue;
-            }
-            this.parentCssSelectors.push({ selector: createSelector(expressions[i].trim(), null), onlyDirectParent: onlyParent });
-            onlyParent = false;
-        }
+    public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
+        this.last.lookupSort(sorter, this);
     }
 
-    public matches(view: view.View): boolean {
-        let result = this.parentCssSelectors[0].selector.matches(view);
-        if (!result) {
-            return result;
+    public accumulateChanges(node: Node, map?: ChangeAccumulator): boolean {
+        if (!this.dynamic) {
+            return this.match(node);
         }
-        let tempView = view.parent;
-        for (let i = 1; i < this.parentCssSelectors.length; i++) {
-            let parentCounter = 0;
-            while (tempView && parentCounter === 0) {
-                result = this.parentCssSelectors[i].selector.matches(tempView);
-                if (result) {
-                    tempView = tempView.parent;
-                    break;
-                }
-                if (this.parentCssSelectors[i].onlyDirectParent) {
-                    parentCounter++;
+
+        let bounds: Selector.Bound[] = [];
+        let mayMatch = this.groups.every((group, i) => {
+            if (i === 0) {
+                let nextNode = group.mayMatch(node);
+                bounds.push({ left: node, right: node });
+                node = nextNode;
+                return !!node;
+            } else {
+                let ancestor = node;
+                while(ancestor = ancestor.parent) {
+                    let nextNode = group.mayMatch(ancestor);
+                    if (nextNode) {
+                        bounds.push({ left: ancestor, right: null });
+                        node = nextNode;
+                        return true;
+                    }
                 }
-                tempView = tempView.parent;
+                return false;
             }
-            if (!result) {
-                break;
-            }
-        }
-        return result;
-    }
+        });
 
-    public toString(): string {
-        return `CssCompositeSelector ${this.expression}${this.attrExpressionText} { ${this.declarationText} }`;
-    }
-}
+        // Calculating the right bounds for each selectors won't save much
+        if (!mayMatch) {
+            return false;
+        }
 
-class CssAttrSelector extends CssSelector {
-    get specificity(): number {
-        return ATTR_SPECIFITY;
-    }
+        if (!map) {
+            return mayMatch;
+        }
 
-    public matches(view: view.View): boolean {
-        return matchesAttr(this.attrExpression, view);
-    }
+        for (let i = 0; i < this.groups.length; i++) {
+            let group = this.groups[i];
+            if (!group.dynamic) {
+                continue;
+            }
+            let bound = bounds[i];
+            let node = bound.left;
+            do {
+                if (group.mayMatch(node)) {
+                    group.trackChanges(node, map);
+                }
+            } while((node !== bound.right) && (node = node.parent));
+        }
 
-    public toString(): string {
-        return `CssAttrSelector ${this.expression}${this.attrExpressionText} { ${this.declarationText} }`;
+        return mayMatch;
     }
 }
+export namespace Selector {
+    // Non-spec. Selector sequences are grouped by ancestor then by child combinators for easier backtracking.
+    export class ChildGroup {
+        public dynamic: boolean;
 
-function matchesAttr(attrExpression: string, view: view.View): boolean {
-    let equalSignIndex = attrExpression.indexOf(EQUAL);
-    if (equalSignIndex > 0) {
-        let nameValueRegex = /(.*[^~|\^\$\*])[~|\^\$\*]?=(.*)/;
-        let nameValueRegexRes = nameValueRegex.exec(attrExpression);
-        let attrName;
-        let attrValue;
-        if (nameValueRegexRes && nameValueRegexRes.length > 2) {
-            attrName = nameValueRegexRes[1].trim();
-            attrValue = nameValueRegexRes[2].trim().replace(/^(["'])*(.*)\1$/, '$2');
+        constructor(private selectors: SimpleSelector[]) {
+            this.dynamic = selectors.some(sel => sel.dynamic);
         }
-        // extract entire sign (=, ~=, |=, ^=, $=, *=)
-        let escapedAttrValue = utils.escapeRegexSymbols(attrValue);
-        let attrCheckRegex;
-        switch (attrExpression.charAt(equalSignIndex - 1)) {
-            case "~":
-                attrCheckRegex = new RegExp("(^|[^a-zA-Z-])" + escapedAttrValue + "([^a-zA-Z-]|$)");
-                break;
-            case "|":
-                attrCheckRegex = new RegExp("^" + escapedAttrValue + "\\b");
-                break;
-            case "^":
-                attrCheckRegex = new RegExp("^" + escapedAttrValue);
-                break;
-            case "$":
-                attrCheckRegex = new RegExp(escapedAttrValue + "$");
-                break;
-            case "*":
-                attrCheckRegex = new RegExp(escapedAttrValue);
-                break;
 
-            // only = (EQUAL)
-            default:
-                attrCheckRegex = new RegExp("^" + escapedAttrValue + "$");
-                break;
+        public match(node: Node): Node {
+            return this.selectors.every((sel, i) => (i === 0 ? node : node = node.parent) && sel.match(node)) ? node : null;
         }
-        return !types.isNullOrUndefined(view[attrName]) && attrCheckRegex.test(view[attrName] + "");
-    } else {
-        return !types.isNullOrUndefined(view[attrExpression]);
-    }
-}
 
-export class CssVisualStateSelector extends CssSelector {
-    private _key: string;
-    private _match: string;
-    private _state: string;
-    private _isById: boolean;
-    private _isByClass: boolean;
-    private _isByType: boolean;
-    private _isByAttr: boolean;
-
-    get specificity(): number {
-        return (this._isById ? ID_SPECIFICITY : 0) +
-            (this._isByAttr ? ATTR_SPECIFITY : 0) +
-            (this._isByClass ? CLASS_SPECIFICITY : 0) +
-            (this._isByType ? TYPE_SPECIFICITY : 0);
-    }
+        public mayMatch(node: Node): Node {
+            return this.selectors.every((sel, i) => (i === 0 ? node : node = node.parent) && sel.mayMatch(node)) ? node : null;
+        }
 
-    get key(): string {
-        return this._key;
+        public trackChanges(node: Node, map: ChangeAccumulator) {
+            this.selectors.forEach((sel, i) => (i === 0 ? node : node = node.parent) && sel.trackChanges(node, map));
+        }
     }
-
-    get state(): string {
-        return this._state;
+    export interface Bound {
+        left: Node;
+        right: Node;
     }
+}
 
-    protected get valueSourceModifier(): number {
-        return observable.ValueSource.VisualState;
+export class RuleSet {
+    constructor(public selectors: SelectorCore[], private declarations: Declaration[]) {
+        this.selectors.forEach(sel => sel.ruleset = this);
     }
+    public toString(): string { return `${this.selectors.join(", ")} {${this.declarations.map((d, i) => `${i === 0 ? " ": ""}${d.property}: ${d.value}`).join("; ")} }`; }
+    public lookupSort(sorter: LookupSorter): void { this.selectors.forEach(sel => sel.lookupSort(sorter)); }
+}
 
-    constructor(expression: string, declarations: cssParser.Declaration[]) {
-        super(expression, declarations);
-
-        let args = expression.split(COLON);
-        this._key = args[0];
-        this._state = args[1];
-
-        if (this._key.charAt(0) === HASH) {
-            this._match = this._key.substring(1);
-            this._isById = true;
-        } else if (this._key.charAt(0) === DOT) {
-            this._match = this._key.substring(1);
-            this._isByClass = true;
-        } else if (this._key.charAt(0) === LSBRACKET) {
-            this._match = this._key;
-            this._isByAttr = true;
-        }
-        else if (this._key.length > 0) { // handle the case when there is no key. E.x. ":pressed" selector
-            this._match = this._key;
-            this._isByType = true;
-        }
-    }
+export function fromAstNodes(astRules: cssParser.Node[]): RuleSet[] {
+    return astRules.filter(isRule).map(rule => {
+        let declarations = rule.declarations.filter(isDeclaration).map(createDeclaration);
+        let selectors = rule.selectors.map(createSelector);
+        let ruleset = new RuleSet(selectors, declarations);
+        return ruleset;
+    });
+}
 
-    public matches(view: view.View): boolean {
-        let matches = true;
-        if (this._isById) {
-            matches = this._match === view.id;
-        }
+function createDeclaration(decl: cssParser.Declaration): any {
+    return { property: decl.property.toLowerCase(), value: decl.value };
+}
 
-        if (this._isByClass) {
-            let expectedClass = this._match;
-            matches = view._cssClasses.some((cssClass, i, arr) => { return cssClass === expectedClass });
+function createSelector(sel: string): SimpleSelector | SimpleSelectorSequence | Selector {
+    try {
+        let ast = selectorParser.parse(sel);
+        if (ast.length === 0) {
+            return new InvalidSelector(new Error("Empty selector"));
         }
 
-        if (this._isByType) {
-            matches = matchesType(this._match, view);
+        let selectors = ast.map(createSimpleSelector);
+        let sequences: (SimpleSelector | SimpleSelectorSequence)[] = [];
+
+        // Join simple selectors into sequences, set combinators
+        for (let seqStart = 0, seqEnd = 0, last = selectors.length - 1; seqEnd <= last; seqEnd++) {
+            let sel = selectors[seqEnd];
+            let astComb = ast[seqEnd].comb;
+            if (astComb || seqEnd === last) {
+                if (seqStart === seqEnd) {
+                    // This is a sequnce with single SimpleSelector, so we will not combine it into SimpleSelectorSequence.
+                    sel.combinator = astComb;
+                    sequences.push(sel);
+                } else {
+                    let sequence = new SimpleSelectorSequence(selectors.slice(seqStart, seqEnd + 1));
+                    sequence.combinator = astComb;
+                    sequences.push(sequence);
+                }
+                seqStart = seqEnd + 1;
+            }
         }
 
-        if (this._isByAttr) {
-            matches = matchesAttr(this._key, view);
+        if (sequences.length === 1) {
+            // This is a selector with a single SinmpleSelectorSequence so we will not combine it into Selector.
+            return sequences[0];
+        } else {
+            return new Selector(sequences);
         }
-
-        return matches;
+    } catch(e) {
+        return new InvalidSelector(e);
     }
+}
 
-    public toString(): string {
-        return `CssVisualStateSelector ${this.expression}${this.attrExpressionText} { ${this.declarationText} }`;
+function createSimpleSelector(sel: selectorParser.SimpleSelector): SimpleSelector {
+    if (selectorParser.isUniversal(sel)) {
+        return new UniversalSelector();
+    } else if (selectorParser.isId(sel)) {
+        return new IdSelector(sel.ident);
+    } else if (selectorParser.isType(sel)) {
+        return new TypeSelector(sel.ident.replace(/-/, '').toLowerCase());
+    } else if (selectorParser.isClass(sel)) {
+        return new ClassSelector(sel.ident);
+    } else if (selectorParser.isPseudo(sel)) {
+        return new PseudoClassSelector(sel.ident);
+    } else if (selectorParser.isAttribute(sel)) {
+        if (sel.test) {
+            return new AttributeSelector(sel.prop, sel.test, sel.value);
+        } else {
+            return new AttributeSelector(sel.prop)
+        }
     }
 }
 
-let HASH = "#";
-let DOT = ".";
-let COLON = ":";
-let SPACE = " ";
-let GTHAN = ">";
-let LSBRACKET = "[";
-let RSBRACKET = "]";
-let EQUAL = "=";
-
-export function createSelector(expression: string, declarations: cssParser.Declaration[]): CssSelector {
-    let goodExpr = expression.replace(/>/g, " > ").replace(/\s\s+/g, " ");
-    let spaceIndex = goodExpr.indexOf(SPACE);
-    if (spaceIndex >= 0) {
-        return new CssCompositeSelector(goodExpr, declarations);
-    }
+function isRule(node: cssParser.Node): node is cssParser.Rule {
+    return node.type === "rule";
+}
+function isDeclaration(node: cssParser.Node): node is cssParser.Declaration {
+    return node.type === "declaration";
+}
 
-    let leftSquareBracketIndex = goodExpr.indexOf(LSBRACKET);
-    if (leftSquareBracketIndex === 0) {
-        return new CssAttrSelector(goodExpr, declarations);
+interface SelectorInDocument {
+    pos: number;
+    sel: SelectorCore;
+}
+interface SelectorMap {
+    [key: string]: SelectorInDocument[]
+}
+export class SelectorsMap<T extends Node> implements LookupSorter {
+    private id: SelectorMap = {};
+    private class: SelectorMap = {};
+    private type: SelectorMap = {};
+    private universal: SelectorInDocument[] = [];
+
+    private position = 0;
+
+    constructor(rulesets: RuleSet[]) {
+        rulesets.forEach(rule => rule.lookupSort(this));
+    }
+
+    query(node: T): SelectorsMatch<T> {
+        let selectorClasses = [
+            this.universal,
+            this.id[node.id],
+            this.type[node.cssType]
+        ];
+        if (node.cssClasses) {
+            node.cssClasses.forEach(c => selectorClasses.push(this.class[c]));
+        }
+        let selectors = selectorClasses
+            .filter(arr => !!arr)
+            .reduce((cur, next) => cur.concat(next), []);
+        
+        let selectorsMatch = new SelectorsMatch<T>();
+
+        selectorsMatch.selectors = selectors
+            .filter(sel => sel.sel.accumulateChanges(node, selectorsMatch))
+            .sort((a, b) => a.sel.specificity - b.sel.specificity || a.pos - b.pos)
+            .map(docSel => docSel.sel);
+
+        return selectorsMatch;
     }
 
-    var colonIndex = goodExpr.indexOf(COLON);
-    if (colonIndex >= 0) {
-        return new CssVisualStateSelector(goodExpr, declarations);
+    sortById(id: string, sel: SelectorCore): void { this.addToMap(this.id, id, sel); }
+    sortByClass(cssClass: string, sel: SelectorCore): void {
+        this.addToMap(this.class, cssClass, sel);
     }
+    sortByType(cssType: string, sel: SelectorCore): void {
+        this.addToMap(this.type, cssType, sel);
+    }
+    sortAsUniversal(sel: SelectorCore): void { this.universal.push(this.makeDocSelector(sel)); }
 
-    if (goodExpr.charAt(0) === HASH) {
-        return new CssIdSelector(goodExpr.substring(1), declarations);
+    private addToMap(map: SelectorMap, head: string, sel: SelectorCore): void {
+        this.position++;
+        let list = map[head];
+        if (list) {
+            list.push(this.makeDocSelector(sel));
+        } else {
+            map[head] = [this.makeDocSelector(sel)];
+        }
     }
 
-    if (goodExpr.charAt(0) === DOT) {
-        // TODO: Combinations like label.center
-        return new CssClassSelector(goodExpr.substring(1), declarations);
+    private makeDocSelector(sel: SelectorCore): SelectorInDocument {
+        return { sel, pos: this.position++ };
     }
+}
 
-    return new CssTypeSelector(goodExpr, declarations);
+interface ChangeAccumulator {
+    addAttribute(node: Node, attribute: string): void;
+    addPseudoClass(node: Node, pseudoClass: string): void;
 }
 
-class InlineStyleSelector extends CssSelector {
-    constructor(declarations: cssParser.Declaration[]) {
-        super(undefined, declarations)
-    }
+export class SelectorsMatch<T extends Node> implements ChangeAccumulator {
+    public changeMap: ChangeMap<T> = new Map<T, Changes>();
+    public selectors;
 
-    public apply(view: view.View) {
-        this.eachSetter((property, value) => {
-            const resolvedProperty = <StyleProperty>property;
-            view.style._setValue(resolvedProperty, value, observable.ValueSource.Local);
-        });
+    public addAttribute(node: T, attribute: string): void {
+        let deps: Changes = this.properties(node);
+        if (!deps.attributes) {
+            deps.attributes = new Set();
+        }
+        deps.attributes.add(attribute);
     }
 
-    public toString(): string {
-        return `InlineStyleSelector ${this.expression}${this.attrExpressionText} { ${this.declarationText} }`;
+    public addPseudoClass(node: T, pseudoClass: string): void {
+        let deps: Changes = this.properties(node);
+        if (!deps.pseudoClasses) {
+            deps.pseudoClasses = new Set();
+        }
+        deps.pseudoClasses.add(pseudoClass);
     }
-}
 
-export function applyInlineSyle(view: view.View, declarations: cssParser.Declaration[]) {
-    let localStyleSelector = new InlineStyleSelector(declarations);
-    localStyleSelector.apply(view);
+    private properties(node: T): Changes {
+        let set = this.changeMap.get(node);
+        if (!set) {
+            this.changeMap.set(node, set = {});
+        }
+        return set;
+    }
 }
diff --git a/tns-core-modules/ui/styling/style-scope.d.ts b/tns-core-modules/ui/styling/style-scope.d.ts
index 6828cf8fd2..429bb80295 100644
--- a/tns-core-modules/ui/styling/style-scope.d.ts
+++ b/tns-core-modules/ui/styling/style-scope.d.ts
@@ -1,23 +1,35 @@
 //@private
 declare module "ui/styling/style-scope" {
     import view = require("ui/core/view");
-    import cssSelector = require("ui/styling/css-selector");
     import cssParser = require("css");
-    import keyframeAnimation = require("ui/animation/keyframe-animation");
+    import {RuleSet, Node, SelectorCore, ChangeMap} from "ui/styling/css-selector";
+    import {KeyframeAnimationInfo} from "ui/animation/keyframe-animation";
+
+    export class CssState {
+        /**
+         * Re-evaluate the selectors and apply any changes to the underlying view.
+         */
+        public apply(): void;
+
+        /**
+         * Gets the static selectors that match the view and the dynamic selectors that may potentially match the view.
+         */
+        public changeMap: ChangeMap<view.View>;
+    }
 
     export class StyleScope {
         public css: string;
         public addCss(cssString: string, cssFileName: string): void;
 
-        public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): cssSelector.CssSelector[];
-        public static createSelectorsFromImports(tree: cssParser.SyntaxTree, keyframes: Object): cssSelector.CssSelector[];
+        public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): RuleSet[];
+        public static createSelectorsFromImports(tree: cssParser.SyntaxTree, keyframes: Object): RuleSet[];
         public ensureSelectors(): boolean;
 
         public applySelectors(view: view.View): void
-        public getVisualStates(view: view.View): Object;
+        public query(options: Node): SelectorCore[];
 
-        public removeSelectors(selectorExpression: string);
-        public getKeyframeAnimationWithName(animationName: string): keyframeAnimation.KeyframeAnimationInfo;
+        public getKeyframeAnimationWithName(animationName: string): KeyframeAnimationInfo;
+        public getAnimations(ruleset: RuleSet): KeyframeAnimationInfo[];
     }
 
     export function applyInlineSyle(view: view.View, style: string): void;
diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
index 365ad0043e..07d7913360 100644
--- a/tns-core-modules/ui/styling/style-scope.ts
+++ b/tns-core-modules/ui/styling/style-scope.ts
@@ -6,11 +6,18 @@ import application = require("application");
 import * as typesModule from "utils/types";
 import * as utilsModule from "utils/utils";
 import * as fileSystemModule from "file-system";
-import * as visualStateModule from "./visual-state";
+
 import keyframeAnimation = require("ui/animation/keyframe-animation");
 import cssAnimationParser = require("./css-animation-parser");
 import observable = require("ui/core/dependency-observable");
 
+import {convertString} from "utils/utils";
+import {RuleSet, SelectorsMap, SelectorCore, SelectorsMatch, ChangeMap } from "ui/styling/css-selector";
+import {StyleProperty, withStyleProperty} from "ui/styling/style-property";
+import {getSpecialPropertySetter} from "ui/builder/special-properties";
+
+const animationsSymbol: symbol = Symbol("animations");
+
 var types: typeof typesModule;
 function ensureTypes() {
     if (!types) {
@@ -32,24 +39,35 @@ function ensureFS() {
     }
 }
 
-var vs: typeof visualStateModule;
-function ensureVisualState() {
-    if (!vs) {
-        vs = require("./visual-state");
+var pattern: RegExp = /('|")(.*?)\1/;
+
+export class CssState {
+    constructor(private view: view.View, private match: SelectorsMatch<view.View>) {
     }
-}
 
-var pattern: RegExp = /('|")(.*?)\1/;
+    public get changeMap(): ChangeMap<view.View> {
+        return this.match.changeMap;
+    }
+
+    public apply(): void {
+        this.view.style._resetCssValues();
+        let matchingSelectors = this.match.selectors.filter(sel => sel.dynamic ? sel.match(this.view) : true);
+        matchingSelectors.forEach(s => applyDescriptors(this.view, s.ruleset));
+    }
+}
 
 export class StyleScope {
+
+    private _selectors: SelectorsMap;
+
     // caches all the visual states by the key of the visual state selectors
     private _statesByKey = {};
     private _viewIdToKey = {};
 
     private _css: string;
     private _cssFileName: string;
-    private _mergedCssSelectors: Array<cssSelector.CssSelector>;
-    private _localCssSelectors: Array<cssSelector.CssSelector> = [];
+    private _mergedCssSelectors: cssSelector.RuleSet[];
+    private _localCssSelectors: cssSelector.RuleSet[] = [];
     private _localCssSelectorVersion: number = 0;
     private _localCssSelectorsAppliedVersion: number = 0;
     private _applicationCssSelectorsAppliedVersion: number = 0;
@@ -77,6 +95,7 @@ export class StyleScope {
         this._reset();
 
         const parsedSelectors = StyleScope.createSelectorsFromCss(this._css, cssFileName, this._keyframes);
+
         if (append) {
             this._localCssSelectors.push.apply(this._localCssSelectors, parsedSelectors);
         } else {
@@ -87,15 +106,6 @@ export class StyleScope {
         this.ensureSelectors();
     }
 
-    public removeSelectors(selectorExpression: string) {
-        for (let i = this._mergedCssSelectors.length - 1; i >= 0; i--) {
-            let selector = this._mergedCssSelectors[i];
-            if (selector.expression === selectorExpression) {
-                this._mergedCssSelectors.splice(i, 1);
-            }
-        }
-    }
-
     public getKeyframeAnimationWithName(animationName: string): keyframeAnimation.KeyframeAnimationInfo {
         let keyframes = this._keyframes[animationName];
         if (keyframes !== undefined) {
@@ -106,13 +116,13 @@ export class StyleScope {
         return undefined;
     }
 
-    public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): cssSelector.CssSelector[] {
+    public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): cssSelector.RuleSet[] {
         try {
             let pageCssSyntaxTree = css ? cssParser.parse(css, { source: cssFileName }) : null;
-            let pageCssSelectors = new Array<cssSelector.CssSelector>();
+            let pageCssSelectors: cssSelector.RuleSet[] = [];
             if (pageCssSyntaxTree) {
-                pageCssSelectors = StyleScope._joinCssSelectorsArrays([pageCssSelectors, StyleScope.createSelectorsFromImports(pageCssSyntaxTree, keyframes)]);
-                pageCssSelectors = StyleScope._joinCssSelectorsArrays([pageCssSelectors, StyleScope.createSelectorsFromSyntaxTree(pageCssSyntaxTree, keyframes)]);
+                pageCssSelectors = pageCssSelectors.concat(StyleScope.createSelectorsFromImports(pageCssSyntaxTree, keyframes));
+                pageCssSelectors = pageCssSelectors.concat(StyleScope.createSelectorsFromSyntaxTree(pageCssSyntaxTree, keyframes));
             }
             return pageCssSelectors;
         } catch (e) {
@@ -120,12 +130,12 @@ export class StyleScope {
         }
     }
 
-    public static createSelectorsFromImports(tree: cssParser.SyntaxTree, keyframes: Object): cssSelector.CssSelector[] {
-        let selectors = new Array<cssSelector.CssSelector>();
+    public static createSelectorsFromImports(tree: cssParser.SyntaxTree, keyframes: Object): cssSelector.RuleSet[] {
+        let selectors: cssSelector.RuleSet[] = [];
         ensureTypes();
 
         if (!types.isNullOrUndefined(tree)) {
-            let imports = tree["stylesheet"]["rules"].filter(r=> r.type === "import");
+            let imports = tree["stylesheet"]["rules"].filter(r => r.type === "import");
 
             for (let i = 0; i < imports.length; i++) {
                 let importItem = imports[i]["import"];
@@ -148,7 +158,7 @@ export class StyleScope {
                             let file = fs.File.fromPath(fileName);
                             let text = file.readTextSync();
                             if (text) {
-                                selectors = StyleScope._joinCssSelectorsArrays([selectors, StyleScope.createSelectorsFromCss(text, fileName, keyframes)]);
+                                selectors = selectors.concat(StyleScope.createSelectorsFromCss(text, fileName, keyframes));
                             }
                         }
                     }
@@ -163,8 +173,8 @@ export class StyleScope {
         let toMerge = []
         if ((this._applicationCssSelectorsAppliedVersion !== application.cssSelectorVersion) ||
             (this._localCssSelectorVersion !== this._localCssSelectorsAppliedVersion) ||
-
             (!this._mergedCssSelectors)) {
+
             toMerge.push(application.cssSelectors);
             this._applicationCssSelectorsAppliedVersion = application.cssSelectorVersion;
             toMerge.push(this._localCssSelectors);
@@ -175,139 +185,41 @@ export class StyleScope {
         }
 
         if (toMerge.length > 0) {
-            this._mergedCssSelectors = StyleScope._joinCssSelectorsArrays(toMerge);
+            this._mergedCssSelectors = toMerge.filter(m => !!m).reduce((merged, next) => merged.concat(next), []);
             this._applyKeyframesOnSelectors();
-            return true;
         } else {
             return false;
         }
-    }
 
-    private static _joinCssSelectorsArrays(arrays: Array<Array<cssSelector.CssSelector>>): Array<cssSelector.CssSelector> {
-        let mergedResult = [];
-        let i;
-        for (i = 0; i < arrays.length; i++) {
-            if (arrays[i]) {
-                mergedResult.push.apply(mergedResult, arrays[i]);
-            }
-        }
-        ensureUtils();
-        mergedResult = utils.mergeSort(mergedResult, (a, b) => { return a.specificity - b.specificity; });
+        this._selectors = new SelectorsMap(this._mergedCssSelectors);
 
-        return mergedResult;
+        return true;
     }
 
-    public applySelectors(view: view.View) {
-        this.ensureSelectors();
-
-        view.style._beginUpdate();
-        let i;
-        let selector: cssSelector.CssSelector;
-        let matchedStateSelectors = new Array<cssSelector.CssVisualStateSelector>();
-
-        // Go trough all selectors - and directly apply all non-state selectors
-        for (i = 0; i < this._mergedCssSelectors.length; i++) {
-            selector = this._mergedCssSelectors[i];
-            if (selector.matches(view)) {
-                if (selector instanceof cssSelector.CssVisualStateSelector) {
-                    matchedStateSelectors.push(<cssSelector.CssVisualStateSelector>selector);
-                } else {
-                    selector.apply(view, observable.ValueSource.Css);
-                }
-            }
-        }
-
-        if (matchedStateSelectors.length > 0) {
-            // Create a key for all matched selectors for this element
-            let key: string = "";
-            matchedStateSelectors.forEach((s) => key += s.key + "|");
-
-            // Associate the view to the created key
-            this._viewIdToKey[view._domId] = key;
+    public applySelectors(view: view.View): void {
+        this.ensureSelectors(); 
 
-            // Create visual states for this key if there aren't already created
-            if (!this._statesByKey[key]) {
-                this._createVisualsStatesForSelectors(key, matchedStateSelectors);
-            }
-        }
+        let state = this._selectors.query(view);
 
-        view.style._endUpdate();
+        let previousState = view._cssState;
+        let nextState = new CssState(view, state);
+        view._cssState = nextState;
+        view._onCssStateChange(previousState, nextState);
     }
 
-    public getVisualStates(view: view.View): Object {
-        let key = this._viewIdToKey[view._domId];
-        if (key === undefined) {
-            return undefined;
-        }
-
-        return this._statesByKey[key];
+    public query(node: Node): SelectorCore[] {
+        this.ensureSelectors();
+        return this._selectors.query(node).selectors;
     }
 
-    private _createVisualsStatesForSelectors(key: string, matchedStateSelectors: Array<cssSelector.CssVisualStateSelector>) {
-        let i,
-            allStates = {},
-            stateSelector: cssSelector.CssVisualStateSelector;
-
-        this._statesByKey[key] = allStates;
-        ensureVisualState();
+    private static createSelectorsFromSyntaxTree(ast: cssParser.SyntaxTree, keyframes: Object): RuleSet[] {
+        let nodes = ast.stylesheet.rules;
+        nodes.filter(isKeyframe).forEach(node => keyframes[node.name] = node);
 
-        for (i = 0; i < matchedStateSelectors.length; i++) {
-            stateSelector = matchedStateSelectors[i];
+        let rulesets = cssSelector.fromAstNodes(nodes);
+        rulesets.forEach(rule => rule[animationsSymbol] = cssAnimationParser.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations));
 
-            let visualState = allStates[stateSelector.state];
-            if (!visualState) {
-                visualState = new vs.VisualState();
-                allStates[stateSelector.state] = visualState;
-            }
-
-            // add all stateSelectors instead of adding setters
-            if (stateSelector.animations && stateSelector.animations.length > 0) {
-                visualState.animatedSelectors.push(stateSelector);
-            }
-            else {
-                stateSelector.eachSetter((property, value) => {
-                    visualState.setters[property.name] = value;
-                });
-            }
-        }
-    }
-
-    private static createSelectorsFromSyntaxTree(ast: cssParser.SyntaxTree, keyframes: Object): Array<cssSelector.CssSelector> {
-        let result: Array<cssSelector.CssSelector> = [];
-        let rules = ast.stylesheet.rules;
-        let rule: cssParser.Rule;
-        let i;
-        let j;
-
-        // Create selectors form AST
-        for (i = 0; i < rules.length; i++) {
-            rule = rules[i];
-            // Skip comment nodes.
-            if (rule.type === "rule") {
-
-                // Filter comment nodes.
-                let filteredDeclarations = [];
-                if (rule.declarations) {
-                    for (j = 0; j < rule.declarations.length; j++) {
-                        let declaration = rule.declarations[j];
-                        if (declaration.type === "declaration") {
-                            filteredDeclarations.push({
-                                property: declaration.property.toLowerCase(),
-                                value: declaration.value
-                            });
-                        }
-                    }
-                }
-                for (j = 0; j < rule.selectors.length; j++) {
-                    result.push(cssSelector.createSelector(rule.selectors[j], filteredDeclarations));
-                }
-            }
-            else if (rule.type === "keyframes") {
-                keyframes[(<any>rule).name] = rule;
-            }
-        }
-
-        return result;
+        return rulesets;
     }
 
     private _reset() {
@@ -317,9 +229,10 @@ export class StyleScope {
 
     private _applyKeyframesOnSelectors() {
         for (let i = this._mergedCssSelectors.length - 1; i >= 0; i--) {
-            let selector = this._mergedCssSelectors[i];
-            if (selector.animations !== undefined) {
-                for (let animation of selector.animations) {
+            let ruleset = this._mergedCssSelectors[i];
+            let animations = ruleset[animationsSymbol];
+            if (animations !== undefined) {
+                for (let animation of animations) {
                     let keyframe = this._keyframes[animation.name];
                     if (keyframe !== undefined) {
                         animation.keyframes = cssAnimationParser.CssAnimationParser.keyframesArrayFromCSS(keyframe);
@@ -328,14 +241,78 @@ export class StyleScope {
             }
         }
     }
+
+    public getAnimations(ruleset: RuleSet): keyframeAnimation.KeyframeAnimationInfo[] {
+        return ruleset[animationsSymbol];
+    }
 }
 
 export function applyInlineSyle(view: view.View, style: string) {
     try {
         let syntaxTree = cssParser.parse("local { " + style + " }", undefined);
-        let filteredDeclarations = syntaxTree.stylesheet.rules[0].declarations.filter((val, i, arr) => { return val.type === "declaration" });
-        cssSelector.applyInlineSyle(view, filteredDeclarations);
+        let filteredDeclarations = syntaxTree.stylesheet.rules.filter(isRule)[0].declarations.filter(isDeclaration);
+        applyInlineStyle(view, filteredDeclarations);
     } catch (ex) {
         trace.write("Applying local style failed: " + ex, trace.categories.Error, trace.messageType.error);
     }
 }
+
+function isRule(node: cssParser.Node): node is cssParser.Rule {
+    return node.type === "rule";
+}
+function isDeclaration(node: cssParser.Node): node is cssParser.Declaration {
+    return node.type === "declaration";
+}
+function isKeyframe(node: cssParser.Node): node is cssParser.Keyframes {
+    return node.type === "keyframes";
+}
+
+function applyDescriptors(view: view.View, ruleset: RuleSet): void {
+    let modifier = observable.ValueSource.Css;
+
+    ruleset.declarations.forEach(d => withStyleProperty(d.property, d.value, (property, value) => {
+        if (types.isString(property)) {
+            const propertyName = <string>property;
+            let attrHandled = false;
+            let specialSetter = getSpecialPropertySetter(propertyName);
+
+            if (!attrHandled && specialSetter) {
+                specialSetter(view, value);
+                attrHandled = true;
+            }
+
+            if (!attrHandled && propertyName in view) {
+                view[propertyName] = convertString(value);
+            }
+        } else {
+            const resolvedProperty = <StyleProperty>property;
+            try {
+                view.style._setValue(resolvedProperty, value, modifier);
+            } catch (ex) {
+                if (trace.enabled) {
+                    trace.write("Error setting property: " + resolvedProperty.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error);
+                }
+            }
+        }
+    }));
+
+    let ruleAnimations: keyframeAnimation.KeyframeAnimationInfo[] = ruleset[animationsSymbol];
+    if (ruleAnimations && view.isLoaded && view._nativeView !== undefined) {
+        for (let animationInfo of ruleAnimations) {
+            let animation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo, modifier);
+            if (animation) {
+                view._registerAnimation(animation);
+                animation.play(view)
+                    .then(() => { view._unregisterAnimation(animation);  })
+                    .catch((e) => { view._unregisterAnimation(animation); });
+            }
+        }
+    }
+}
+
+function applyInlineStyle(view: view.View, declarations: cssSelector.Declaration[]): void {
+    declarations.forEach(d => withStyleProperty(d.property, d.value, (property, value) => {
+        const resolvedProperty = <StyleProperty>property;
+        view.style._setValue(resolvedProperty, value, observable.ValueSource.Local);
+    }));
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts
index 34a6a3b5c7..a355543580 100644
--- a/tns-core-modules/ui/styling/styling.d.ts
+++ b/tns-core-modules/ui/styling/styling.d.ts
@@ -307,24 +307,4 @@
          */
         export function visibilityConverter(cssValue: any): number;
     }
-
-    /**
-     * Encapsulates visual states names.
-     */
-    module visualStates {
-        /**
-         * The normal visual state.
-         */
-        export var Normal: string;
-
-        /**
-         * The hovered visual state.
-         */
-        export var Hovered: string;
-
-        /**
-         * The pressed visual state.
-         */
-        export var Pressed: string;
-    }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/styling.ts b/tns-core-modules/ui/styling/styling.ts
index 724b73e52e..9dcc55213e 100644
--- a/tns-core-modules/ui/styling/styling.ts
+++ b/tns-core-modules/ui/styling/styling.ts
@@ -1,6 +1,5 @@
 import styleModule = require("./style");
 import stylePropertyModule = require("./style-property");
-import visualStateConstatnsModule = require("./visual-state-constants");
 import convertersModule = require("./converters");
 
 // Exports form style-property module.
@@ -30,10 +29,3 @@ export module converters {
     export var visibilityConverter = convertersModule.visibilityConverter; 
 
 };
-
-// Exports form visual states module
-export module visualStates {
-    export var Normal = visualStateConstatnsModule.Normal;
-    export var Hovered = visualStateConstatnsModule.Hovered;
-    export var Pressed = visualStateConstatnsModule.Pressed; 
-};
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/visual-state-constants.d.ts b/tns-core-modules/ui/styling/visual-state-constants.d.ts
deleted file mode 100644
index 77cbf12b98..0000000000
--- a/tns-core-modules/ui/styling/visual-state-constants.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-declare module "ui/styling/visual-state-constants" {
-    /**
-     * Denotes Normal state of an UIControl.
-     */
-    export var Normal: string;
-
-    /**
-     * Denotes Hovered state of an UIControl.
-     */
-    export var Hovered: string;
-
-    /**
-     * Denotes Pressed state of an UIControl.
-     */
-    export var Pressed: string; 
-} 
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/visual-state-constants.ts b/tns-core-modules/ui/styling/visual-state-constants.ts
deleted file mode 100644
index 7f095a974b..0000000000
--- a/tns-core-modules/ui/styling/visual-state-constants.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export var Normal = "normal";
-export var Hovered = "hovered";
-export var Pressed = "pressed";
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/visual-state.ts b/tns-core-modules/ui/styling/visual-state.ts
deleted file mode 100644
index e0e77fcdf7..0000000000
--- a/tns-core-modules/ui/styling/visual-state.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import viewModule = require("ui/core/view");
-import observable = require("ui/core/dependency-observable");
-import styleProperty = require("ui/styling/style-property");
-import cssSelector = require("ui/styling/css-selector");
-import * as visualStateConstants from "ui/styling/visual-state-constants";
-
-export class VisualState {
-    private _setters: {}; // use css selector instead
-    private _animatedSelectors: cssSelector.CssVisualStateSelector[];
-
-    constructor() {
-        this._setters = {};
-        this._animatedSelectors = [];
-    }
-
-    get setters(): {} {
-        return this._setters;
-    }
-
-    get animatedSelectors(): cssSelector.CssVisualStateSelector[] {
-        return this._animatedSelectors;
-    }
-}
-
-/**
- *
- */
-export function goToState(view: viewModule.View, state: string): string {
-    let root = <any>view.page;
-    if (!root) {
-        return undefined;
-    }
-
-    //TODO: this of optimization
-    let allStates = root._getStyleScope().getVisualStates(view);
-    if (!allStates) {
-        return undefined;
-    }
-
-    // logic here is:
-    // 1. Verify the new state, whether we have setters for it and rollback to Normal(default) if not.
-    // 2. If the new visual state is the same as the current one, do nothing
-    // 3. Else, remove the visual state value for all the properties from the current state that are not present in the new one
-    // 4. Apply all the properties from the new state.
-
-    // Step 1
-    if (!(state in allStates)) {
-        // TODO: Directly go to normal?
-        state = visualStateConstants.Normal;
-    }
-
-    // Step 2
-    if (state !== view.visualState) {
-        let newState: VisualState = allStates[state];
-        let oldState: VisualState = allStates[view.visualState];
-
-        // Step 3
-        resetProperties(view, oldState, newState);
-
-        // Step 4
-        applyProperties(view, newState);
-    }
-
-    return state;
-}
-
-function resetProperties(view: viewModule.View, oldState: VisualState, newState: VisualState) {
-    if (!oldState) {
-        return;
-    }
-
-    let property: styleProperty.Property;
-
-    for (let name in oldState.setters) {
-        if (newState && (name in newState.setters)) {
-            // Property will be altered by the new state, no need to reset it.
-            continue;
-        }
-
-        property = styleProperty.getPropertyByName(name);
-        if (property) {
-            view.style._resetValue(property, observable.ValueSource.VisualState);
-        }
-    }
-
-    view._unregisterAllAnimations();
-
-    for (let selector of oldState.animatedSelectors) {
-        for (let animationInfo of selector.animations) {
-            for (let keyframe of animationInfo.keyframes) {
-                for (let declaration of keyframe.declarations) {
-                    property = styleProperty.getPropertyByName(declaration.property);
-                    if (property) {
-                        view.style._resetValue(property, observable.ValueSource.VisualState);
-                    }
-                }
-            }
-        }
-    }
-}
-
-function applyProperties(view: viewModule.View, state: VisualState) {
-    if (!state) {
-        return;
-    }
-
-    let property: styleProperty.Property;
-
-    for (let name in state.setters) {
-        property = styleProperty.getPropertyByName(name);
-        if (property) {
-            view.style._setValue(property, state.setters[name], observable.ValueSource.VisualState);
-        }
-    }
-
-    for (let selector of state.animatedSelectors) {
-        selector.apply(view, observable.ValueSource.VisualState);
-    }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 114b54b428..778f12cc4a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,4 @@
 {
-    "version": "1.6.2",
     "compilerOptions": {
         "noEmitOnError": true,
         "noEmitHelpers": true,

From 48a57bdaf3a8d1c252eec9651346f93099ed0871 Mon Sep 17 00:00:00 2001
From: Nedyalko Nikolov <nedyalko.nikolov@telerik.com>
Date: Mon, 18 Jul 2016 17:34:17 +0300
Subject: [PATCH 05/21] Creating observables from a nested json.

---
 tests/app/ui/bindable-tests.ts                | 42 +++++++++++++++++++
 .../data/observable/observable.ts             |  3 ++
 2 files changed, 45 insertions(+)

diff --git a/tests/app/ui/bindable-tests.ts b/tests/app/ui/bindable-tests.ts
index 219d5eaae0..841c9b4c28 100644
--- a/tests/app/ui/bindable-tests.ts
+++ b/tests/app/ui/bindable-tests.ts
@@ -1261,4 +1261,46 @@ export function test_only_Bindable_BindingContext_Null_DoesNotThrow() {
         obj.bind(options);
         obj.bindingContext = new observable.Observable({ a: "b" });
         obj.bindingContext = null;
+}
+
+export function test_Observable_from_nested_json_binds_correctly() {
+    let expectedValue = "Test";
+    var model = new observable.Observable({
+        "firstObject": {
+            "secondObject": {
+                "dummyProperty": "text"
+            }
+        }
+    });
+
+    var obj = new bindable.Bindable();
+    obj.bind({
+        sourceProperty: "firstObject.secondObject.dummyProperty",
+        targetProperty: "test"
+    }, model);
+
+    model.get("firstObject").get("secondObject").set("dummyProperty", expectedValue);
+
+    TKUnit.assertEqual(obj.get("test"), expectedValue);
+}
+
+export function test_Observable_from_nested_json_binds_correctly_when_upper_object_is_changed() {
+    let expectedValue = "Test";
+    var model = new observable.Observable({
+        "firstObject": {
+            "secondObject": {
+                "dummyProperty": "text"
+            }
+        }
+    });
+
+    var obj = new bindable.Bindable();
+    obj.bind({
+        sourceProperty: "firstObject.secondObject.dummyProperty",
+        targetProperty: "test"
+    }, model);
+
+    model.get("firstObject").set("secondObject", new observable.Observable({"dummyProperty": expectedValue}));
+
+    TKUnit.assertEqual(obj.get("test"), expectedValue);
 }
\ No newline at end of file
diff --git a/tns-core-modules/data/observable/observable.ts b/tns-core-modules/data/observable/observable.ts
index 1a144680c4..1ad93a2f2b 100644
--- a/tns-core-modules/data/observable/observable.ts
+++ b/tns-core-modules/data/observable/observable.ts
@@ -56,6 +56,9 @@ export class Observable implements definition.Observable {
             this._map = new Map<string, Object>();
             for (var prop in json) {
                 if (json.hasOwnProperty(prop)) {
+                    if (!Array.isArray(json[prop]) && typeof json[prop] === 'object') {
+                        json[prop] = new Observable(json[prop]);
+                    }
                     this._defineNewProperty(prop);
                     this.set(prop, json[prop]);
                 }

From 39050861f395e406362b90c669ec6274eed5f704 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Tue, 19 Jul 2016 11:42:56 +0300
Subject: [PATCH 06/21] Add NavigationEntry.bindingContext property

Resolves Issue  #731
---
 .gitignore                                |  1 -
 .vscode/launch.json                       | 85 +++++++++++++++++++++++
 .vscode/tasks.json                        | 10 +++
 apps/app/cuteness.io/details-page.ts      | 10 ---
 apps/app/cuteness.io/details-page.xml     |  2 +-
 apps/app/cuteness.io/main-page.ts         |  2 +-
 tests/app/ui/page/page-tests-common.ts    |  6 +-
 tns-core-modules/ui/frame/frame-common.ts |  2 +-
 tns-core-modules/ui/frame/frame.d.ts      |  5 ++
 tns-core-modules/ui/page/page-common.ts   |  6 +-
 tns-core-modules/ui/page/page.d.ts        |  3 +-
 tns-core-modules/ui/page/page.ios.ts      |  2 +-
 12 files changed, 112 insertions(+), 22 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 .vscode/tasks.json
 delete mode 100644 apps/app/cuteness.io/details-page.ts

diff --git a/.gitignore b/.gitignore
index 4210ef7192..32a56d53b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@
 .sublime-grunt.cache
 tscommand*.tmp.txt
 .tscache
-.vscode
 
 node_modules/
 dist/
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000000..3155f4945e
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,85 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch on iOS Device",
+			"type": "nativescript",
+			"platform": "ios",
+			"request": "launch",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": false
+		},
+		{
+			"name": "Attach on iOS Device",
+			"type": "nativescript",
+			"platform": "ios",
+			"request": "attach",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": false
+		},
+		{
+			"name": "Launch on iOS Emulator",
+			"type": "nativescript",
+			"platform": "ios",
+			"request": "launch",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": true
+		},
+		{
+			"name": "Attach on iOS Emulator",
+			"type": "nativescript",
+			"platform": "ios",
+			"request": "attach",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": true
+		},
+		{
+			"name": "Launch on Android Device",
+			"type": "nativescript",
+			"platform": "android",
+			"request": "launch",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": false
+		},
+		{
+			"name": "Launch on Android Emulator",
+			"type": "nativescript",
+			"platform": "android",
+			"request": "launch",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": true
+		},
+		{
+			"name": "Attach on Android Device",
+			"type": "nativescript",
+			"platform": "android",
+			"request": "attach",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": false
+		},
+		{
+			"name": "Attach on Android Emulator",
+			"type": "nativescript",
+			"platform": "android",
+			"request": "attach",
+			"appRoot": "${workspaceRoot}/tests",
+			"sourceMaps": true,
+			"diagnosticLogging": false,
+			"emulator": true
+		}
+	]
+}
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000000..3dcb379981
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,10 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=733558
+	// for the documentation about the tasks.json format
+	"version": "0.1.0",
+	"command": "tsc",
+	"isShellCommand": true,
+	"args": ["-p", "."],
+	"showOutput": "always",
+	"problemMatcher": "$tsc"
+}
\ No newline at end of file
diff --git a/apps/app/cuteness.io/details-page.ts b/apps/app/cuteness.io/details-page.ts
deleted file mode 100644
index 6f395cc00b..0000000000
--- a/apps/app/cuteness.io/details-page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {Page} from "ui/page";
-import {EventData as ObservableEventData} from "data/observable";
-
-// Event handler for Page "navigatedTo" event attached in details-page.xml
-export function pageNavigatedTo(args: ObservableEventData) {
-    // Get the event sender
-    var page = <Page>args.object;
-
-    page.bindingContext = page.navigationContext;
-}
diff --git a/apps/app/cuteness.io/details-page.xml b/apps/app/cuteness.io/details-page.xml
index 3157ce42dc..7a45ae201b 100644
--- a/apps/app/cuteness.io/details-page.xml
+++ b/apps/app/cuteness.io/details-page.xml
@@ -1,4 +1,4 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatedTo="pageNavigatedTo">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
   <GridLayout rows="*, auto">
     <ScrollView>
       <StackLayout>
diff --git a/apps/app/cuteness.io/main-page.ts b/apps/app/cuteness.io/main-page.ts
index 3c75152099..4e50176aec 100644
--- a/apps/app/cuteness.io/main-page.ts
+++ b/apps/app/cuteness.io/main-page.ts
@@ -23,7 +23,7 @@ export function listViewItemTap(args: ListViewItemEventData) {
     // Navigate to the details page with context set to the data item for specified index
     topmostFrame().navigate({
         moduleName: "cuteness.io/details-page",
-        context: appViewModel.redditItems.getItem(args.index)
+        bindingContext: appViewModel.redditItems.getItem(args.index)
     });
 }
 
diff --git a/tests/app/ui/page/page-tests-common.ts b/tests/app/ui/page/page-tests-common.ts
index 8bc07ebb0a..6475eba21e 100644
--- a/tests/app/ui/page/page-tests-common.ts
+++ b/tests/app/ui/page/page-tests-common.ts
@@ -231,7 +231,7 @@ export function test_NavigateTo_WithContext() {
 }
 
 //https://github.com/NativeScript/NativeScript/issues/731
-export function test_BindingContext_Becomes_NavigationContext_When_NavigatingTo() {
+export function test_NavigateTo_WithBindingContext() {
     let currentPage = frameModule.topmost().currentPage;
     let testPage: Page;
     let bindingContext;
@@ -244,7 +244,7 @@ export function test_BindingContext_Becomes_NavigationContext_When_NavigatingTo(
     };
     let navEntry = {
         create: pageFactory,
-        context: "This is the navigation context",
+        bindingContext: "bindng context",
         animated: false
     };
     let topFrame = frameModule.topmost();
@@ -252,7 +252,7 @@ export function test_BindingContext_Becomes_NavigationContext_When_NavigatingTo(
     TKUnit.waitUntilReady(() => topFrame.currentPage !== null && topFrame.currentPage !== currentPage && testPage.isLayoutValid);
     helper.goBack();
     
-    TKUnit.assertEqual(bindingContext, navEntry.context, "The Page's bindingContext should be set automatically to the navigation context when navigating to.");
+    TKUnit.assertEqual(bindingContext, navEntry.bindingContext, "The Page's bindingContext should be equal to the NavigationEntry.bindingContext property when navigating to.");
 }
 
 export function test_FrameBackStack_WhenNavigatingForwardAndBack() {
diff --git a/tns-core-modules/ui/frame/frame-common.ts b/tns-core-modules/ui/frame/frame-common.ts
index b24984897a..ad5e6fc5da 100644
--- a/tns-core-modules/ui/frame/frame-common.ts
+++ b/tns-core-modules/ui/frame/frame-common.ts
@@ -336,7 +336,7 @@ export class Frame extends CustomLayoutView implements definition.Frame {
             this.currentPage.onNavigatingFrom(isBack);
         }
 
-        backstackEntry.resolvedPage.onNavigatingTo(backstackEntry.entry.context, isBack);
+        backstackEntry.resolvedPage.onNavigatingTo(backstackEntry.entry.context, isBack, backstackEntry.entry.bindingContext);
     }
 
     public get animated(): boolean {
diff --git a/tns-core-modules/ui/frame/frame.d.ts b/tns-core-modules/ui/frame/frame.d.ts
index 430e064521..33dcdb9f87 100644
--- a/tns-core-modules/ui/frame/frame.d.ts
+++ b/tns-core-modules/ui/frame/frame.d.ts
@@ -162,6 +162,11 @@ declare module "ui/frame" {
          */
         context?: any;
 
+        /**
+         * An object to become the binding context of the page navigating to. Optional.
+         */
+        bindingContext?: any;
+
         /**
          * True to navigate to the new Page using animated transitions, false otherwise.
          */
diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts
index e85b228c69..08e891ee62 100644
--- a/tns-core-modules/ui/page/page-common.ts
+++ b/tns-core-modules/ui/page/page-common.ts
@@ -200,12 +200,12 @@ export class Page extends ContentView implements dts.Page {
         };
     }
 
-    public onNavigatingTo(context: any, isBackNavigation: boolean) {
+    public onNavigatingTo(context: any, isBackNavigation: boolean, bindingContext: any) {
         this._navigationContext = context;
         
         //https://github.com/NativeScript/NativeScript/issues/731
-        if (!isBackNavigation && !types.isNullOrUndefined(context)){
-            this.bindingContext = context;
+        if (!isBackNavigation && !types.isNullOrUndefined(bindingContext)){
+            this.bindingContext = bindingContext;
         }
         this.notify(this.createNavigatedData(Page.navigatingToEvent, isBackNavigation));
     }
diff --git a/tns-core-modules/ui/page/page.d.ts b/tns-core-modules/ui/page/page.d.ts
index 4ff7c9cddb..34f9d8e324 100644
--- a/tns-core-modules/ui/page/page.d.ts
+++ b/tns-core-modules/ui/page/page.d.ts
@@ -227,8 +227,9 @@ declare module "ui/page" {
          * A method called before navigating to the page.
          * @param context - The data passed to the page through the NavigationEntry.context property.
          * @param isBackNavigation - True if the Page is being navigated from using the Frame.goBack() method, false otherwise.
+         * @param bindingContext - An object to become the binding context of the page navigating to.
          */
-        onNavigatingTo(context: any, isBackNavigation: boolean): void;
+        onNavigatingTo(context: any, isBackNavigation: boolean, bindingContext: any): void;
 
         /**
          * A method called after navigated to the page.
diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
index fed5f93172..ed90002daf 100644
--- a/tns-core-modules/ui/page/page.ios.ts
+++ b/tns-core-modules/ui/page/page.ios.ts
@@ -129,7 +129,7 @@ class UIViewControllerImpl extends UIViewController {
         // Don't raise event if currentPage was showing modal page.
         if (!page._presentedViewController && newEntry && (!frame || frame.currentPage !== page)) {
             let isBack = isBackNavigation(page, newEntry)
-            page.onNavigatingTo(newEntry.entry.context, isBack);
+            page.onNavigatingTo(newEntry.entry.context, isBack, newEntry.entry.bindingContext);
         }
 
         if (frame) {

From ffec9c3ad617132d3415abcc3f62930c6f0a85d9 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Tue, 19 Jul 2016 13:22:52 +0300
Subject: [PATCH 07/21] Make the new bindingContext parameter optional.

---
 tns-core-modules/ui/page/page-common.ts | 2 +-
 tns-core-modules/ui/page/page.d.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts
index 08e891ee62..0a3f5f40ac 100644
--- a/tns-core-modules/ui/page/page-common.ts
+++ b/tns-core-modules/ui/page/page-common.ts
@@ -200,7 +200,7 @@ export class Page extends ContentView implements dts.Page {
         };
     }
 
-    public onNavigatingTo(context: any, isBackNavigation: boolean, bindingContext: any) {
+    public onNavigatingTo(context: any, isBackNavigation: boolean, bindingContext?: any) {
         this._navigationContext = context;
         
         //https://github.com/NativeScript/NativeScript/issues/731
diff --git a/tns-core-modules/ui/page/page.d.ts b/tns-core-modules/ui/page/page.d.ts
index 34f9d8e324..ff1e791fb5 100644
--- a/tns-core-modules/ui/page/page.d.ts
+++ b/tns-core-modules/ui/page/page.d.ts
@@ -227,9 +227,9 @@ declare module "ui/page" {
          * A method called before navigating to the page.
          * @param context - The data passed to the page through the NavigationEntry.context property.
          * @param isBackNavigation - True if the Page is being navigated from using the Frame.goBack() method, false otherwise.
-         * @param bindingContext - An object to become the binding context of the page navigating to.
+         * @param bindingContext - An object to become the binding context of the page navigating to. Optional.
          */
-        onNavigatingTo(context: any, isBackNavigation: boolean, bindingContext: any): void;
+        onNavigatingTo(context: any, isBackNavigation: boolean, bindingContext?: any): void;
 
         /**
          * A method called after navigated to the page.

From e40a42f728217ce16d26aa5f0929a3b9e97b1463 Mon Sep 17 00:00:00 2001
From: SvetoslavTsenov <tsenov.svetoslav@gmail.com>
Date: Tue, 19 Jul 2016 13:28:29 +0300
Subject: [PATCH 08/21] Add custom fonts page

---
 apps/app/ui-tests-app/font/main-page.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/app/ui-tests-app/font/main-page.ts b/apps/app/ui-tests-app/font/main-page.ts
index 606c104111..d60a3445a8 100644
--- a/apps/app/ui-tests-app/font/main-page.ts
+++ b/apps/app/ui-tests-app/font/main-page.ts
@@ -16,7 +16,8 @@ export function pageLoaded(args: EventData) {
     examples.set("fontfield", "font/text-field");
     examples.set("fontview", "font/text-view");
     examples.set("nordic", "nordic/nordic");
-
+    examples.set("customfonts", "font/custom-fonts");
+    
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;
 }

From a481fa9808934297c3dd06bf50a23bfbd4892c3d Mon Sep 17 00:00:00 2001
From: Nedyalko Nikolov <nedyalko.nikolov@telerik.com>
Date: Tue, 19 Jul 2016 14:37:10 +0300
Subject: [PATCH 09/21] Mark text property as special and set it with a string
 comming from builder.

---
 tests/app/xml-declaration/xml-declaration-tests.ts | 12 ++++++++++++
 tns-core-modules/ui/core/view-common.ts            |  3 +++
 2 files changed, 15 insertions(+)

diff --git a/tests/app/xml-declaration/xml-declaration-tests.ts b/tests/app/xml-declaration/xml-declaration-tests.ts
index bbf7c6a855..01ab45c4b3 100644
--- a/tests/app/xml-declaration/xml-declaration-tests.ts
+++ b/tests/app/xml-declaration/xml-declaration-tests.ts
@@ -900,3 +900,15 @@ export function test_hasSourceCodeLocations() {
     var labelSource = Source.get(label);
     TKUnit.assertEqual(labelSource.toString(), "file:///app/" + basePath + "examples/test-page.xml:3:5");
 }
+
+export function test_Setting_digits_for_text_Label_is_not_converted_to_number() {
+    var p = <Page>builder.parse('<Page><Label id="testLabel" text="01234"/></Page>');
+    var testLabel = <Label>p.getViewById("testLabel");
+    TKUnit.assertEqual(testLabel.text, "01234");
+}
+
+export function test_Setting_digits_for_text_Button_is_not_converted_to_number() {
+    var p = <Page>builder.parse('<Page><Button id="testButton" text="01234"/></Page>');
+    var testButton = <Button>p.getViewById("testButton");
+    TKUnit.assertEqual(testButton.text, "01234");
+}
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 3e39b04800..6d29881f63 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -29,6 +29,9 @@ function ensureVisualState() {
 registerSpecialProperty("class", (instance: definition.View, propertyValue: string) => {
     instance.className = propertyValue;
 });
+registerSpecialProperty("text", (instance, propertyValue) => {
+    instance.set("text", propertyValue);
+});
 
 function getEventOrGestureName(name: string): string {
     return name.indexOf("on") === 0 ? name.substr(2, name.length - 2) : name;

From 116bc26dc10e155f75b74bb2d0c45419e77c28be Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Tue, 19 Jul 2016 10:44:16 +0300
Subject: [PATCH 10/21] Add iOS-specific known folders to fs.knownFolders

---
 apps/tsconfig.json                            |   3 +-
 tests/app/file-system-tests.ts                |  34 +++++
 tests/tsconfig.json                           |   3 +-
 .../file-system/file-system-access.ios.ts     |   9 +-
 tns-core-modules/file-system/file-system.d.ts |  45 +++++++
 tns-core-modules/file-system/file-system.ts   | 121 ++++++++++++++++++
 tsconfig.json                                 |   3 +-
 7 files changed, 209 insertions(+), 9 deletions(-)

diff --git a/apps/tsconfig.json b/apps/tsconfig.json
index 5d13c12c4b..a217a060d6 100644
--- a/apps/tsconfig.json
+++ b/apps/tsconfig.json
@@ -8,7 +8,8 @@
         "noImplicitAny": false,
         "noImplicitUseStrict": true,
         "experimentalDecorators": true,
-        "diagnostics": true
+        "diagnostics": true,
+        "sourceMap": true
     },
     "exclude": [
         "node_modules",
diff --git a/tests/app/file-system-tests.ts b/tests/app/file-system-tests.ts
index bf2638aabb..ff44bd56d0 100644
--- a/tests/app/file-system-tests.ts
+++ b/tests/app/file-system-tests.ts
@@ -218,6 +218,40 @@ export var testGetKnownFolders = function () {
     // << file-system-known-folders
 };
 
+function _testIOSSpecificKnownFolder(knownFolderName: string){
+    let knownFolder: fs.Folder;
+    let createdFile: fs.File;
+    let testFunc = function testFunc(){
+        knownFolder = fs.knownFolders.ios[knownFolderName]();
+        createdFile = knownFolder.getFile("createdFile");
+        createdFile.writeTextSync("some text");
+    };
+    if (platform.isIOS){
+        testFunc();
+        TKUnit.assertNotNull(knownFolder, `Could not retrieve the ${knownFolderName} known folder.`);
+        TKUnit.assertTrue(knownFolder.isKnown, `The ${knownFolderName} folder should have its "isKnown" property set to true.`);
+        TKUnit.assertNotNull(createdFile, `Could not create a new file in the ${knownFolderName} known folder.`);
+        TKUnit.assertTrue(fs.File.exists(createdFile.path), `Could not create a new file in the ${knownFolderName} known folder.`);
+        TKUnit.assertEqual(createdFile.readTextSync(), "some text", `The contents of the new file created in the ${knownFolderName} known folder are not as expected.`);
+    }
+    else {
+        TKUnit.assertThrows(testFunc, 
+        `Trying to retrieve the ${knownFolderName} known folder on a platform different from iOS should throw!`,
+        `The "${knownFolderName}" known folder is available on iOS only!`);
+    }
+}
+
+export var testIOSSpecificKnownFolders = function () {
+    _testIOSSpecificKnownFolder("library");    
+    _testIOSSpecificKnownFolder("developer");    
+    _testIOSSpecificKnownFolder("desktop");    
+    _testIOSSpecificKnownFolder("downloads");    
+    _testIOSSpecificKnownFolder("movies");    
+    _testIOSSpecificKnownFolder("music");    
+    _testIOSSpecificKnownFolder("pictures");    
+    _testIOSSpecificKnownFolder("sharedPublic");    
+}
+
 export var testGetEntities = function () {
     // >> file-system-folders-content
     var documents = fs.knownFolders.documents();
diff --git a/tests/tsconfig.json b/tests/tsconfig.json
index 5d13c12c4b..a217a060d6 100644
--- a/tests/tsconfig.json
+++ b/tests/tsconfig.json
@@ -8,7 +8,8 @@
         "noImplicitAny": false,
         "noImplicitUseStrict": true,
         "experimentalDecorators": true,
-        "diagnostics": true
+        "diagnostics": true,
+        "sourceMap": true
     },
     "exclude": [
         "node_modules",
diff --git a/tns-core-modules/file-system/file-system-access.ios.ts b/tns-core-modules/file-system/file-system-access.ios.ts
index f562c073f6..8838f41ee6 100644
--- a/tns-core-modules/file-system/file-system-access.ios.ts
+++ b/tns-core-modules/file-system/file-system-access.ios.ts
@@ -5,13 +5,10 @@ import * as utilsModule from "utils/utils";
 // TODO: Check whether we need try/catch blocks for the iOS implementation
 
 export class FileSystemAccess {
-    //private keyFileType = "NSFileType";
-    //private keyReadonly = "NSFileImmutable";
-    //private NSUTF8StringEncoding = 4;
     private keyModificationTime = "NSFileModificationDate";
-    private documentDir = 9;
-    private cachesDir = 13;
-    private userDomain = 1;
+    private userDomain = NSSearchPathDirectory.NSApplicationDirectory; //1
+    private documentDir = NSSearchPathDirectory.NSDocumentDirectory; //9
+    private cachesDir = NSSearchPathDirectory.NSCachesDirectory; //13
 
     public getLastModified(path: string): Date {
         var fileManager = NSFileManager.defaultManager();
diff --git a/tns-core-modules/file-system/file-system.d.ts b/tns-core-modules/file-system/file-system.d.ts
index 8b1169b1eb..d09832d1bb 100644
--- a/tns-core-modules/file-system/file-system.d.ts
+++ b/tns-core-modules/file-system/file-system.d.ts
@@ -208,6 +208,51 @@ declare module "file-system" {
          * iOS - this folder is read-only and contains the app and all its resources.
          */
         export function currentApp(): Folder;
+        
+        /**
+         * Contains iOS-specific known folders.
+         */
+        module ios {
+            /**
+             * Gets the NSLibraryDirectory.
+             */
+            export function library(): Folder;
+            
+            /**
+             * Gets the NSDeveloperDirectory.
+             */
+            export function developer(): Folder;
+            
+            /**
+             * Gets the NSDesktopDirectory.
+             */
+            export function desktop(): Folder;
+            
+            /**
+             * Gets the NSDownloadsDirectory.
+             */
+            export function downloads(): Folder;
+            
+            /**
+             * Gets the NSMoviesDirectory.
+             */
+            export function movies(): Folder;
+            
+            /**
+             * Gets the NSMusicDirectory.
+             */
+            export function music(): Folder;
+            
+            /**
+             * Gets the NSPicturesDirectory.
+             */
+            export function pictures(): Folder;
+            
+            /**
+             * Gets the NSSharedPublicDirectory.
+             */
+            export function sharedPublic(): Folder;
+        } 
     }
 
     /**
diff --git a/tns-core-modules/file-system/file-system.ts b/tns-core-modules/file-system/file-system.ts
index 3e6afe7de2..58c5f96dbb 100644
--- a/tns-core-modules/file-system/file-system.ts
+++ b/tns-core-modules/file-system/file-system.ts
@@ -1,4 +1,5 @@
 import file_access_module = require("file-system/file-system-access");
+import * as platformModule from "platform";
 
 // The FileSystemAccess implementation, used through all the APIs.
 var fileAccess;
@@ -10,6 +11,13 @@ var getFileAccess = function (): file_access_module.FileSystemAccess {
     return fileAccess;
 };
 
+let platform: typeof platformModule;
+function ensurePlatform() {
+    if (!platform) {
+        platform = require("platform");
+    }
+}
+
 // we are defining these as private variables within the IO scope and will use them to access the corresponding properties for each FSEntity instance.
 // this allows us to encapsulate (hide) the explicit property setters and force the users go through the exposed APIs to receive FSEntity instances.
 var nameProperty = "_name";
@@ -491,6 +499,119 @@ export module knownFolders {
 
         return _app;
     };
+    
+    export module ios {
+        function _checkPlatform(knownFolderName: string){
+            ensurePlatform();
+            if (!platform.isIOS){
+                throw new Error(`The "${knownFolderName}" known folder is available on iOS only!`);
+            }            
+        }
+        
+        let _library: Folder;
+        export var library = function(): Folder {
+            _checkPlatform("library");
+            if (!_library) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSLibraryDirectory);
+                _library = Folder.fromPath(path);
+                _library[pathProperty] = path;
+                _library[isKnownProperty] = true;
+            }
+
+            return _library;
+        };
+        
+        let _developer: Folder;
+        export var developer = function(): Folder {
+            _checkPlatform("developer");
+            if (!_developer) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSDeveloperDirectory);
+                _developer = Folder.fromPath(path);
+                _developer[pathProperty] = path;
+                _developer[isKnownProperty] = true;
+            }
+
+            return _developer;
+        };
+        
+        let _desktop: Folder;
+        export var desktop = function(): Folder {
+            _checkPlatform("desktop");
+            if (!_desktop) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSDesktopDirectory);
+                _desktop = Folder.fromPath(path);
+                _desktop[pathProperty] = path;
+                _desktop[isKnownProperty] = true;
+            }
+
+            return _desktop;
+        };
+        
+        let _downloads: Folder;
+        export var downloads = function(): Folder {
+            _checkPlatform("downloads");
+            if (!_downloads) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSDownloadsDirectory);
+                _downloads = Folder.fromPath(path);
+                _downloads[pathProperty] = path;
+                _downloads[isKnownProperty] = true;
+            }
+
+            return _downloads;
+        };
+        
+        let _movies: Folder;
+        export var movies = function(): Folder {
+            _checkPlatform("movies");
+            if (!_movies) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSMoviesDirectory);
+                _movies = Folder.fromPath(path);
+                _movies[pathProperty] = path;
+                _movies[isKnownProperty] = true;
+            }
+
+            return _movies;
+        };
+        
+        let _music: Folder;
+        export var music = function(): Folder {
+            _checkPlatform("music");
+            if (!_music) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSMusicDirectory);
+                _music = Folder.fromPath(path);
+                _music[pathProperty] = path;
+                _music[isKnownProperty] = true;
+            }
+
+            return _music;
+        };
+
+        let _pictures: Folder;
+        export var pictures = function(): Folder {
+            _checkPlatform("pictures");
+            if (!_pictures) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSPicturesDirectory);
+                _pictures = Folder.fromPath(path);
+                _pictures[pathProperty] = path;
+                _pictures[isKnownProperty] = true;
+            }
+
+            return _pictures;
+        };
+
+        let _sharedPublic: Folder;
+        export var sharedPublic = function(): Folder {
+            _checkPlatform("sharedPublic");
+            if (!_sharedPublic) {
+                var path = (<any>getFileAccess()).getKnownPath(NSSearchPathDirectory.NSSharedPublicDirectory);
+                _sharedPublic = Folder.fromPath(path);
+                _sharedPublic[pathProperty] = path;
+                _sharedPublic[isKnownProperty] = true;
+            }
+
+            return _sharedPublic;
+        };
+    }
 }
 
 export module path {
diff --git a/tsconfig.json b/tsconfig.json
index 114b54b428..ba5daec8ac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,8 @@
         "noImplicitAny": false,
         "noImplicitUseStrict": true,
         "experimentalDecorators": true,
-        "diagnostics": true
+        "diagnostics": true,
+        "sourceMap": true
     },
     "exclude": [
         "node_modules",

From 604b600a0537be3c811561dc715102ff3f76c8b5 Mon Sep 17 00:00:00 2001
From: SvetoslavTsenov <tsenov.svetoslav@gmail.com>
Date: Wed, 20 Jul 2016 09:39:14 +0300
Subject: [PATCH 11/21] Update main-Page.ts and tab-view-more.xml css

---
 apps/app/ui-tests-app/css/tab-view-more.xml |  2 +-
 apps/app/ui-tests-app/tab-view/main-page.ts | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/app/ui-tests-app/css/tab-view-more.xml b/apps/app/ui-tests-app/css/tab-view-more.xml
index e6dd4215f4..ac8840a8e7 100644
--- a/apps/app/ui-tests-app/css/tab-view-more.xml
+++ b/apps/app/ui-tests-app/css/tab-view-more.xml
@@ -1,4 +1,4 @@
-<Page cssFile="~/gallery-app/css/test.css">
+<Page cssFile="~/gallery-app/app.css">
   <TabView>
     <TabView.items>
 
diff --git a/apps/app/ui-tests-app/tab-view/main-page.ts b/apps/app/ui-tests-app/tab-view/main-page.ts
index d130dfd169..d24b4482ad 100644
--- a/apps/app/ui-tests-app/tab-view/main-page.ts
+++ b/apps/app/ui-tests-app/tab-view/main-page.ts
@@ -11,14 +11,11 @@ export function pageLoaded(args: EventData) {
 
     let examples: Map<string, string> = new Map<string, string>();
 
-    examples.set("gestures", "pages/gestures");
-    examples.set("touch", "pages/touch-event");
-    examples.set("pan", "pages/pan-event");
-    examples.set("handlers", "pages/handlers");
-    examples.set("console", "pages/console");
-    examples.set("i61", "pages/i61");
-    examples.set("i73", "pages/i73");
-    examples.set("i86", "pages/i86");
+    examples.set("tabColor", "tab-view/color");
+    examples.set("tabBG", "tab-view/background");
+    examples.set("tabTabsBG", "tab-view/tabsBackground");
+    examples.set("tabSelected", "tab-view/selected");
+    examples.set("tabStyle", "tab-view/all");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

From 82d6b644d6589307031643ec8eb0bcb0074ac54b Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Wed, 20 Jul 2016 10:44:51 +0300
Subject: [PATCH 12/21] Remove directory code variables

---
 .../file-system/file-system-access.ios.ts           | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/tns-core-modules/file-system/file-system-access.ios.ts b/tns-core-modules/file-system/file-system-access.ios.ts
index 8838f41ee6..71db4b0389 100644
--- a/tns-core-modules/file-system/file-system-access.ios.ts
+++ b/tns-core-modules/file-system/file-system-access.ios.ts
@@ -3,19 +3,14 @@ import * as utilsModule from "utils/utils";
 
 // TODO: Implement all the APIs receiving callback using async blocks
 // TODO: Check whether we need try/catch blocks for the iOS implementation
-
 export class FileSystemAccess {
-    private keyModificationTime = "NSFileModificationDate";
-    private userDomain = NSSearchPathDirectory.NSApplicationDirectory; //1
-    private documentDir = NSSearchPathDirectory.NSDocumentDirectory; //9
-    private cachesDir = NSSearchPathDirectory.NSCachesDirectory; //13
 
     public getLastModified(path: string): Date {
         var fileManager = NSFileManager.defaultManager();
         var attributes = fileManager.attributesOfItemAtPathError(path);
 
         if (attributes) {
-            return attributes.objectForKey(this.keyModificationTime);
+            return attributes.objectForKey("NSFileModificationDate");
         } else {
             return new Date();
         }
@@ -223,11 +218,11 @@ export class FileSystemAccess {
     }
 
     public getDocumentsFolderPath(): string {
-        return this.getKnownPath(this.documentDir);
+        return this.getKnownPath(NSSearchPathDirectory.NSDocumentDirectory);
     }
 
     public getTempFolderPath(): string {
-        return this.getKnownPath(this.cachesDir);
+        return this.getKnownPath(NSSearchPathDirectory.NSCachesDirectory);
     }
     
     public getCurrentAppPath(): string {
@@ -304,7 +299,7 @@ export class FileSystemAccess {
 
     private getKnownPath(folderType: number): string {
         var fileManager = NSFileManager.defaultManager();
-        var paths = fileManager.URLsForDirectoryInDomains(folderType, this.userDomain);
+        var paths = fileManager.URLsForDirectoryInDomains(folderType, NSSearchPathDirectory.NSApplicationDirectory);
 
         var url = paths.objectAtIndex(0);
         return url.path;

From ef6a24a5deee3c5e306b78ca9ff22b73bc52751c Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Tue, 19 Jul 2016 18:48:55 +0300
Subject: [PATCH 13/21] FIX: isBackNavigation worng when navigation away form
 page that is not backstack visible

---
 tests/app/navigation/navigation-tests.ts | 193 +++++++++++++++++------
 tns-core-modules/ui/frame/frame.ios.ts   |   2 +
 tns-core-modules/ui/page/page.ios.ts     |  14 +-
 3 files changed, 152 insertions(+), 57 deletions(-)

diff --git a/tests/app/navigation/navigation-tests.ts b/tests/app/navigation/navigation-tests.ts
index fc4d7a9c5f..1bf3f7140e 100644
--- a/tests/app/navigation/navigation-tests.ts
+++ b/tests/app/navigation/navigation-tests.ts
@@ -5,9 +5,9 @@ import {Color} from "color";
 import helper = require("../ui/helper");
 
 // Creates a random colorful page full of meaningless stuff.
-var id = 0;
-var pageFactory = function (): Page {
-    var page = new Page();
+let id = 0;
+let pageFactory = function (): Page {
+    const page = new Page();
     page.actionBarHidden = true;
     page.id = `NavTestPage${id++}`;
     page.style.backgroundColor = new Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
@@ -22,17 +22,28 @@ function androidGC() {
     }
 }
 
+function attachEventListeners(page: Page, events: Array<string>) {
+    let argsToString = (args: NavigatedData) => {
+        return `${(<Page>args.object).id} ${args.eventName} ${(args.isBackNavigation ? "back" : "forward")}`;
+    };
+
+    page.on(Page.navigatingFromEvent, (args: NavigatedData) => { events.push(argsToString(args)); });
+    page.on(Page.navigatedFromEvent, (args: NavigatedData) => { events.push(argsToString(args)); });
+    page.on(Page.navigatingToEvent, (args: NavigatedData) => { events.push(argsToString(args)); });
+    page.on(Page.navigatedToEvent, (args: NavigatedData) => { events.push(argsToString(args)); });
+}
+
 function _test_backstackVisible(transition?: NavigationTransition) {
     let topmost = topmostFrame();
     let mainTestPage = topmost.currentPage;
     helper.navigateWithEntry({ create: pageFactory, transition: transition, animated: true });
-    
+
     // page1 should not be added to the backstack
     let page0 = topmost.currentPage;
     helper.navigateWithEntry({ create: pageFactory, backstackVisible: false, transition: transition, animated: true });
 
     helper.navigateWithEntry({ create: pageFactory, transition: transition, animated: true });
-    
+
     helper.goBack();
 
     // From page2 we have to go directly to page0, skipping page1.
@@ -42,12 +53,12 @@ function _test_backstackVisible(transition?: NavigationTransition) {
     TKUnit.assertEqual(topmost.currentPage, mainTestPage, "We should be on the main test page at the end of the test.");
 }
 
-export var test_backstackVisible = function () {
+export function test_backstackVisible() {
     androidGC();
     _test_backstackVisible();
 }
 
-export var test_backstackVisible_WithTransition = function () {
+export function test_backstackVisible_WithTransition() {
     androidGC();
     _test_backstackVisible({ name: "fade" });
 }
@@ -55,26 +66,29 @@ export var test_backstackVisible_WithTransition = function () {
 function _test_backToEntry(transition?: NavigationTransition) {
     let topmost = topmostFrame();
     let page = (tag) => () => {
-        var p = new Page();
+        const p = new Page();
         p.actionBarHidden = true;
         p.id = `NavTestPage${id++}`;
         p["tag"] = tag;
         return p;
-    }
+    };
+
     let mainTestPage = topmost.currentPage;
     let waitFunc = tag => TKUnit.waitUntilReady(() => topmost.currentPage["tag"] === tag, 1);
     let navigate = tag => {
         topmost.navigate({ create: page(tag), transition: transition, animated: true });
         waitFunc(tag);
-        
-    }
+
+    };
+
     let back = pages => {
         topmost.goBack(topmost.backStack[topmost.backStack.length - pages]);
-    }
+    };
+
     let currentPageMustBe = tag => {
         waitFunc(tag); // TODO: Add a timeout...
         TKUnit.assert(topmost.currentPage["tag"] === tag, "Expected current page to be " + tag + " it was " + topmost.currentPage["tag"] + " instead.");
-    }
+    };
 
     navigate("page1");
     navigate("page2");
@@ -99,14 +113,14 @@ function _test_backToEntry(transition?: NavigationTransition) {
     TKUnit.assertEqual(topmost.currentPage, mainTestPage, "We should be on the main test page at the end of the test.");
 }
 
-export var test_backToEntry = function () {
+export function test_backToEntry() {
     androidGC();
     _test_backToEntry();
 }
 
-export var test_backToEntry_WithTransition = function () {
+export function test_backToEntry_WithTransition() {
     androidGC();
-    _test_backToEntry({name: "flip"});
+    _test_backToEntry({ name: "flip" });
 }
 
 function _test_ClearHistory(transition?: NavigationTransition) {
@@ -141,17 +155,17 @@ function _test_ClearHistory(transition?: NavigationTransition) {
 }
 
 // Clearing the history messes up the tests app.
-export var test_ClearHistory = function () {
+export function test_ClearHistory() {
     androidGC();
     _test_ClearHistory();
 }
 
-export var test_ClearHistory_WithTransition = function () {
+export function test_ClearHistory_WithTransition() {
     androidGC();
     _test_ClearHistory({ name: "fade" });
 }
 
-export var test_ClearHistory_WithTransition_WithCachePagesOnNavigate = function () {
+export function test_ClearHistory_WithTransition_WithCachePagesOnNavigate() {
     androidGC();
     let topmost = topmostFrame();
     if (!topmost.android) {
@@ -165,7 +179,7 @@ export var test_ClearHistory_WithTransition_WithCachePagesOnNavigate = function
 }
 
 // Test case for https://github.com/NativeScript/NativeScript/issues/1948
-export var test_ClearHistoryWithTransitionDoesNotBreakNavigation = function () {
+export function test_ClearHistoryWithTransitionDoesNotBreakNavigation() {
     androidGC();
     let topmost = topmostFrame();
     let mainTestPage = topmost.currentPage;
@@ -175,18 +189,18 @@ export var test_ClearHistoryWithTransitionDoesNotBreakNavigation = function () {
 
     // Go to details-page
     helper.navigateWithEntry({ create: pageFactory, clearHistory: false, animated: true });
-    
+
     // Go back to main-page with clearHistory
     topmost.transition = { name: "fade" };
     helper.navigateWithEntry({ create: mainPageFactory, clearHistory: true, animated: true });
-    
+
     // Go to details-page AGAIN
     helper.navigateWithEntry({ create: pageFactory, clearHistory: false, animated: true });
-    
+
     // Go back to main-page with clearHistory
     topmost.transition = { name: "fade" };
     helper.navigateWithEntry({ create: mainPageFactory, clearHistory: true, animated: true });
-    
+
     // Clean up
     topmost.transition = undefined;
 
@@ -194,9 +208,10 @@ export var test_ClearHistoryWithTransitionDoesNotBreakNavigation = function () {
     TKUnit.assertEqual(topmost.backStack.length, 0, "Back stack should be empty at the end of the test.");
 }
 
-export var test_ClearHistoryWithTransitionDoesNotBreakNavigation_WithLocalTransition = function () {
+export function test_ClearHistoryWithTransitionDoesNotBreakNavigation_WithLocalTransition() {
     androidGC();
-    let topmost = topmostFrame();
+    const topmost = topmostFrame();
+
     let originalCachePagesOnNavigate: boolean;
     if (topmost.android) {
         originalCachePagesOnNavigate = topmost.android.cachePagesOnNavigate;
@@ -210,16 +225,16 @@ export var test_ClearHistoryWithTransitionDoesNotBreakNavigation_WithLocalTransi
 
     // Go to 1st page
     helper.navigateWithEntry({ create: pageFactory, clearHistory: false, transition: { name: "fade" }, animated: true });
-    
+
     // Go to 2nd page
     helper.navigateWithEntry({ create: pageFactory, clearHistory: false, transition: { name: "fade" }, animated: true });
-    
+
     // Go to 3rd page with clearHistory
     helper.navigateWithEntry({ create: pageFactory, clearHistory: true, transition: { name: "fade" }, animated: true });
-    
+
     // Go back to main
     helper.navigateWithEntry({ create: mainPageFactory, clearHistory: true, transition: { name: "fade" }, animated: true });
-    
+
     if (topmost.android) {
         topmostFrame().android.cachePagesOnNavigate = originalCachePagesOnNavigate;
     }
@@ -229,39 +244,30 @@ export var test_ClearHistoryWithTransitionDoesNotBreakNavigation_WithLocalTransi
 }
 
 function _test_NavigationEvents(transition?: NavigationTransition) {
-    let topmost = topmostFrame();
-    let argsToString = (args: NavigatedData) => {
-        return `${(<Page>args.object).id} ${args.eventName} ${(args.isBackNavigation ? "back" : "forward") }`
-    };
+    const topmost = topmostFrame();
+    const mainTestPage = topmost.currentPage;
+    const originalMainPageId = mainTestPage.id;
 
-    let mainTestPage = topmost.currentPage;
-    let originalMainPageId = mainTestPage.id;
     mainTestPage.id = "main-page";
     let actualMainPageEvents = new Array<string>();
-    mainTestPage.on(Page.navigatingFromEvent, (args: NavigatedData) => { actualMainPageEvents.push(argsToString(args)); });
-    mainTestPage.on(Page.navigatedFromEvent, (args: NavigatedData) => { actualMainPageEvents.push(argsToString(args)); });
-    mainTestPage.on(Page.navigatingToEvent, (args: NavigatedData) => { actualMainPageEvents.push(argsToString(args)); });
-    mainTestPage.on(Page.navigatedToEvent, (args: NavigatedData) => { actualMainPageEvents.push(argsToString(args)); });
+    attachEventListeners(mainTestPage, actualMainPageEvents);
 
     let actualSecondPageEvents = new Array<string>();
     let secondPageFactory = function (): Page {
-        var secondPage = new Page();
-        secondPage.actionBarHidden = true;        
-        secondPage.id = "second-page"
-        secondPage.on(Page.navigatingFromEvent, (args: NavigatedData) => { actualSecondPageEvents.push(argsToString(args)); });
-        secondPage.on(Page.navigatedFromEvent, (args: NavigatedData) => { actualSecondPageEvents.push(argsToString(args)); });
-        secondPage.on(Page.navigatingToEvent, (args: NavigatedData) => { actualSecondPageEvents.push(argsToString(args)); });
-        secondPage.on(Page.navigatedToEvent, (args: NavigatedData) => { actualSecondPageEvents.push(argsToString(args)); });
+        const secondPage = new Page();
+        secondPage.actionBarHidden = true;
+        secondPage.id = "second-page";
+        attachEventListeners(secondPage, actualSecondPageEvents);
         secondPage.style.backgroundColor = new Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
         return secondPage;
     };
 
     // Go to other page
     helper.navigateWithEntry({ create: secondPageFactory, transition: transition, animated: true });
-    
+
     // Go back to main
     helper.goBack();
-    
+
     mainTestPage.id = originalMainPageId;
 
     let expectedMainPageEvents = [
@@ -283,12 +289,97 @@ function _test_NavigationEvents(transition?: NavigationTransition) {
     TKUnit.assertEqual(topmost.currentPage, mainTestPage, "We should be on the main test page at the end of the test.");
 }
 
-export var test_NavigationEvents = function () {
+export function test_NavigationEvents() {
     androidGC();
     _test_NavigationEvents();
 }
 
-export var test_NavigationEvents_WithTransition = function () {
+export function test_NavigationEvents_WithTransition() {
     androidGC();
     _test_NavigationEvents({ name: "fade" });
+}
+
+function _test_NavigationEvents_WithBackstackVisibile_False_Forward_Back(transition?: NavigationTransition) {
+    const topmost = topmostFrame();
+    const mainTestPage = topmost.currentPage;
+
+    let actualSecondPageEvents = new Array<string>();
+    let secondPageFactory = function (): Page {
+        const secondPage = new Page();
+        secondPage.actionBarHidden = true;
+        secondPage.id = "second-page";
+        attachEventListeners(secondPage, actualSecondPageEvents);
+        secondPage.style.backgroundColor = new Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+        return secondPage;
+    };
+
+    // Go to other page
+    helper.navigateWithEntry({ create: secondPageFactory, transition: transition, animated: true, backstackVisible: false });
+
+    // Go back to main
+    helper.goBack();
+
+    let expectedSecondPageEvents = [
+        "second-page navigatingTo forward",
+        "second-page navigatedTo forward",
+        "second-page navigatingFrom back",
+        "second-page navigatedFrom back"
+    ];
+    TKUnit.arrayAssert(actualSecondPageEvents, expectedSecondPageEvents, "Actual second-page events are different from expected.");
+
+    TKUnit.assertEqual(topmost.currentPage, mainTestPage, "We should be on the main test page at the end of the test.");
+}
+
+export function test_NavigationEvents_WithBackstackVisibile_False_Forward_Back() {
+    androidGC();
+    _test_NavigationEvents_WithBackstackVisibile_False_Forward_Back();
+}
+
+export function test_NavigationEvents_WithBackstackVisibile_False_Forward_Back_WithTransition() {
+    androidGC();
+    _test_NavigationEvents_WithBackstackVisibile_False_Forward_Back({ name: "fade" });
+}
+
+function _test_NavigationEvents_WithBackstackVisibile_False_Forward_Forward(transition?: NavigationTransition) {
+    const topmost = topmostFrame();
+    const mainTestPage = topmost.currentPage;
+
+    let actualSecondPageEvents = new Array<string>();
+    let secondPageFactory = function (): Page {
+        const secondPage = new Page();
+        secondPage.actionBarHidden = true;
+        secondPage.id = "second-page";
+        attachEventListeners(secondPage, actualSecondPageEvents);
+        secondPage.style.backgroundColor = new Color(255, Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255));
+        return secondPage;
+    };
+
+    // Go to other page
+    helper.navigateWithEntry({ create: secondPageFactory, transition: transition, animated: true, backstackVisible: false });
+
+    // Go forward to third page
+    helper.navigateWithEntry({ create: pageFactory, transition: transition, animated: true });
+
+    // Go back to main
+    helper.goBack();
+
+    let expectedSecondPageEvents = [
+        "second-page navigatingTo forward",
+        "second-page navigatedTo forward",
+        "second-page navigatingFrom forward",
+        "second-page navigatedFrom forward"
+    ];
+    TKUnit.arrayAssert(actualSecondPageEvents, expectedSecondPageEvents, "Actual second-page events are different from expected.");
+
+    TKUnit.assertEqual(topmost.currentPage, mainTestPage, "We should be on the main test page at the end of the test.");
+}
+
+export function test_NavigationEvents_WithBackstackVisibile_False_Forward_Forward() {
+    androidGC();
+    _test_NavigationEvents_WithBackstackVisibile_False_Forward_Forward();
+}
+
+export function test_NavigationEvents_WithBackstackVisibile_False_Forward_Forward_WithTransition() {
+    androidGC();
+    _test_NavigationEvents_WithBackstackVisibile_False_Forward_Forward({ name: "fade" });
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/frame/frame.ios.ts b/tns-core-modules/ui/frame/frame.ios.ts
index ed11186222..23e22d2b4d 100644
--- a/tns-core-modules/ui/frame/frame.ios.ts
+++ b/tns-core-modules/ui/frame/frame.ios.ts
@@ -145,6 +145,8 @@ export class Frame extends frameCommon.Frame {
             viewController.navigationItem.hidesBackButton = this.backStack.length === 0;
 
             // swap the top entry with the new one
+            var skippedNavController = newControllers.lastObject;
+            skippedNavController.isBackstackSkipped = true;
             newControllers.removeLastObject();
             newControllers.addObject(viewController);
 
diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
index ed90002daf..2a7f692f83 100644
--- a/tns-core-modules/ui/page/page.ios.ts
+++ b/tns-core-modules/ui/page/page.ios.ts
@@ -35,6 +35,8 @@ class UIViewControllerImpl extends UIViewController {
 
     private _owner: WeakRef<Page>;
 
+    public isBackstackSkipped: boolean;
+
     public static initWithOwner(owner: WeakRef<Page>): UIViewControllerImpl {
         let controller = <UIViewControllerImpl>UIViewControllerImpl.new();
         controller._owner = owner;
@@ -51,7 +53,7 @@ class UIViewControllerImpl extends UIViewController {
         if (trace.enabled) {
             trace.write(owner + " viewDidLayoutSubviews, isLoaded = " + owner.isLoaded, trace.categories.ViewHierarchy);
         }
-        
+
         if (!owner.isLoaded) {
             return;
         }
@@ -225,7 +227,7 @@ class UIViewControllerImpl extends UIViewController {
         var frame = page.frame;
         // Skip navigation events if we are hiding because we are about to show modal page.
         if (!page._presentedViewController && frame && frame.currentPage === page) {
-            let isBack = page.frame && (!this.navigationController || !this.navigationController.viewControllers.containsObject(this));
+            let isBack = page.frame && (!this.navigationController || !this.navigationController.viewControllers.containsObject(this)) && !this.isBackstackSkipped;
             page.onNavigatingFrom(isBack);
         }
 
@@ -239,7 +241,7 @@ class UIViewControllerImpl extends UIViewController {
             trace.write(page + " viewDidDisappear", trace.categories.Navigation);
         }
         // Exit if no page or page is hiding because it shows another page modally.
-        if (!page || page.modal || page._presentedViewController ) {
+        if (!page || page.modal || page._presentedViewController) {
             return;
         }
 
@@ -265,7 +267,7 @@ class UIViewControllerImpl extends UIViewController {
 
         // Remove from parent if page was in frame and we navigated back.
         // Showing page modally will not pass isBack check so currentPage won't be removed from Frame.
-        let isBack = frame && (!this.navigationController || !this.navigationController.viewControllers.containsObject(this));
+        let isBack = frame && (!this.navigationController || !this.navigationController.viewControllers.containsObject(this)) && !this.isBackstackSkipped;
         if (isBack) {
             // Remove parent when navigating back.
             frame._removeView(page);
@@ -372,12 +374,12 @@ export class Page extends pageCommon.Page {
             this._ios.modalPresentationStyle = UIModalPresentationStyle.UIModalPresentationFormSheet;
             this._UIModalPresentationFormSheet = true;
         }
-        
+
         super._raiseShowingModallyEvent();
 
         parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 7, null);
         let transitionCoordinator = parent.ios.transitionCoordinator();
-        if (transitionCoordinator){
+        if (transitionCoordinator) {
             UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion.call(transitionCoordinator, null, () => this._raiseShownModallyEvent());
         }
         else {

From 4d1010155b3d763801092e1b85f5106f2ab55775 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Wed, 20 Jul 2016 16:38:11 +0300
Subject: [PATCH 14/21] var -> let cleanup

---
 tns-core-modules/ui/frame/frame.ios.ts | 58 +++++++++++++-------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/tns-core-modules/ui/frame/frame.ios.ts b/tns-core-modules/ui/frame/frame.ios.ts
index 23e22d2b4d..560981f7d2 100644
--- a/tns-core-modules/ui/frame/frame.ios.ts
+++ b/tns-core-modules/ui/frame/frame.ios.ts
@@ -10,15 +10,15 @@ import * as types from "utils/types";
 import application = require("application");
 import * as _transitionModule from "ui/transition";
 
-var transitionModule: typeof _transitionModule;
+let transitionModule: typeof _transitionModule;
 
 global.moduleMerge(frameCommon, exports);
 
-var ENTRY = "_entry";
-var NAV_DEPTH = "_navDepth";
-var TRANSITION = "_transition";
-var DELEGATE = "_delegate";
-var navDepth = -1;
+const ENTRY = "_entry";
+const NAV_DEPTH = "_navDepth";
+const TRANSITION = "_transition";
+const DELEGATE = "_delegate";
+let navDepth = -1;
 
 export class Frame extends frameCommon.Frame {
     private _ios: iOSFrame;
@@ -123,7 +123,7 @@ export class Frame extends frameCommon.Frame {
         // We should clear the entire history.
         if (clearHistory) {
             viewController.navigationItem.hidesBackButton = true;
-            var newControllers = NSMutableArray.alloc().initWithCapacity(1);
+            let newControllers = NSMutableArray.alloc().initWithCapacity(1);
             newControllers.addObject(viewController);
             this._ios.controller.setViewControllersAnimated(newControllers, animated);
             if (trace.enabled) {
@@ -135,7 +135,7 @@ export class Frame extends frameCommon.Frame {
 
         // We should hide the current entry from the back stack.
         if (!Frame._isEntryBackstackVisible(this._currentEntry)) {
-            var newControllers = NSMutableArray.alloc().initWithArray(this._ios.controller.viewControllers);
+            let newControllers = NSMutableArray.alloc().initWithArray(this._ios.controller.viewControllers);
             if (newControllers.count === 0) {
                 throw new Error("Wrong controllers count.");
             }
@@ -145,7 +145,7 @@ export class Frame extends frameCommon.Frame {
             viewController.navigationItem.hidesBackButton = this.backStack.length === 0;
 
             // swap the top entry with the new one
-            var skippedNavController = newControllers.lastObject;
+            const skippedNavController = newControllers.lastObject;
             skippedNavController.isBackstackSkipped = true;
             newControllers.removeLastObject();
             newControllers.addObject(viewController);
@@ -171,8 +171,8 @@ export class Frame extends frameCommon.Frame {
         navDepth = backstackEntry[NAV_DEPTH];
 
         if (!this._shouldSkipNativePop) {
-            var controller = backstackEntry.resolvedPage.ios;
-            var animated = this._currentEntry ? this._getIsAnimatedNavigation(this._currentEntry.entry) : false;
+            let controller = backstackEntry.resolvedPage.ios;
+            let animated = this._currentEntry ? this._getIsAnimatedNavigation(this._currentEntry.entry) : false;
 
             this._updateActionBar(backstackEntry.resolvedPage);
             if (trace.enabled) {
@@ -185,8 +185,8 @@ export class Frame extends frameCommon.Frame {
     public _updateActionBar(page?: Page): void {
         super._updateActionBar(page);
 
-        var page = page || this.currentPage;
-        var newValue = this._getNavBarVisible(page);
+        page = page || this.currentPage;
+        let newValue = this._getNavBarVisible(page);
 
         this._ios.showNavigationBar = newValue;
         if (this._ios.controller.navigationBar) {
@@ -242,7 +242,7 @@ export class Frame extends frameCommon.Frame {
     public requestLayout(): void {
         super.requestLayout();
         // Invalidate our Window so that layout is triggered again.
-        var window = this._nativeView.window;
+        let window = this._nativeView.window;
         if (window) {
             window.setNeedsLayout();
         }
@@ -308,7 +308,7 @@ export class Frame extends frameCommon.Frame {
     }
 
     public get navigationBarHeight(): number {
-        var navigationBar = this._ios.controller.navigationBar;
+        let navigationBar = this._ios.controller.navigationBar;
         return (navigationBar && !this._ios.controller.navigationBarHidden) ? navigationBar.frame.size.height : 0;
     }
 
@@ -348,7 +348,7 @@ export class Frame extends frameCommon.Frame {
         if (trace.enabled) {
             trace.write(`Forcing navigationBar.frame.origin.y to ${statusBarHeight} due to a higher in-call status-bar`, trace.categories.Layout);
         }
-        
+
         this._ios.controller.navigationBar.autoresizingMask = UIViewAutoresizing.UIViewAutoresizingNone;
         this._ios.controller.navigationBar.removeConstraints((<any>this)._ios.controller.navigationBar.constraints);
         this._ios.controller.navigationBar.frame = CGRectMake(
@@ -390,7 +390,7 @@ class TransitionDelegate extends NSObject {
             }
         }
 
-        var index = transitionDelegates.indexOf(this);
+        let index = transitionDelegates.indexOf(this);
         if (index > -1) {
             transitionDelegates.splice(index, 1);
         }
@@ -402,7 +402,7 @@ class TransitionDelegate extends NSObject {
     };
 }
 
-var _defaultTransitionDuration = 0.35;
+const _defaultTransitionDuration = 0.35;
 
 class UINavigationControllerAnimatedDelegate extends NSObject implements UINavigationControllerDelegate {
     public static ObjCProtocols = [UINavigationControllerDelegate];
@@ -435,7 +435,7 @@ class UINavigationControllerAnimatedDelegate extends NSObject implements UINavig
         if (trace.enabled) {
             trace.write(`UINavigationControllerImpl.navigationControllerAnimationControllerForOperationFromViewControllerToViewController(${operation}, ${fromVC}, ${toVC}), transition: ${JSON.stringify(navigationTransition)}`, trace.categories.NativeLifecycle);
         }
-        
+
         if (!transitionModule) {
             transitionModule = require("ui/transition");
         }
@@ -450,7 +450,7 @@ class UINavigationControllerImpl extends UINavigationController {
     private _owner: WeakRef<Frame>;
 
     public static initWithOwner(owner: WeakRef<Frame>): UINavigationControllerImpl {
-        var controller = <UINavigationControllerImpl>UINavigationControllerImpl.new();
+        let controller = <UINavigationControllerImpl>UINavigationControllerImpl.new();
         controller._owner = owner;
         return controller;
     }
@@ -473,7 +473,7 @@ class UINavigationControllerImpl extends UINavigationController {
             if (trace.enabled) {
                 trace.write(this._owner + " viewDidLayoutSubviews, isLoaded = " + owner.isLoaded, trace.categories.ViewHierarchy);
             }
-            
+
             owner._updateLayout();
         }
     }
@@ -524,8 +524,8 @@ class UINavigationControllerImpl extends UINavigationController {
     }
 
     public setViewControllersAnimated(viewControllers: NSArray, animated: boolean): void {
-        var viewController = viewControllers.lastObject;
-        var navigationTransition = <definition.NavigationTransition>viewController[TRANSITION];
+        let viewController = viewControllers.lastObject;
+        let navigationTransition = <definition.NavigationTransition>viewController[TRANSITION];
         if (trace.enabled) {
             trace.write(`UINavigationControllerImpl.setViewControllersAnimated(${viewControllers}, ${animated}); transition: ${JSON.stringify(navigationTransition)}`, trace.categories.NativeLifecycle);
         }
@@ -542,8 +542,8 @@ class UINavigationControllerImpl extends UINavigationController {
     }
 
     public popViewControllerAnimated(animated: boolean): UIViewController {
-        var lastViewController = this.viewControllers.lastObject;
-        var navigationTransition = <definition.NavigationTransition>lastViewController[TRANSITION];
+        let lastViewController = this.viewControllers.lastObject;
+        let navigationTransition = <definition.NavigationTransition>lastViewController[TRANSITION];
         if (trace.enabled) {
             trace.write(`UINavigationControllerImpl.popViewControllerAnimated(${animated}); transition: ${JSON.stringify(navigationTransition)}`, trace.categories.NativeLifecycle);
         }
@@ -553,7 +553,7 @@ class UINavigationControllerImpl extends UINavigationController {
             return super.popViewControllerAnimated(false);
         }
 
-        var nativeTransition = _getNativeTransition(navigationTransition, false);
+        let nativeTransition = _getNativeTransition(navigationTransition, false);
         if (!animated || !navigationTransition || !nativeTransition) {
             return super.popViewControllerAnimated(animated);
         }
@@ -591,7 +591,7 @@ class UINavigationControllerImpl extends UINavigationController {
 }
 
 function _getTransitionId(nativeTransition: UIViewAnimationTransition, transitionType: string): string {
-    var name;
+    let name;
     switch (nativeTransition) {
         case UIViewAnimationTransition.UIViewAnimationTransitionCurlDown: name = "CurlDown"; break;
         case UIViewAnimationTransition.UIViewAnimationTransitionCurlUp: name = "CurlUp"; break;
@@ -663,7 +663,7 @@ class iOSFrame implements definition.iOSFrame {
     private _showNavigationBar: boolean;
     private _navBarVisibility: string;
     private _frame: Frame;
-    
+
     // TabView uses this flag to disable animation while showing/hiding the navigation bar because of the "< More" bar.
     // See the TabView._handleTwoNavigationBars method for more details.
     public _disableNavBarAnimation: boolean;
@@ -684,7 +684,7 @@ class iOSFrame implements definition.iOSFrame {
         return this._showNavigationBar;
     }
     public set showNavigationBar(value: boolean) {
-        var change = this._showNavigationBar !== value;
+        let change = this._showNavigationBar !== value;
         this._showNavigationBar = value;
 
         let animated = !this._frame._isInitialNavigation && !this._disableNavBarAnimation;

From fc39fad959cbaad9307d9a81c0d186ca8bfda89c Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Thu, 21 Jul 2016 09:44:20 +0300
Subject: [PATCH 15/21] Fix: CSS background-image on Label not loading in iOS

Resolves #2414
---
 apps/app/ui-tests-app/css/label-background-image.css | 8 ++++++++
 apps/app/ui-tests-app/css/label-background-image.xml | 7 +++++++
 apps/app/ui-tests-app/css/main-page.ts               | 1 +
 apps/app/ui-tests-app/web-view/web-view-test.xml     | 2 +-
 apps/package.json                                    | 2 +-
 tns-core-modules/ui/styling/background.ios.ts        | 2 +-
 6 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/ui-tests-app/css/label-background-image.css
 create mode 100644 apps/app/ui-tests-app/css/label-background-image.xml

diff --git a/apps/app/ui-tests-app/css/label-background-image.css b/apps/app/ui-tests-app/css/label-background-image.css
new file mode 100644
index 0000000000..f0eab9e944
--- /dev/null
+++ b/apps/app/ui-tests-app/css/label-background-image.css
@@ -0,0 +1,8 @@
+Label {
+    background-image: url('~/ui-tests-app/pages/test2.png');
+    background-repeat: no-repeat; 
+    background-position: left; 
+    background-size: contain; 
+    margin: 10; 
+    border-width: 1;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/label-background-image.xml b/apps/app/ui-tests-app/css/label-background-image.xml
new file mode 100644
index 0000000000..f918bce057
--- /dev/null
+++ b/apps/app/ui-tests-app/css/label-background-image.xml
@@ -0,0 +1,7 @@
+<Page>
+    <StackLayout>
+        <Label text="Label1"/>
+        <Label text="Label2" width="150" height="200" />
+        <Label text="Label3" width="200" height="150"/>
+    </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index 1dd8ceb1d8..e4531ace5f 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -24,6 +24,7 @@ export function pageLoaded(args: EventData) {
     examples.set("zindex", "css/zindex");
     examples.set("clipPath", "css/clip-path");
     examples.set("padding", "css/padding");
+    examples.set("label-background-image", "css/label-background-image");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;
diff --git a/apps/app/ui-tests-app/web-view/web-view-test.xml b/apps/app/ui-tests-app/web-view/web-view-test.xml
index 3e5c85348a..a995011287 100644
--- a/apps/app/ui-tests-app/web-view/web-view-test.xml
+++ b/apps/app/ui-tests-app/web-view/web-view-test.xml
@@ -3,7 +3,7 @@
   
     <!-- WebView: local and string -->
     <WebView src="~/ui-tests-app/web-view/test.html" height="50" />
-    <WebView src="&lt;html&gt;&lt;body&gt;&lt;img src='./pages/test2.png'&gt;&lt;/img&gt;&lt;/body&gt;&lt;/html&gt;" height="75" />
+    <WebView src="&lt;html&gt;&lt;body&gt;&lt;img src='./ui-tests-app/pages/test2.png'&gt;&lt;/img&gt;&lt;/body&gt;&lt;/html&gt;" height="75" />
     
     <!-- Resources: png and jpg -->
     <WrapLayout>
diff --git a/apps/package.json b/apps/package.json
index a6d23c7f1f..c5f563c872 100644
--- a/apps/package.json
+++ b/apps/package.json
@@ -9,7 +9,7 @@
       "version": "2.1.1"
     },
     "tns-ios": {
-      "version": "2.1.0"
+      "version": "2.1.1"
     }
   },
   "dependencies": {
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index c657a4a893..681fe027fe 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -94,7 +94,7 @@ export module ios {
         UIGraphicsBeginImageContextWithOptions(originalImage.size, false, 0.0);
         var context = UIGraphicsGetCurrentContext();
         CGContextSaveGState(context);
-        CGContextTranslateCTM(context, 0.0, originalImage.size.width);
+        CGContextTranslateCTM(context, 0.0, originalImage.size.height);
         CGContextScaleCTM(context, 1.0, -1.0);
         originalImage.drawInRect(CGRectMake(0, 0, originalImage.size.width, originalImage.size.height))
         CGContextRestoreGState(context);

From 76e6689a4270fead21fe01e677073787c94d486b Mon Sep 17 00:00:00 2001
From: Jason Zhekov <jasssonpet@gmail.com>
Date: Thu, 21 Jul 2016 12:18:02 +0300
Subject: [PATCH 16/21] Register TypeScript helpers at the very start

---
 tns-core-modules/globals/globals.ts | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/tns-core-modules/globals/globals.ts b/tns-core-modules/globals/globals.ts
index 2947596382..7a46cde14b 100644
--- a/tns-core-modules/globals/globals.ts
+++ b/tns-core-modules/globals/globals.ts
@@ -1,4 +1,18 @@
-// This method iterates all the keys in the source exports object and copies them to the destination exports one.
+// Required by TypeScript compiler
+require("./decorators");
+
+// Required by V8 snapshot generator
+global.__extends = global.__extends || function (d, b) {
+    for (var p in b) {
+        if (b.hasOwnProperty(p)) {
+            d[p] = b[p];
+        }
+    }
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+
+// This method iterates all the keys in the source exports object and copies them to the destination exports one.
 // Note: the method will not check for naming collisions and will override any already existing entries in the destination exports.
 global.moduleMerge = function (sourceExports: any, destExports: any) {
     for (var key in sourceExports) {
@@ -44,16 +58,6 @@ global.zonedCallback = function (callback: Function): Function {
     }
 }
 
-global.__extends = global.__extends || function (d, b) {
-    for (var p in b) {
-        if (b.hasOwnProperty(p)) {
-            d[p] = b[p];
-        }
-    }
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-};
-
 global.registerModule("timer", () => require("timer"));
 global.registerModule("ui/dialogs", () => require("ui/dialogs"));
 global.registerModule("xhr", () => require("xhr"));
@@ -128,8 +132,6 @@ if (platform.device.os === platform.platformNames.android) {
     global.console.dump = function (args) { c.dump(args); };
 }
 
-require("./decorators");
-
 export function Deprecated(target: Object, key?: string | symbol, descriptor?: any) {
     if (descriptor) {
         var originalMethod = descriptor.value;

From 2a14c1aaf35234668b2bac19f0c196c21a8ab232 Mon Sep 17 00:00:00 2001
From: SvetoslavTsenov <tsenov.svetoslav@gmail.com>
Date: Thu, 21 Jul 2016 14:30:00 +0300
Subject: [PATCH 17/21] Include webtest page

---
 apps/app/ui-tests-app/mainPage.ts            |  4 ++--
 apps/app/ui-tests-app/web-view/main-page.ts  | 25 ++++++++++++++++++++
 apps/app/ui-tests-app/web-view/main-page.xml |  6 +++++
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 apps/app/ui-tests-app/web-view/main-page.ts
 create mode 100644 apps/app/ui-tests-app/web-view/main-page.xml

diff --git a/apps/app/ui-tests-app/mainPage.ts b/apps/app/ui-tests-app/mainPage.ts
index 4cd805a185..0f54b98b06 100644
--- a/apps/app/ui-tests-app/mainPage.ts
+++ b/apps/app/ui-tests-app/mainPage.ts
@@ -26,7 +26,8 @@ export function pageLoaded(args: EventData) {
     examples.set("tab-view", "tab-view/main-page");
     examples.set("layouts", "layouts/main-page");
     examples.set("pages-events", "pages/main-page");
-
+    examples.set("webview", "web-view/main-page");
+    
     examples.set("modalview", "modal-view/modal-view");
     examples.set("dialogs", "dialogs/dialogs");
     examples.set("htmlview", "html-view/html-view");
@@ -34,7 +35,6 @@ export function pageLoaded(args: EventData) {
     examples.set("animeBG", "animations/background");
     examples.set("transitions", "transitions/page0");
     examples.set("segStyle", "segmented-bar/all");
-    examples.set("webview", "web-view/web-view");
 
     //examples.set("listview_binding", "pages/listview_binding");
     //examples.set("textfield", "text-field/text-field");
diff --git a/apps/app/ui-tests-app/web-view/main-page.ts b/apps/app/ui-tests-app/web-view/main-page.ts
new file mode 100644
index 0000000000..d3bf14e36e
--- /dev/null
+++ b/apps/app/ui-tests-app/web-view/main-page.ts
@@ -0,0 +1,25 @@
+import { EventData } from "data/observable";
+import { MianPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("webview", "web-view/web-view");
+    examples.set("webtest", "web-view/web-view-test");
+
+    let viewModel = new SubMianPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMianPageViewModel extends MianPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/web-view/main-page.xml b/apps/app/ui-tests-app/web-view/main-page.xml
new file mode 100644
index 0000000000..33306f0d02
--- /dev/null
+++ b/apps/app/ui-tests-app/web-view/main-page.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>
\ No newline at end of file

From 2cdd1f2fb33676d2c786da20404011f692086564 Mon Sep 17 00:00:00 2001
From: vakrilov <alexander.vakrilov@telerik.com>
Date: Thu, 21 Jul 2016 14:49:47 +0300
Subject: [PATCH 18/21] Add toString() method on response whtn type is text

---
 tns-core-modules/utils/types.d.ts |  7 ++++++
 tns-core-modules/utils/types.ts   |  7 ++++++
 tns-core-modules/xhr/xhr.ts       | 42 +++++++++++++++----------------
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/tns-core-modules/utils/types.d.ts b/tns-core-modules/utils/types.d.ts
index 59640a2d6d..d6d725bbf1 100644
--- a/tns-core-modules/utils/types.d.ts
+++ b/tns-core-modules/utils/types.d.ts
@@ -19,6 +19,13 @@
      * Returns true if value is a function.
      */
     export function isFunction(value: any): boolean;
+
+    /**
+     * A function that checks if something is an object.
+     * @param value The value which will be checked.
+     * Returns true if value is an object.
+     */
+    export function isObject(value: any): boolean;
     
     /**
      * A function that checks if something is "undefined".
diff --git a/tns-core-modules/utils/types.ts b/tns-core-modules/utils/types.ts
index 7b52ba8cd0..0c526e2a90 100644
--- a/tns-core-modules/utils/types.ts
+++ b/tns-core-modules/utils/types.ts
@@ -13,6 +13,13 @@ export function isFunction(value: any): boolean {
     return typeof value === "function";
 }
 
+export function isObject(value: any): boolean {
+    if (!value) {
+        return false;
+    }
+    return typeof value === "object";
+}
+
 export function isUndefined(value: any): boolean {
     return typeof value === "undefined";
 }
diff --git a/tns-core-modules/xhr/xhr.ts b/tns-core-modules/xhr/xhr.ts
index 5aaa327481..720b2abd2a 100644
--- a/tns-core-modules/xhr/xhr.ts
+++ b/tns-core-modules/xhr/xhr.ts
@@ -81,7 +81,7 @@ export class XMLHttpRequest {
                 this._options.content = (<FormData>data).toString();
             }
 
-            http.request(this._options).then(r=> {
+            http.request(this._options).then(r => {
                 if (!this._errorFlag) {
                     this._loadResponse(r);
                 }
@@ -104,29 +104,27 @@ export class XMLHttpRequest {
 
         this._setResponseType();
 
-        if (this.responseType === XMLHttpRequestResponseType.json) {
-            this._prepareJsonResponse(r);
+        this._responseTextReader = () => r.content.toString();
+        this._addToStringOnResponse();
 
-        } else if (this.responseType === XMLHttpRequestResponseType.empty ||
-            this.responseType === XMLHttpRequestResponseType.text) {
-            this._responseTextReader = () => r.content.toString();
+        if (this.responseType === XMLHttpRequestResponseType.json) {
+            this._response = JSON.parse(this.responseText);
         }
 
         this._setReadyState(this.DONE);
     }
 
-    private _prepareJsonResponse(r) {
-        this._responseTextReader = () => r.content.toString();
-        this._response = JSON.parse(this.responseText);
-
+    private _addToStringOnResponse() {
         // Add toString() method to ease debugging and
         // make Angular2 response.text() method work properly.
-        Object.defineProperty(this._response, "toString", {
-            configurable: true,
-            enumerable: false,
-            writable: true,
-            value: () => this.responseText
-        });
+        if (types.isObject(this.response)) {
+            Object.defineProperty(this._response, "toString", {
+                configurable: true,
+                enumerable: false,
+                writable: true,
+                value: () => this.responseText
+            });
+        }
     }
 
     private _setResponseType() {
@@ -180,9 +178,9 @@ export class XMLHttpRequest {
             return "";
         }
 
-        var result = "";
+        let result = "";
 
-        for (var i in this._headers) {
+        for (let i in this._headers) {
             // Cookie headers are excluded
             if (i !== "set-cookie" && i !== "set-cookie2") {
                 result += i + ": " + this._headers[i] + "\r\n";
@@ -197,7 +195,7 @@ export class XMLHttpRequest {
             && !this._errorFlag
         ) {
             header = header.toLowerCase();
-            for (var i in this._headers) {
+            for (let i in this._headers) {
                 if (i.toLowerCase() === header) {
                     return this._headers[i];
                 }
@@ -275,7 +273,7 @@ export class XMLHttpRequest {
     }
 }
 
-var statuses = {
+const statuses = {
     100: "Continue",
     101: "Switching Protocols",
     200: "OK",
@@ -330,9 +328,9 @@ export class FormData {
     }
 
     toString(): string {
-        var arr = new Array<string>();
+        let arr = new Array<string>();
 
-        this._data.forEach(function(value, name, map) {
+        this._data.forEach(function (value, name, map) {
             arr.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
         });
 

From 16b5214013668763b6746d3c72ac99aca91a6bce Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Fri, 22 Jul 2016 11:18:47 +0300
Subject: [PATCH 19/21] Fix two ui tests

---
 apps/app/ui-tests-app/css/tab-view-more.xml    | 2 +-
 apps/app/ui-tests-app/modal-view/modal-view.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/ui-tests-app/css/tab-view-more.xml b/apps/app/ui-tests-app/css/tab-view-more.xml
index ac8840a8e7..748356f723 100644
--- a/apps/app/ui-tests-app/css/tab-view-more.xml
+++ b/apps/app/ui-tests-app/css/tab-view-more.xml
@@ -1,4 +1,4 @@
-<Page cssFile="~/gallery-app/app.css">
+<Page cssFile="~/ui-tests-app/css/test.css">
   <TabView>
     <TabView.items>
 
diff --git a/apps/app/ui-tests-app/modal-view/modal-view.ts b/apps/app/ui-tests-app/modal-view/modal-view.ts
index d18c0e28fd..a8fa8741be 100644
--- a/apps/app/ui-tests-app/modal-view/modal-view.ts
+++ b/apps/app/ui-tests-app/modal-view/modal-view.ts
@@ -12,7 +12,7 @@ export function pageLoaded(args: observable.EventData) {
 
 export function onTap(args: observable.EventData) {
     var fullscreen = (<any>args.object).text.indexOf("(full-screen)") !== -1;
-    page.showModal("modal-view/login-page", "context", function (username: string, password: string) {
+    page.showModal("ui-tests-app/modal-view/login-page", "context", function (username: string, password: string) {
         console.log(username + "/" + password);
         label.text = username + "/" + password;
     }, fullscreen);

From e286e103eb5cd9f9f06b8ed761bd206a14b36719 Mon Sep 17 00:00:00 2001
From: SvetoslavTsenov <tsenov.svetoslav@gmail.com>
Date: Fri, 22 Jul 2016 15:15:20 +0300
Subject: [PATCH 20/21] Update action-item-position page

---
 apps/app/ui-tests-app/action-bar/action-item-position.xml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/app/ui-tests-app/action-bar/action-item-position.xml b/apps/app/ui-tests-app/action-bar/action-item-position.xml
index b442c297f1..906a5c4df1 100644
--- a/apps/app/ui-tests-app/action-bar/action-item-position.xml
+++ b/apps/app/ui-tests-app/action-bar/action-item-position.xml
@@ -2,15 +2,14 @@
   xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
   <Page.actionBar>
     <ActionBar>
-    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back"></NavigationButton>
-      <ActionItem ios.position="right" >
-        <Button text="{{ text }}" backgroundColor="red" tap="change"/>
+      <ActionItem ios.position="right" tap="{{ change }}">
+        <Button text="{{ text }}" backgroundColor="red" />
       </ActionItem>
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
     <Label text="Tap to change the text in the actionbar" class="title"/>
     <Button text="Tap" tap="{{ onTap }}" />
-    <Label text="{{ text }}"/> 
+    <Label text="{{ text }}"/>
   </StackLayout>
 </Page>
\ No newline at end of file

From c991cd7ed0592774be486498f98b119faae4d9e7 Mon Sep 17 00:00:00 2001
From: Nedyalko Nikolov <nedyalko.nikolov@telerik.com>
Date: Fri, 22 Jul 2016 16:13:43 +0300
Subject: [PATCH 21/21] Added documentation for selectedIndexChanged event.

---
 tests/app/ui/tab-view/tab-view-tests.ts |  2 ++
 tests/app/ui/tab-view/tab-view.md       | 14 ++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/tests/app/ui/tab-view/tab-view-tests.ts b/tests/app/ui/tab-view/tab-view-tests.ts
index ed87f529d4..29d168cfef 100644
--- a/tests/app/ui/tab-view/tab-view-tests.ts
+++ b/tests/app/ui/tab-view/tab-view-tests.ts
@@ -231,10 +231,12 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
             return tabView.selectedIndex === expectedOldIndex;
         }, helper.ASYNC);
 
+        // >> article-tabview-selectedIndexChanged
         tabView.on(tabViewModule.TabView.selectedIndexChangedEvent, (args: tabViewModule.SelectedIndexChangedEventData) => {
             actualOldIndex = args.oldIndex;
             actualNewIndex = args.newIndex;
         });
+        // << article-tabview-selectedIndexChanged
 
         tabViewTestsNative.selectNativeTab(tabView, expectedNewIndex);
         TKUnit.waitUntilReady(function () {
diff --git a/tests/app/ui/tab-view/tab-view.md b/tests/app/ui/tab-view/tab-view.md
index b073c50dd0..31f115a315 100644
--- a/tests/app/ui/tab-view/tab-view.md
+++ b/tests/app/ui/tab-view/tab-view.md
@@ -33,3 +33,17 @@ Using a TabView requires the "ui/tab-view" module.
 {%snippet article-select-tab%}
 ## Creating a TabView
 {%snippet article-create-tabview%}
+### Using selectedIndexChanged changed event
+{%snippet article-tabview-selectedIndexChanged%}
+### Using selectedIndexChanged event from xml
+```XML
+<Page>
+ <TabView selectedIndexChanged="onSelectedIndexChanged">
+   ...
+ </TabView>
+</Page>
+```
+```TypeScript
+export function onSelectedIndexChanged(args) {...}
+```
+> Note: Initially selectedIndexChanged event will be raised just after adding a new items to TabView without any user interaction, which will happen on TabView loaded. SelectedIndexChanged event will be raised because value of the selectedIndex property is changed from undefined (default) (with no items) to 0 (first tab item). Depends on how TabView.items are set or added it may happen to raise one or two times selectedIndexChanged event even before page events (loaded, navigatingTo, navigatedTo, ...).