Backed out changeset c25dd569f2cf (bug 1594099) for Reftest failures on reftests/high-contrast/backplate-bg-image-012.html. CLOSED TREE

2019-12-11 20:45:03 +02:00 · 2019-12-11 20:45:03 +02:00 · 55496cd03f
--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@ -167,53 +167,6 @@ static bool LineHasVisibleInlineContent(nsLineBox* aLine) {
  return false;
 }

-/**
- * Iterates through the frame's in-flow children and
- * unions the visual overflow of all text frames which
- * participate in the line aFrame belongs to.
- * If a child of aFrame is not a text frame,
- * we recurse with the child as the aFrame argument.
- * If aFrame isn't a line participant, we skip it entirely
- * and return an empty rect.
- * The resulting nsRect is offset relative to the parent of aFrame.
- */
-static nsRect GetFrameTextArea(nsIFrame* aFrame,
-                               nsDisplayListBuilder* aBuilder) {
-  nsRect textArea;
-  if (aFrame->IsTextFrame()) {
-    textArea = aFrame->GetVisualOverflowRect();
-  } else if (aFrame->IsFrameOfType(nsIFrame::eLineParticipant)) {
-    for (nsIFrame* kid : aFrame->PrincipalChildList()) {
-      nsRect kidTextArea = GetFrameTextArea(kid, aBuilder);
-      textArea.OrWith(kidTextArea);
-    }
-  }
-  // add aFrame's position to keep textArea relative to aFrame's parent
-  return textArea + aFrame->GetPosition();
-}
-
-/**
- * Iterates through the line's children and
- * unions the visual overflow of all text frames.
- * GetFrameTextArea unions and returns the visual overflow
- * from all line-participating text frames within the given child.
- * The nsRect returned from GetLineTextArea is offset
- * relative to the given line.
- */
-static nsRect GetLineTextArea(nsLineBox* aLine,
-                              nsDisplayListBuilder* aBuilder) {
-  nsRect textArea;
-  nsIFrame* kid = aLine->mFirstChild;
-  int32_t n = aLine->GetChildCount();
-  while (n-- > 0) {
-    nsRect kidTextArea = GetFrameTextArea(kid, aBuilder);
-    textArea.OrWith(kidTextArea);
-    kid = kid->GetNextSibling();
-  }
-
-  return textArea;
-}
-
 #ifdef DEBUG
 #  include "nsBlockDebugFlags.h"

@ -6990,8 +6943,7 @@ void nsBlockFrame::BuildDisplayList(nsDisplayListBuilder* aBuilder,
        lastYMost = lineArea.YMost();
        if (lineInLine && shouldDrawBackplate &&
            LineHasVisibleInlineContent(line)) {
-          nsRect lineBackplate = GetLineTextArea(line, aBuilder) +
-                                 aBuilder->ToReferenceFrame(this);
+          nsRect lineBackplate = lineArea + aBuilder->ToReferenceFrame(this);
          if (curBackplateArea.IsEmpty()) {
            curBackplateArea = lineBackplate;
          } else {
--- a/layout/reftests/high-contrast/backplate-bg-image-001-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-001-ref.html
@ -6,7 +6,7 @@
  <style>
    body {
      font: 20px Ahem;
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
    }
    .fake-backplate {
      background-color: white;
@ -21,5 +21,5 @@
     * discussion on bug 1577028.) */
    </style>
 </head>
-<body><span class="fake-backplate">ppppp ppppp </span></body>
+<body><div class="fake-backplate">XXXXX XXXXX </div></body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-001.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-001.html
@ -6,9 +6,9 @@
  <style>
    body {
      font: 20px Ahem;
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
    }
    </style>
 </head>
-<body>ppppp ppppp</body>
+<body>XXXXX XXXXX</body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-002-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-002-ref.html
@ -12,12 +12,12 @@
      width: max-content;
    }
    .sample {
-      background-image: linear-gradient(blue, blue);
-      height: 500px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC);
+        height: 500px;
    }
  </style>
 </head>
 <body>
-<span class="fake-backplate">ppppp ppppp</span><div class="sample"><span class="fake-backplate">ppppp ppppp</span></div><span class="fake-backplate">ppppp ppppp</span>
+<div class="fake-backplate">XXXXX XXXXX</div><div class="sample"><div class="fake-backplate">XXXXX XXXXX</div></div><div class="fake-backplate">XXXXX XXXXX</div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-002.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-002.html
@ -8,12 +8,12 @@
      font: 20px Ahem;
    }
    .sample {
-      background-image: linear-gradient(blue, blue);
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC);
      height: 500px;
    }
  </style>
 </head>
 <body>
