From 66d631ebca392cc8046b8d33c7f684ec488640d1 Mon Sep 17 00:00:00 2001
From: Vasil Chimev <Vasil.Chimev@telerik.com>
Date: Thu, 7 Dec 2017 12:17:54 +0200
Subject: [PATCH 1/4] Revert "Revert "feat(animation): support animating
 width/height properties (WIP) (#4917)" (#5136)"

This reverts commit 8973a6febde4a4b41637d80b17506a7d25ffebf8.
---
 .../animation/animation-army-100.ts           | 114 +++++++++++++
 .../animation/animation-army-100.xml          | 157 ++++++++++++++++++
 .../animation/animation-curves.ts             |  72 ++++++++
 .../animation/animation-curves.xml            |  31 ++++
 .../animation/effect-summary-details.ts       |  79 +++++++++
 .../animation/effect-summary-details.xml      |  13 ++
 .../ui-tests-app/animation/height-basic.ts    |  17 ++
 .../ui-tests-app/animation/height-basic.xml   |  10 ++
 .../animation/layout-stack-height.ts          |  12 ++
 .../animation/layout-stack-height.xml         |  16 ++
 apps/app/ui-tests-app/animation/main-page.ts  |  20 +++
 apps/app/ui-tests-app/animation/main-page.xml |   6 +
 apps/app/ui-tests-app/main-page.ts            |   3 +-
 .../ui-tests-app/test-page-main-view-model.ts |   1 +
 tests/app/ui/animation/animation-tests.ts     | 114 ++++++++++++-
 .../app/ui/styling/style-properties-tests.ts  |  55 ++++++
 tns-core-modules/globals/globals.ts           |   9 +
 .../ui/animation/animation-common.ts          |  36 +++-
 .../ui/animation/animation.android.ts         |  50 +++++-
 tns-core-modules/ui/animation/animation.d.ts  |  11 ++
 .../ui/animation/animation.ios.ts             | 109 ++++++++----
 .../ui/animation/keyframe-animation.ts        |  17 +-
 .../ui/styling/style-properties.d.ts          |   4 +-
 .../ui/styling/style-properties.ts            |  34 +++-
 24 files changed, 943 insertions(+), 47 deletions(-)
 create mode 100644 apps/app/ui-tests-app/animation/animation-army-100.ts
 create mode 100644 apps/app/ui-tests-app/animation/animation-army-100.xml
 create mode 100644 apps/app/ui-tests-app/animation/animation-curves.ts
 create mode 100644 apps/app/ui-tests-app/animation/animation-curves.xml
 create mode 100644 apps/app/ui-tests-app/animation/effect-summary-details.ts
 create mode 100644 apps/app/ui-tests-app/animation/effect-summary-details.xml
 create mode 100644 apps/app/ui-tests-app/animation/height-basic.ts
 create mode 100644 apps/app/ui-tests-app/animation/height-basic.xml
 create mode 100644 apps/app/ui-tests-app/animation/layout-stack-height.ts
 create mode 100644 apps/app/ui-tests-app/animation/layout-stack-height.xml
 create mode 100644 apps/app/ui-tests-app/animation/main-page.ts
 create mode 100644 apps/app/ui-tests-app/animation/main-page.xml

diff --git a/apps/app/ui-tests-app/animation/animation-army-100.ts b/apps/app/ui-tests-app/animation/animation-army-100.ts
new file mode 100644
index 000000000..994d811ec
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/animation-army-100.ts
@@ -0,0 +1,114 @@
+import * as view from 'tns-core-modules/ui/core/view';
+import {View} from 'tns-core-modules/ui/core/view';
+import * as pages from 'tns-core-modules/ui/page';
+import {Button} from 'tns-core-modules/ui/button';
+import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
+import {Label} from 'tns-core-modules/ui/label';
+import {Animation, AnimationDefinition} from 'tns-core-modules/ui/animation';
+import * as fpsMeter from 'tns-core-modules/fps-meter';
+
+let fpsCallbackId;
+export function onLoaded(args) {
+    const page = args.object;
+    const fpsLabel = view.getViewById(page, 'fps') as Label;
+    fpsCallbackId = fpsMeter.addCallback((fps: number, minFps: number) => {
+        fpsLabel.text = `${fps.toFixed(2)}/${minFps.toFixed(2)}`;
+    });
+    fpsMeter.start();
+}
+
+export function onUnloaded() {
+    fpsMeter.removeCallback(fpsCallbackId);
+    fpsMeter.stop();
+}
+
+export function getBoxPropertyAnimationData(property: string,
+                                            animateEase: string,
+                                            target: View,
+                                            extentX: number = 128,
+                                            extentY: number = 128) {
+    let animateKey;
+    let animateValueTo;
+    let animateValueFrom;
+    let animateDuration = animateEase === 'spring' ? 800 : 500;
+    let animateReturnDelay = animateEase === 'spring' ? 0 : 200;
+
+    // Determine the full animation property name (some are shortened in UI), and the demo to/from values
+    switch (property) {
+        case 'height':
+            target.originX = target.originY = 0.5;
+            animateKey = 'height';
+            animateValueTo = 0;
+            animateValueFrom = extentY;
+            break;
+        case 'width':
+            target.originX = target.originY = 0.5;
+            animateKey = 'width';
+            animateValueTo = 0;
+            animateValueFrom = extentX;
+            break;
+        case 'opacity':
+            animateKey = 'opacity';
+            animateValueTo = 0;
+            animateValueFrom = 1;
+            break;
+        case 'color':
+            animateKey = 'backgroundColor';
+            animateValueTo = 'blue';
+            animateValueFrom = 'purple';
+            break;
+        case 'rotate':
+            target.originX = target.originY = 0.5;
+            animateKey = 'rotate';
+            animateValueTo = 180;
+            animateValueFrom = 0;
+            break;
+        case 'scale':
+            target.originX = target.originY = 0.5;
+            animateKey = 'scale';
+            animateValueTo = {x: 0.1, y: 0.1};
+            animateValueFrom = {x: 1, y: 1};
+            break;
+        default:
+            throw new Error(`demo animation for '${property}' is not implemented`);
+    }
+
+    return {
+        animateEase,
+        animateKey,
+        animateValueTo,
+        animateValueFrom,
+        animateReturnDelay,
+        animateDuration
+    };
+}
+
+export function easeAnimate(args) {
+    const clicked = args.object as Button;
+    const page: pages.Page = clicked.page;
+    const select = view.getViewById(page, 'select') as SegmentedBar;
+    const item: SegmentedBarItem = select.items[select.selectedIndex];
+    const animsIn: AnimationDefinition[] = [];
+    const animsOut: AnimationDefinition[] = [];
+    for (let i = 0; i < 100; i++) {
+        const box = view.getViewById(page, 'el-' + i) as Label;
+        const prop = getBoxPropertyAnimationData(item.title, clicked.text, box, 32, 24);
+        animsIn.push({
+            [prop.animateKey]: prop.animateValueTo,
+            delay: 15 * i,
+            target: box,
+            duration: prop.animateDuration,
+            curve: prop.animateEase
+        });
+        animsOut.push({
+            [prop.animateKey]: prop.animateValueFrom,
+            target: box,
+            delay: prop.animateReturnDelay + (5 * (Math.abs(i - 100))),
+            duration: prop.animateDuration,
+            curve: prop.animateEase
+        });
+    }
+    new Animation(animsIn, false).play()
+        .then(() => new Animation(animsOut, false).play())
+        .catch((e) => console.log(e));
+}
diff --git a/apps/app/ui-tests-app/animation/animation-army-100.xml b/apps/app/ui-tests-app/animation/animation-army-100.xml
new file mode 100644
index 000000000..d56f1558b
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/animation-army-100.xml
@@ -0,0 +1,157 @@
+<Page loaded="onLoaded" unloaded="onUnloaded">
+    <AbsoluteLayout>
+        <GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
+
+            <Label row="0" colSpan="3" text="Animate"/>
+            <SegmentedBar row="1" colSpan="3" id="select">
+                <SegmentedBar.items>
+                    <SegmentedBarItem title="height"/>
+                    <SegmentedBarItem title="width"/>
+                    <SegmentedBarItem title="opacity"/>
+                    <SegmentedBarItem title="color"/>
+                    <SegmentedBarItem title="rotate"/>
+                    <SegmentedBarItem title="scale"/>
+                </SegmentedBar.items>
+            </SegmentedBar>
+
+            <Label row="2" colSpan="3" text="Easing"/>
+            <Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
+            <Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
+            <Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
+            <Button row="4" col="0" text="spring" tap="easeAnimate"/>
+            <Button row="4" col="1" text="linear" tap="easeAnimate"/>
+            <Button row="4" col="2" text="ease" tap="easeAnimate"/>
+        </GridLayout>
+
+        <StackLayout top="20" left="200" orientation="horizontal">
+            <Label text="FPS: "></Label>
+            <Label id="fps"></Label>
+        </StackLayout>
+
+        <GridLayout top="256" left="20" width="100%"
+                    rows="24,24,24,24,24,24,24,24,24,24"
+                    columns="32,32,32,32,32,32,32,32,32,32">
+            <!-- 0 -->
+            <Label row="0" col="0" height="24" width="32" id="el-0" backgroundColor="purple"/>
+            <Label row="0" col="1" height="24" width="32" id="el-1" backgroundColor="purple"/>
+            <Label row="0" col="2" height="24" width="32" id="el-2" backgroundColor="purple"/>
+            <Label row="0" col="3" height="24" width="32" id="el-3" backgroundColor="purple"/>
+            <Label row="0" col="4" height="24" width="32" id="el-4" backgroundColor="purple"/>
+            <Label row="0" col="5" height="24" width="32" id="el-5" backgroundColor="purple"/>
+            <Label row="0" col="6" height="24" width="32" id="el-6" backgroundColor="purple"/>
+            <Label row="0" col="7" height="24" width="32" id="el-7" backgroundColor="purple"/>
+            <Label row="0" col="8" height="24" width="32" id="el-8" backgroundColor="purple"/>
+            <Label row="0" col="9" height="24" width="32" id="el-9" backgroundColor="purple"/>
+
+            <!-- 1 -->
+            <Label row="1" col="0" height="24" width="32" id="el-10" backgroundColor="purple"/>
+            <Label row="1" col="1" height="24" width="32" id="el-11" backgroundColor="purple"/>
+            <Label row="1" col="2" height="24" width="32" id="el-12" backgroundColor="purple"/>
+            <Label row="1" col="3" height="24" width="32" id="el-13" backgroundColor="purple"/>
+            <Label row="1" col="4" height="24" width="32" id="el-14" backgroundColor="purple"/>
+            <Label row="1" col="5" height="24" width="32" id="el-15" backgroundColor="purple"/>
+            <Label row="1" col="6" height="24" width="32" id="el-16" backgroundColor="purple"/>
+            <Label row="1" col="7" height="24" width="32" id="el-17" backgroundColor="purple"/>
+            <Label row="1" col="8" height="24" width="32" id="el-18" backgroundColor="purple"/>
+            <Label row="1" col="9" height="24" width="32" id="el-19" backgroundColor="purple"/>
+
+            <!-- 2 -->
+            <Label row="2" col="0" height="24" width="32" id="el-20" backgroundColor="purple"/>
+            <Label row="2" col="1" height="24" width="32" id="el-21" backgroundColor="purple"/>
+            <Label row="2" col="2" height="24" width="32" id="el-22" backgroundColor="purple"/>
+            <Label row="2" col="3" height="24" width="32" id="el-23" backgroundColor="purple"/>
+            <Label row="2" col="4" height="24" width="32" id="el-24" backgroundColor="purple"/>
+            <Label row="2" col="5" height="24" width="32" id="el-25" backgroundColor="purple"/>
+            <Label row="2" col="6" height="24" width="32" id="el-26" backgroundColor="purple"/>
+            <Label row="2" col="7" height="24" width="32" id="el-27" backgroundColor="purple"/>
+            <Label row="2" col="8" height="24" width="32" id="el-28" backgroundColor="purple"/>
+            <Label row="2" col="9" height="24" width="32" id="el-29" backgroundColor="purple"/>
+
+            <!-- 3 -->
+            <Label row="3" col="0" height="24" width="32" id="el-30" backgroundColor="purple"/>
+            <Label row="3" col="1" height="24" width="32" id="el-31" backgroundColor="purple"/>
+            <Label row="3" col="2" height="24" width="32" id="el-32" backgroundColor="purple"/>
+            <Label row="3" col="3" height="24" width="32" id="el-33" backgroundColor="purple"/>
+            <Label row="3" col="4" height="24" width="32" id="el-34" backgroundColor="purple"/>
+            <Label row="3" col="5" height="24" width="32" id="el-35" backgroundColor="purple"/>
+            <Label row="3" col="6" height="24" width="32" id="el-36" backgroundColor="purple"/>
+            <Label row="3" col="7" height="24" width="32" id="el-37" backgroundColor="purple"/>
+            <Label row="3" col="8" height="24" width="32" id="el-38" backgroundColor="purple"/>
+            <Label row="3" col="9" height="24" width="32" id="el-39" backgroundColor="purple"/>
+
+            <!-- 4 -->
+            <Label row="4" col="0" height="24" width="32" id="el-40" backgroundColor="purple"/>
+            <Label row="4" col="1" height="24" width="32" id="el-41" backgroundColor="purple"/>
+            <Label row="4" col="2" height="24" width="32" id="el-42" backgroundColor="purple"/>
+            <Label row="4" col="3" height="24" width="32" id="el-43" backgroundColor="purple"/>
+            <Label row="4" col="4" height="24" width="32" id="el-44" backgroundColor="purple"/>
+            <Label row="4" col="5" height="24" width="32" id="el-45" backgroundColor="purple"/>
+            <Label row="4" col="6" height="24" width="32" id="el-46" backgroundColor="purple"/>
+            <Label row="4" col="7" height="24" width="32" id="el-47" backgroundColor="purple"/>
+            <Label row="4" col="8" height="24" width="32" id="el-48" backgroundColor="purple"/>
+            <Label row="4" col="9" height="24" width="32" id="el-49" backgroundColor="purple"/>
+
+            <!-- 5 -->
+            <Label row="5" col="0" height="24" width="32" id="el-50" backgroundColor="purple"/>
+            <Label row="5" col="1" height="24" width="32" id="el-51" backgroundColor="purple"/>
+            <Label row="5" col="2" height="24" width="32" id="el-52" backgroundColor="purple"/>
+            <Label row="5" col="3" height="24" width="32" id="el-53" backgroundColor="purple"/>
+            <Label row="5" col="4" height="24" width="32" id="el-54" backgroundColor="purple"/>
+            <Label row="5" col="5" height="24" width="32" id="el-55" backgroundColor="purple"/>
+            <Label row="5" col="6" height="24" width="32" id="el-56" backgroundColor="purple"/>
+            <Label row="5" col="7" height="24" width="32" id="el-57" backgroundColor="purple"/>
+            <Label row="5" col="8" height="24" width="32" id="el-58" backgroundColor="purple"/>
+            <Label row="5" col="9" height="24" width="32" id="el-59" backgroundColor="purple"/>
+
+            <!-- 6 -->
+            <Label row="6" col="0" height="24" width="32" id="el-60" backgroundColor="purple"/>
+            <Label row="6" col="1" height="24" width="32" id="el-61" backgroundColor="purple"/>
+            <Label row="6" col="2" height="24" width="32" id="el-62" backgroundColor="purple"/>
+            <Label row="6" col="3" height="24" width="32" id="el-63" backgroundColor="purple"/>
+            <Label row="6" col="4" height="24" width="32" id="el-64" backgroundColor="purple"/>
+            <Label row="6" col="5" height="24" width="32" id="el-65" backgroundColor="purple"/>
+            <Label row="6" col="6" height="24" width="32" id="el-66" backgroundColor="purple"/>
+            <Label row="6" col="7" height="24" width="32" id="el-67" backgroundColor="purple"/>
+            <Label row="6" col="8" height="24" width="32" id="el-68" backgroundColor="purple"/>
+            <Label row="6" col="9" height="24" width="32" id="el-69" backgroundColor="purple"/>
+
+            <!-- 7 -->
+            <Label row="7" col="0" height="24" width="32" id="el-70" backgroundColor="purple"/>
+            <Label row="7" col="1" height="24" width="32" id="el-71" backgroundColor="purple"/>
+            <Label row="7" col="2" height="24" width="32" id="el-72" backgroundColor="purple"/>
+            <Label row="7" col="3" height="24" width="32" id="el-73" backgroundColor="purple"/>
+            <Label row="7" col="4" height="24" width="32" id="el-74" backgroundColor="purple"/>
+            <Label row="7" col="5" height="24" width="32" id="el-75" backgroundColor="purple"/>
+            <Label row="7" col="6" height="24" width="32" id="el-76" backgroundColor="purple"/>
+            <Label row="7" col="7" height="24" width="32" id="el-77" backgroundColor="purple"/>
+            <Label row="7" col="8" height="24" width="32" id="el-78" backgroundColor="purple"/>
+            <Label row="7" col="9" height="24" width="32" id="el-79" backgroundColor="purple"/>
+
+            <!-- 8 -->
+            <Label row="8" col="0" height="24" width="32" id="el-80" backgroundColor="purple"/>
+            <Label row="8" col="1" height="24" width="32" id="el-81" backgroundColor="purple"/>
+            <Label row="8" col="2" height="24" width="32" id="el-82" backgroundColor="purple"/>
+            <Label row="8" col="3" height="24" width="32" id="el-83" backgroundColor="purple"/>
+            <Label row="8" col="4" height="24" width="32" id="el-84" backgroundColor="purple"/>
+            <Label row="8" col="5" height="24" width="32" id="el-85" backgroundColor="purple"/>
+            <Label row="8" col="6" height="24" width="32" id="el-86" backgroundColor="purple"/>
+            <Label row="8" col="7" height="24" width="32" id="el-87" backgroundColor="purple"/>
+            <Label row="8" col="8" height="24" width="32" id="el-88" backgroundColor="purple"/>
+            <Label row="8" col="9" height="24" width="32" id="el-89" backgroundColor="purple"/>
+
+            <!-- 9 -->
+            <Label row="9" col="0" height="24" width="32" id="el-90" backgroundColor="purple"/>
+            <Label row="9" col="1" height="24" width="32" id="el-91" backgroundColor="purple"/>
+            <Label row="9" col="2" height="24" width="32" id="el-92" backgroundColor="purple"/>
+            <Label row="9" col="3" height="24" width="32" id="el-93" backgroundColor="purple"/>
+            <Label row="9" col="4" height="24" width="32" id="el-94" backgroundColor="purple"/>
+            <Label row="9" col="5" height="24" width="32" id="el-95" backgroundColor="purple"/>
+            <Label row="9" col="6" height="24" width="32" id="el-96" backgroundColor="purple"/>
+            <Label row="9" col="7" height="24" width="32" id="el-97" backgroundColor="purple"/>
+            <Label row="9" col="8" height="24" width="32" id="el-98" backgroundColor="purple"/>
+            <Label row="9" col="9" height="24" width="32" id="el-99" backgroundColor="purple"/>
+
+        </GridLayout>
+
+    </AbsoluteLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/animation/animation-curves.ts b/apps/app/ui-tests-app/animation/animation-curves.ts
new file mode 100644
index 000000000..d261ee66a
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/animation-curves.ts
@@ -0,0 +1,72 @@
+import * as view from 'tns-core-modules/ui/core/view';
+import * as pages from 'tns-core-modules/ui/page';
+import {Button} from 'tns-core-modules/ui/button';
+import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
+import {Label} from 'tns-core-modules/ui/label';
+
+export function easeAnimate(args) {
+    const clicked = args.object as Button;
+    const page: pages.Page = clicked.page;
+    const target = view.getViewById(page, 'target') as Label;
+    const select = view.getViewById(page, 'select') as SegmentedBar;
+    const item: SegmentedBarItem = select.items[select.selectedIndex];
+    const easeType: string = clicked.text;
+    const extent = 128;
+    let duration = easeType === 'spring' ? 800 : 500;
+    let delay = easeType === 'spring' ? 0 : 200;
+    let animateKey: string = null;
+    let animateValueTo: any = null;
+    let animateValueFrom: any = null;
+
+    switch (item.title) {
+        case 'height':
+            animateKey = 'height';
+            target.originX = target.originY = 0;
+            animateValueTo = 0;
+            animateValueFrom = extent;
+            break;
+        case 'width':
+            animateKey = 'width';
+            target.originX = target.originY = 0;
+            animateValueTo = 0;
+            animateValueFrom = extent;
+            break;
+        case 'opacity':
+            animateKey = 'opacity';
+            animateValueTo = 0;
+            animateValueFrom = 1;
+            break;
+        case 'color':
+            animateKey = 'backgroundColor';
+            animateValueTo = 'blue';
+            animateValueFrom = 'purple';
+            break;
+        case 'rotate':
+            animateKey = 'rotate';
+            target.originX = target.originY = 0.5;
+            animateValueTo = 180;
+            animateValueFrom = 0;
+            break;
+        case 'scale':
+            animateKey = 'scale';
+            target.originX = target.originY = 0.5;
+            animateValueTo = {x: 1.5, y: 1.5};
+            animateValueFrom = {x: 1, y: 1};
+            break;
+    }
+    target
+        .animate({
+            [animateKey]: animateValueTo,
+            duration,
+            curve: easeType
+        })
+        .then(() => {
+            return target.animate({
+                [animateKey]: animateValueFrom,
+                delay,
+                duration,
+                curve: easeType
+            });
+        })
+        .catch((e) => console.log(e));
+}
diff --git a/apps/app/ui-tests-app/animation/animation-curves.xml b/apps/app/ui-tests-app/animation/animation-curves.xml
new file mode 100644
index 000000000..58f58d686
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/animation-curves.xml
@@ -0,0 +1,31 @@
+<Page>
+    <AbsoluteLayout>
+        <GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
+
+            <Label row="0" colSpan="3" text="Animate"/>
+            <SegmentedBar row="1" colSpan="3" id="select">
+                <SegmentedBar.items>
+                    <SegmentedBarItem title="height"/>
+                    <SegmentedBarItem title="width"/>
+                    <SegmentedBarItem title="opacity"/>
+                    <SegmentedBarItem title="color"/>
+                    <SegmentedBarItem title="rotate"/>
+                    <SegmentedBarItem title="scale"/>
+                </SegmentedBar.items>
+            </SegmentedBar>
+
+            <Label row="2" colSpan="3" text="Easing"/>
+            <Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
+            <Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
+            <Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
+            <Button row="4" col="0" text="spring" tap="easeAnimate"/>
+            <Button row="4" col="1" text="linear" tap="easeAnimate"/>
+            <Button row="4" col="2" text="ease" tap="easeAnimate"/>
+        </GridLayout>
+
+        <Label top="300" left="96" height="128" width="128"
+               borderColor="purple" borderWidth="1"/>
+        <Label top="300" left="96" height="128" width="128"
+               id="target" backgroundColor="purple"/>
+    </AbsoluteLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/animation/effect-summary-details.ts b/apps/app/ui-tests-app/animation/effect-summary-details.ts
new file mode 100644
index 000000000..30fb15b83
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/effect-summary-details.ts
@@ -0,0 +1,79 @@
+import * as view from 'tns-core-modules/ui/core/view';
+import * as pages from 'tns-core-modules/ui/page';
+import * as platform from 'tns-core-modules/platform';
+import {Animation} from 'tns-core-modules/ui/animation';
+import {TextView} from 'tns-core-modules/ui/text-view';
+import {isIOS} from 'tns-core-modules/platform';
+
+let toggle = false;
+
+export function pageLoaded(args) {
+    const page = args.object;
+    const screenHeight = platform.screen.mainScreen.heightDIPs;
+    const screenYCenter = (screenHeight / 2);
+    page.bindingContext = {
+        screenHeight,
+        screenYCenter,
+        detailsHeight: 96,
+        summary: 'Space! 🌌',
+        ipsum: `Houston, Tranquillity Base here. The Eagle has landed.
+
+For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.
+
+As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.
+
+What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.
+
+Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.
+
+NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.
+
+Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next 10.
+
+Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.
+
+Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind.
+
+When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!
+
+http://spaceipsum.com`
+    };
+}
+
+export function theFinalFrontier(args) {
+    const clicked = args.object as view.View;
+    const page: pages.Page = clicked.page;
+    const details = view.getViewById(page, 'details') as TextView;
+    const ctx = page.bindingContext;
+    const detailHeaderHeight: number = ctx.detailsHeight;
+
+    let statusBar = 0;
+    if(isIOS) {
+        const {ios} = require('tns-core-modules/ui/utils');
+        statusBar = ios.getStatusBarHeight();
+    }
+
+    const textViewHeight: number = ctx.screenHeight - statusBar - detailHeaderHeight;
+    const transitions = [
+        {
+            target: clicked,
+            height: toggle ? '100%' : detailHeaderHeight,
+            duration: 200,
+            curve: 'ease'
+        },
+        {
+            target: details,
+            opacity: toggle ? 0 : 1,
+            height: textViewHeight,
+            translate: {
+                x: 0,
+                y: toggle ? 50 : 0,
+            },
+            duration: 200,
+            curve: 'easeIn'
+        }
+    ];
+    const animationSet = new Animation(transitions, false);
+    animationSet.play();
+    toggle = !toggle;
+}
diff --git a/apps/app/ui-tests-app/animation/effect-summary-details.xml b/apps/app/ui-tests-app/animation/effect-summary-details.xml
new file mode 100644
index 000000000..7800314d9
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/effect-summary-details.xml
@@ -0,0 +1,13 @@
+<Page loaded="pageLoaded">
+    <AbsoluteLayout height="100%">
+        <TextView id="details"
+                  padding="12" paddingBottom="24"
+                  top="{{ detailsHeight }}" width="100%"
+                  text="{{ ipsum }}" fontSize="20"
+                  opacity="0" translateY="50" editable="false"/>
+        <Label originY="0" height="100%" width="100%" fontSize="42"
+               backgroundColor="MidnightBlue" color="white"
+               textAlignment="center" verticalAlignment="center"
+               tap="theFinalFrontier" text="{{ summary }}"/>
+    </AbsoluteLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/animation/height-basic.ts b/apps/app/ui-tests-app/animation/height-basic.ts
new file mode 100644
index 000000000..a8fa41154
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/height-basic.ts
@@ -0,0 +1,17 @@
+import {Label} from 'tns-core-modules/ui/label';
+
+let toggle = false;
+
+export function animateHeight(args) {
+    const clicked = args.object as Label;
+    clicked
+        .animate({
+            height: toggle ? 128 : '100%',
+            duration: 200,
+            curve: 'easeInOut'
+        })
+        .then(() => {
+            clicked.text = toggle ? "Cool." : "Tap here";
+        });
+    toggle = !toggle;
+}
diff --git a/apps/app/ui-tests-app/animation/height-basic.xml b/apps/app/ui-tests-app/animation/height-basic.xml
new file mode 100644
index 000000000..3fa67d708
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/height-basic.xml
@@ -0,0 +1,10 @@
+<Page>
+    <AbsoluteLayout>
+        <Label originX="0" originY="0" top="0" left="0"
+               height="128" fontSize="64px" color="white"
+               textAlignment="center"
+               text="Tap here"
+               width="100%" backgroundColor="purple"
+               tap="animateHeight"/>
+    </AbsoluteLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/animation/layout-stack-height.ts b/apps/app/ui-tests-app/animation/layout-stack-height.ts
new file mode 100644
index 000000000..732891a37
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/layout-stack-height.ts
@@ -0,0 +1,12 @@
+import * as view from 'tns-core-modules/ui/core/view';
+
+export function tapLabel(args) {
+    const clicked: view.View = args.object;
+    const graffiti = clicked as any;
+    clicked.animate({
+        height: graffiti.toggle ? 64 : 128,
+        duration: 200,
+        curve: 'easeOut'
+    });
+    graffiti.toggle = !graffiti.toggle;
+}
diff --git a/apps/app/ui-tests-app/animation/layout-stack-height.xml b/apps/app/ui-tests-app/animation/layout-stack-height.xml
new file mode 100644
index 000000000..4d7d91dd6
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/layout-stack-height.xml
@@ -0,0 +1,16 @@
+<Page>
+    <StackLayout row="1" verticalAlignment="top">
+        <Label backgroundColor="darkblue" originY="0"
+               tap="tapLabel"
+               height="64" fontSize="32" color="skyblue" textAlignment="center"
+               text="Click here"/>
+        <Label backgroundColor="darkgreen" originY="0"
+               tap="tapLabel"
+               height="64" fontSize="32" color="lime" textAlignment="center"
+               text="Or here"/>
+        <Label backgroundColor="darkred" originY="0"
+               tap="tapLabel"
+               height="64" fontSize="32" color="pink" textAlignment="center"
+               text="But NOT here"/>
+    </StackLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/animation/main-page.ts b/apps/app/ui-tests-app/animation/main-page.ts
new file mode 100644
index 000000000..56d2ee64e
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/main-page.ts
@@ -0,0 +1,20 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { SubMainPageViewModel } from "../sub-main-page-view-model";
+import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import { Page } from "tns-core-modules/ui/page";
+
+export function pageLoaded(args: EventData) {
+    const page = <Page>args.object;
+    const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
+    page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
+
+export function loadExamples() {
+    const examples = new Map<string, string>();
+    examples.set("animation-curves", "animation/animation-curves");
+    examples.set("animation-army-100", "animation/animation-army-100");
+    examples.set("height-basic", "animation/height-basic");
+    examples.set("layout-stack-height", "animation/layout-stack-height");
+    examples.set("effect-summary-details", "animation/effect-summary-details");
+    return examples;
+}
diff --git a/apps/app/ui-tests-app/animation/main-page.xml b/apps/app/ui-tests-app/animation/main-page.xml
new file mode 100644
index 000000000..33306f0d0
--- /dev/null
+++ b/apps/app/ui-tests-app/animation/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.ts b/apps/app/ui-tests-app/main-page.ts
index 2e6c4fd49..314fd0073 100644
--- a/apps/app/ui-tests-app/main-page.ts
+++ b/apps/app/ui-tests-app/main-page.ts
@@ -8,6 +8,7 @@ export function pageLoaded(args: EventData) {
     const page = <Page>args.object;
     const wrapLayout = page.getViewById<WrapLayout>("wrapLayoutWithExamples");
     const examples: Map<string, string> = new Map<string, string>();
+    examples.set("animation", "animation/main-page");
     examples.set("action-bar", "action-bar/main-page");
     examples.set("bindings", "bindings/main-page");
     examples.set("button", "button/main-page");
@@ -47,4 +48,4 @@ export function pageLoaded(args: EventData) {
     } else {
         parent.style.marginBottom = 10;
     }
-}
\ No newline at end of file
+}
diff --git a/apps/app/ui-tests-app/test-page-main-view-model.ts b/apps/app/ui-tests-app/test-page-main-view-model.ts
index 8ba190bfb..bdd6faa1e 100644
--- a/apps/app/ui-tests-app/test-page-main-view-model.ts
+++ b/apps/app/ui-tests-app/test-page-main-view-model.ts
@@ -35,6 +35,7 @@ export class TestPageMainViewModel extends Observable {
         try {
             frame.topmost().navigate(TestPageMainViewModel.APP_NAME + "/" + exampleFullPath);
         } catch (error) {
+            console.log("EXAMPLE LOAD FAILED:" + error);
             alert("Cannot find example: " + exampleFullPath);
 
         }
diff --git a/tests/app/ui/animation/animation-tests.ts b/tests/app/ui/animation/animation-tests.ts
index 4274bdf69..4ec3e5311 100644
--- a/tests/app/ui/animation/animation-tests.ts
+++ b/tests/app/ui/animation/animation-tests.ts
@@ -9,14 +9,22 @@ import { AnimationPromise } from "tns-core-modules/ui/animation";
 
 // >> animation-require
 import * as animation from "tns-core-modules/ui/animation";
+import {PercentLength} from "tns-core-modules/ui/styling/style-properties";
 // << animation-require
 
-function prepareTest(): Label {
+function prepareTest(parentHeight?: number, parentWidth?: number): Label {
     let mainPage = helper.getCurrentPage();
     let label = new Label();
     label.text = "label";
 
     let stackLayout = new StackLayout();
+    // optionally size the parent extent to make assertions about percentage values
+    if (parentHeight !== undefined) {
+        stackLayout.height = PercentLength.parse(parentHeight + '');
+    }
+    if (parentWidth !== undefined) {
+        stackLayout.width = PercentLength.parse(parentWidth + '');
+    }
     stackLayout.addChild(label);
     mainPage.content = stackLayout;
     TKUnit.waitUntilReady(() => label.isLoaded);
@@ -395,6 +403,110 @@ export function test_AnimateRotate(done) {
         });
 }
 
+function animateExtentAndAssertExpected(along: 'height' | 'width', value: PercentLength, pixelExpected: PercentLength): Promise<void> {
+    function pretty(val) {
+        return JSON.stringify(val, null, 2);
+    }
+    const parentExtent = 200;
+    const height = along === 'height' ? parentExtent : undefined;
+    const width = along === 'height' ? undefined : parentExtent;
+    const label = prepareTest(height, width);
+    const props = {
+        duration: 5,
+        [along]: value
+    };
+    return label.animate(props).then(() => {
+        const observedString: string = PercentLength.convertToString(label[along]);
+        const inputString: string = PercentLength.convertToString(value);
+        TKUnit.assertEqual(
+            observedString,
+            inputString,
+            `PercentLength.convertToString(${pretty(value)}) should be '${inputString}' but is '${observedString}'`
+        );
+        // assert that the animated view's calculated pixel extent matches the expected pixel value
+        const observedNumber: number = PercentLength.toDevicePixels(label[along], parentExtent, parentExtent);
+        const expectedNumber: number = PercentLength.toDevicePixels(pixelExpected, parentExtent, parentExtent);
+        TKUnit.assertEqual(
+            observedNumber,
+            expectedNumber,
+            `PercentLength.toDevicePixels(${inputString}) should be '${expectedNumber}' but is '${observedNumber}'`
+        );
+        assertIOSNativeTransformIsCorrect(label);
+    });
+}
+
+export function test_AnimateExtent_Should_ResolvePercentageStrings(done) {
+    let promise: Promise<any> = Promise.resolve();
+    const pairs: [string, string][] = [
+        ['100%', '200px'],
+        ['50%', '100px'],
+        ['25%', '50px'],
+        ['-25%', '-50px'],
+        ['-50%', '-100px'],
+        ['-100%', '-200px'],
+    ];
+    pairs.forEach((pair) => {
+        const input = PercentLength.parse(pair[0]);
+        const expected = PercentLength.parse(pair[1]);
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected('height', input, expected);
+        });
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected('width', input, expected);
+        });
+    });
+    promise.then(() => done()).catch(done);
+}
+
+export function test_AnimateExtent_Should_AcceptStringPixelValues(done) {
+    let promise: Promise<any> = Promise.resolve();
+    const pairs: [string, number][] = [
+        ['100px', 100],
+        ['50px', 50]
+    ];
+    pairs.forEach((pair) => {
+        const input = PercentLength.parse(pair[0]);
+        const expected = {
+            unit: 'px',
+            value: pair[1]
+        } as PercentLength;
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected('height', input, expected);
+        });
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected('width', input, expected);
+        });
+    });
+    promise.then(() => done()).catch(done);
+}
+
+export function test_AnimateExtent_Should_AcceptNumberValuesAsDip(done) {
+    let promise: Promise<any> = Promise.resolve();
+    const inputs: any[] = [200, 150, 100, 50, 0];
+    inputs.forEach((value) => {
+        const parsed = PercentLength.parse(value);
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected('height', parsed, parsed);
+        });
+        promise = promise.then(() => {
+            return animateExtentAndAssertExpected('width', parsed, parsed);
+        });
+    });
+    promise.then(() => done()).catch(done);
+}
+
+export function test_AnimateExtent_Should_ThrowIfCannotParsePercentLength() {
+    const label = new Label();
+    helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
+        TKUnit.assertThrows(() => {
+            label.animate({width: '-frog%'});
+        }, "Invalid percent string should throw");
+        TKUnit.assertThrows(() => {
+            label.animate({height: '-frog%'});
+        }, "Invalid percent string should throw");
+    });
+}
+
 export function test_AnimateTranslateScaleAndRotateSimultaneously(done) {
     let label = prepareTest();
 
diff --git a/tests/app/ui/styling/style-properties-tests.ts b/tests/app/ui/styling/style-properties-tests.ts
index 1c2b7f19f..adf2b5b26 100644
--- a/tests/app/ui/styling/style-properties-tests.ts
+++ b/tests/app/ui/styling/style-properties-tests.ts
@@ -10,6 +10,7 @@ import { isAndroid, isIOS } from "tns-core-modules/platform";
 import { View } from "tns-core-modules/ui/core/view";
 import { Length, PercentLength } from "tns-core-modules/ui/core/view";
 import * as fontModule from "tns-core-modules/ui/styling/font";
+import { LengthPercentUnit, LengthPxUnit } from "tns-core-modules/ui/styling/style-properties";
 
 export function test_setting_textDecoration_property_from_CSS_is_applied_to_Style() {
     test_property_from_CSS_is_applied_to_style("textDecoration", "text-decoration", "underline");
@@ -862,3 +863,57 @@ export function test_border_radius() {
     TKUnit.assertTrue(Length.equals(testView.style.borderBottomRightRadius, expected), "bottom");
     TKUnit.assertTrue(Length.equals(testView.style.borderBottomLeftRadius, expected), "left");
 }
+
+function assertPercentLengthParseInputOutputPairs(pairs: [string, any][]) {
+    pairs.forEach((pair: [string, any]) => {
+        const output = PercentLength.parse(pair[0]) as LengthPxUnit | LengthPercentUnit;
+        TKUnit.assertEqual(pair[1].unit, output.unit,
+            `PercentLength.parse('${pair[0]}') should return unit '${pair[1].unit}' but returned '${output.unit}'`
+        );
+        TKUnit.assertEqual(pair[1].value.toFixed(2), output.value.toFixed(2),
+            `PercentLength.parse('${pair[0]}') should return value '${pair[1].value}' but returned '${output.value}'`
+        );
+    });
+}
+
+export function test_PercentLength_parses_pixel_values_from_string_input() {
+    assertPercentLengthParseInputOutputPairs([
+        ['4px', {unit: 'px', value: 4}],
+        ['-4px', {unit: 'px', value: -4}],
+    ]);
+}
+
+export function test_PercentLength_parses_percentage_values_from_string_input() {
+    assertPercentLengthParseInputOutputPairs([
+        ['4%', {unit: '%', value: 0.04}],
+        ['17%', {unit: '%', value: 0.17}],
+        ['-27%', {unit: '%', value: -0.27}],
+    ]);
+}
+
+export function test_PercentLength_parse_throws_given_string_input_it_cannot_parse() {
+    const inputs: any[] = [
+        '-l??%',
+        'qre%',
+        'undefinedpx',
+        'undefined',
+        '-frog%'
+    ];
+    inputs.forEach((input) => {
+        TKUnit.assertThrows(() => {
+            PercentLength.parse(input);
+        }, `PercentLength.parse('${input}') should throw.`);
+    });
+}
+
+export function test_PercentLength_returns_unsupported_types_untouched() {
+    const inputs: any[] = [
+        null,
+        undefined,
+        {baz: true}
+    ];
+    inputs.forEach((input) => {
+        const result = PercentLength.parse(input);
+        TKUnit.assertEqual(input, result, `PercentLength.parse(${input}) should return input value`);
+    });
+}
diff --git a/tns-core-modules/globals/globals.ts b/tns-core-modules/globals/globals.ts
index 7e4715852..1eed35163 100644
--- a/tns-core-modules/globals/globals.ts
+++ b/tns-core-modules/globals/globals.ts
@@ -184,6 +184,15 @@ export function install() {
         registerOnGlobalContext("Headers", "fetch");
         registerOnGlobalContext("Request", "fetch");
         registerOnGlobalContext("Response", "fetch");
+
+        // check whether the 'android' namespace is exposed
+        // if positive - the current device is an Android
+        // so a custom implementation of the global 'console' object is attached.
+        // otherwise do nothing on iOS - the NS runtime provides a native 'console' functionality.
+        if ((<any>global).android) {
+            const consoleModule = require("console");
+            (<any>global).console = new consoleModule.Console();
+        }
     }
 }
 install();
diff --git a/tns-core-modules/ui/animation/animation-common.ts b/tns-core-modules/ui/animation/animation-common.ts
index bf021e52e..96542418e 100644
--- a/tns-core-modules/ui/animation/animation-common.ts
+++ b/tns-core-modules/ui/animation/animation-common.ts
@@ -11,6 +11,7 @@ import { View } from "../core/view";
 // Types.
 import { Color } from "../../color";
 import { isEnabled as traceEnabled, write as traceWrite, categories as traceCategories, messageType as traceType } from "../../trace";
+import { PercentLength } from "../styling/style-properties";
 
 export { Color, traceEnabled, traceWrite, traceCategories, traceType };
 export { AnimationPromise } from ".";
@@ -21,6 +22,8 @@ export module Properties {
     export const translate = "translate";
     export const rotate = "rotate";
     export const scale = "scale";
+    export const height = "height";
+    export const width = "width";
 }
 
 export interface PropertyAnimation {
@@ -166,6 +169,9 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
                 throw new Error(`Property ${item} must be valid Pair. Value: ${animationDefinition[item]}`);
             } else if (item === Properties.backgroundColor && !Color.isValid(animationDefinition.backgroundColor)) {
                 throw new Error(`Property ${item} must be valid color. Value: ${animationDefinition[item]}`);
+            } else if (item === Properties.width || item === Properties.height) {
+                // Coerce input into a PercentLength object in case it's a string.
+                animationDefinition[item] = PercentLength.parse(<any>animationDefinition[item]);
             }
         }
 
