Merge pull request #7038 from NativeScript/mdonev/release-to-master-7011

chore: merge release to master

apps/app/ui-tests-app/css/background-image.css

@@ -0,0 +1,5 @@
+.testBtn {
+    background-image: url("res://icon");
+    background-repeat: no-repeat;
+    color: black;
+}

apps/app/ui-tests-app/css/background-image.xml

@@ -0,0 +1,29 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" >
+        <Button backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')" 
+            borderRadius='125' borderWidth='2' borderColor='black' 
+            backgroundRepeat="repeat" backgroundSize="contain" 
+            />
+        <Button row="1" backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')" 
+            borderRadius='5' borderWidth='2' borderColor='black' 
+            backgroundRepeat="repeat-y"
+            />
+        <Button row="2" backgroundImage="url('~/ui-tests-app/resources/images/no-image.png')" 
+            borderRadius='25' borderWidth='2' borderColor='black' 
+            backgroundRepeat="repeat-x"
+            />
+         <Button row="3" backgroundImage="url('res://icon')" 
+            borderRadius='10' borderWidth='2' borderColor='black' 
+            backgroundRepeat="no-repeat"
+            backgroundSize="contain" 
+            height="80" width="180"
+            />
+        <Button row="4" text="css background no-repeat" class="testBtn"/>
+        <Button row="5" backgroundImage="url('res://icon')" 
+            borderRadius='10' borderWidth='2' borderColor='black' 
+            style="background-repeat: no-repeat"
+            backgroundSize="contain" 
+            height="80" width="180"
+            />
+    </GridLayout>
+</Page>

apps/app/ui-tests-app/css/main-page.ts

@@ -43,5 +43,6 @@ export function loadExamples() {
     examples.set("missing-background-image", "css/missing-background-image");
     examples.set("background-shorthand", "css/background-shorthand");
     examples.set("background-image-linear-gradient", "css/background-image-linear-gradient");
+    examples.set("background-image", "css/background-image");
     return examples;
 }

e2e/nested-frame-navigation/app/home/home-page.ts

@@ -37,3 +37,16 @@ export function onNavigateToTabsTopRoot(args: EventData) {
 export function onNavigateToTabsBottomRoot(args: EventData) {
     application._resetRootView({ moduleName: "tab-root/tab-bottom-root" });
 }
+
+export function onFrameToNestedFrame(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "frame-root/frame-home-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}

e2e/nested-frame-navigation/app/home/home-page.xml

@@ -14,6 +14,7 @@
             <Button text="Page w/ tabs (bottom)" tap="onNavigateToTabsBottomPage" />
             <Button text="Root tabs (top)" tap="onNavigateToTabsTopRoot" />
             <Button text="Root tabs (bottom)" tap="onNavigateToTabsBottomRoot" />
+            <Button text="Frame to NestedFrame (non-default transition)" tap="onFrameToNestedFrame" />
         </StackLayout>
     </GridLayout>
 </Page>

e2e/nested-frame-navigation/app/some-page/some-page.ts

@@ -5,3 +5,16 @@ export function onBackButtonTap(args: EventData): void {
     const button = <Button>args.object;
     button.page.frame.goBack();
 }
+
+export function onNavigateSlide(args: EventData) {
+    const button = <Button>args.object;
+    button.page.frame.navigate({
+        moduleName: "still-other-page/still-other-page",
+        animated: true,
+        transition: {
+            name: "slide",
+            duration: 300,
+            curve: "easeIn"
+        }
+    });
+}

e2e/nested-frame-navigation/app/some-page/some-page.xml

@@ -6,7 +6,9 @@
     </ActionBar>
 
     <GridLayout>
-
+        <StackLayout>
+            <Button text="navigate to still other page (slide transition)" tap="onNavigateSlide" />
+        </StackLayout>
     </GridLayout>
 
 </Page>

e2e/nested-frame-navigation/app/still-other-page/still-other-page.ts

@@ -0,0 +1,7 @@
+import { EventData } from "tns-core-modules/ui/page";
+import { Button } from "tns-core-modules/ui/button";
+
+export function onBackButtonTap(args: EventData): void {
+    const button = <Button>args.object;
+    button.page.frame.goBack();
+}

e2e/nested-frame-navigation/app/still-other-page/still-other-page.xml

@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
+
+    <ActionBar class="action-bar">
+        <NavigationButton text="stillOtherPageBack" tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
+        <Label class="action-bar-title" text="still other page" />
+    </ActionBar>
+
+    <GridLayout>
+
+    </GridLayout>
+
+</Page>

e2e/nested-frame-navigation/e2e/frame-root.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { AppiumDriver, createDriver, logWarn } from "nativescript-dev-appium";
 
-import { Screen, playersData, teamsData, driverDefaultWaitTime, Item } from "./screen";
+import { Screen, playersData, somePage, teamsData, driverDefaultWaitTime, Item, stillOtherPage } from "./screen";
 import { suspendTime, appSuspendResume, dontKeepActivities, transitions } from "./config";
 import * as shared from "./shared.e2e-spec";
 
@@ -297,5 +297,93 @@ describe(rootType, () => {
                 await screen.loadedHome();
             });
         });
