Bug 1530462: Adjust reftest 'float-retry-push-image.html' to allow for rounding error on linear-gradient edge. r=bradwerth
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 26 Feb 2019 16:50:08 +0000
changeset 519081 e6333b7c1331dd7c04d27cbf51c8e25eb201d8b3
parent 519079 2a9b9f7b3b695a07705960bd2ddc3824f2e21357
child 519082 8e6506978820a5ece5c7f18a6e9c14024517b109
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbradwerth
bugs1530462
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1530462: Adjust reftest 'float-retry-push-image.html' to allow for rounding error on linear-gradient edge. r=bradwerth And while we're at it, update the reference case to have "Reference" in its title, so that the reference case and testcases are easier to distinguish when viewing them side-by-side in several tabs. Differential Revision: https://phabricator.services.mozilla.com/D21045
layout/reftests/w3c-css/submitted/shapes1/float-retry-push-image.html
layout/reftests/w3c-css/submitted/shapes1/float-retry-push-ref.html
layout/reftests/w3c-css/submitted/shapes1/reftest.list
--- a/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-image.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-image.html
@@ -10,25 +10,45 @@
 <style>
   body {
     margin: 0px;
     line-height: 1;
   }
 
   #too-wide {
     display: inline-block;
-    height: 20px;
+    height: 21px;
     width: 250px;
     background: blue;
   }
 
   #shape {
     width: 100px;
     height: 100px;
     float: left;
+    /* We use a gradient, which is part of the CSS 'image' type.
+     * We set it up to create a hard diagonal edge from the bottom left to the
+     * top right of #shape, which slices through each pixel along the diagonal.
+     * Theoretically, this should place #too-wide at position 50,50 within
+     * #shape's 100x100 region, but on some devices, the gradient rasterization
+     * may leave pixel 50,49 unshaded enough that #too-wide is placed there
+     * instead. To account for that possible off-by-one rounding scenario,
+     * we set things up as follows:
+     *  - We make #too-wide 1px taller than the corresponding content in the
+     * reference case.
+     *  - We clip the outermost div using a 'clip-path' that only paints
+     * the region where the corresponding content is in the reference case.
+     *  - If the testcase renders properly, then #too-wide will have 1px of
+     * content clipped off of its top or bottom (depending on how the
+     * linear-gradient rasterization and rounding works out). Either way,
+     * it'll match the reference case.
+     */
     shape-outside: linear-gradient(135deg, black, black 50%, transparent 50%);
   }
+  .clip {
+    clip-path: inset(50px 0 30px 0px);
+  }
 </style>
 
-<div style="width: 300px; height: 100px;">
+<div style="width: 300px; height: 100px;" class="clip"> 
 <div id="shape"></div>
 <span id="too-wide"></span>
 <div>
--- a/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/float-retry-push-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <meta charset="utf-8">
-<title>Test for retrying floats and pushing them partway down the float area</title>
+<title>Reference for retrying floats and pushing them partway down the float area</title>
 <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
 <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
 <style>
   body {
     margin: 0px;
     line-height: 1;
   }
 
--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -100,13 +100,12 @@ fuzzy(0-108,0-81) == shape-outside-ellip
 == shape-outside-polygon-022.html shape-outside-polygon-022-ref.html
 == shape-outside-polygon-023.html shape-outside-polygon-023-ref.html
 == shape-outside-polygon-024.html shape-outside-polygon-024-ref.html
 == shape-outside-polygon-025.html shape-outside-polygon-025-ref.html
 fuzzy(0-101,0-2263) == shape-outside-polygon-032.html shape-outside-polygon-032-ref.html
 
 # Tests of shape-outside layout behavior with too-wide inline elements
 == float-retry-push-circle.html float-retry-push-ref.html
-# The next test offsets a 250px wide element up to one pixel due to small offsets in gradient generation.
-fuzzy(0-255,0-500) == float-retry-push-image.html float-retry-push-ref.html
+== float-retry-push-image.html float-retry-push-ref.html
 == float-retry-push-inset.html float-retry-push-ref.html
 == float-retry-push-polygon.html float-retry-push-ref.html
 == float-should-push.html float-should-push-ref.html