@@ -237,8 +243,34 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
             });
         }
 
+        // height
+        if (animationDefinition.height !== undefined) {
+            propertyAnimations.push({
+                target: animationDefinition.target,
+                property: Properties.height,
+                value: animationDefinition.height,
+                duration: animationDefinition.duration,
+                delay: animationDefinition.delay,
+                iterations: animationDefinition.iterations,
+                curve: animationDefinition.curve
+            });
+        }
+
+        // width
+        if (animationDefinition.width !== undefined) {
+            propertyAnimations.push({
+                target: animationDefinition.target,
+                property: Properties.width,
+                value: animationDefinition.width,
+                duration: animationDefinition.duration,
+                delay: animationDefinition.delay,
+                iterations: animationDefinition.iterations,
+                curve: animationDefinition.curve
+            });
+        }
+
         if (propertyAnimations.length === 0) {
-            throw new Error("No animation property specified.");
+            throw new Error('No known animation properties specified');
         }
 
         return propertyAnimations;
@@ -255,4 +287,4 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
             curve: animation.curve
         });
     }
-}
\ No newline at end of file
+}
diff --git a/tns-core-modules/ui/animation/animation.android.ts b/tns-core-modules/ui/animation/animation.android.ts
index b536c6937..5038ed0b0 100644
--- a/tns-core-modules/ui/animation/animation.android.ts
+++ b/tns-core-modules/ui/animation/animation.android.ts
@@ -5,13 +5,14 @@ import { View } from "../core/view";
 import { AnimationBase, Properties, PropertyAnimation, CubicBezierAnimationCurve, AnimationPromise, Color, traceWrite, traceEnabled, traceCategories, traceType } from "./animation-common";
 import {
     opacityProperty, backgroundColorProperty, rotateProperty,
-    translateXProperty, translateYProperty, scaleXProperty, scaleYProperty
+    translateXProperty, translateYProperty, scaleXProperty, scaleYProperty,
+    heightProperty, widthProperty, PercentLength
 } from "../styling/style-properties";
 
 import { layout } from "../../utils/utils";
 import { device } from "../../platform";
 import lazy from "../../utils/lazy";
