import * as testModule from "../../ui-test"; import * as TKUnit from "../../tk-unit"; import * as labelModule from "@nativescript/core/ui/label"; import * as colorModule from "@nativescript/core/color"; import * as layoutHelper from "./layout-helper"; import * as commonTests from "./common-layout-tests"; import * as helper from "../../ui-helper"; // >> absolute-layout-require import * as absoluteLayoutModule from "@nativescript/core/ui/layouts/absolute-layout"; // << absolute-layout-require export class AbsoluteLayoutTest extends testModule.UITest { public create(): absoluteLayoutModule.AbsoluteLayout { return new absoluteLayoutModule.AbsoluteLayout(); } public test_recycling() { helper.nativeView_recycling_test(() => new absoluteLayoutModule.AbsoluteLayout()); } public test_item_recycling() { helper.nativeView_recycling_test(() => new labelModule.Label(), () => new absoluteLayoutModule.AbsoluteLayout()); } public snippet() { // >> absolute-layout-populating var absoluteLayout = new absoluteLayoutModule.AbsoluteLayout(); absoluteLayout.width = 230; absoluteLayout.height = 230; absoluteLayout.style.backgroundColor = new colorModule.Color("LightGray"); var label = new labelModule.Label(); // In absolute layout place of an UI element is determined by 4 parameters : left, top, width and height. absoluteLayoutModule.AbsoluteLayout.setLeft(label, 10); absoluteLayoutModule.AbsoluteLayout.setTop(label, 10); label.width = 100; label.height = 100; label.text = "LT"; label.id = "LT"; label.style.backgroundColor = new colorModule.Color("Red"); absoluteLayout.addChild(label); // << absolute-layout-populating } public testAll() { let absoluteLayout = this.testView; absoluteLayout.width = { value: 230, unit: "px" }; absoluteLayout.height = { value: 230, unit: "px" }; absoluteLayout.style.backgroundColor = new colorModule.Color("LightGray"); let label = new labelModule.Label(); absoluteLayoutModule.AbsoluteLayout.setLeft(label, layoutHelper.dp(10)); absoluteLayoutModule.AbsoluteLayout.setTop(label, layoutHelper.dp(10)); label.width = { value: 100, unit: "px" }; label.height = { value: 100, unit: "px" }; label.text = "LT"; label.style.backgroundColor = new colorModule.Color("Red"); absoluteLayout.addChild(label); this.waitUntilTestElementLayoutIsValid(); let actualValue = label._getCurrentLayoutBounds(); let width = actualValue.right - actualValue.left; let height = actualValue.bottom - actualValue.top; TKUnit.assertEqual(actualValue.left, 10, "ActualLeft"); TKUnit.assertEqual(actualValue.top, 10, "ActualTop"); TKUnit.assertEqual(width, 100, "ActualWidth"); TKUnit.assertEqual(height, 100, "Actualheight"); } public test_padding() { let absoluteLayout = this.testView; absoluteLayout.width = { value: 200, unit: "px" }; absoluteLayout.height = { value: 200, unit: "px" }; absoluteLayout.style.paddingLeft = { value: 5, unit: "px" }; absoluteLayout.style.paddingTop = { value: 15, unit: "px" }; // Left Top let btn = new layoutHelper.MyButton(); btn.width = { value: 100, unit: "px" }; btn.height = { value: 100, unit: "px" }; absoluteLayoutModule.AbsoluteLayout.setLeft(btn, layoutHelper.dp(20)); absoluteLayoutModule.AbsoluteLayout.setTop(btn, layoutHelper.dp(20)); absoluteLayout.addChild(btn); this.waitUntilTestElementLayoutIsValid(); layoutHelper.assertMeasure(btn, 100, 100); layoutHelper.assertLayout(btn, 25, 35, 100, 100); } public test_percent_children_support() { let layout = this.testView; layout.width = { value: 200, unit: "px" }; layout.height = { value: 200, unit: "px" }; let btn = new layoutHelper.MyButton(); (btn).width = "50%"; (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"); } public test_percent_support_nativeLayoutParams_are_correct() { commonTests.percent_support_nativeLayoutParams_are_correct(this); } } export function createTestCase(): AbsoluteLayoutTest { return new AbsoluteLayoutTest(); }