-ppppp ppppp<div class="sample">ppppp ppppp</div>ppppp ppppp
+XXXXX XXXXX<div class="sample">XXXXX XXXXX</div>XXXXX XXXXX
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-003-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-003-ref.html
@ -33,8 +33,8 @@
  </style>
 </head>
 <body>
-<div><span class="std relpos i">ppppp ppppp</span>ppppp ppppp</div>
-<div><br><br><span class="std relpos ib fake"><span class="fake-backplate">ppppp ppppp</span></span>
-<span>ppppp ppppp</span></div>
-<div class="abspos"><span class="fake-backplate">ppppp ppppp</span></div>
+<div><span class="std relpos i">XXXXX XXXXX</span>XXXXX XXXXX</div>
+<div><br><br><span class="std relpos ib fake"><div class="fake-backplate">XXXXX XXXXX</div></span>
+<span>XXXXX XXXXX</span></div>
+<div class="abspos"><div class="fake-backplate">XXXXX XXXXX</div></div>
 </body>
--- a/layout/reftests/high-contrast/backplate-bg-image-003.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-003.html
@ -29,8 +29,8 @@
  </style>
 </head>
 <body>
-<div><span class="std relpos i">ppppp ppppp</span>ppppp ppppp</div>
-<div><br><br><span class="std relpos ib">ppppp ppppp</span>
-<span>ppppp ppppp</span></div>
-<div class="abspos">ppppp ppppp</div>
+<div><span class="std relpos i">XXXXX XXXXX</span>XXXXX XXXXX</div>
+<div><br><br><span class="std relpos ib">XXXXX XXXXX</span>
+<span>XXXXX XXXXX</span></div>
+<div class="abspos">XXXXX XXXXX</div>
 </body>
--- a/layout/reftests/high-contrast/backplate-bg-image-004-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-004-ref.html
@ -11,23 +11,23 @@
    width: max-content;
  }
  .std {
-    background-image: linear-gradient(blue, blue);
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC);
    padding: 15px;
  }
  .relpos {
    position: relative;
    left: 20px;
  }
+  .negZ {
+    z-index: -1;
+  }
  .ib {
    display: inline-block;
  }
  </style>
 </head>
 <body>
-  <span class="std ib">
-    <span class="relpos">
-      <span class="fake-backplate" style="color:transparent;">ppppp ppppp</span>
-    </span>
-  </span>
-  <span>ppppp ppppp</span>
+<div><span class="std relpos ib negZ" style="visibility: hidden;">
+<div class="fake-backplate">XXXXX XXXXX</div></span><span>XXXXX XXXXX</span>
+</div>
 </body>
