Frame test

tests/app/testRunner.ts

@@ -64,7 +64,7 @@ allTests["GRIDLAYOUT"] = require("./ui/layouts/grid-layout-tests");
 allTests["STACKLAYOUT"] = require("./ui/layouts/stack-layout-tests");
 allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
 allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
-// allTests["FRAME"] = require("./ui/frame/frame-tests");
+allTests["FRAME"] = require("./ui/frame/frame-tests");
 // allTests["VIEW"] = require("./ui/view/view-tests");
 // allTests["STYLE"] = require("./ui/styling/style-tests");
 // allTests["VISUAL-STATE"] = require("./ui/styling/visual-state-tests");

tests/app/ui/frame/frame-tests.ios.ts

@@ -1,9 +1,8 @@
 import * as frameModule from "ui/frame";
 import * as TKUnit from "../../TKUnit";
+import * as uiUtils from "ui/utils";
 import { PercentLength, unsetValue } from "ui/core/view";
 
-var uiUtils = require("ui/utils");
-
 export function test_percent_width_and_height_set_to_page_support() {
     let topFrame = frameModule.topmost();
     let currentPage = topFrame.currentPage;
@@ -33,31 +32,49 @@ export function test_percent_width_and_height_set_to_page_support() {
 }
 
 export function test_percent_margin_set_to_page_support() {
-    let topFrame = frameModule.topmost();
+    percent_margin_set_to_page_support(false);
-    let currentPage = topFrame.currentPage;
+}
+
+export function test_percent_margin_set_to_page_support_with_backgroundSpanUnderStatusBar() {
+    percent_margin_set_to_page_support(true);
+}
+
+function percent_margin_set_to_page_support(backgroundSpanUnderStatusBar: boolean) {
+    const topFrame = frameModule.topmost();
+    const currentPage = topFrame.currentPage;
+
+    const topFrameWidth = topFrame.getMeasuredWidth();
+    const topFrameHeight = topFrame.getMeasuredHeight();
+    const statusBar = backgroundSpanUnderStatusBar ? 0 : uiUtils.ios.getStatusBarHeight();
+
     currentPage.margin = "10%";
+    currentPage.backgroundSpanUnderStatusBar = backgroundSpanUnderStatusBar;
 
     TKUnit.waitUntilReady(() => {
         return currentPage.isLayoutValid;
     }, 1);
 
-    let topFrameWidth = topFrame.getMeasuredWidth();
+    const currentPageWidth = currentPage.getMeasuredWidth();
-    let topFrameHeight = topFrame.getMeasuredHeight();
+    const currentPageHeight = currentPage.getMeasuredHeight();
+    const marginWidth = Math.round(topFrameWidth * 0.1);
+    const marginHeight = Math.round((topFrameHeight - statusBar) * 0.1);
 
-    let currentPageWidth = currentPage.getMeasuredWidth();
+    // expected page size
-    let currentPageHeight = currentPage.getMeasuredHeight()
+    TKUnit.assertEqual(currentPageWidth, topFrameWidth - 2 * marginWidth, "Page measure width");
+    TKUnit.assertEqual(currentPageHeight, topFrameHeight - 2 * marginHeight - statusBar, "Page measure height");
 
-    let marginLeft = topFrameWidth * 0.1;
+    // expected page bounds
-    let marginTop = topFrameHeight * 0.1 + uiUtils.ios.getStatusBarHeight();
+    const bounds = currentPage._getCurrentLayoutBounds();
-
+    TKUnit.assertEqual(bounds.left, Math.round(marginWidth), "Current page LEFT position incorrect");
-    let bounds = currentPage._getCurrentLayoutBounds();
+    TKUnit.assertEqual(bounds.top, Math.round(marginHeight + statusBar), "Current page TOP position incorrect");
-    TKUnit.assertEqual(bounds.left, Math.round(marginLeft), "Current page LEFT position incorrect");
+    TKUnit.assertEqual(bounds.right, Math.round(marginWidth + currentPageWidth), "Current page RIGHT position incorrect");
-    TKUnit.assertEqual(bounds.top, Math.round(marginTop), "Current page  TOP position incorrect");
+    TKUnit.assertEqual(bounds.bottom, Math.round(marginHeight + statusBar + currentPageHeight), "Current page BOTTOM position incorrect");
-    TKUnit.assertEqual(bounds.right, Math.round(marginLeft + currentPageWidth), "Current page  RIGHT position incorrect");
-    TKUnit.assertEqual(bounds.bottom, Math.round(marginTop + currentPageHeight), "Current page  BOTTOM position incorrect");
 
     //reset values.
     currentPage.margin = "0";
+    TKUnit.waitUntilReady(() => {
+        return currentPage.isLayoutValid;
+    }, 1);
 
     TKUnit.assertTrue(PercentLength.equals(currentPage.marginLeft, 0));
     TKUnit.assertTrue(PercentLength.equals(currentPage.marginTop, 0));

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

@@ -69,7 +69,7 @@ export function getViewById(view: ViewBaseDefinition, id: string): ViewBaseDefin
         }
 
         return true;
-    }
+    };
 
     eachDescendant(view, descendantsCallback);
     return retVal;
