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

Implement non uniform border corner radiuses and fix blinking image-view radiuses (#4573)

Browse Source 
* Image corners were blinking in #4322 and CSS border will now draw non uniform corner radiuses if the border color is uniform

* Implement per-side corner radiuses for iOS

* Update stretch-mode example

* Update matrix-mode example

* Update image resources

* Add clipping for non uniform radii without border width, don't throw for missing image resources in css
This commit is contained in:
Panayot Cankov
2017-07-27 15:36:47 +03:00
committed by GitHub
parent 2f6ca2524b
commit 43659799bc
57 changed files with 499 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tests/app/ui/animation/animation-tests.ts
View File

@@ -303,7 +303,7 @@ export function test_AnimateBackgroundColor(done) {
label.animate({ backgroundColor: red, duration: 20 })
.then(() => {
TKUnit.assert(label.backgroundColor.equals(red));
TKUnit.assert((<colorModule.Color>label.backgroundColor).equals(red));
done();
})
.catch((e) => {
@@ -318,7 +318,7 @@ export function test_AnimateBackgroundColor_FromString(done) {
label.animate({ backgroundColor: <any>expected, duration: 20 })
.then(() => {
TKUnit.assert(label.backgroundColor.equals(clr));
TKUnit.assert((<colorModule.Color>label.backgroundColor).equals(clr));
done();
})
.catch((e) => {

2
tests/app/ui/animation/css-animation-tests.ts
View File

@@ -362,7 +362,7 @@ export function test_ExecuteCSSAnimation() {
TKUnit.waitUntilReady(() => label.isLoaded);
label.className = "l";
let green = new color.Color("green");
TKUnit.waitUntilReady(() => green.equals(label.backgroundColor), 1);
TKUnit.waitUntilReady(() => green.equals(<color.Color>label.backgroundColor), 1);
TKUnit.assertEqual(label.backgroundColor, green);
}

2
tests/app/ui/progress/progress-tests.ts
View File

@@ -74,7 +74,7 @@ if (platform.device.os === platform.platformNames.ios) {
progress.backgroundColor = new color.Color("red");
function testAction(views: Array<viewModule.View>) {
TKUnit.assertEqual(progress.backgroundColor.ios.CGColor, progress.ios.trackTintColor.CGColor, "progress.color");
TKUnit.assertEqual((<color.Color>progress.backgroundColor).ios.CGColor, progress.ios.trackTintColor.CGColor, "progress.color");
};
helper.buildUIAndRunTest(progress, testAction);

2
tests/app/ui/slider/slider-tests.ts
View File

@@ -118,7 +118,7 @@ if (isIOS) {
slider.backgroundColor = new Color("red");
function testAction(views: Array<View>) {
TKUnit.assertEqual(slider.backgroundColor.ios.CGColor, slider.ios.minimumTrackTintColor.CGColor, "slider.backgroundColor");
TKUnit.assertEqual((<Color>slider.backgroundColor).ios.CGColor, slider.ios.minimumTrackTintColor.CGColor, "slider.backgroundColor");
};
helper.buildUIAndRunTest(slider, testAction);

3
tests/app/ui/styling/style-tests.ts
View File

@@ -11,6 +11,7 @@ import * as types from "tns-core-modules/utils/types";
import * as viewModule from "tns-core-modules/ui/core/view";
import { resolveFileNameFromUrl } from "tns-core-modules/ui/styling/style-scope";
import { unsetValue } from "tns-core-modules/ui/core/view";
import * as color from "tns-core-modules/color";
export function test_css_dataURI_is_applied_to_backgroundImageSource() {
const stack = new stackModule.StackLayout();
@@ -164,7 +165,7 @@ export function test_type_selector() {
stack.addChild(btn);
TKUnit.assert(btn.backgroundColor, "backgroundColor property not applied correctly.");
TKUnit.assertEqual(btn.backgroundColor.hex, "#FF0000", "backgroundColor");
TKUnit.assertEqual((<color.Color>btn.backgroundColor).hex, "#FF0000", "backgroundColor");
TKUnit.assertNull(label.backgroundColor, "backgroundColor should not have a value");
}

2
tests/app/ui/switch/switch-tests.ts
View File

@@ -60,7 +60,7 @@ if (platform.device.os === platform.platformNames.ios) {
mySwitch.backgroundColor = new color.Color("red");
function testAction(views: Array<viewModule.View>) {
TKUnit.assert(CGColorEqualToColor(mySwitch.backgroundColor.ios.CGColor, mySwitch.ios.onTintColor.CGColor), "mySwitch.color");
TKUnit.assert(CGColorEqualToColor((<color.Color>mySwitch.backgroundColor).ios.CGColor, mySwitch.ios.onTintColor.CGColor), "mySwitch.color");
};
helper.buildUIAndRunTest(mySwitch, testAction);

30
tests/app/ui/view/view-tests-common.ts
View File

@@ -880,35 +880,7 @@ export function testSetInlineStyle() {
helper.buildUIAndRunTest(lbl, function (views: Array<View>) {
TKUnit.assertEqual(lbl.color.hex, expectedColor);
TKUnit.assertEqual(lbl.backgroundColor.hex, expectedBackgroundColor);
});
};
export function testBorderWidth() {
helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<View>) {
const lbl = views[0];
helper.waitUntilLayoutReady(lbl);
const expectedValue = Math.round(<number>lbl.borderWidth * utils.layout.getDisplayDensity());
const actualValue = definition.getUniformNativeBorderWidth(lbl);
TKUnit.assertAreClose(actualValue, expectedValue, 0.01, "borderWidth");
});
};
export function testCornerRadius() {
helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<View>) {
const lbl = views[0];
helper.waitUntilLayoutReady(lbl);
const expectedValue = Math.round(<number>lbl.borderRadius * utils.layout.getDisplayDensity());
const actualValue = definition.getUniformNativeCornerRadius(lbl);
TKUnit.assertAreClose(actualValue, expectedValue, 0.01, "borderRadius");
});
};
export function testBorderColor() {
helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<View>) {
const lbl = views[0];
helper.waitUntilLayoutReady(lbl);
TKUnit.assertEqual(definition.checkUniformNativeBorderColor(lbl), true, "BorderColor not applied correctly!");
TKUnit.assertEqual((<Color>lbl.backgroundColor).hex, expectedBackgroundColor);
});
};

2
tests/app/ui/view/view-tests.android.ts
View File

@@ -286,7 +286,7 @@ export function getUniformNativeCornerRadius(v: view.View): number {
export function checkNativeBackgroundColor(v: view.View): boolean {
const bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
return v.backgroundColor && bkg && bkg.getBackgroundColor() === v.backgroundColor.android;
return v.backgroundColor && bkg && bkg.getBackgroundColor() === (<Color>v.backgroundColor).android;
}
export function checkNativeBackgroundImage(v: view.View): boolean {

4
tests/app/ui/view/view-tests.ios.ts
View File

@@ -37,11 +37,11 @@ export function getUniformNativeCornerRadius(v: view.View): number {
export function checkNativeBackgroundColor(v: view.View): boolean {
if (v.ios instanceof UILabel) {
var cgColor1 = (<UILabel>v.ios).layer.backgroundColor;
var cgColor2 = (<UIColor>v.backgroundColor.ios).CGColor;
var cgColor2 = (<UIColor>(<color.Color>v.backgroundColor).ios).CGColor;
return v.backgroundColor && !!CGColorEqualToColor(cgColor1, cgColor2);
}
return v.backgroundColor && (<UIView>v.ios).backgroundColor.isEqual(v.backgroundColor.ios);
return v.backgroundColor && (<UIView>v.ios).backgroundColor.isEqual((<color.Color>v.backgroundColor).ios);
}
export function checkNativeBackgroundImage(v: view.View): boolean {