--- a/layout/reftests/high-contrast/backplate-bg-image-004.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-004.html
@ -7,7 +7,7 @@
    font: 20px Ahem;
  }
  .std {
-    background-image: linear-gradient(blue, blue);
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC);
    padding: 15px;
  }
  .relpos {
@ -23,8 +23,7 @@
  </style>
 </head>
 <body>
-  <span class="std ib">
-    <span class="relpos negZ">ppppp ppppp</span>
-  </span>
-  <span>ppppp ppppp</span>
+<div><span class="std relpos ib negZ">
+XXXXX XXXXX</span><span>XXXXX XXXXX</span>
+</div>
 </body>
--- a/layout/reftests/high-contrast/backplate-bg-image-005-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-005-ref.html
@ -8,9 +8,9 @@
      font: 20px Ahem;
    }
    .sample {
-      background-image: linear-gradient(blue, blue);
-      white-space: pre;
-      padding: 10px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC);
+        white-space: pre;
+        padding: 10px;
    }
    .fake-backplate {
      background-color: white;
@ -19,8 +19,8 @@
    </style>
 </head>
 <body>
-ppppp ppppp<div class="sample"><span class="fake-backplate">     ppppp ppppp</span></div>ppppp ppppp
-<div class="sample"><span class="fake-backplate">ppppp ppppp     </span></div>
-<div class="sample"><span class="fake-backplate">     </span></div>
+XXXXX XXXXX<div class="sample"><div class="fake-backplate">     XXXXX XXXXX</div></div>XXXXX XXXXX
+<div class="sample"><div class="fake-backplate">XXXXX XXXXX     </div></div>
+<div class="sample"><div class="fake-backplate">     </div></div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-005.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-005.html
@ -8,15 +8,15 @@
      font: 20px Ahem;
    }
    .sample {
-      background-image: linear-gradient(blue, blue);
-      white-space: pre;
-      padding: 10px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC);
+        white-space: pre;
+        padding: 10px;
    }
    </style>
 </head>
 <body>
-ppppp ppppp<div class="sample">     ppppp ppppp</div>ppppp ppppp
-<div class="sample">ppppp ppppp     </div>
+XXXXX XXXXX<div class="sample">     XXXXX XXXXX</div>XXXXX XXXXX
+<div class="sample">XXXXX XXXXX     </div>
 <div class="sample">     </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-006-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-006-ref.html
@ -8,28 +8,25 @@
      font: 20px Ahem;
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
    .fake-backplate {
      background-color: white;
      width: max-content;
    }
-    button {
-      font: 20px Ahem;
-    }
    </style>
 </head>
 <body>
    <div class="std">
-    <button><span class="fake-backplate">ppppp</span></button><span class="fake-backplate">ppppp</span><br>
+    <div class="fake-backplate">
+    <button><div class="fake-backplate">XXXXX</div></button>XXXXX<br>
+    </div>
+    <div class="fake-backplate">
    <form>
      <input>
    </form>
-    <br>
-    <span class="fake-backplate">ppppp<!-- no whitespace
-    --><button><span class="fake-backplate">ppppp</span></button><!-- no whitespace
-    -->ppppp</span>
+    </div>
    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-006.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-006.html
@ -8,23 +8,17 @@
      font: 20px Ahem;
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
-    button {
-      font: 20px Ahem;
-    }
    </style>
 </head>
 <body>
    <div class="std">
-    <button>ppppp</button>ppppp<br>
+    <button>XXXXX</button>XXXXX<br>
    <form>
      <input>
