NativeScript
diff --git a/‎packages/core/ui/styling/background.android.ts‎
Lines changed: 4 additions & 7 deletions b/‎packages/core/ui/styling/background.android.ts‎
Lines changed: 4 additions & 7 deletions
diff --git a/‎packages/core/ui/styling/linear-gradient.spec.ts‎
Lines changed: 37 additions & 0 deletions b/‎packages/core/ui/styling/linear-gradient.spec.ts‎
Lines changed: 37 additions & 0 deletions
diff --git a/‎packages/core/ui/styling/linear-gradient.ts‎
Lines changed: 40 additions & 0 deletions b/‎packages/core/ui/styling/linear-gradient.ts‎
Lines changed: 40 additions & 0 deletions
diff --git a/‎packages/core/ui/utils.ios.ts‎
Lines changed: 5 additions & 12 deletions b/‎packages/core/ui/utils.ios.ts‎
Lines changed: 5 additions & 12 deletions
@@ -1,5 +1,5 @@
 import { View } from '../core/view';
-import { LinearGradient } from './linear-gradient';
+import { LinearGradient, resolveGradientStopOffsets } from './linear-gradient';
 import { ClipPathFunction } from './clip-path-function';
 import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX, FILE_PREFIX } from '../../utils';
 import { CSSValue, parse } from '../../css-value/reworkcss-value';
@@ -15,13 +15,10 @@ function fromBase64(source: string): android.graphics.Bitmap {
 function fromGradient(gradient: LinearGradient): org.nativescript.widgets.LinearGradientDefinition {
 	const colors = Array.create('int', gradient.colorStops.length);
 	const stops = Array.create('float', gradient.colorStops.length);
-	let hasStops = false;
+	const offsets = resolveGradientStopOffsets(gradient.colorStops);
 	gradient.colorStops.forEach((stop, index) => {
 		colors[index] = stop.color.android;
-		if (stop.offset) {
-			stops[index] = stop.offset.value;
-			hasStops = true;
-		}
+		stops[index] = offsets[index];
 	});
 
 	const alpha = gradient.angle / (Math.PI * 2);
@@ -30,7 +27,7 @@ function fromGradient(gradient: LinearGradient): org.nativescript.widgets.Linear
 	const endX = Math.pow(Math.sin(Math.PI * (alpha + 0.25)), 2);
 	const endY = Math.pow(Math.sin(Math.PI * alpha), 2);
 
-	return new org.nativescript.widgets.LinearGradientDefinition(startX, startY, endX, endY, colors, hasStops ? stops : null);
+	return new org.nativescript.widgets.LinearGradientDefinition(startX, startY, endX, endY, colors, stops);
 }
 
 const pattern = /url\(('|")(.*?)\1\)/;
 
@@ -0,0 +1,37 @@
+import { resolveGradientStopOffsets } from './linear-gradient';
+
+function stops(...offsets: (number | undefined)[]) {
+	return offsets.map((value) => (value === undefined ? { color: null } : { color: null, offset: { unit: '%' as const, value } }));
+}
+
+describe('resolveGradientStopOffsets', () => {
+	it('fills a missing final stop with 1', () => {
+		expect(resolveGradientStopOffsets(stops(0.68, undefined))).toEqual([0.68, 1]);
+	});
+
+	it('spreads unpositioned stops evenly', () => {
+		expect(resolveGradientStopOffsets(stops(undefined, undefined, undefined))).toEqual([0, 0.5, 1]);
+		const [a, b, c] = resolveGradientStopOffsets(stops(0.3, undefined, 0.6));
+		expect([a, c]).toEqual([0.3, 0.6]);
+		expect(b).toBeCloseTo(0.45, 10);
+	});
+
+	it('spreads a run between its positioned neighbours', () => {
+		const [a, b, c, d, e] = resolveGradientStopOffsets(stops(undefined, 0.2, undefined, undefined, 1));
+		expect([a, b, e]).toEqual([0, 0.2, 1]);
+		expect(c).toBeCloseTo(0.4667, 3);
+		expect(d).toBeCloseTo(0.7333, 3);
+	});
+
+	it('raises a position that goes backwards', () => {
+		expect(resolveGradientStopOffsets(stops(0.5, 0.2))).toEqual([0.5, 0.5]);
+	});
+
+	it('keeps fully positioned stops as written', () => {
+		expect(resolveGradientStopOffsets(stops(0, 0.52, 0.84, 1))).toEqual([0, 0.52, 0.84, 1]);
+	});
+
+	it('handles no stops', () => {
+		expect(resolveGradientStopOffsets([])).toEqual([]);
+	});
+});
@@ -7,6 +7,46 @@ export interface ColorStop {
 	offset?: CoreTypes.LengthPercentUnit;
 }
 
+/**
+ * Positions for every color stop, per CSS: a first stop without a position
+ * sits at 0, a last one at 1, a run of unpositioned stops is spread evenly
+ * between its positioned neighbours, and a position lower than one before it
+ * is raised to that value.
+ */
+export function resolveGradientStopOffsets(colorStops: readonly ColorStop[]): number[] {
+	const count = colorStops.length;
+	if (count === 0) {
+		return [];
+	}
+	const offsets: (number | undefined)[] = colorStops.map((stop) => (stop.offset ? stop.offset.value : undefined));
+	if (offsets[0] === undefined) {
+		offsets[0] = 0;
+	}
+	if (offsets[count - 1] === undefined) {
+		offsets[count - 1] = 1;
+	}
+	let highest = offsets[0];
+	for (let i = 1; i < count; i++) {
+		const offset = offsets[i];
+		if (offset !== undefined) {
+			offsets[i] = Math.max(offset, highest);
+			highest = offsets[i];
+		}
+	}
+	let start = 0;
+	for (let i = 1; i < count; i++) {
+		if (offsets[i] === undefined) {
+			continue;
+		}
+		const gap = i - start;
+		for (let k = start + 1; k < i; k++) {
+			offsets[k] = offsets[start] + ((offsets[i] - offsets[start]) * (k - start)) / gap;
+		}
+		start = i;
+	}
+	return offsets as number[];
+}
+
 export class LinearGradient {
 	public angle: number;
 	public colorStops: ColorStop[];
 
@@ -1,6 +1,6 @@
 import { Screen } from '../platform';
 import * as utils from '../utils';
-import { LinearGradient } from './styling/linear-gradient';
+import { LinearGradient, resolveGradientStopOffsets } from './styling/linear-gradient';
 import { NativeScriptUIView } from './utils';
 
 export namespace ios {
@@ -52,21 +52,14 @@ export namespace ios {
 
 		const iosColors = NSMutableArray.alloc().initWithCapacity(gradient.colorStops.length);
 		const iosStops = NSMutableArray.alloc<number>().initWithCapacity(gradient.colorStops.length);
-		let hasStops = false;
-
-		gradient.colorStops.forEach((stop) => {
+		const offsets = resolveGradientStopOffsets(gradient.colorStops);
+		gradient.colorStops.forEach((stop, index) => {
 			iosColors.addObject(stop.color.ios.CGColor);
-			if (stop.offset) {
-				iosStops.addObject(stop.offset.value);
-				hasStops = true;
-			}
+			iosStops.addObject(offsets[index]);
 		});
 
 		gradientLayer.colors = iosColors;
-
-		if (hasStops) {
-			gradientLayer.locations = iosStops;
-		}
+		gradientLayer.locations = iosStops;
 
 		const alpha = gradient.angle / (Math.PI * 2);
 		const startX = Math.pow(Math.sin(Math.PI * (alpha + 0.75)), 2);