-
+import * as platform from '../../platform';
 export * from "./animation-common";
 
 interface AnimationDefinitionInternal extends AnimationDefinition {
@@ -38,6 +39,8 @@ propertyKeys[Properties.opacity] = Symbol(keyPrefix + Properties.opacity);
 propertyKeys[Properties.rotate] = Symbol(keyPrefix + Properties.rotate);
 propertyKeys[Properties.scale] = Symbol(keyPrefix + Properties.scale);
 propertyKeys[Properties.translate] = Symbol(keyPrefix + Properties.translate);
+propertyKeys[Properties.height] = Symbol(keyPrefix + Properties.height);
+propertyKeys[Properties.width] = Symbol(keyPrefix + Properties.width);
 
 export function _resolveAnimationCurve(curve: string | CubicBezierAnimationCurve | android.view.animation.Interpolator | android.view.animation.LinearInterpolator): android.view.animation.Interpolator {
     switch (curve) {
@@ -224,7 +227,7 @@ export class Animation extends AnimationBase {
         }
     }
 
-    private _onAndroidAnimationCancel() { // tslint:disable-line 
+    private _onAndroidAnimationCancel() { // tslint:disable-line
         this._propertyResetCallbacks.forEach(v => v());
         this._rejectAnimationFinishedPromise();
 
@@ -450,9 +453,48 @@ export class Animation extends AnimationBase {
                 }));
                 animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "rotation", nativeArray));
                 break;
