Only send one drawing command per list marker

Only send one drawing command per list marker https://bugs.webkit.org/show_bug.cgi?id=248378 Reviewed by Tim Nguyen. Merge - https://src.chromium.org/viewvc/blink?view=revision&revision=151161 Previously, some list markers (notably list-style-type: disc, circle, square) would send two drawing commands per marker: one to fill the marker, and then a second one to fill it. This constructs unnecessary paints and causes a weird visual effect if the color is translucent. This should have a minor visible effect on these list markers, but it's not identical: since the stroke area isn't drawn again, the antialiasing varies. * Source/WebCore/rendering/RenderListMarker.cpp: (RenderListMarker::paint): Update draw to fill or stroke for "disc", "circle" and "square" * LayoutTests/fast/lists/list-type-translucent-color.html: Added Test Case * LayoutTests/fast/lists/list-type-translucent-color-expected.html: Added Test Case Expectation Canonical link: https://commits.webkit.org/257175@main
WebKit · Nov 30, 2022 · 5e81d33 · 5e81d33
1 parent 787ad7f
commit 5e81d33
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 5 deletions.
diff --git a/LayoutTests/fast/lists/list-type-translucent-color-expected.html b/LayoutTests/fast/lists/list-type-translucent-color-expected.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.square {
+  list-style-type: square;
+}
+
+.disc {
+  list-style-type: disc;
+}
+
+.circle {
+  list-style-type: circle;
+}
+
+li {
+  color: #000000;
+  opacity: 0.2;
+}
+</style>
+</head>
+<body>
+<ul>
+  <li class="square"></li>
+  <li class="disc"></li>
+  <li class="circle"></li>
+</ul>
+</body>
+</html>
diff --git a/LayoutTests/fast/lists/list-type-translucent-color.html b/LayoutTests/fast/lists/list-type-translucent-color.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<head>
+    <meta name="fuzzy" content="maxDifference=1-6; totalPixels=32-42" />
+</head>
+<body>
+<ul>
+    <li style="list-style-type:square; color:rgba(0,0,0,0.2);"></li>
+    <li style="list-style-type:disc; color:rgba(0,0,0,0.2);"></li>
+    <li style="list-style-type:circle; color:rgba(0,0,0,0.2);"></li>
+</ul>
+</body>
diff --git a/Source/WebCore/rendering/RenderListMarker.cpp b/Source/WebCore/rendering/RenderListMarker.cpp
@@ -1,7 +1,7 @@
 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 1999 Antti Koivisto (koivisto@kde.org)
- * Copyright (C) 2003-2021 Apple Inc. All rights reserved.
+ * Copyright (C) 2003-2022 Apple Inc. All rights reserved.
  * Copyright (C) 2006 Andrew Wellington (proton@wiretapped.net)
  * Copyright (C) 2010 Daniel Bates (dbates@intudata.com)
  *
@@ -1622,14 +1622,13 @@ void RenderListMarker::paint(PaintInfo& paintInfo, const LayoutPoint& paintOffse
 
     switch (style().listStyleType()) {
     case ListStyleType::Disc:
-        context.drawEllipse(markerRect);
+        context.fillEllipse(markerRect);
         return;
     case ListStyleType::Circle:
-        context.setFillColor(Color::transparentBlack);
-        context.drawEllipse(markerRect);
+        context.strokeEllipse(markerRect);
         return;
     case ListStyleType::Square:
-        context.drawRect(markerRect);
+        context.fillRect(markerRect);
         return;
     default:
         break;