-    };
+    }
+
+    describe("frame to nested frame with non-default transition", () => {
+        const playerOne = playersData["playerOneSlide"];
+
+        it("loaded home page", async () => {
+            await screen.loadedHome();
+        });
+
+        it("loaded frame root with nested frame non-default transition", async () => {
+            await screen.navigateToPageWithFrameNonDefaultTransition();
+            await screen.loadedPageWithFrame();
+        });
+
+        it ("go back to home page again", async () => {
+            if (appSuspendResume) {
+                await driver.backgroundApp(suspendTime);
+                await driver.waitForElement(playerOne.name); // wait for players list
+            }
+
+            await screen.goBackFromFrameHome();
+            await screen.loadedHome();
+        });
+    });
+
+    describe("nested frame to frame with non-default transition", () => {
+        it("loaded home page", async () => {
+            await screen.loadedHome();
+        });
+
+        it("loaded frame root with nested frame", async () => {
+            await screen.navigateToPageWithFrame();
+            await screen.loadedPageWithFrame();
+        });
+    
+        it("navigate to some page with slide transition", async () => {
+            shared.testSomePageNavigatedSlide(screen);
+
+            if (appSuspendResume) {
+                await driver.backgroundApp(suspendTime);
+                await driver.waitForElement(somePage); // wait for some page
+            }
+        });
+
+        it("navigate to still other page and go back twice", async () => {
+            shared.testStillOtherPageNavigatedSlide(screen);
+
+            if (appSuspendResume) {
+                await driver.backgroundApp(suspendTime);
+                await driver.waitForElement(stillOtherPage); // wait for still other page
+            }
+
+            if (driver.isAndroid) {
+                await driver.navBack(); // some page back navigation
+            } else {
+                await screen.goBackFromStillOtherPage();
+            }
+
+            await screen.loadedSomePage();
+
+            if (appSuspendResume) {
+                await driver.backgroundApp(suspendTime);
+                await driver.waitForElement(somePage); // wait for some page
+            }
+
+            shared.testStillOtherPageNavigatedSlide(screen);
+
+            if (appSuspendResume) {
+                await driver.backgroundApp(suspendTime);
+                await driver.waitForElement(stillOtherPage); // wait for still other page
+            }
+
+            if (driver.isAndroid) {
+                await driver.navBack(); // some page back navigation
+            } else {
+                await screen.goBackFromStillOtherPage();
+            }
+
+            await screen.loadedSomePage();
+        });
+
+        it("go back to home page again", async () => {
+            await screen.goBackFromSomePage();
+
+            await screen.goBackFromFrameHome();
+
+            await screen.loadedHome();
+        });
+    });
 });

e2e/nested-frame-navigation/e2e/screen.ts

@@ -4,6 +4,7 @@ import { assert } from "chai";
 const layoutWithFrame = "Layout w/ frame";
 const layoutWithMultiFrame = "Layout w/ multi frame";
 const pageWithFrame = "Page w/ frame";
+const pageWithFrameNonDefaultTransition = "Frame to NestedFrame (non-default transition)";
 const pageWithMultiFrame = "Page w/ multi frame";
 const pageTabTopWithFrames = "Page w/ tabs (top)";
 const pageTabBottomWithFrames = "Page w/ tabs (bottom)";
@@ -17,6 +18,7 @@ const tabTopHome = "tab top page";
 const tabBottomHome = "tab bottom page";
 const tabRootTopHome = "tab root top home";
 const tabRootBottomHome = "tab root bottom home";
+const navigateToStillOtherPageSlide = "navigate to still other page (slide transition)";
 const navigateToSomePageDefault = "navigate to some page (default transition)";
 const navigateToSomePageNone = "navigate to some page (no transition)";
 const navigateToSomePageSlide = "navigate to some page (slide transition)";
@@ -28,6 +30,7 @@ const navigateToOtherPageFlip = "navigate to other page (flip transition)";
 const players = "Players";
 const teams = "Teams";
 const playerBack = "playerBack";
+const stillOtherPageBack = "stillOtherPageBack";
 const somePageBack = "somePageBack";
 const otherPageBack = "otherPageBack";
 const teamBack = "teamBack";
@@ -38,6 +41,7 @@ const resetApp = "reset app";
 
 export const driverDefaultWaitTime = 10000;
 export const home = "Home";
+export const stillOtherPage = "still other page";
 export const somePage = "some page";
 export const otherPage = "other page";
 
@@ -153,6 +157,10 @@ export class Screen {
         await this.navigateToPage(pageWithFrame);
     }
 
