Css gradients (#5534)

* feat(ios): Added support for css gradients.

* feat(android): Added support for css gradients.

* fix: Fixed gradient borders on ios

* fix(gradient): added backgroundGradient to View and Style.

* fix(ios-gradients): fixed ios gradients covering view content.

* test(gradient): Added ui app tests for background gradients.

* test(gradient): Added a test ensuring background gradient property is applied to style.

* style(gradient): Fixed tslint errors.

* fix(gradient): Removed the background-gradient property and added the gradient to background-image.

* style: fixed a consecutive blank line tslint error.

* fix(tests): fixed the bug that was causing tests to fail.

* chore(linear-gradient): fix equality comparer

* test(gradient): add linear gradients test app

* chore(tslint): update with latest tslint rules
This commit is contained in:
vultix
2018-05-03 04:24:41 -06:00
committed by Svetoslav
parent 72fa5c9bc1
commit 5a83a1c858
19 changed files with 397 additions and 24 deletions

View File

@@ -0,0 +1,77 @@
StackLayout {
width: 80;
height: 80;
background: linear-gradient(to top, green, blue);
}
#s0 {
border-width: 5;
}
#s1 {
border-width: 5; border-color: red;
}
#s2 {
border-width: 5; border-color: red red red green;
}
#s3 {
border-width: 5; border-color: red; border-radius: 5;
}
#s4 {
border-width: 5; border-color: red; border-radius: 50;
}
#s5 {
border-width: 5 10 15 20; border-color: red;
}
#s6 {
border-width: 5; border-color: red green blue yellow;
}
#s7 {
border-width: 5 10 15 20; border-color: red green blue yellow;
}
#s8 {
border-width: 5 10; border-color: red green;
}
#s9 {
border-width: 15 10 5; border-color: red green blue;
}
#s10 {
border-width: 5 0; border-color: black;
}
#s11 {
background-color: magenta;
}
#s12 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
}
#s13 {
border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
}
#s14 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
}
#s15 {
border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/resources/images/test2.png');
}
#s16 {
border-width: 5; border-color: red; padding: 5;
}
#s17 {
border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
}