+            case Properties.width:
+            case Properties.height: {
 
+                const isVertical: boolean = propertyAnimation.property === 'height';
+                const extentProperty = isVertical ? heightProperty : widthProperty;
+
+                extentProperty._initDefaultNativeValue(style);
+                nativeArray = Array.create("float", 2);
+                let toValue = propertyAnimation.value;
+                let parent = propertyAnimation.target.parent as View;
+                if (!parent) {
+                    throw new Error(`cannot animate ${propertyAnimation.property} on root view`);
+                }
+                const parentExtent: number = isVertical ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
+                toValue = PercentLength.toDevicePixels(toValue, parentExtent, parentExtent) / platform.screen.mainScreen.scale;
+                const nativeHeight: number = isVertical ? nativeView.getHeight() : nativeView.getWidth();
+                const targetStyle: string = setLocal ? extentProperty.name : extentProperty.keyframe;
+                originalValue1 = nativeHeight / platform.screen.mainScreen.scale;
+                nativeArray[0] = originalValue1;
+                nativeArray[1] = toValue;
+                let extentAnimator = android.animation.ValueAnimator.ofFloat(nativeArray);
+                extentAnimator.addUpdateListener(new android.animation.ValueAnimator.AnimatorUpdateListener({
+                    onAnimationUpdate(animator: android.animation.ValueAnimator) {
+                        const argb = (<java.lang.Float>animator.getAnimatedValue()).floatValue();
+                        propertyAnimation.target.style[setLocal ? extentProperty.name : extentProperty.keyframe] = argb;
+                    }
+                }));
+                propertyUpdateCallbacks.push(checkAnimation(() => {
+                    propertyAnimation.target.style[targetStyle] = propertyAnimation.value;
+                }));
+                propertyResetCallbacks.push(checkAnimation(() => {
+                    propertyAnimation.target.style[targetStyle] = originalValue1;
+                    if (propertyAnimation.target.nativeViewProtected) {
+                        const setter = propertyAnimation.target[extentProperty.setNative];
+                        setter(propertyAnimation.target.style[propertyAnimation.property]);
+                    }
+                }));
+                animators.push(extentAnimator);
+                break;
+            }
             default:
