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

Implemented percent support for width, height and margins

Browse Source
This commit is contained in:
Hristo Hristov
2015-12-15 14:36:04 +02:00
parent 9418ab8f63
commit 1dbb742908
25 changed files with 834 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/tests/layouts/absolute-layout-tests.ts
View File

@@ -99,6 +99,27 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
layoutHelper.assertMeasure(btn, 100, 100);
layoutHelper.assertLayout(btn, 25, 35, 100, 100);
}
public test_percent_support() {
let layout = this.testView;
layout.width = layoutHelper.dp(200);
layout.height = layoutHelper.dp(200);
let btn = new layoutHelper.MyButton();
(<any>btn).width = "50%";
(<any>btn).height = "50%";
btn.margin = "10%";
layout.addChild(btn);
this.waitUntilTestElementLayoutIsValid();
// AbsoluteLayout measures with 0/UNSPECIFIED so we cannot support percents in it.
layoutHelper.assertMeasure(btn, 100, 100);
layoutHelper.assertLayout(btn, 20, 20, btn.getMeasuredWidth(), btn.getMeasuredHeight());
TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
}
}
export function createTestCase(): AbsoluteLayoutTest {

86
apps/tests/layouts/common-layout-tests.ts Normal file
View File

@@ -0,0 +1,86 @@
import TKUnit = require("../TKUnit");
import layoutHelper = require("./layout-helper");
import enums = require("ui/enums");
import testModule = require("../ui-test");
import {LayoutBase} from "ui/layouts/layout-base";
import {widthProperty} from "ui/styling/style"
export function percent_support_test(test: testModule.UITest<LayoutBase>) {
let layout: LayoutBase = test.testView;
layout.removeChildren();
layout.width = layoutHelper.dp(200);
layout.height = layoutHelper.dp(200);
let btn = new layoutHelper.MyButton();
btn.horizontalAlignment = enums.HorizontalAlignment.left;
btn.verticalAlignment = enums.VerticalAlignment.top;
(<any>btn).width = "50%";
(<any>btn).height = "50%";
btn.margin = "10%";
btn.text = "1";
layout.addChild(btn);
test.waitUntilTestElementLayoutIsValid();
TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
let bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.center;
btn.verticalAlignment = enums.VerticalAlignment.center;
test.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 50, "Center layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 50, "Center layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 150, "Center layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 150, "Center layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
btn.verticalAlignment = enums.VerticalAlignment.stretch;
test.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 50, "Stretch layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 50, "Stretch layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 150, "Stretch layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 150, "Stretch layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.right;
btn.verticalAlignment = enums.VerticalAlignment.bottom;
test.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 200 - 100 - 20, "BottomRight layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 200 - 100 - 20, "BottomRight layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 200 - 20, "BottomRight layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 200 - 20, "BottomRight layout BOTTOM incorrect");
//reset values.
btn.height = Number.NaN;
(<any>btn.style)._resetValue(widthProperty);
btn.margin = "0";
btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
btn.verticalAlignment = enums.VerticalAlignment.stretch;
btn.height = Number.NaN;
TKUnit.assertEqual(btn.marginLeft, 0, "marginLeft");
TKUnit.assertEqual(btn.marginTop, 0, "marginTop");
TKUnit.assertEqual(btn.marginRight, 0, "marginRight");
TKUnit.assertEqual(btn.marginBottom, 0, "marginBottom");
TKUnit.assert(isNaN(btn.width), "width");
TKUnit.assert(isNaN(btn.height), "height");
test.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 0, "Reset Stretch layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 0, "Reset Stretch layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 200, "Reset Stretch layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 200, "Reset Stretch layout BOTTOM incorrect");
}

5
apps/tests/layouts/dock-layout-tests.ts
View File

@@ -6,6 +6,7 @@ import helper = require("./layout-helper");
import navHelper = require("../ui/helper");
import testModule = require("../ui-test");
import layoutHelper = require("./layout-helper");
import commonTests = require("./common-layout-tests");
// <snippet module="ui/layouts/dock-layout" title="dock-layout">
// # DockLayout
@@ -190,6 +191,10 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
// ```
// </snippet>
}
public test_percent_support() {
commonTests.percent_support_test(this);
}
}
export function createTestCase(): DockLayoutTest {

5
apps/tests/layouts/grid-layout-tests.ts
View File

@@ -11,6 +11,7 @@ import enums = require("ui/enums");
import testModule = require("../ui-test");
import layoutHelper = require("./layout-helper");
import platform = require("platform");
import commonTests = require("./common-layout-tests");
var DELTA = 1;
@@ -641,6 +642,10 @@ export class GridLayoutTest extends testModule.UITest<layout.GridLayout> {
// ```
// </snippet>
}
public test_percent_support() {
commonTests.percent_support_test(this);
}
}
export function createTestCase(): GridLayoutTest {

108
apps/tests/layouts/stack-layout-tests.ts
View File

@@ -8,6 +8,7 @@ import enums = require("ui/enums");
import utils = require("utils/utils");
import testModule = require("../ui-test");
import layoutHelper = require("./layout-helper");
import commonTests = require("./common-layout-tests");
export class StackLayoutTest extends testModule.UITest<StackLayout> {
@@ -204,6 +205,113 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
// </snippet>
}
private setup_percent(): layoutHelper.MyButton {
let layout = this.testView;
layout.removeChildren();
layout.width = layoutHelper.dp(200);
layout.height = layoutHelper.dp(200);
let btn = new layoutHelper.MyButton();
btn.horizontalAlignment = enums.HorizontalAlignment.left;
btn.verticalAlignment = enums.VerticalAlignment.top;
(<any>btn).width = "50%";
(<any>btn).height = "50%";
btn.margin = "10%";
btn.text = "1";
layout.addChild(btn);
return btn;
}
public test_percent_support_vertical() {
let btn = this.setup_percent();
this.waitUntilTestElementLayoutIsValid();
TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
let bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.center;
btn.verticalAlignment = enums.VerticalAlignment.center;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 50, "Center layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "Center layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 150, "Center layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "Center layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
btn.verticalAlignment = enums.VerticalAlignment.stretch;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 50, "Stretch layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "Stretch layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 150, "Stretch layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "Stretch layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.right;
btn.verticalAlignment = enums.VerticalAlignment.bottom;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 80, "BottomRight layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "BottomRight layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 180, "BottomRight layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "BottomRight layout BOTTOM incorrect");
}
public test_percent_support_horizontal() {
let btn = this.setup_percent();
this.testView.orientation = enums.Orientation.horizontal;
this.waitUntilTestElementLayoutIsValid();
TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
let bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.center;
btn.verticalAlignment = enums.VerticalAlignment.center;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "Center layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 50, "Center layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "Center layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 150, "Center layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
btn.verticalAlignment = enums.VerticalAlignment.stretch;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "Stretch layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 50, "Stretch layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "Stretch layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 150, "Stretch layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.right;
btn.verticalAlignment = enums.VerticalAlignment.bottom;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "BottomRight layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 80, "BottomRight layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "BottomRight layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 180, "BottomRight layout BOTTOM incorrect");
}
}
export function createTestCase(): StackLayoutTest {

63
apps/tests/layouts/wrap-layout-tests.ts
View File

@@ -1,9 +1,9 @@
import TKUnit = require("../TKUnit");
import viewModule = require("ui/core/view");
import labelModule = require("ui/label");
import {Label} from "ui/label";
import helper = require("../ui/helper");
import layoutHelper = require("./layout-helper");
import testModule = require("../ui-test");
import commonTests = require("./common-layout-tests");
// <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
// # WrapLayout
@@ -47,7 +47,7 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
var label;
var i;
for (i = 0; i < 2; i++) {
label = new labelModule.Label();
label = new Label();
label.text = "" + i;
label.id = "" + i;
@@ -222,6 +222,63 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
layoutHelper.assertLayout(btn1, 0, 0, 50, 100, "button1");
layoutHelper.assertLayout(btn2, 50, 0, 50, 80, "button2");
}
public test_percent_support() {
let layout = this.testView;
layout.removeChildren();
layout.width = layoutHelper.dp(200);
layout.height = layoutHelper.dp(200);
let btn = new layoutHelper.MyButton();
btn.horizontalAlignment = enums.HorizontalAlignment.left;
btn.verticalAlignment = enums.VerticalAlignment.top;
(<any>btn).width = "50%";
(<any>btn).height = "50%";
btn.margin = "10%";
btn.text = "1";
layout.addChild(btn);
this.waitUntilTestElementLayoutIsValid();
TKUnit.assertEqual(btn.getMeasuredWidth(), 100, "Button MeasuredWidth incorrect");
TKUnit.assertEqual(btn.getMeasuredHeight(), 100, "Button MeasuredHeight incorrect");
let bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "TopLeft layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "TopLeft layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "TopLeft layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "TopLeft layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.center;
btn.verticalAlignment = enums.VerticalAlignment.center;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "Center layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "Center layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "Center layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "Center layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.stretch;
btn.verticalAlignment = enums.VerticalAlignment.stretch;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "Stretch layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "Stretch layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "Stretch layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "Stretch layout BOTTOM incorrect");
btn.horizontalAlignment = enums.HorizontalAlignment.right;
btn.verticalAlignment = enums.VerticalAlignment.bottom;
this.waitUntilTestElementLayoutIsValid();
bounds = btn._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, 20, "BottomRight layout LEFT incorrect");
TKUnit.assertEqual(bounds.top, 20, "BottomRight layout TOP incorrect");
TKUnit.assertEqual(bounds.right, 120, "BottomRight layout RIGHT incorrect");
TKUnit.assertEqual(bounds.bottom, 120, "BottomRight layout BOTTOM incorrect");
}
}
export function createTestCase(): WrapLayoutTest {