Pass node for tree counting conversions for gradients

lilles · chromium-wpt-export-bot · commit b4bde5be7d17 · 2025-05-09T01:57:38.000-07:00
Gradients (incorrectly) resolves computed values at paint time, which means we need the Element available for the CSSToLengthConversionData. We used to pass in a nullptr which would crash. Instead, pass the LayoutObject's node (or the Document if null) down to the GetImage() calls and use that node for tree counting if it is an element. Otherwise fall back to the documentElement. The correct solution is to compute gradients at computed value time, but that's a larger project. Bug: 410960656, 40620723 Change-Id: I97eafed237d5c148be05c53fe9fe3e3647b96fe0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6523441 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1458005}
diff --git a/css/css-images/linear-gradient-body-sibling-index-ref.html b/css/css-images/linear-gradient-body-sibling-index-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>CSS Test Reference</title>
+<style>
+  body {
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: 100px 100px;
+    background-image: linear-gradient(blue 40px, yellow);
+  }
+</style>
+<body>
diff --git a/css/css-images/linear-gradient-body-sibling-index.html b/css/css-images/linear-gradient-body-sibling-index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>CSS Images Test: Linear gradient with sibling-index()</title>
+<link rel="help" href="https://drafts.csswg.org/css-images/#linear-gradients">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
+<link rel="match" href="linear-gradient-body-sibling-index-ref.html">
+<link rel="assert" content"sibling-index() is 2 for body">
+<style>
+  body {
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: 100px 100px;
+    background-image: linear-gradient(blue calc(20px * sibling-index()), yellow);
+  }
+</style>
+<body>
diff --git a/css/css-images/linear-gradient-sibling-index-ref.html b/css/css-images/linear-gradient-sibling-index-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>CSS Test Reference</title>
+<style>
+  div { width: 100px; height: 100px; }
+</style>
+<div style="background: linear-gradient(blue 20px, yellow)"></div>
+<div style="background: linear-gradient(blue 50px, yellow)"></div>
diff --git a/css/css-images/linear-gradient-sibling-index.html b/css/css-images/linear-gradient-sibling-index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>CSS Images Test: Linear gradient with sibling-index()</title>
+<link rel="help" href="https://drafts.csswg.org/css-images/#linear-gradients">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
+<link rel="match" href="linear-gradient-sibling-index-ref.html">
+<style>
+  .grad {
+    width: 100px;
+    height: 100px;
+    background: linear-gradient(blue calc(10px * sibling-index()), yellow);
+  }
+</style>
+<div>
+  <div></div>
+  <div class="grad"></div>
+  <div></div>
+  <div></div>
+  <div class="grad"></div>
+</div>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +>
 +<title>CSS Test Referencetitle>
 +<style>
 +  div { width: 100px; height: 100px; }
 +style>
 +<div style="background: linear-gradient(blue 20px, yellow)">div>
 +<div style="background: linear-gradient(blue 50px, yellow)">div>