-    </form><br><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --><button>ppppp</button><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --></div>
+    </form>
+    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-007-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-007-ref.html
@ -8,12 +8,11 @@
      font: 20px Ahem;
    }
    button, input {
-      font: 20px Ahem;
      border: 0px;
      /* This forces non-native styling */
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
    .fake-backplate {
@ -24,14 +23,14 @@
 </head>
 <body>
    <div class="std">
-    <button><span class="fake-backplate">ppppp</span></button><span class="fake-backplate">ppppp</span><br>
+    <div class="fake-backplate">
+    <button><div class="fake-backplate">XXXXX</div></button>XXXXX<br>
+    </div>
+    <div class="fake-backplate">
    <form>
      <input>
    </form>
-    <br>
-    <span class="fake-backplate">ppppp<!-- no whitespace
-    --><button><span class="fake-backplate">ppppp</span></button><!-- no whitespace
-    -->ppppp</span>
+    </div>
    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-007.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-007.html
@ -8,25 +8,21 @@
      font: 20px Ahem;
    }
    button, input {
-      font: 20px Ahem;
      border: 0px;
      /* This forces non-native styling */
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
    </style>
 </head>
 <body>
    <div class="std">
-    <button>ppppp</button>ppppp<br>
+    <button>XXXXX</button>XXXXX<br>
    <form>
      <input>
-    </form><br>
-    <span class="fake-backplate">ppppp<!-- no whitespace
-    --><button>ppppp</button><!-- no whitespace
-    -->ppppp</span>
+    </form>
    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-008-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-008-ref.html
@ -4,11 +4,11 @@
  <link rel="stylesheet" type="text/css" href="ahem.css" />
    <title>Reference: Text in a native select object that overlaps a background image should be backplated.</title>
    <style>
-    body, select {
+    body {
      font: 20px Ahem;
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
    .fake-backplate {
@ -19,15 +19,13 @@
 </head>
 <body>
    <div class="std">
-    <span class="fake-backplate"><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --><span class="fake-backplate"><!-- no whitespace
-    --><select>
-      <option>ppppp</option>
-    </select><!-- no whitespace
-    --></span><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --></span>
+    <div class="fake-backplate">
+    XXXXX
+    <select>
+      <option>XXXXX</option>
+    </select>
+    XXXXX
+    </div>
    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-008.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-008.html
@ -4,22 +4,22 @@
  <link rel="stylesheet" type="text/css" href="ahem.css" />
    <title>Text in a native select object that overlaps a background image should be backplated.</title>
    <style>
-    body, select {
+    body {
      font: 20px Ahem;
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
    </style>
 </head>
 <body>
-    <div class="std"><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --><select>
-      <option>ppppp</option>
-    </select><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --></div>
+    <div class="std">
+    XXXXX
+    <select>
+      <option>XXXXX</option>
+    </select>
+    XXXXX
+    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-009-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-009-ref.html
@ -8,17 +8,11 @@
      font: 20px Ahem;
    }
    select {
-      font: 20px Ahem;
      border: 0px;
      /* This forces non-native styling */
-      background: linear-gradient(white, white);
-      /* To avoid having too high of a fuzzy annotation, we force the
-         non-native select to have a white (backplate-coloured)
-         background. `background-color` attributes are overwritten
-         in HCM, so we use a linear gradient here instead. */
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
    .fake-backplate {
@ -29,15 +23,13 @@
 </head>
 <body>
    <div class="std">
-    <span class="fake-backplate"><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --><span class="fake-backplate"><!-- no whitespace
-    --><select>
-      <option>ppppp</option>
-    </select><!-- no whitespace
-    --></span><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --></span>
+    <div class="fake-backplate">
+    XXXXX
+    <select>
+      <option>XXXXX</option>
+    </select>
+    XXXXX
+    </div>
    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-009.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-009.html
@ -8,23 +8,22 @@
      font: 20px Ahem;
    }
    select {
-      font: 20px Ahem;
      border: 0px;
      /* This forces non-native styling */
    }
    .std {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
      height: 500px;
    }
    </style>
 </head>
 <body>
-    <div class="std"><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --><select>
-      <option>ppppp</option>
-    </select><!-- no whitespace
-    -->ppppp<!-- no whitespace
-    --></div>
+    <div class="std">
+    XXXXX
+    <select>
+      <option>XXXXX</option>
+    </select>
+    XXXXX
+    </div>
 </body>
 </html>
--- a/layout/reftests/high-contrast/backplate-bg-image-010-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-010-ref.html
@ -4,7 +4,7 @@
  <title>Reference: Only lines containing visible content (visibility: visible) should receive backplates.</title>
  <style>
    body {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
    }
    .hidden {
      visibility: hidden;
--- a/layout/reftests/high-contrast/backplate-bg-image-010.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-010.html
@ -4,7 +4,7 @@
  <title>Only lines containing visible content (visibility: visible) should receive backplates.</title>
  <style>
    body {
-      background-image: linear-gradient(blue, blue);
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAALGPC%2FxhBQAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjAxHK4kRQAAABpJREFUOMtjZBCu%2F89AAWAcNWDUgFEDhosBAObLGSGp9PphAAAAAElFTkSuQmCC");
    }
    .hidden {
      visibility: hidden;
--- a/layout/reftests/high-contrast/backplate-bg-image-011-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-011-ref.html
@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Reference: Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
-  <style>
-    body {
-      background:linear-gradient(blue,blue);
-    }
-    div {
-      margin-bottom: 30px;
-    }
-    .fake-backplate {
-      background-color: white;
-    }
-  </style>
-</head>
-<body>
-  <div><span class="fake-backplate">div</span></div>
-  <div style="margin-left: 30px"><span class="fake-backplate">div w/ margin-left</span></div>
-  <div><span style="margin-left: 100px" class="fake-backplate">span w/ margin-left</span></div>
-  <div><span><span style="margin: 0px 100px" class="fake-backplate">nested span w/ margin on inner</span></span></div>
-  <div><span style="padding: 0px 50px"><span class="fake-backplate">span w/ padding</span></span></div>
-  <div><span style="border: 10px dotted black"><span class="fake-backplate">span w/ thick dotted border</span></span></div>
-  <div style="text-align: center"><span class="fake-backplate">div w/ text-align:center</span></div>
-  <div style="text-align: right"><span class="fake-backplate">div w/ text-align:right</span></div>
-  <div style="direction: rtl; text-align: center"><span class="fake-backplate">div w/ RTL &amp; text-align:center</span></div>
-  <div style="text-indent: 200px"><span class="fake-backplate">div w/ text-indent</span></div>
-
-</body></html>
--- a/layout/reftests/high-contrast/backplate-bg-image-011.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-011.html
@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
-  <style>
-    body {
-      background:linear-gradient(blue,blue);
-    }
-    div {
-      margin-bottom: 30px;
-    }
-  </style>
-</head>
-<body>
-  <div>div</div>
-  <div style="margin-left: 30px">div w/ margin-left</div>
-  <div><span style="margin-left: 100px">span w/ margin-left</span></div>
-  <div><span><span style="margin: 0px 100px">nested span w/ margin on inner</span></span></div>
-  <div><span style="padding: 0px 50px">span w/ padding</span></div>
-  <div><span style="border: 10px dotted purple">span w/ thick dotted border</span></div>
-  <div style="text-align: center">div w/ text-align:center</div>
-  <div style="text-align: right">div w/ text-align:right</div>
-  <div style="direction: rtl; text-align: center">div w/ RTL &amp; text-align:center</div>
-  <div style="text-indent: 200px">div w/ text-indent</div>
-
-</body></html>
--- a/layout/reftests/high-contrast/backplate-bg-image-012-ref.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-012-ref.html
@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Reference: Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
-  <style>
-    body {
-      background-image: linear-gradient(blue, blue);
-    }
-    canvas {
-      height: 100px;
-      width: 100px;
-    }
-    .fake-backplate {
-      background-color: white;
-    }
-  </style>
-</head>
-<body>
-  <canvas></canvas>
-  <br>
-  <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;">
-  <br>
-  <span class="fake-backplate">Here is some alt text</span>
-</body>
-</html>
--- a/layout/reftests/high-contrast/backplate-bg-image-012.html
+++ b/layout/reftests/high-contrast/backplate-bg-image-012.html
@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
-  <style>
-    body {
-      background-image: linear-gradient(blue, blue);
-    }
-    canvas {
-      height: 100px;
-      width: 100px;
-    }
-  </style>
-</head>
-<body>
-  <canvas></canvas>
-  <br>
-  <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;">
-  <br>
-  <img src="data:image/png," alt="Here is some alt text">
-</body>
-</html>
--- a/layout/reftests/high-contrast/reftest.list
+++ b/layout/reftests/high-contrast/reftest.list
@ -6,18 +6,16 @@ default-preferences test-pref(browser.display.document_color_use,2) test-pref(br
 # mocking. You can read more about the annotations and their specifics here:
 # https://bugzilla.mozilla.org/show_bug.cgi?id=1539212#c25

-fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-001.html backplate-bg-image-001-ref.html # bug 1577028
-fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-002.html backplate-bg-image-002-ref.html
-fuzzy-if(cocoaWidget,255-255,4-4) == backplate-bg-image-003.html backplate-bg-image-003-ref.html
-fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-004.html backplate-bg-image-004-ref.html
-fuzzy-if(cocoaWidget,255-255,80-80) == backplate-bg-image-005.html backplate-bg-image-005-ref.html
-fuzzy-if(cocoaWidget,255-255,120-120) == backplate-bg-image-006.html backplate-bg-image-006-ref.html
-fuzzy-if(cocoaWidget,255-255,120-120) == backplate-bg-image-007.html backplate-bg-image-007-ref.html
-fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-008.html backplate-bg-image-008-ref.html
-fuzzy-if(cocoaWidget,255-255,20-20) fuzzy-if(gtkWidget,15-24,808-808) == backplate-bg-image-009.html backplate-bg-image-009-ref.html
-fuzzy-if(cocoaWidget,255-255,1578-1578) fuzzy-if(winWidget,255-255,353-353) fuzzy-if(Android,255-255,700-700) == backplate-bg-image-010.html backplate-bg-image-010-ref.html
-fuzzy-if(cocoaWidget,255-255,316-320) == backplate-bg-image-011.html backplate-bg-image-011-ref.html
-== backplate-bg-image-012.html backplate-bg-image-012-ref.html
+fuzzy-if(cocoaWidget,255-255,48-48) == backplate-bg-image-001.html backplate-bg-image-001-ref.html # bug 1577028
+fuzzy-if(cocoaWidget,255-255,24-24) == backplate-bg-image-002.html backplate-bg-image-002-ref.html
+fuzzy-if(cocoaWidget,255-255,34-34) == backplate-bg-image-003.html backplate-bg-image-003-ref.html
+== backplate-bg-image-004.html backplate-bg-image-004-ref.html
+fuzzy-if(cocoaWidget,255-255,96-96) == backplate-bg-image-005.html backplate-bg-image-005-ref.html
+fuzzy-if(cocoaWidget,255-255,1384-1384) fuzzy-if(winWidget,30-48,48-48) == backplate-bg-image-006.html backplate-bg-image-006-ref.html # bug 1578917
+fuzzy-if(cocoaWidget,255-255,52-52) fuzzy-if(winWidget,15-15,48-48) == backplate-bg-image-007.html backplate-bg-image-007-ref.html
+fuzzy-if(cocoaWidget,255-255,2842-2842) fuzzy-if(gtkWidget,255-255,620-620) fuzzy-if(winWidget||Android,255-255,480-481) == backplate-bg-image-008.html backplate-bg-image-008-ref.html
+fuzzy-if(cocoaWidget,255-255,504-504) fuzzy-if(gtkWidget,255-255,1050-1050) fuzzy-if(winWidget||Android,255-255,480-480) == backplate-bg-image-009.html backplate-bg-image-009-ref.html
+fuzzy-if(cocoaWidget,255-255,621-621) fuzzy-if(winWidget,255-255,128-128) fuzzy-if(Android,255-255,240-240) == backplate-bg-image-010.html backplate-bg-image-010-ref.html

 fails-if(Android) needs-focus == selection-001.html selection-001-ref.html # bug 1602509
 pref(browser.display.document_color_use,0) needs-focus != selection-001.html selection-001-ref.html