Color bleeding with rounded rectangles on high dpi displays
authorjunov@google.com <junov@google.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 9 Jan 2013 01:17:19 +0000 (01:17 +0000)
committerjunov@google.com <junov@google.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 9 Jan 2013 01:17:19 +0000 (01:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=106373

Reviewed by Simon Fraser.

Source/WebCore:

Test: fast/backgrounds/gradient-background-leakage-hidpi.html

Avoid using the BackgroundBleedShrinkBackground draw strategy for
RenderBox when border width is less than two layout units. This
is because rounded rectangles are always snapped to integer layout
coordinates, even with subpixel layout enabled.

* rendering/RenderBox.cpp:
(WebCore::RenderBox::determineBackgroundBleedAvoidance):

LayoutTests:

New layout test to verify that rounded rectangle corners do not
produce color bleeding on high dpi devices.

* fast/backgrounds/gradient-background-leakage-hidpi-expected.txt: Added.
* fast/backgrounds/gradient-background-leakage-hidpi.html: Added.
* platform/chromium-linux/fast/backgrounds/gradient-background-leakage-hidpi-expected.png: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@139137 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/backgrounds/gradient-background-leakage-hidpi-expected.txt [new file with mode: 0644]
LayoutTests/fast/backgrounds/gradient-background-leakage-hidpi.html [new file with mode: 0644]
LayoutTests/platform/chromium-linux/fast/backgrounds/gradient-background-leakage-hidpi-expected.png [new file with mode: 0644]
LayoutTests/platform/chromium/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp

index 606d402..5b4a946 100644 (file)
@@ -1,3 +1,17 @@
+2013-01-08  Justin Novosad  <junov@google.com>
+
+        Color bleeding with rounded rectangles on high dpi displays
+        https://bugs.webkit.org/show_bug.cgi?id=106373
+
+        Reviewed by Simon Fraser.
+
+        New layout test to verify that rounded rectangle corners do not
+        produce color bleeding on high dpi devices.
+
+        * fast/backgrounds/gradient-background-leakage-hidpi-expected.txt: Added.
+        * fast/backgrounds/gradient-background-leakage-hidpi.html: Added.
+        * platform/chromium-linux/fast/backgrounds/gradient-background-leakage-hidpi-expected.png: Added.
+
 2013-01-08  Filip Pizlo  <fpizlo@apple.com>
 
         DFG shouldn't treat the 'this' argument as being captured if a code block uses arguments
diff --git a/LayoutTests/fast/backgrounds/gradient-background-leakage-hidpi-expected.txt b/LayoutTests/fast/backgrounds/gradient-background-leakage-hidpi-expected.txt
new file mode 100644 (file)
index 0000000..59059b0
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x68
+  RenderBlock {HTML} at (0,0) size 800x68
+    RenderBody {BODY} at (8,8) size 784x52
+      RenderBlock {DIV} at (0,0) size 220x52 [bgcolor=#FF0000]
+        RenderBlock {DIV} at (10,10) size 202x32 [border: (1px solid #008000)]
diff --git a/LayoutTests/fast/backgrounds/gradient-background-leakage-hidpi.html b/LayoutTests/fast/backgrounds/gradient-background-leakage-hidpi.html
new file mode 100644 (file)
index 0000000..c9b4404
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style type="text/css">
+    .box {
+      height: 30px;
+      width: 200px;
+      background-image: -webkit-linear-gradient(black, black);
+      border-radius: 25px;
+      border: 1px solid green;
+    }
+  </style>
+</head>
+    <script>
+        window.onload = function() {
+            if (window.testRunner) {
+                testRunner.waitUntilDone();
+                testRunner.setBackingScaleFactor(2, finishTest);
+            }
+        }
+
+        function finishTest() {
+            setTimeout(function() { testRunner.notifyDone(); }, 0);
+        }
+    </script>
+<body>
+  <!-- You should see no red leaking through the inner edge of the border. -->
+  <div style="background-color: red; padding: 10px; width: 200px">
+    <div class="box"></div>
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/platform/chromium-linux/fast/backgrounds/gradient-background-leakage-hidpi-expected.png b/LayoutTests/platform/chromium-linux/fast/backgrounds/gradient-background-leakage-hidpi-expected.png
new file mode 100644 (file)
index 0000000..99fa10d
Binary files /dev/null and b/LayoutTests/platform/chromium-linux/fast/backgrounds/gradient-background-leakage-hidpi-expected.png differ
index feb2a19..0c750f6 100644 (file)
@@ -2771,6 +2771,9 @@ webkit.org/b/60136 [ Win ] http/tests/xmlviewer/dumpAsText/xmlviewer.xml [ Failu
 # New test added in r85454. Actual failure.
 webkit.org/b/91676 fast/js/mozilla/strict/assign-to-callee-name.html [ Failure ]
 
+# Test needing new baselines with fix for bug 106373
+webkit.org/b/106373 fast/backgrounds/gradient-background-leakage-hidpi.html [ Pass ImageOnlyFailure ]
+
 # Failure introduced by Chromium r83848.
 crbug.com/137938 [ Mac Android ] fast/url/ipv6.html [ Failure ]
 
index 8256af5..6830e99 100644 (file)
@@ -1,3 +1,20 @@
+2013-01-08  Justin Novosad  <junov@google.com>
+
+        Color bleeding with rounded rectangles on high dpi displays
+        https://bugs.webkit.org/show_bug.cgi?id=106373
+
+        Reviewed by Simon Fraser.
+
+        Test: fast/backgrounds/gradient-background-leakage-hidpi.html
+
+        Avoid using the BackgroundBleedShrinkBackground draw strategy for
+        RenderBox when border width is less than two layout units. This
+        is because rounded rectangles are always snapped to integer layout
+        coordinates, even with subpixel layout enabled.
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::determineBackgroundBleedAvoidance):
+
 2013-01-08  Elliott Sprehn  <esprehn@chromium.org>
 
         Merge getLineAtIndex into RenderBlock::lineAtIndex
index 3552805..a7a8c5b 100644 (file)
@@ -995,6 +995,21 @@ BackgroundBleedAvoidance RenderBox::determineBackgroundBleedAvoidance(GraphicsCo
 
     AffineTransform ctm = context->getCTM();
     FloatSize contextScaling(static_cast<float>(ctm.xScale()), static_cast<float>(ctm.yScale()));
+
+    // Because RoundedRect uses IntRect internally the inset applied by the 
+    // BackgroundBleedShrinkBackground strategy cannot be less than one integer
+    // layout coordinate, even with subpixel layout enabled. To take that into
+    // account, we clamp the contextScaling to 1.0 for the following test so
+    // that borderObscuresBackgroundEdge can only return true if the border
+    // widths are greater than 2 in both layout coordinates and screen
+    // coordinates.
+    // This precaution will become obsolete if RoundedRect is ever promoted to
+    // a sub-pixel representation.
+    if (contextScaling.width() > 1) 
+        contextScaling.setWidth(1);
+    if (contextScaling.height() > 1) 
+        contextScaling.setHeight(1);
+
     if (borderObscuresBackgroundEdge(contextScaling))
         return BackgroundBleedShrinkBackground;
     if (!style->hasAppearance() && borderObscuresBackground() && backgroundHasOpaqueTopLayer())