Description
A view with a border radius set will not be trimmed by the border. The view will remain square while the border curves. See attached screenshot.
Steps To Reproduce
Copy the following code snippet into your app.js file.
var win = Ti.UI.createWindow({
backgroundColor : 'green',
layout:'vertical'
});
var view = Ti.UI.createView({
backgroundColor:'white',
borderColor:'red',
borderWidth:15,
width:150,
height:150,
top:10
});
var but1 = Ti.UI.createButton({
title:"border radius = 10",
top:20
});
but1.addEventListener('click',function(){
view.borderRadius = "20";
});
var but2 = Ti.UI.createButton({
title:"border radius = 20",
top:20
});
but2.addEventListener('click',function(){
view.borderRadius = "40";
});
win.add(view);
win.add(but1);
win.add(but2);
win.open();
Expected Result
View should be trimmed by the border
Actual Result
View sticks out from under the border, remaining a square shape.
+Extra Information+
This is a regression as it works as expected in 3.2.3.GA
Regression caused by https://github.com/appcelerator/titanium_mobile/pull/5177
master PR: https://github.com/appcelerator/titanium_mobile/pull/5746
PR merged into master. Needs a backport to 3_3_X
3.3.X PR: https://github.com/appcelerator/titanium_mobile/pull/5752
Verified fixed on: Mac OSX 10.9.3 Appcelerator Studio, build: 3.3.0.201405271647 Titanium SDK, build: 3.3.0.v20140602133312 Titanium CLI, build: 3.3.0-beta2 Alloy: 1.4.0-beta Android Device: Nexus 4 (4.4) Border radius correctly trims the view. Closing.