Bug 1643762 [wpt PR 24014] - [css-lists] Fix list image gradient with…

… dynamic zoom, a=testonly Automatic update from web-platform-tests [css-lists] Fix list image gradient with dynamic zoom The 'list-style-image' property accepts an <image> value to be used as the marker image for the list item. The problem was when specifying a linear-gradient(), which has no intrinsic sizes. It would initially be sized using half of the font ascent, but when dynamically changing the 'zoom' property, it would become 300x150. This patch fixes it by changing LayoutImageResourceStyleImage::ImageSize to use custom default sizes for list markers. BUG=1091289 TEST=external/wpt/css/css-lists/list-style-image-zoom-dynamic.html Change-Id: I746e2421ffb329df884457f0f973b30280fb23b3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2230475 Commit-Queue: Koji Ishii <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Cr-Commit-Position: refs/heads/master@{#775707} -- wpt-commits: 0fd4d2f9d9c7dc27fa1d2410b105fcd753c33158 wpt-pr: 24014
iaxat · Jun 12, 2020 · 54c39fa · 54c39fa
1 parent 80eb503
commit 54c39fa
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic-ref.html b/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-waitt">
+<meta charset="utf-8">
+<title>CSS Reference: Image list markers with dynamic zoom</title>
+<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
+<style>
+body {
+  zoom: 2;
+}
+ol {
+  list-style-position: inside;
+}
+.gradient {
+  list-style-image: linear-gradient(blue, cyan);
+}
+.image {
+  list-style-image: url("/css/support/blue-100.png");
+}
+.svg {
+  list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: blue'></svg>");
+}
+</style>
+<ol>
+  <li class="gradient">text</li>
+  <li class="image">text</li>
+  <li class="svg">text</li>
+</ol>
+<script src="/common/reftest-wait.js"></script>
+<script>
+// Use a "load" event listener to ensure the images have been loaded.
+addEventListener("load", () => {
+  takeScreenshot();
+}, {once: true});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic.html b/testing/web-platform/tests/css/css-lists/list-style-image-zoom-dynamic.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Test: Image list markers with dynamic zoom</title>
+<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-lists/#image-markers">
+<link rel="match" href="list-style-image-zoom-dynamic-ref.html">
+<meta name="assert" content="Checks that, if the non-standard 'zoom' property is supported, list marker images are correctly updated when the 'zoom' value changes dynamically.">
+<style>
+.zoom {
+  zoom: 2;
+}
+ol {
+  list-style-position: inside;
+}
+.gradient {
+  list-style-image: linear-gradient(blue, cyan);
+}
+.image {
+  list-style-image: url("/css/support/blue-100.png");
+}
+.svg {
+  list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background: blue'></svg>");
+}
+</style>
+<ol>
+  <li class="gradient">text</li>
+  <li class="image">text</li>
+  <li class="svg">text</li>
+</ol>
+<script src="/common/reftest-wait.js"></script>
+<script>
+// Use a "load" event listener to ensure the images have been loaded.
+addEventListener("load", () => {
+  document.body.offsetLeft;
+  document.body.classList.add("zoom");
+  takeScreenshot();
+}, {once: true});
+</script>
+</html>