Merge pull request #3804 from NativeScript/borders-clip

Borders clip
This commit is contained in:
Alexander Vakrilov
2017-03-16 09:43:11 +02:00
committed by GitHub
3 changed files with 39 additions and 18 deletions

View File

@ -1,25 +1,25 @@
<Page>
<GridLayout rows="*,*,*,*,*" columns="*,*,*" id="root">
<StackLayout class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
<StackLayout class="s1" row="0" col="1"><Label textWrap="true" text="padding: 5;"/></StackLayout>
<StackLayout class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></StackLayout>
<StackLayout class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 20;"/></StackLayout>
<StackLayout class="s1" row="0" col="1"><Label textWrap="true" text="padding: 20;"/></StackLayout>
<StackLayout class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></StackLayout>
<AbsoluteLayout class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 5;"/></AbsoluteLayout>
<AbsoluteLayout class="s1" row="1" col="1"><Label textWrap="true" text="padding: 5;"/></AbsoluteLayout>
<AbsoluteLayout class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></AbsoluteLayout>
<AbsoluteLayout class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 20;"/></AbsoluteLayout>
<AbsoluteLayout class="s1" row="1" col="1"><Label textWrap="true" text="padding: 20;"/></AbsoluteLayout>
<AbsoluteLayout class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></AbsoluteLayout>
<DockLayout class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 5;"/></DockLayout>
<DockLayout class="s1" row="2" col="1"><Label textWrap="true" text="padding: 5;"/></DockLayout>
<DockLayout class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></DockLayout>
<DockLayout class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 20;"/></DockLayout>
<DockLayout class="s1" row="2" col="1"><Label textWrap="true" text="padding: 20;"/></DockLayout>
<DockLayout class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></DockLayout>
<GridLayout class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 5;"/></GridLayout>
<GridLayout class="s1" row="3" col="1"><Label textWrap="true" text="padding: 5;"/></GridLayout>
<GridLayout class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></GridLayout>
<GridLayout class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 20;"/></GridLayout>
<GridLayout class="s1" row="3" col="1"><Label textWrap="true" text="padding: 20;"/></GridLayout>
<GridLayout class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></GridLayout>
<WrapLayout class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 5;"/></WrapLayout>
<WrapLayout class="s1" row="4" col="1"><Label textWrap="true" text="padding: 5;"/></WrapLayout>
<WrapLayout class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></WrapLayout>
<WrapLayout class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 20;"/></WrapLayout>
<WrapLayout class="s1" row="4" col="1"><Label textWrap="true" text="padding: 20;"/></WrapLayout>
<WrapLayout class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></WrapLayout>
</GridLayout>
</Page>

View File

@ -3,8 +3,29 @@ import * as pages from "tns-core-modules/ui/page";
import { EventData } from "tns-core-modules/data/observable";
import * as button from "tns-core-modules/ui/button";
var cssPercentage = " Page { margin:5% 10% 15% 8%; background-color: orange; font-size:8; } GridLayout { margin:3%; background-color: lightgreen; font-size:8; } StackLayout { border-color:red; border-width:1px; } StackLayout * { border-color:blue; border-width:1px; } GridLayout { border-color:green;border-width:1px; } .test1 { padding:10%; } .test2 { padding:10%; background-color:lightblue; } .test3 { margin:1% 2% 3% 4%; } WrapLayout { orientation:vertical; width:75%; height:45% } Button { color:black }"
var cssWithouPercentage = " Page { margin:15 10 15 30; background-color: orange; font-size:8; } GridLayout { margin:3; background-color: lightgreen; font-size:8; } StackLayout { border-color:red; border-width:1px; } StackLayout * { border-color:blue; border-width:1px; } GridLayout { border-color:green;border-width:1px; } .test1 { padding:10; } .test2 { padding:10; background-color:lightblue; } .test3 { margin:10 20 30 40; } WrapLayout { orientation:vertical; width:100; height:120 } Button { color:black }"
const cssPercentage = `
Page { margin: 5% 10% 15% 8%; background-color: orange; font-size: 8; }
GridLayout { margin: 3%; background-color: lightgreen; font-size: 8; }
StackLayout { border-color: red; border-width: 1; }
StackLayout * { border-color: blue; border-width: 1; }
GridLayout { border-color: green; border-width: 1; }
.test1 { padding: 10%; }
.test2 { padding: 10%; background-color: lightblue; }
.test3 { margin: 1% 2% 3% 4%; }
WrapLayout { orientation: vertical; width: 75%; height: 45% }
Button { color: black }`;
const cssWithouPercentage = `
Page { margin:15 10 15 30; background-color: orange; font-size: 8; }
GridLayout { margin:3; background-color: lightgreen; font-size: 8; }
StackLayout { border-color: red; border-width: 1; }
StackLayout * { border-color: blue; border-width: 1; }
GridLayout { border-color: green; border-width: 1; }
.test1 { padding: 10; }
.test2 { padding: 10; background-color: lightblue; }
.test3 { margin: 10 20 30 40; }
WrapLayout { orientation: vertical; width: 100; height: 120; }
Button { color: black }`;
var isSCCWithPercentage = true;

View File

@ -414,7 +414,7 @@ export class View extends ViewCommon {
_setNativeClipToBounds() {
let backgroundInternal = this.style.backgroundInternal;
this.nativeView.clipsToBounds = backgroundInternal.hasUniformBorder() || backgroundInternal.getUniformBorderRadius() > 0;
this.nativeView.clipsToBounds = backgroundInternal.hasBorderWidth() || backgroundInternal.hasBorderRadius();
}
}