@@ -87,7 +87,7 @@ export function eachDescendant(view: ViewBaseDefinition, callback: (child: ViewB
             child.eachChild(localCallback);
         }
         return continueIteration;
-    }
+    };
 
     view.eachChild(localCallback);
 }
@@ -95,7 +95,6 @@ export function eachDescendant(view: ViewBaseDefinition, callback: (child: ViewB
 let viewIdCounter = 0;
 
 export class ViewBase extends Observable implements ViewBaseDefinition {
-    private _updatingJSPropertiesDict = {};
     private _style: Style;
     private _isLoaded: boolean;
     private _registeredAnimations: Array<KeyframeAnimation>;
@@ -225,7 +224,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
                 next.changeMap.forEach((changes, view) => {
                     if (changes.attributes) {
                         changes.attributes.forEach(attribute => {
-                            view.addEventListener(attribute + "Change", this._invalidateCssHandler)
+                            view.addEventListener(attribute + "Change", this._invalidateCssHandler);
                         });
                     }
                     if (changes.pseudoClasses) {
@@ -244,13 +243,13 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
                 previous.changeMap.forEach((changes, view) => {
                     if (changes.attributes) {
                         changes.attributes.forEach(attribute => {
-                            view.removeEventListener("onPropertyChanged:" + attribute, this._invalidateCssHandler)
+                            view.removeEventListener("onPropertyChanged:" + attribute, this._invalidateCssHandler);
                         });
                     }
                     if (changes.pseudoClasses) {
                         changes.pseudoClasses.forEach(pseudoClass => {
                             let eventName = ":" + pseudoClass;
-                            view.removeEventListener(eventName, this._invalidateCssHandler)
+                            view.removeEventListener(eventName, this._invalidateCssHandler);
                             if (view[eventName]) {
                                 view[eventName](-1);
                             }

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

@@ -685,7 +685,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 
             let style = child.style;
             let horizontalMargins = child.effectiveMarginLeft + child.effectiveMarginRight;
-            let verticalMargins = child.effectiveMarginTop + child.effectiveMarginRight;
+            let verticalMargins = child.effectiveMarginTop + child.effectiveMarginBottom;
 
             let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, child.effectiveWidth, style.horizontalAlignment === HorizontalAlignment.STRETCH);
             let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, child.effectiveHeight, style.verticalAlignment === VerticalAlignment.STRETCH);

tns-core-modules/ui/page/page.android.ts

@@ -183,7 +183,7 @@ export class Page extends PageBase {
             return {
                 color: (<any>window).getStatusBarColor(),
                 systemUiVisibility: decorView.getSystemUiVisibility()
-            }
+            };
         }
 
         return null;

tns-core-modules/ui/page/page.ios.ts

@@ -1,7 +1,7 @@
 import {
     PageBase, View, layout,
     actionBarHiddenProperty, statusBarStyleProperty,
-    traceEnabled, traceWrite, traceCategories
+    traceEnabled, traceWrite, traceCategories, PercentLength
 } from "./page-common";
 import { ios as iosApp } from "application";
 import { device } from "platform";
@@ -476,6 +476,23 @@ export class Page extends PageBase {
         }
     }
 
+    public _updateEffectiveLayoutValues(parent: View): void {
+        super._updateEffectiveLayoutValues(parent);
+
+        // Patch vertical margins to respect status bar height
+        if (!this.backgroundSpanUnderStatusBar) {
+            const style = this.style;
+
+            let parentHeightMeasureSpec = parent._currentHeightMeasureSpec;
+            let parentHeightMeasureSize = layout.getMeasureSpecSize(parentHeightMeasureSpec) - uiUtils.ios.getStatusBarHeight();
+            let parentHeightMeasureMode = layout.getMeasureSpecMode(parentHeightMeasureSpec);
+            let parentAvailableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
+
+            this.effectiveMarginTop = PercentLength.toDevicePixels(style.marginTop, 0, parentAvailableHeight);
+            this.effectiveMarginBottom = PercentLength.toDevicePixels(style.marginBottom, 0, parentAvailableHeight);
+        }
+    }
+
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
         let width = layout.getMeasureSpecSize(widthMeasureSpec);
         let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);