+    navigateToPageWithFrameNonDefaultTransition = async () => {
+        await this.navigateToPage(pageWithFrameNonDefaultTransition);
+    }
+
     navigateToPageWithMultiFrame = async () => {
         await this.navigateToPage(pageWithMultiFrame);
     }
@@ -173,6 +181,10 @@ export class Screen {
         await this.navigateToPage(tabBottomRootWithFrames);
     }
 
+    navigateToStillOtherPageSlide = async () => {
+        await this.navigateToPage(navigateToStillOtherPageSlide);
+    };
+
     navigateToSomePageDefault = async () => {
         await this.navigateToPage(navigateToSomePageDefault);
     };
@@ -228,6 +240,10 @@ export class Screen {
         await this.goBack(teamBack);
     };
 
+    goBackFromStillOtherPage = async () => {
+        await this.goBack(stillOtherPageBack);
+    }
+
     goBackFromSomePage = async () => {
         await this.goBack(somePageBack);
     }
@@ -298,6 +314,10 @@ export class Screen {
     loadedTabBottomRootWithFrames = async () => {
         await this.loadedPage(tabRootBottomHome);
     }
+    
+    loadedStillOtherPage = async () => {
+        await this.loadedPage(stillOtherPage);
+    }
 
     loadedSomePage = async () => {
         await this.loadedPage(somePage);

e2e/nested-frame-navigation/e2e/shared.e2e-spec.ts

@@ -17,6 +17,11 @@ export async function testPlayerNavigatedBack(screen: Screen, driver: AppiumDriv
     await screen.loadedPlayersList();
 }
 
+export async function testStillOtherPageNavigatedSlide(screen: Screen) {
+    await screen.navigateToStillOtherPageSlide();
+    await screen.loadedStillOtherPage();
+}
+
 export async function testSomePageNavigatedDefault(screen: Screen) {
     await screen.navigateToSomePageDefault();
     await screen.loadedSomePage();

tns-core-modules/ui/core/view/view-common.ts

@@ -24,6 +24,7 @@ import {
 import { createViewFromEntry } from "../../builder";
 import { StyleScope } from "../../styling/style-scope";
 import { LinearGradient } from "../../styling/linear-gradient";
+import { BackgroundRepeat } from "../../styling/style-properties";
 
 export * from "../../styling/style-properties";
 export * from "../view-base";
@@ -505,6 +506,27 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this.style.backgroundImage = value;
     }
 
+    get backgroundSize(): string {
+        return this.style.backgroundSize;
+    }
+    set backgroundSize(value: string) {
+        this.style.backgroundSize = value;
+    }
+
+    get backgroundPosition(): string {
+        return this.style.backgroundPosition;
+    }
+    set backgroundPosition(value: string) {
+        this.style.backgroundPosition = value;
+    }
+
+    get backgroundRepeat(): BackgroundRepeat {
+        return this.style.backgroundRepeat;
+    }
+    set backgroundRepeat(value: BackgroundRepeat) {
+        this.style.backgroundRepeat = value;
+    }
+
     get minWidth(): Length {
         return this.style.minWidth;
     }

tns-core-modules/ui/frame/fragment.transitions.android.ts

@@ -46,6 +46,7 @@ interface ExpandedEntry extends BackstackEntry {
     transition: Transition;
     transitionName: string;
     frameId: number
+    useLollipopTransition: boolean;
 }
 
 const sdkVersion = lazy(() => parseInt(device.sdkVersion));
@@ -100,6 +101,8 @@ export function _setAndroidFragmentTransitions(
         useLollipopTransition = false;
     }
 
+    newEntry.useLollipopTransition = useLollipopTransition;
+
     if (!animated) {
         name = "none";
     } else if (transition) {
@@ -116,6 +119,7 @@ export function _setAndroidFragmentTransitions(
         _updateTransitions(currentEntry);
         if (currentEntry.transitionName !== name ||
             currentEntry.transition !== transition ||
+            !!currentEntry.useLollipopTransition !== useLollipopTransition ||
             !useLollipopTransition) {
             clearExitAndReenterTransitions(currentEntry, true);
             currentFragmentNeedsDifferentAnimation = true;
@@ -190,11 +194,11 @@ export function _onFragmentCreateAnimator(entry: ExpandedEntry, fragment: androi
     let animator: android.animation.Animator;
     switch (nextAnim) {
         case AnimationType.enterFakeResourceId:
-            animator = entry.enterAnimator;
+            animator = entry.enterAnimator || entry.defaultEnterAnimator /* HACK */;
             break;
 
         case AnimationType.exitFakeResourceId:
-            animator = entry.exitAnimator;
+            animator = entry.exitAnimator || entry.defaultExitAnimator /* HACK */;
             break;
 
         case AnimationType.popEnterFakeResourceId:
@@ -268,7 +272,6 @@ export function _reverseTransitions(previousEntry: ExpandedEntry, currentEntry:
         } else {
             previousFragment.setEnterTransition(null);
         }
-
     }
 
     return transitionUsed;