layout: Reverse vertical orientation of gradients using corner directions.

jdm · servo-wpt-sync · commit 4424f5958b96 · 2025-07-11T23:01:34.000+02:00
Signed-off-by: Josh Matthews &lt;josh@joshmatthews.net&gt;
diff --git a/css/css-images/linear-gradient-non-square.html b/css/css-images/linear-gradient-non-square.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Linear gradients for non-square elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-images/#linear-gradients">
+<link rel="match" href="reference/linear-gradient-non-square-ref.html">
+<style>
+.a,
+.b,
+.c,
+.d {
+  width: 200px;
+  height: 100px;
+}
+.a {
+  background: linear-gradient(to right bottom, black 50%, lightgray 50%);
+}
+.b {
+  background: linear-gradient(to left bottom, black 50%, lightgray 50%);
+}
+.c {
+  background: linear-gradient(to left top, black 50%, lightgray 50%);
+}
+.d {
+  background: linear-gradient(to right top, black 50%, lightgray 50%);
+}
+</style>
+<div class="a"></div>
+<div class="b"></div>
+<div class="c"></div>
+<div class="d"></div>
diff --git a/css/css-images/reference/linear-gradient-non-square-ref.html b/css/css-images/reference/linear-gradient-non-square-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Linear gradients for non-square elements reference</title>
+<style>
+.a,
+.b,
+.c,
+.d {
+  width: 200px;
+  height: 100px;
+}
+.a {
+  background: linear-gradient(-206.56505118deg, black 50%, lightgray 50%);
+}
+.b {
+  background: linear-gradient(206.56505118deg, black 50%, lightgray 50%);
+}
+.c {
+  background: linear-gradient(-26.56505118deg, black 50%, lightgray 50%);
+}
+.d {
+  background: linear-gradient(26.56505118deg, black 50%, lightgray 50%);
+}
+</style>
+<div class="a"></div>
+<div class="b"></div>
+<div class="c"></div>
+<div class="d"></div>
