[@container] Support container-relative units in gradients
Units in gradients are resolved outside of style resolution, using a
separate CSSToLengthConversionData object. (The main object being part
of StyleResolverState). At the time the gradients are produced, we don't
have enough context to pass the nearest container to the
CSSToLengthConversionData constructor.
This CL solves that by eagerly fetching container sizes during
ElementStyleResources::LoadPendingResources, and storing those sizes
on StyleGeneratedImage (which is created during style resolution).
Note that invalidation does not work yet.
Bug: 1223030, 1313084
Change-Id: I2373bca3dbadb9129975f62b49c15e5631a033e6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3645211
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1003061}
diff --git a/css/css-contain/container-queries/container-units-gradient-ref.html b/css/css-contain/container-queries/container-units-gradient-ref.html
new file mode 100644
index 0000000..dbdabd9
--- /dev/null
+++ b/css/css-contain/container-queries/container-units-gradient-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+ .container {
+ width: 400px;
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .box {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+ }
+</style>
+<div class=container>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:linear-gradient(green 15px, blue 40px)"></div>
+ <div class=box style="background:radial-gradient(green 20px, blue 30px)"></div>
+ <div class=box style="background:conic-gradient(from 180deg at 30px, green, blue);"></div>
+</div>
diff --git a/css/css-contain/container-queries/container-units-gradient.html b/css/css-contain/container-queries/container-units-gradient.html
new file mode 100644
index 0000000..3d6f537
--- /dev/null
+++ b/css/css-contain/container-queries/container-units-gradient.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Container Relative Units in gradients</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="match" href="container-units-gradient-ref.html">
+<style>
+ .container {
+ container-type: size;
+ width: 400px;
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .box {
+ width: 100px;
+ height: 100px;
+ margin: 5px;
+ }
+</style>
+<div class=container>
+ <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div>
+ <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div>
+ <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div>
+ <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div>
+ <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue);"></div>
+</div>