-                throw new Error("Cannot animate " + propertyAnimation.property);
+                throw new Error(`Animating property '${propertyAnimation.property}' is unsupported`);
         }
 
         for (let i = 0, length = animators.length; i < length; i++) {
diff --git a/tns-core-modules/ui/animation/animation.d.ts b/tns-core-modules/ui/animation/animation.d.ts
index 02e42000c..e20b4ab63 100644
--- a/tns-core-modules/ui/animation/animation.d.ts
+++ b/tns-core-modules/ui/animation/animation.d.ts
@@ -3,6 +3,7 @@
  */ /** */
 
 import { View, Color } from "../core/view";
+import {PercentLength} from '../styling/style-properties';
 
 /**
  * Defines animation options for the View.animate method.
@@ -33,6 +34,16 @@ export interface AnimationDefinition {
      */
     scale?: Pair;
 
+    /**
+     * Animates the height of a view.
+     */
+    height?: PercentLength | string;
+
+    /**
+     * Animates the width of a view.
+     */
+    width?: PercentLength | string;
+
     /**
      * Animates the rotate affine transform of the view. Value should be a number specifying the rotation amount in degrees.
      */
diff --git a/tns-core-modules/ui/animation/animation.ios.ts b/tns-core-modules/ui/animation/animation.ios.ts
index 2007b637e..21b6d5d27 100644
--- a/tns-core-modules/ui/animation/animation.ios.ts
+++ b/tns-core-modules/ui/animation/animation.ios.ts
@@ -4,9 +4,13 @@ import { View } from "../core/view";
 import { AnimationBase, Properties, PropertyAnimation, CubicBezierAnimationCurve, AnimationPromise, traceWrite, traceEnabled, traceCategories, traceType } from "./animation-common";
 import {
     opacityProperty, backgroundColorProperty, rotateProperty,
-    translateXProperty, translateYProperty, scaleXProperty, scaleYProperty
+    translateXProperty, translateYProperty, scaleXProperty, scaleYProperty,
+    heightProperty, widthProperty, PercentLength
 } from "../styling/style-properties";
 
+import { ios } from "../../utils/utils";
+import * as platform from "../../platform";
+
 export * from "./animation-common";
 
 let _transform = "_transform";
@@ -78,6 +82,12 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
                 targetStyle[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value.x;
                 targetStyle[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value.y;
                 break;
+            case Properties.height:
+                targetStyle[setLocal ? heightProperty.name : heightProperty.keyframe] = value;
+                break;
+            case Properties.width:
+                targetStyle[setLocal ? widthProperty.name : widthProperty.keyframe] = value;
+                break;
             case Properties.scale:
                 targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x === 0 ? 0.001 : value.x;
                 targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y === 0 ? 0.001 : value.y;
@@ -263,8 +273,10 @@ export class Animation extends AnimationBase {
 
         let nativeView = <UIView>animation.target.nativeViewProtected;
         let propertyNameToAnimate = animation.property;
-        let value = animation.value;
-        let originalValue;
+        let toValue = animation.value;
+        let fromValue;
+        const parent = animation.target.parent as View;
+        const screenScale: number = platform.screen.mainScreen.scale;
 
         let tempRotate = (animation.target.rotate || 0) * Math.PI / 180;
         let abs;
@@ -277,18 +289,18 @@ export class Animation extends AnimationBase {
                 animation._propertyResetCallback = (value, valueSource) => {
                     animation.target.style[setLocal ? backgroundColorProperty.name : backgroundColorProperty.keyframe] = value;
                 };
-                originalValue = nativeView.layer.backgroundColor;
+                fromValue = nativeView.layer.backgroundColor;
                 if (nativeView instanceof UILabel) {
                     nativeView.setValueForKey(UIColor.clearColor, "backgroundColor");
                 }
-                value = value.CGColor;
+                toValue = toValue.CGColor;
                 break;
             case Properties.opacity:
                 animation._originalValue = animation.target.opacity;
                 animation._propertyResetCallback = (value, valueSource) => {
                     animation.target.style[setLocal ? opacityProperty.name : opacityProperty.keyframe] = value;
                 };
-                originalValue = nativeView.layer.opacity;
+                fromValue = nativeView.layer.opacity;
                 break;
             case Properties.rotate:
                 animation._originalValue = animation.target.rotate !== undefined ? animation.target.rotate : 0;
@@ -296,44 +308,44 @@ export class Animation extends AnimationBase {
                     animation.target.style[setLocal ? rotateProperty.name : rotateProperty.keyframe] = value;
                 };
                 propertyNameToAnimate = "transform.rotation";
-                originalValue = nativeView.layer.valueForKeyPath("transform.rotation");
-                if (animation.target.rotate !== undefined && animation.target.rotate !== 0 && Math.floor(value / 360) - value / 360 === 0) {
-                    originalValue = animation.target.rotate * Math.PI / 180;
+                fromValue = nativeView.layer.valueForKeyPath("transform.rotation");
+                if (animation.target.rotate !== undefined && animation.target.rotate !== 0 && Math.floor(toValue / 360) - toValue / 360 === 0) {
+                    fromValue = animation.target.rotate * Math.PI / 180;
                 }
-                value = value * Math.PI / 180;
-                abs = fabs(originalValue - value);
-                if (abs < 0.001 && originalValue !== tempRotate) {
-                    originalValue = tempRotate;
+                toValue = toValue * Math.PI / 180;
+                abs = fabs(fromValue - toValue);
+                if (abs < 0.001 && fromValue !== tempRotate) {
+                    fromValue = tempRotate;
                 }
                 break;
             case Properties.translate:
-                animation._originalValue = { x: animation.target.translateX, y: animation.target.translateY };
+                animation._originalValue = {x: animation.target.translateX, y: animation.target.translateY};
                 animation._propertyResetCallback = (value, valueSource) => {
                     animation.target.style[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value.x;
                     animation.target.style[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value.y;
                 };
                 propertyNameToAnimate = "transform";
-                originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
-                value = NSValue.valueWithCATransform3D(CATransform3DTranslate(nativeView.layer.transform, value.x, value.y, 0));
+                fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
+                toValue = NSValue.valueWithCATransform3D(CATransform3DTranslate(nativeView.layer.transform, toValue.x, toValue.y, 0));
                 break;
             case Properties.scale:
-                if (value.x === 0) {
-                    value.x = 0.001;
+                if (toValue.x === 0) {
+                    toValue.x = 0.001;
                 }
-                if (value.y === 0) {
-                    value.y = 0.001;
+                if (toValue.y === 0) {
+                    toValue.y = 0.001;
                 }
-                animation._originalValue = { x: animation.target.scaleX, y: animation.target.scaleY };
+                animation._originalValue = {x: animation.target.scaleX, y: animation.target.scaleY};
                 animation._propertyResetCallback = (value, valueSource) => {
                     animation.target.style[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x;
                     animation.target.style[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y;
                 };
                 propertyNameToAnimate = "transform";
-                originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
-                value = NSValue.valueWithCATransform3D(CATransform3DScale(nativeView.layer.transform, value.x, value.y, 1));
+                fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
+                toValue = NSValue.valueWithCATransform3D(CATransform3DScale(nativeView.layer.transform, toValue.x, toValue.y, 1));
                 break;
             case _transform:
-                originalValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
+                fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
                 animation._originalValue = {
                     xs: animation.target.scaleX, ys: animation.target.scaleY,
                     xt: animation.target.translateX, yt: animation.target.translateY
@@ -345,10 +357,33 @@ export class Animation extends AnimationBase {
                     animation.target.style[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.ys;
                 };
                 propertyNameToAnimate = "transform";
-                value = NSValue.valueWithCATransform3D(Animation._createNativeAffineTransform(animation));
+                toValue = NSValue.valueWithCATransform3D(Animation._createNativeAffineTransform(animation));
+                break;
+            case Properties.width:
+            case Properties.height:
+                const direction: string = animation.property;
+                const isHeight: boolean = direction === 'height';
+                propertyNameToAnimate = "bounds";
+                if (!parent) {
+                    throw new Error(`cannot animate ${direction} on root view`);
+                }
+                const parentExtent: number = isHeight ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
+                const asNumber = PercentLength.toDevicePixels(PercentLength.parse(toValue), parentExtent, parentExtent) / screenScale;
+                let currentBounds = nativeView.layer.bounds;
+                let extentX = isHeight ? currentBounds.size.width : asNumber;
+                let extentY = isHeight ? asNumber : currentBounds.size.height;
+                fromValue = NSValue.valueWithCGRect(currentBounds);
+                toValue = NSValue.valueWithCGRect(
+                    CGRectMake(currentBounds.origin.x, currentBounds.origin.y, extentX, extentY)
+                );
+                animation._originalValue = animation.target.height;
+                animation._propertyResetCallback = (value, valueSource) => {
+                    const prop = isHeight ? heightProperty : widthProperty;
+                    animation.target.style[setLocal ? prop.name : prop.keyframe] = value;
+                };
                 break;
             default:
-                throw new Error("Cannot animate " + animation.property);
+                throw new Error(`Animating property '${animation.property}' is unsupported`);
         }
 
         let duration = 0.3;
@@ -373,8 +408,8 @@ export class Animation extends AnimationBase {
 
         return {
             propertyNameToAnimate: propertyNameToAnimate,
-            fromValue: originalValue,
-            toValue: value,
+            fromValue: fromValue,
+            toValue: toValue,
             duration: duration,
             repeatCount: repeatCount,
             delay: delay
@@ -450,6 +485,14 @@ export class Animation extends AnimationBase {
                     case Properties.opacity:
                         animation.target.opacity = args.toValue;
                         break;
+                    case Properties.height:
+                    case Properties.width:
+                        animation._originalValue = animation.target[animation.property];
+                        nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
+                        animation._propertyResetCallback = function (value) {
+                            animation.target[animation.property] = value;
+                        };
+                        break;
                     case Properties.rotate:
                         nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
                         break;
@@ -458,11 +501,11 @@ export class Animation extends AnimationBase {
                         nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
                         animation._propertyResetCallback = function (value) {
                             nativeView.layer.transform = value;
-                        }
+                        };
                         break;
                 }
-            }, function (finished: boolean) {
-                if (finished) {
+            }, function (animationDidFinish: boolean) {
+                if (animationDidFinish) {
                     if (animation.property === _transform) {
                         if (animation.value[Properties.translate] !== undefined) {
                             animation.target.translateX = animation.value[Properties.translate].x;
@@ -480,10 +523,10 @@ export class Animation extends AnimationBase {
                     }
                 }
                 if (finishedCallback) {
-                    let cancelled = !finished;
+                    let cancelled = !animationDidFinish;
                     finishedCallback(cancelled);
                 }
-                if (finished && nextAnimation) {
+                if (animationDidFinish && nextAnimation) {
                     nextAnimation();
                 }
             });
diff --git a/tns-core-modules/ui/animation/keyframe-animation.ts b/tns-core-modules/ui/animation/keyframe-animation.ts
index 49e6887bc..b95d83863 100644
--- a/tns-core-modules/ui/animation/keyframe-animation.ts
+++ b/tns-core-modules/ui/animation/keyframe-animation.ts
@@ -21,7 +21,8 @@ import {
     backgroundColorProperty,
     scaleXProperty, scaleYProperty,
     translateXProperty, translateYProperty,
-    rotateProperty, opacityProperty
+    rotateProperty, opacityProperty,
+    widthProperty, heightProperty, PercentLength
 } from "../styling/style-properties";
 
 export class Keyframes implements KeyframesDefinition {
@@ -62,6 +63,8 @@ interface Keyframe {
     translate?: { x: number, y: number };
     rotate?: number;
     opacity?: number;
+    width?: PercentLength;
+    height?: PercentLength;
     valueSource?: "keyframe" | "animation";
     duration?: number;
     curve?: any;
@@ -213,6 +216,12 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
             if ("opacity" in animation) {
                 view.style[opacityProperty.keyframe] = animation.opacity;
             }
+            if ("height" in animation) {
+                view.style[heightProperty.keyframe] = animation.height;
+            }
+            if ("width" in animation) {
+                view.style[widthProperty.keyframe] = animation.width;
+            }
 
             setTimeout(() => this.animate(view, 1, iterations), 1);
         }
@@ -287,5 +296,11 @@ export class KeyframeAnimation implements KeyframeAnimationDefinition {
         if ("opacity" in animation) {
             view.style[opacityProperty.keyframe] = unsetValue;
         }
+        if ("height" in animation) {
+            view.style[heightProperty.keyframe] = unsetValue;
+        }
+        if ("width" in animation) {
+            view.style[widthProperty.keyframe] = unsetValue;
+        }
     }
 }
diff --git a/tns-core-modules/ui/styling/style-properties.d.ts b/tns-core-modules/ui/styling/style-properties.d.ts
index 163df0cdd..e0b907ace 100644
--- a/tns-core-modules/ui/styling/style-properties.d.ts
+++ b/tns-core-modules/ui/styling/style-properties.d.ts
@@ -85,8 +85,8 @@ export const opacityProperty: CssAnimationProperty<Style, number>;
 
 export const minWidthProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
 export const minHeightProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>;
-export const widthProperty: CssProperty<Style, PercentLength>;
-export const heightProperty: CssProperty<Style, PercentLength>;
+export const widthProperty: CssAnimationProperty<Style, PercentLength>;
+export const heightProperty: CssAnimationProperty<Style, PercentLength>;
 export const lineHeightProperty: CssProperty<Style, number>;
 export const marginProperty: ShorthandProperty<Style, string | PercentLength>;
 export const marginLeftProperty: CssProperty<Style, PercentLength>;
diff --git a/tns-core-modules/ui/styling/style-properties.ts b/tns-core-modules/ui/styling/style-properties.ts
index 185446827..47489ece1 100644
--- a/tns-core-modules/ui/styling/style-properties.ts
+++ b/tns-core-modules/ui/styling/style-properties.ts
@@ -49,13 +49,19 @@ function equalsCommon(a: PercentLength, b: PercentLength): boolean {
         if (typeof b === "number") {
             return a == b; // tslint:disable-line
         }
+        if (!b) {
+            return false;
+        }
         return b.unit == "dip" && a == b.value; // tslint:disable-line
     }
     if (b == "auto") { // tslint:disable-line
         return false;
     }
     if (typeof b === "number") {
-        return a.unit == "dip" && a.value == b; // tslint:disable-line
+        return a ? (a.unit == "dip" && a.value == b) : false; // tslint:disable-line
+    }
+    if (!a || !b) {
+        return false;
     }
     return a.value == b.value && a.unit == b.unit; // tslint:disable-line
 }
@@ -84,6 +90,9 @@ function toDevicePixelsCommon(length: PercentLength, auto: number = Number.NaN,
     if (typeof length === "number") {
         return layout.round(layout.toDevicePixels(length));
     }
+    if (!length) {
+        return auto;
+    }
     switch (length.unit) {
         case "px":
             return layout.round(length.value);
@@ -109,6 +118,7 @@ export namespace PercentLength {
                 if (percentIndex !== (stringValue.length - 1) || percentIndex === 0) {
                     value = Number.NaN;
                 } else {
+                    // Normalize result to values between -1 and 1
                     value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
                 }
 
@@ -188,10 +198,28 @@ export const minHeightProperty = new CssProperty<Style, Length>({
 });
 minHeightProperty.register(Style);
 
-export const widthProperty = new CssProperty<Style, PercentLength>({ name: "width", cssName: "width", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
+export const widthProperty = new CssAnimationProperty<Style, PercentLength>({
+    name: "width", cssName: "width", defaultValue: "auto", equalityComparer: Length.equals,
+    // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
+    //       on the animation property, so fake it here. x_x
+    valueChanged: (target, oldValue, newValue) => {
+        if (isIOS) {
+            target.view.requestLayout();
+        }
+    }, valueConverter: PercentLength.parse });
 widthProperty.register(Style);
 
-export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: "auto", affectsLayout: isIOS, equalityComparer: Length.equals, valueConverter: PercentLength.parse });
+export const heightProperty = new CssAnimationProperty<Style, PercentLength>({
+    name: "height", cssName: "height", defaultValue: "auto", equalityComparer: Length.equals,
+    // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
+    //       on the animation property, so fake it here. -_-
+    valueChanged: (target, oldValue, newValue) => {
+        if (isIOS) {
+            target.view.requestLayout();
+        }
+    }, valueConverter: PercentLength.parse,
+
+});
 heightProperty.register(Style);
 
 const marginProperty = new ShorthandProperty<Style, string | PercentLength>({

From a84b6301edd3aa488cbf9b08489b8e0cfb8bd0d3 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Tue, 7 May 2019 15:58:16 +0300
Subject: [PATCH 2/4] chore: fix tslint errors

---
 .../animation/animation-army-100.ts           | 56 +++++++++----------
 .../animation/animation-curves.ts             | 46 +++++++--------
 .../animation/effect-summary-details.ts       | 28 +++++-----
 .../ui-tests-app/animation/height-basic.ts    |  6 +-
 .../animation/layout-stack-height.ts          |  4 +-
 tests/app/ui/animation/animation-tests.ts     | 52 ++++++++---------
 .../app/ui/styling/style-properties-tests.ts  | 20 +++----
 .../ui/animation/animation-common.ts          |  2 +-
 .../ui/animation/animation.android.ts         |  4 +-
 tns-core-modules/ui/animation/animation.d.ts  |  2 +-
 .../ui/animation/animation.ios.ts             |  2 +-
 11 files changed, 111 insertions(+), 111 deletions(-)

diff --git a/apps/app/ui-tests-app/animation/animation-army-100.ts b/apps/app/ui-tests-app/animation/animation-army-100.ts
index 994d811ec..7f74f1c2d 100644
--- a/apps/app/ui-tests-app/animation/animation-army-100.ts
+++ b/apps/app/ui-tests-app/animation/animation-army-100.ts
@@ -1,16 +1,16 @@
-import * as view from 'tns-core-modules/ui/core/view';
-import {View} from 'tns-core-modules/ui/core/view';
-import * as pages from 'tns-core-modules/ui/page';
-import {Button} from 'tns-core-modules/ui/button';
-import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
-import {Label} from 'tns-core-modules/ui/label';
-import {Animation, AnimationDefinition} from 'tns-core-modules/ui/animation';
-import * as fpsMeter from 'tns-core-modules/fps-meter';
+import * as view from "tns-core-modules/ui/core/view";
+import { View } from "tns-core-modules/ui/core/view";
+import * as pages from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+import { SegmentedBar, SegmentedBarItem } from "tns-core-modules/ui/segmented-bar";
+import { Label } from "tns-core-modules/ui/label";
+import { Animation, AnimationDefinition } from "tns-core-modules/ui/animation";
+import * as fpsMeter from "tns-core-modules/fps-meter";
 
 let fpsCallbackId;
 export function onLoaded(args) {
     const page = args.object;
-    const fpsLabel = view.getViewById(page, 'fps') as Label;
+    const fpsLabel = view.getViewById(page, "fps") as Label;
     fpsCallbackId = fpsMeter.addCallback((fps: number, minFps: number) => {
         fpsLabel.text = `${fps.toFixed(2)}/${minFps.toFixed(2)}`;
     });
@@ -30,47 +30,47 @@ export function getBoxPropertyAnimationData(property: string,
     let animateKey;
     let animateValueTo;
     let animateValueFrom;
-    let animateDuration = animateEase === 'spring' ? 800 : 500;
-    let animateReturnDelay = animateEase === 'spring' ? 0 : 200;
+    let animateDuration = animateEase === "spring" ? 800 : 500;
+    let animateReturnDelay = animateEase === "spring" ? 0 : 200;
 
     // Determine the full animation property name (some are shortened in UI), and the demo to/from values
     switch (property) {
-        case 'height':
+        case "height":
             target.originX = target.originY = 0.5;
-            animateKey = 'height';
+            animateKey = "height";
             animateValueTo = 0;
             animateValueFrom = extentY;
             break;
-        case 'width':
+        case "width":
             target.originX = target.originY = 0.5;
-            animateKey = 'width';
+            animateKey = "width";
             animateValueTo = 0;
             animateValueFrom = extentX;
             break;
-        case 'opacity':
-            animateKey = 'opacity';
+        case "opacity":
+            animateKey = "opacity";
             animateValueTo = 0;
             animateValueFrom = 1;
             break;
-        case 'color':
-            animateKey = 'backgroundColor';
-            animateValueTo = 'blue';
-            animateValueFrom = 'purple';
+        case "color":
+            animateKey = "backgroundColor";
+            animateValueTo = "blue";
+            animateValueFrom = "purple";
             break;
-        case 'rotate':
+        case "rotate":
             target.originX = target.originY = 0.5;
-            animateKey = 'rotate';
+            animateKey = "rotate";
             animateValueTo = 180;
             animateValueFrom = 0;
             break;
-        case 'scale':
+        case "scale":
             target.originX = target.originY = 0.5;
-            animateKey = 'scale';
+            animateKey = "scale";
             animateValueTo = {x: 0.1, y: 0.1};
             animateValueFrom = {x: 1, y: 1};
             break;
         default:
-            throw new Error(`demo animation for '${property}' is not implemented`);
+            throw new Error(`demo animation for "${property}" is not implemented`);
     }
 
     return {
@@ -86,12 +86,12 @@ export function getBoxPropertyAnimationData(property: string,
 export function easeAnimate(args) {
     const clicked = args.object as Button;
     const page: pages.Page = clicked.page;
-    const select = view.getViewById(page, 'select') as SegmentedBar;
+    const select = view.getViewById(page, "select") as SegmentedBar;
     const item: SegmentedBarItem = select.items[select.selectedIndex];
     const animsIn: AnimationDefinition[] = [];
     const animsOut: AnimationDefinition[] = [];
     for (let i = 0; i < 100; i++) {
-        const box = view.getViewById(page, 'el-' + i) as Label;
+        const box = view.getViewById(page, "el-" + i) as Label;
         const prop = getBoxPropertyAnimationData(item.title, clicked.text, box, 32, 24);
         animsIn.push({
             [prop.animateKey]: prop.animateValueTo,
diff --git a/apps/app/ui-tests-app/animation/animation-curves.ts b/apps/app/ui-tests-app/animation/animation-curves.ts
index d261ee66a..c90abe64d 100644
--- a/apps/app/ui-tests-app/animation/animation-curves.ts
+++ b/apps/app/ui-tests-app/animation/animation-curves.ts
@@ -1,54 +1,54 @@
-import * as view from 'tns-core-modules/ui/core/view';
-import * as pages from 'tns-core-modules/ui/page';
-import {Button} from 'tns-core-modules/ui/button';
-import {SegmentedBar, SegmentedBarItem} from 'tns-core-modules/ui/segmented-bar';
-import {Label} from 'tns-core-modules/ui/label';
+import * as view from "tns-core-modules/ui/core/view";
+import * as pages from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+import { SegmentedBar, SegmentedBarItem } from "tns-core-modules/ui/segmented-bar";
+import { Label } from "tns-core-modules/ui/label";
 
 export function easeAnimate(args) {
     const clicked = args.object as Button;
     const page: pages.Page = clicked.page;
-    const target = view.getViewById(page, 'target') as Label;
-    const select = view.getViewById(page, 'select') as SegmentedBar;
+    const target = view.getViewById(page, "target") as Label;
+    const select = view.getViewById(page, "select") as SegmentedBar;
     const item: SegmentedBarItem = select.items[select.selectedIndex];
     const easeType: string = clicked.text;
     const extent = 128;
-    let duration = easeType === 'spring' ? 800 : 500;
-    let delay = easeType === 'spring' ? 0 : 200;
+    let duration = easeType === "spring" ? 800 : 500;
+    let delay = easeType === "spring" ? 0 : 200;
     let animateKey: string = null;
     let animateValueTo: any = null;
     let animateValueFrom: any = null;
 
     switch (item.title) {
-        case 'height':
-            animateKey = 'height';
+        case "height":
+            animateKey = "height";
             target.originX = target.originY = 0;
             animateValueTo = 0;
             animateValueFrom = extent;
             break;
-        case 'width':
-            animateKey = 'width';
+        case "width":
+            animateKey = "width";
             target.originX = target.originY = 0;
             animateValueTo = 0;
             animateValueFrom = extent;
             break;
-        case 'opacity':
-            animateKey = 'opacity';
+        case "opacity":
+            animateKey = "opacity";
             animateValueTo = 0;
             animateValueFrom = 1;
             break;
-        case 'color':
-            animateKey = 'backgroundColor';
-            animateValueTo = 'blue';
-            animateValueFrom = 'purple';
+        case "color":
+            animateKey = "backgroundColor";
+            animateValueTo = "blue";
+            animateValueFrom = "purple";
             break;
-        case 'rotate':
-            animateKey = 'rotate';
+        case "rotate":
+            animateKey = "rotate";
             target.originX = target.originY = 0.5;
             animateValueTo = 180;
             animateValueFrom = 0;
             break;
-        case 'scale':
-            animateKey = 'scale';
+        case "scale":
+            animateKey = "scale";
             target.originX = target.originY = 0.5;
             animateValueTo = {x: 1.5, y: 1.5};
             animateValueFrom = {x: 1, y: 1};
diff --git a/apps/app/ui-tests-app/animation/effect-summary-details.ts b/apps/app/ui-tests-app/animation/effect-summary-details.ts
index 30fb15b83..fafdf515a 100644
--- a/apps/app/ui-tests-app/animation/effect-summary-details.ts
+++ b/apps/app/ui-tests-app/animation/effect-summary-details.ts
@@ -1,9 +1,9 @@
-import * as view from 'tns-core-modules/ui/core/view';
-import * as pages from 'tns-core-modules/ui/page';
-import * as platform from 'tns-core-modules/platform';
-import {Animation} from 'tns-core-modules/ui/animation';
-import {TextView} from 'tns-core-modules/ui/text-view';
-import {isIOS} from 'tns-core-modules/platform';
+import * as view from "tns-core-modules/ui/core/view";
+import * as pages from "tns-core-modules/ui/page";
+import * as platform from "tns-core-modules/platform";
+import { Animation } from "tns-core-modules/ui/animation";
+import { TextView } from "tns-core-modules/ui/text-view";
+import { isIOS } from "tns-core-modules/platform";
 
 let toggle = false;
 
@@ -15,7 +15,7 @@ export function pageLoaded(args) {
         screenHeight,
         screenYCenter,
         detailsHeight: 96,
-        summary: 'Space! 🌌',
+        summary: "Space! 🌌",
         ipsum: `Houston, Tranquillity Base here. The Eagle has landed.
 
 For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.
@@ -30,7 +30,7 @@ NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be
 
 Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next 10.
 
-Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.
+Science cuts two ways, of course; its products can be used for both good and evil. But there"s no turning back from science. The early warnings about technological dangers also come from science.
 
 Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind.
 
@@ -43,13 +43,13 @@ http://spaceipsum.com`
 export function theFinalFrontier(args) {
     const clicked = args.object as view.View;
     const page: pages.Page = clicked.page;
-    const details = view.getViewById(page, 'details') as TextView;
+    const details = view.getViewById(page, "details") as TextView;
     const ctx = page.bindingContext;
     const detailHeaderHeight: number = ctx.detailsHeight;
 
     let statusBar = 0;
-    if(isIOS) {
-        const {ios} = require('tns-core-modules/ui/utils');
+    if (isIOS) {
+        const {ios} = require("tns-core-modules/ui/utils");
         statusBar = ios.getStatusBarHeight();
     }
 
@@ -57,9 +57,9 @@ export function theFinalFrontier(args) {
     const transitions = [
         {
             target: clicked,
-            height: toggle ? '100%' : detailHeaderHeight,
+            height: toggle ? "100%" : detailHeaderHeight,
             duration: 200,
-            curve: 'ease'
+            curve: "ease"
         },
         {
             target: details,
@@ -70,7 +70,7 @@ export function theFinalFrontier(args) {
                 y: toggle ? 50 : 0,
             },
             duration: 200,
-            curve: 'easeIn'
+            curve: "easeIn"
         }
     ];
     const animationSet = new Animation(transitions, false);
diff --git a/apps/app/ui-tests-app/animation/height-basic.ts b/apps/app/ui-tests-app/animation/height-basic.ts
index a8fa41154..8cd68627a 100644
--- a/apps/app/ui-tests-app/animation/height-basic.ts
+++ b/apps/app/ui-tests-app/animation/height-basic.ts
@@ -1,4 +1,4 @@
-import {Label} from 'tns-core-modules/ui/label';
+import { Label } from "tns-core-modules/ui/label";
 
 let toggle = false;
 
@@ -6,9 +6,9 @@ export function animateHeight(args) {
     const clicked = args.object as Label;
     clicked
         .animate({
-            height: toggle ? 128 : '100%',
+            height: toggle ? 128 : "100%",
             duration: 200,
-            curve: 'easeInOut'
+            curve: "easeInOut"
         })
         .then(() => {
             clicked.text = toggle ? "Cool." : "Tap here";
diff --git a/apps/app/ui-tests-app/animation/layout-stack-height.ts b/apps/app/ui-tests-app/animation/layout-stack-height.ts
index 732891a37..09c5135df 100644
--- a/apps/app/ui-tests-app/animation/layout-stack-height.ts
+++ b/apps/app/ui-tests-app/animation/layout-stack-height.ts
@@ -1,4 +1,4 @@
-import * as view from 'tns-core-modules/ui/core/view';
+import * as view from "tns-core-modules/ui/core/view";
 
 export function tapLabel(args) {
     const clicked: view.View = args.object;
@@ -6,7 +6,7 @@ export function tapLabel(args) {
     clicked.animate({
         height: graffiti.toggle ? 64 : 128,
         duration: 200,
-        curve: 'easeOut'
+        curve: "easeOut"
     });
     graffiti.toggle = !graffiti.toggle;
 }
diff --git a/tests/app/ui/animation/animation-tests.ts b/tests/app/ui/animation/animation-tests.ts
index 4ec3e5311..2652cfc8e 100644
--- a/tests/app/ui/animation/animation-tests.ts
+++ b/tests/app/ui/animation/animation-tests.ts
@@ -9,7 +9,7 @@ import { AnimationPromise } from "tns-core-modules/ui/animation";
 
 // >> animation-require
 import * as animation from "tns-core-modules/ui/animation";
-import {PercentLength} from "tns-core-modules/ui/styling/style-properties";
+import { PercentLength } from "tns-core-modules/ui/styling/style-properties";
 // << animation-require
 
 function prepareTest(parentHeight?: number, parentWidth?: number): Label {
@@ -20,10 +20,10 @@ function prepareTest(parentHeight?: number, parentWidth?: number): Label {
     let stackLayout = new StackLayout();
     // optionally size the parent extent to make assertions about percentage values
     if (parentHeight !== undefined) {
-        stackLayout.height = PercentLength.parse(parentHeight + '');
+        stackLayout.height = PercentLength.parse(parentHeight + "");
     }
     if (parentWidth !== undefined) {
-        stackLayout.width = PercentLength.parse(parentWidth + '');
+        stackLayout.width = PercentLength.parse(parentWidth + "");
     }
     stackLayout.addChild(label);
     mainPage.content = stackLayout;
@@ -403,13 +403,13 @@ export function test_AnimateRotate(done) {
         });
 }
 
-function animateExtentAndAssertExpected(along: 'height' | 'width', value: PercentLength, pixelExpected: PercentLength): Promise<void> {
+function animateExtentAndAssertExpected(along: "height" | "width", value: PercentLength, pixelExpected: PercentLength): Promise<void> {
     function pretty(val) {
         return JSON.stringify(val, null, 2);
     }
     const parentExtent = 200;
-    const height = along === 'height' ? parentExtent : undefined;
-    const width = along === 'height' ? undefined : parentExtent;
+    const height = along === "height" ? parentExtent : undefined;
+    const width = along === "height" ? undefined : parentExtent;
     const label = prepareTest(height, width);
     const props = {
         duration: 5,
@@ -421,15 +421,15 @@ function animateExtentAndAssertExpected(along: 'height' | 'width', value: Percen
         TKUnit.assertEqual(
             observedString,
             inputString,
-            `PercentLength.convertToString(${pretty(value)}) should be '${inputString}' but is '${observedString}'`
+            `PercentLength.convertToString(${pretty(value)}) should be "${inputString}" but is "${observedString}"`
         );
-        // assert that the animated view's calculated pixel extent matches the expected pixel value
+        // assert that the animated view"s calculated pixel extent matches the expected pixel value
         const observedNumber: number = PercentLength.toDevicePixels(label[along], parentExtent, parentExtent);
         const expectedNumber: number = PercentLength.toDevicePixels(pixelExpected, parentExtent, parentExtent);
         TKUnit.assertEqual(
             observedNumber,
             expectedNumber,
-            `PercentLength.toDevicePixels(${inputString}) should be '${expectedNumber}' but is '${observedNumber}'`
+            `PercentLength.toDevicePixels(${inputString}) should be "${expectedNumber}" but is "${observedNumber}"`
         );
         assertIOSNativeTransformIsCorrect(label);
     });
@@ -438,21 +438,21 @@ function animateExtentAndAssertExpected(along: 'height' | 'width', value: Percen
 export function test_AnimateExtent_Should_ResolvePercentageStrings(done) {
     let promise: Promise<any> = Promise.resolve();
     const pairs: [string, string][] = [
-        ['100%', '200px'],
-        ['50%', '100px'],
-        ['25%', '50px'],
-        ['-25%', '-50px'],
-        ['-50%', '-100px'],
-        ['-100%', '-200px'],
+        ["100%", "200px"],
+        ["50%", "100px"],
+        ["25%", "50px"],
+        ["-25%", "-50px"],
+        ["-50%", "-100px"],
+        ["-100%", "-200px"],
     ];
     pairs.forEach((pair) => {
         const input = PercentLength.parse(pair[0]);
         const expected = PercentLength.parse(pair[1]);
         promise = promise.then(() => {
-            return animateExtentAndAssertExpected('height', input, expected);
+            return animateExtentAndAssertExpected("height", input, expected);
         });
         promise = promise.then(() => {
-            return animateExtentAndAssertExpected('width', input, expected);
+            return animateExtentAndAssertExpected("width", input, expected);
         });
     });
     promise.then(() => done()).catch(done);
@@ -461,20 +461,20 @@ export function test_AnimateExtent_Should_ResolvePercentageStrings(done) {
 export function test_AnimateExtent_Should_AcceptStringPixelValues(done) {
     let promise: Promise<any> = Promise.resolve();
     const pairs: [string, number][] = [
-        ['100px', 100],
-        ['50px', 50]
+        ["100px", 100],
+        ["50px", 50]
     ];
     pairs.forEach((pair) => {
         const input = PercentLength.parse(pair[0]);
         const expected = {
-            unit: 'px',
+            unit: "px",
             value: pair[1]
         } as PercentLength;
         promise = promise.then(() => {
-            return animateExtentAndAssertExpected('height', input, expected);
+            return animateExtentAndAssertExpected("height", input, expected);
         });
         promise = promise.then(() => {
-            return animateExtentAndAssertExpected('width', input, expected);
+            return animateExtentAndAssertExpected("width", input, expected);
         });
     });
     promise.then(() => done()).catch(done);
@@ -486,10 +486,10 @@ export function test_AnimateExtent_Should_AcceptNumberValuesAsDip(done) {
     inputs.forEach((value) => {
         const parsed = PercentLength.parse(value);
         promise = promise.then(() => {
-            return animateExtentAndAssertExpected('height', parsed, parsed);
+            return animateExtentAndAssertExpected("height", parsed, parsed);
         });
         promise = promise.then(() => {
-            return animateExtentAndAssertExpected('width', parsed, parsed);
+            return animateExtentAndAssertExpected("width", parsed, parsed);
         });
     });
     promise.then(() => done()).catch(done);
@@ -499,10 +499,10 @@ export function test_AnimateExtent_Should_ThrowIfCannotParsePercentLength() {
     const label = new Label();
     helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
         TKUnit.assertThrows(() => {
-            label.animate({width: '-frog%'});
+            label.animate({width: "-frog%"});
         }, "Invalid percent string should throw");
         TKUnit.assertThrows(() => {
-            label.animate({height: '-frog%'});
+            label.animate({height: "-frog%"});
         }, "Invalid percent string should throw");
     });
 }
diff --git a/tests/app/ui/styling/style-properties-tests.ts b/tests/app/ui/styling/style-properties-tests.ts
index adf2b5b26..83f6dc66f 100644
--- a/tests/app/ui/styling/style-properties-tests.ts
+++ b/tests/app/ui/styling/style-properties-tests.ts
@@ -878,26 +878,26 @@ function assertPercentLengthParseInputOutputPairs(pairs: [string, any][]) {
 
 export function test_PercentLength_parses_pixel_values_from_string_input() {
     assertPercentLengthParseInputOutputPairs([
-        ['4px', {unit: 'px', value: 4}],
-        ['-4px', {unit: 'px', value: -4}],
+        ["4px", {unit: "px", value: 4}],
+        ["-4px", {unit: "px", value: -4}],
     ]);
 }
 
 export function test_PercentLength_parses_percentage_values_from_string_input() {
     assertPercentLengthParseInputOutputPairs([
-        ['4%', {unit: '%', value: 0.04}],
-        ['17%', {unit: '%', value: 0.17}],
-        ['-27%', {unit: '%', value: -0.27}],
+        ["4%", {unit: "%", value: 0.04}],
+        ["17%", {unit: "%", value: 0.17}],
+        ["-27%", {unit: "%", value: -0.27}],
     ]);
 }
 
 export function test_PercentLength_parse_throws_given_string_input_it_cannot_parse() {
     const inputs: any[] = [
-        '-l??%',
-        'qre%',
-        'undefinedpx',
-        'undefined',
-        '-frog%'
+        "-l??%",
+        "qre%",
+        "undefinedpx",
+        "undefined",
+        "-frog%"
     ];
     inputs.forEach((input) => {
         TKUnit.assertThrows(() => {
diff --git a/tns-core-modules/ui/animation/animation-common.ts b/tns-core-modules/ui/animation/animation-common.ts
index 96542418e..d88e3f00d 100644
--- a/tns-core-modules/ui/animation/animation-common.ts
+++ b/tns-core-modules/ui/animation/animation-common.ts
@@ -270,7 +270,7 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
         }
 
         if (propertyAnimations.length === 0) {
-            throw new Error('No known animation properties specified');
+            throw new Error("No known animation properties specified");
         }
 
         return propertyAnimations;
diff --git a/tns-core-modules/ui/animation/animation.android.ts b/tns-core-modules/ui/animation/animation.android.ts
index 5038ed0b0..0a8b76a10 100644
--- a/tns-core-modules/ui/animation/animation.android.ts
+++ b/tns-core-modules/ui/animation/animation.android.ts
@@ -12,7 +12,7 @@ import {
 import { layout } from "../../utils/utils";
 import { device } from "../../platform";
 import lazy from "../../utils/lazy";
-import * as platform from '../../platform';
+import * as platform from "../../platform";
 export * from "./animation-common";
 
 interface AnimationDefinitionInternal extends AnimationDefinition {
@@ -456,7 +456,7 @@ export class Animation extends AnimationBase {
             case Properties.width:
             case Properties.height: {
 
-                const isVertical: boolean = propertyAnimation.property === 'height';
+                const isVertical: boolean = propertyAnimation.property === "height";
                 const extentProperty = isVertical ? heightProperty : widthProperty;
 
                 extentProperty._initDefaultNativeValue(style);
diff --git a/tns-core-modules/ui/animation/animation.d.ts b/tns-core-modules/ui/animation/animation.d.ts
index e20b4ab63..06f8acd25 100644
--- a/tns-core-modules/ui/animation/animation.d.ts
+++ b/tns-core-modules/ui/animation/animation.d.ts
@@ -3,7 +3,7 @@
  */ /** */
 
 import { View, Color } from "../core/view";
-import {PercentLength} from '../styling/style-properties';
+import { PercentLength } from "../styling/style-properties";
 
 /**
  * Defines animation options for the View.animate method.
diff --git a/tns-core-modules/ui/animation/animation.ios.ts b/tns-core-modules/ui/animation/animation.ios.ts
index 21b6d5d27..6ad42057a 100644
--- a/tns-core-modules/ui/animation/animation.ios.ts
+++ b/tns-core-modules/ui/animation/animation.ios.ts
@@ -362,7 +362,7 @@ export class Animation extends AnimationBase {
             case Properties.width:
             case Properties.height:
                 const direction: string = animation.property;
-                const isHeight: boolean = direction === 'height';
+                const isHeight: boolean = direction === "height";
                 propertyNameToAnimate = "bounds";
                 if (!parent) {
                     throw new Error(`cannot animate ${direction} on root view`);

From f189152a4bedbb495a969c13e6d791135eb4eec3 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Thu, 9 May 2019 09:38:09 +0300
Subject: [PATCH 3/4] refactor: refactor

---
 tns-core-modules/globals/globals.ts                | 9 ---------
 tns-core-modules/ui/animation/animation.android.ts | 7 +++----
 tns-core-modules/ui/animation/animation.ios.ts     | 5 ++---
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/tns-core-modules/globals/globals.ts b/tns-core-modules/globals/globals.ts
index 1eed35163..7e4715852 100644
--- a/tns-core-modules/globals/globals.ts
+++ b/tns-core-modules/globals/globals.ts
@@ -184,15 +184,6 @@ export function install() {
         registerOnGlobalContext("Headers", "fetch");
         registerOnGlobalContext("Request", "fetch");
         registerOnGlobalContext("Response", "fetch");
-
-        // check whether the 'android' namespace is exposed
-        // if positive - the current device is an Android
-        // so a custom implementation of the global 'console' object is attached.
-        // otherwise do nothing on iOS - the NS runtime provides a native 'console' functionality.
-        if ((<any>global).android) {
-            const consoleModule = require("console");
-            (<any>global).console = new consoleModule.Console();
-        }
     }
 }
 install();
diff --git a/tns-core-modules/ui/animation/animation.android.ts b/tns-core-modules/ui/animation/animation.android.ts
index 0a8b76a10..549be00e9 100644
--- a/tns-core-modules/ui/animation/animation.android.ts
+++ b/tns-core-modules/ui/animation/animation.android.ts
@@ -10,9 +10,8 @@ import {
 } from "../styling/style-properties";
 
 import { layout } from "../../utils/utils";
-import { device } from "../../platform";
+import { device, screen } from "../../platform";
 import lazy from "../../utils/lazy";
-import * as platform from "../../platform";
 export * from "./animation-common";
 
 interface AnimationDefinitionInternal extends AnimationDefinition {
@@ -467,10 +466,10 @@ export class Animation extends AnimationBase {
                     throw new Error(`cannot animate ${propertyAnimation.property} on root view`);
                 }
                 const parentExtent: number = isVertical ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
-                toValue = PercentLength.toDevicePixels(toValue, parentExtent, parentExtent) / platform.screen.mainScreen.scale;
+                toValue = PercentLength.toDevicePixels(toValue, parentExtent, parentExtent) / screen.mainScreen.scale;
                 const nativeHeight: number = isVertical ? nativeView.getHeight() : nativeView.getWidth();
                 const targetStyle: string = setLocal ? extentProperty.name : extentProperty.keyframe;
-                originalValue1 = nativeHeight / platform.screen.mainScreen.scale;
+                originalValue1 = nativeHeight / screen.mainScreen.scale;
                 nativeArray[0] = originalValue1;
                 nativeArray[1] = toValue;
                 let extentAnimator = android.animation.ValueAnimator.ofFloat(nativeArray);
diff --git a/tns-core-modules/ui/animation/animation.ios.ts b/tns-core-modules/ui/animation/animation.ios.ts
index 6ad42057a..33b08333a 100644
--- a/tns-core-modules/ui/animation/animation.ios.ts
+++ b/tns-core-modules/ui/animation/animation.ios.ts
@@ -8,8 +8,7 @@ import {
     heightProperty, widthProperty, PercentLength
 } from "../styling/style-properties";
 
-import { ios } from "../../utils/utils";
-import * as platform from "../../platform";
+import { screen } from "../../platform";
 
 export * from "./animation-common";
 
@@ -276,7 +275,7 @@ export class Animation extends AnimationBase {
         let toValue = animation.value;
         let fromValue;
         const parent = animation.target.parent as View;
-        const screenScale: number = platform.screen.mainScreen.scale;
+        const screenScale: number = screen.mainScreen.scale;
 
         let tempRotate = (animation.target.rotate || 0) * Math.PI / 180;
         let abs;

From fafa702128c3226b4c8f6b95387bc29a3381c1e5 Mon Sep 17 00:00:00 2001
From: Martin Yankov <m.i.yankov@gmail.com>
Date: Thu, 9 May 2019 13:24:23 +0300
Subject: [PATCH 4/4] test: add colors to tests

---
 apps/app/ui-tests-app/animation/effect-summary-details.xml | 6 +++---
 apps/app/ui-tests-app/animation/height-basic.xml           | 4 ++--
 apps/app/ui-tests-app/animation/layout-stack-height.xml    | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/app/ui-tests-app/animation/effect-summary-details.xml b/apps/app/ui-tests-app/animation/effect-summary-details.xml
index 7800314d9..41db9265c 100644
--- a/apps/app/ui-tests-app/animation/effect-summary-details.xml
+++ b/apps/app/ui-tests-app/animation/effect-summary-details.xml
@@ -1,10 +1,10 @@
-<Page loaded="pageLoaded">
-    <AbsoluteLayout height="100%">
+<Page loaded="pageLoaded" backgroundColor="skyblue">
+    <AbsoluteLayout height="100%" backgroundColor="gold">
         <TextView id="details"
                   padding="12" paddingBottom="24"
                   top="{{ detailsHeight }}" width="100%"
                   text="{{ ipsum }}" fontSize="20"
-                  opacity="0" translateY="50" editable="false"/>
+                  opacity="0" translateY="50" editable="false" backgroundColor="olive"/>
         <Label originY="0" height="100%" width="100%" fontSize="42"
                backgroundColor="MidnightBlue" color="white"
                textAlignment="center" verticalAlignment="center"
diff --git a/apps/app/ui-tests-app/animation/height-basic.xml b/apps/app/ui-tests-app/animation/height-basic.xml
index 3fa67d708..566873a12 100644
--- a/apps/app/ui-tests-app/animation/height-basic.xml
+++ b/apps/app/ui-tests-app/animation/height-basic.xml
@@ -1,5 +1,5 @@
-<Page>
-    <AbsoluteLayout>
+<Page backgroundColor="skyblue">
+    <AbsoluteLayout backgroundColor="gold">
         <Label originX="0" originY="0" top="0" left="0"
                height="128" fontSize="64px" color="white"
                textAlignment="center"
diff --git a/apps/app/ui-tests-app/animation/layout-stack-height.xml b/apps/app/ui-tests-app/animation/layout-stack-height.xml
index 4d7d91dd6..f33b85e3b 100644
--- a/apps/app/ui-tests-app/animation/layout-stack-height.xml
+++ b/apps/app/ui-tests-app/animation/layout-stack-height.xml
@@ -1,5 +1,5 @@
-<Page>
-    <StackLayout row="1" verticalAlignment="top">
+<Page backgroundColor="skyblue">
+    <StackLayout row="1" verticalAlignment="top" backgroundColor="gold">
         <Label backgroundColor="darkblue" originY="0"
                tap="tapLabel"
                height="64" fontSize="32" color="skyblue" textAlignment="center"