Consider alpha for layer background color

For the following case:
<div style="background: black; height: 500px; overflow: scroll">
  <div style="background: rgba(255, 255, 255, 0.1); height: 10000px">Text</div>
</div>
previously we chose rgba(255, 255, 255, 0.1) as the layer's background
color, causing white flash when the color was used for checkerboarding.

Now blend overlapping layers of background colors.

Bug: 1147379
Change-Id: I3badbbf060265fa1d1d31081a4882837fef408e5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2533306
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Stefan Zager <szager@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827330}

third_party/blink/renderer/platform/graphics/compositing/paint_chunks_to_cc_layer.cc

@@ -4,6 +4,7 @@
 
 #include "third_party/blink/renderer/platform/graphics/compositing/paint_chunks_to_cc_layer.h"
 
+#include "base/containers/adapters.h"
 #include "base/numerics/safe_conversions.h"
 #include "cc/base/features.h"
 #include "cc/layers/layer.h"
@@ -800,20 +801,21 @@ scoped_refptr<cc::DisplayItemList> PaintChunksToCcLayer::Convert(
 
 // The heuristic for picking a checkerboarding color works as follows:
 //   - During paint, PaintChunker will look for background color display items,
-//     and record the background color of the latest display item with the
-//     largest background or bigger a ratio of the chunk bounds.
+//     and record the blending of background colors if the background is larger
+//     than a ratio of the chunk bounds.
 //   - After layer allocation, the paint chunks assigned to a layer are
 //     examined for a background color annotation.
-//   - The background color of the latest chunk with a background larger than
+//   - The blending of background colors of chunks having background larger than
 //     a ratio of the layer is set as the layer's background color.
 //   - If the above color exists, it's also used as the safe opaque background
 //     color. Otherwise the color of the largest background is used, without the
 //     size requirement, as safe opaque background color should always get a
 //     value if possible.
 static void UpdateBackgroundColor(cc::Layer& layer,
+                                  const EffectPaintPropertyNode& layer_effect,
                                   const PaintChunkSubset& paint_chunks) {
-  SkColor background_color = SK_ColorTRANSPARENT;
-  SkColor safe_opaque_background_color = SK_ColorTRANSPARENT;
+  Vector<Color, 4> background_colors;
+  Color safe_opaque_background_color;
   float safe_opaque_background_area = 0;
   float min_background_area = kMinBackgroundColorCoverageRatio *
                               layer.bounds().width() * layer.bounds().height();
@@ -822,19 +824,37 @@ static void UpdateBackgroundColor(cc::Layer& layer,
     if (chunk.background_color == Color::kTransparent)
       continue;
     if (chunk.background_color_area >= min_background_area) {
-      background_color = chunk.background_color.Rgb();
-      safe_opaque_background_color = background_color;
-      break;
+      Color chunk_background_color = chunk.background_color;
+      const auto& chunk_effect = chunk.properties.Effect().Unalias();
+      if (&chunk_effect != &layer_effect) {
+        if (chunk_effect.UnaliasedParent() != &layer_effect ||
+            !chunk_effect.IsOpacityOnly()) {
+          continue;
+        }
+        chunk_background_color =
+            chunk_background_color.CombineWithAlpha(chunk_effect.Opacity());
+      }
+      background_colors.push_back(chunk_background_color);
+      if (!chunk_background_color.HasAlpha()) {
+        // If this color is opaque, blending it with subsequent colors will have
+        // no effect.
+        break;
+      }
     }
-    if (chunk.background_color_area >= safe_opaque_background_area) {
+    if (chunk.background_color_area > safe_opaque_background_area) {
       // This color will be used only if we don't find proper background_color.
-      safe_opaque_background_color = chunk.background_color.Rgb();
+      safe_opaque_background_color = chunk.background_color;
       safe_opaque_background_area = chunk.background_color_area;
     }
   }
 
-  layer.SetBackgroundColor(background_color);
-  layer.SetSafeOpaqueBackgroundColor(safe_opaque_background_color);
+  Color background_color;
+  for (Color color : base::Reversed(background_colors))
+    background_color = background_color.Blend(color);
+  layer.SetBackgroundColor(background_color.Rgb());
+  layer.SetSafeOpaqueBackgroundColor(background_color == Color::kTransparent
+                                         ? safe_opaque_background_color.Rgb()
+                                         : background_color.Rgb());
 }
 
 static void UpdateTouchActionRegion(
@@ -980,7 +1000,7 @@ void PaintChunksToCcLayer::UpdateLayerProperties(
     const PropertyTreeState& layer_state,
     const PaintChunkSubset& chunks,
     PropertyTreeManager* property_tree_manager) {
-  UpdateBackgroundColor(layer, chunks);
+  UpdateBackgroundColor(layer, layer_state.Effect(), chunks);
   UpdateTouchActionWheelEventHandlerAndNonFastScrollableRegions(
       layer, layer_state, chunks, property_tree_manager);
 }

third_party/blink/renderer/platform/graphics/paint/effect_paint_property_node.h

@@ -226,6 +226,12 @@ class PLATFORM_EXPORT EffectPaintPropertyNode
            !BackdropFilter().IsEmpty();
   }
 
+  bool IsOpacityOnly() const {
+    return GetColorFilter() == kColorFilterNone &&
+           BlendMode() == SkBlendMode::kSrcOver && Filter().IsEmpty() &&
+           BackdropFilter().IsEmpty();
+  }
+
   // Returns a rect covering the pixels that can be affected by pixels in
   // |inputRect|. The rects are in the space of localTransformSpace.
   FloatRect MapRect(const FloatRect& input_rect) const;

third_party/blink/renderer/platform/graphics/paint/paint_chunker.cc

@@ -189,13 +189,19 @@ void PaintChunker::CreateScrollHitTestChunk(
 bool PaintChunker::ProcessBackgroundColorCandidate(const PaintChunk::Id& id,
                                                    Color color,
                                                    float area) {
+  if (color == Color::kTransparent)
+    return false;
+
   bool created_new_chunk = EnsureCurrentChunk(id);
-  if (color != Color::kTransparent &&
-      (area >= candidate_background_area_ ||
-       area >= kMinBackgroundColorCoverageRatio *
-                   chunks_->back().bounds.Width() *
-                   chunks_->back().bounds.Height())) {
-    candidate_background_color_ = color;
+  float min_background_area = kMinBackgroundColorCoverageRatio *
+                              chunks_->back().bounds.Width() *
+                              chunks_->back().bounds.Height();
+  if (created_new_chunk || area >= candidate_background_area_ ||
+      area >= min_background_area) {
+    candidate_background_color_ =
+        candidate_background_area_ >= min_background_area
+            ? candidate_background_color_.Blend(color)
+            : color;
     candidate_background_area_ = area;
   }
   return created_new_chunk;

third_party/blink/web_tests/compositing/background-color/background-color-coverage-expected.txt

@@ -2,22 +2,100 @@
   "layers": [
     {
       "name": "Scrolling Contents Layer",
-      "bounds": [785, 628],
+      "bounds": [800, 600],
       "contentsOpaque": true,
       "backgroundColor": "#FFFFFF"
     },
     {
-      "name": "LayoutNGBlockFlow (positioned) DIV id='target'",
-      "bounds": [620, 620],
+      "name": "LayoutNGBlockFlow (positioned) DIV id='green1'",
+      "bounds": [170, 170],
+      "contentsOpaque": true,
+      "backgroundColor": "#008000"
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='green2'",
+      "bounds": [170, 170],
       "contentsOpaque": true,
       "backgroundColor": "#008000",
       "transform": 1
     },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='green3'",
+      "bounds": [110, 110],
+      "backgroundColor": "#008000",
+      "transform": 2
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown1'",
+      "bounds": [100, 100],
+      "backgroundColor": "#664C00",
+      "transform": 3
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown2'",
+      "bounds": [100, 100],
+      "backgroundColor": "#664C00",
+      "transform": 4
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown3'",
+      "bounds": [100, 100],
+      "transform": 5
+    },
+    {
+      "name": "ContentsLayer for Horizontal Scrollbar Layer",
+      "position": [0, 85],
+      "bounds": [85, 15],
+      "transform": 5
+    },
+    {
+      "name": "ContentsLayer for Vertical Scrollbar Layer",
+      "position": [85, 0],
+      "bounds": [15, 85],
+      "transform": 5
+    },
+    {
+      "name": "Scroll Corner Layer",
+      "position": [85, 85],
+      "bounds": [15, 15],
+      "transform": 5
+    },
+    {
+      "name": "Scrolling Contents Layer",
+      "bounds": [85, 10000],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 5
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown4'",
+      "bounds": [100, 100],
+      "transform": 6
+    },
+    {
+      "name": "ContentsLayer for Horizontal Scrollbar Layer",
+      "position": [0, 85],
+      "bounds": [85, 15],
+      "transform": 6
+    },
     {
       "name": "ContentsLayer for Vertical Scrollbar Layer",
-      "position": [785, 0],
-      "bounds": [15, 600],
-      "contentsOpaque": true
+      "position": [85, 0],
+      "bounds": [15, 85],
+      "transform": 6
+    },
+    {
+      "name": "Scroll Corner Layer",
+      "position": [85, 85],
+      "bounds": [15, 15],
+      "transform": 6
+    },
+    {
+      "name": "Scrolling Contents Layer",
+      "bounds": [85, 10000],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 6
     }
   ],
   "transforms": [
@@ -27,7 +105,52 @@
         [1, 0, 0, 0],
         [0, 1, 0, 0],
         [0, 0, 1, 0],
-        [8, 8, 0, 1]
+        [200, 0, 0, 1]
+      ]
+    },
+    {
+      "id": 2,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [400, 0, 0, 1]
+      ]
+    },
+    {
+      "id": 3,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [0, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 4,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [200, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 5,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [400, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 6,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [600, 200, 0, 1]
       ]
     }
   ]

third_party/blink/web_tests/compositing/background-color/background-color-coverage.html

@@ -7,8 +7,35 @@ onload = () => {
   }
 }
 </script>
-<div id="target" style="background: hotpink; padding: 10px; will-change: transform; position: absolute">
-  <div style="background: green; padding: 200px">
-    <div style="background: red; width: 200px; height: 200px"></div>
+<div id="green1" style="background: hotpink; padding: 10px; will-change: transform; position: absolute; top: 0; left: 0">
+  <div style="background: green; padding: 50px">
+    <div style="background: red; width: 50px; height: 50px"></div>
   </div>
 </div>
+<div id="green2" style="background: hotpink; padding: 10px; will-change: transform; position: absolute; top: 0; left: 200px">
+  <div style="background: green; padding: 50px; transform: translateX(10px)">
+    <div style="background: red; width: 50px; height: 50px"></div>
+  </div>
+</div>
+<div id="green3" style="background: hotpink; padding: 10px; will-change: transform; position: absolute; top: 0; left: 400px">
+  <div style="background: red; width: 100px; height: 100px; position: absolute"></div>
+  <div style="background: green; width: 100px; height: 100px; position: absolute"></div>
+</div>
+<div id="brown1" style="will-change: transform; position: absolute; top: 200px; left: 0px">
+  <div style="background: green">
+    <div style="background: rgba(255, 0, 0, 0.4); width: 100px; height: 100px"></div>
+  </div>
+</div>
+<div id="brown2" style="will-change: transform; position: absolute; top: 200px; left: 200px">
+  <div style="background: green">
+    <div style="opacity: 0.4; background: red; width: 100px; height: 100px"></div>
+  </div>
+</div>
+<div id="brown3" style="will-change: transform; position: absolute; top: 200px; left: 400px;
+                        width: 100px; height: 100px; background: green; overflow: scroll">
+  <div style="background: rgba(255, 0, 0, 0.4); height: 10000px"></div>
+</div>
+<div id="brown4" style="will-change: transform; position: absolute; top: 200px; left: 600px;
+                        width: 100px; height: 100px; background: green; overflow: scroll">
+  <div style="opacity: 0.4; background: red; height: 10000px"></div>
+</div>

third_party/blink/web_tests/compositing/contents-opaque/filter-expected.txt

@@ -15,7 +15,6 @@
     {
       "name": "LayoutNGBlockFlow DIV class='composited container-box'",
       "bounds": [100, 100],
-      "backgroundColor": "#008000",
       "transform": 2
     }
   ],

third_party/blink/web_tests/compositing/geometry/clip-expected.txt

@@ -12,7 +12,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
       "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
       "position": [-5, -5],
       "bounds": [110, 110],
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/compositing/geometry/clip-inside-expected.txt

@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
       "position": [5, 15],
       "bounds": [90, 80],
       "contentsOpaque": true,
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/compositing/geometry/clip-with-shadow-expected.txt

@@ -10,7 +10,7 @@
       "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
       "position": [-5, -5],
       "bounds": [110, 110],
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/background-color/background-color-coverage-expected.txt

@@ -2,21 +2,104 @@
   "layers": [
     {
       "name": "Scrolling background of LayoutView #document",
-      "bounds": [785, 628],
+      "bounds": [800, 600],
       "contentsOpaque": true,
       "backgroundColor": "#FFFFFF"
     },
     {
-      "name": "LayoutNGBlockFlow (positioned) DIV id='target'",
-      "bounds": [620, 620],
+      "name": "LayoutNGBlockFlow (positioned) DIV id='green1'",
+      "bounds": [170, 170],
+      "contentsOpaque": true,
+      "backgroundColor": "#008000"
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='green2'",
+      "bounds": [170, 170],
       "contentsOpaque": true,
       "backgroundColor": "#008000",
       "transform": 1
     },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='green3'",
+      "bounds": [110, 110],
+      "backgroundColor": "#008000",
+      "transform": 2
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown1'",
+      "bounds": [100, 100],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 3
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown2'",
+      "bounds": [100, 100],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 4
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown3'",
+      "bounds": [100, 100],
+      "drawsContent": false,
+      "transform": 5
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown3'",
+      "bounds": [85, 85],
+      "drawsContent": false,
+      "transform": 5
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown3'",
+      "bounds": [85, 10000],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 5
+    },
+    {
+      "name": "HorizontalScrollbar",
+      "position": [0, 85],
+      "bounds": [100, 15],
+      "transform": 5
+    },
     {
       "name": "VerticalScrollbar",
-      "position": [785, 0],
-      "bounds": [15, 600]
+      "position": [85, 0],
+      "bounds": [15, 85],
+      "transform": 5
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown4'",
+      "bounds": [100, 100],
+      "drawsContent": false,
+      "transform": 6
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown4'",
+      "bounds": [85, 85],
+      "drawsContent": false,
+      "transform": 6
+    },
+    {
+      "name": "LayoutNGBlockFlow (positioned) DIV id='brown4'",
+      "bounds": [85, 10000],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 6
+    },
+    {
+      "name": "HorizontalScrollbar",
+      "position": [0, 85],
+      "bounds": [100, 15],
+      "transform": 6
+    },
+    {
+      "name": "VerticalScrollbar",
+      "position": [85, 0],
+      "bounds": [15, 85],
+      "transform": 6
     }
   ],
   "transforms": [
@@ -26,7 +109,52 @@
         [1, 0, 0, 0],
         [0, 1, 0, 0],
         [0, 0, 1, 0],
-        [8, 8, 0, 1]
+        [200, 0, 0, 1]
+      ]
+    },
+    {
+      "id": 2,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [400, 0, 0, 1]
+      ]
+    },
+    {
+      "id": 3,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [0, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 4,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [200, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 5,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [400, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 6,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [600, 200, 0, 1]
       ]
     }
   ]

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/contents-opaque/filter-expected.txt

@@ -9,13 +9,11 @@
     {
       "name": "LayoutNGBlockFlow DIV class='composited container-box'",
       "bounds": [100, 100],
-      "backgroundColor": "#008000",
       "transform": 1
     },
     {
       "name": "LayoutNGBlockFlow DIV class='composited container-box'",
       "bounds": [100, 100],
-      "backgroundColor": "#008000",
       "transform": 2
     }
   ],

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/filters/sw-shadow-overlaps-hw-layer-expected.txt

@@ -15,8 +15,7 @@
     },
     {
       "name": "LayoutNGBlockFlow (positioned) DIV id='software'",
-      "bounds": [125, 125],
-      "backgroundColor": "#008000"
+      "bounds": [125, 125]
     }
   ],
   "transforms": [

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/filters/sw-shadow-overlaps-hw-shadow-expected.txt

@@ -15,8 +15,7 @@
     },
     {
       "name": "LayoutNGBlockFlow (positioned) DIV id='software'",
-      "bounds": [125, 125],
-      "backgroundColor": "#008000"
+      "bounds": [125, 125]
     }
   ],
   "transforms": [

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/geometry/clip-expected.txt

@@ -12,7 +12,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
       "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
       "position": [-5, -5],
       "bounds": [110, 110],
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/geometry/clip-inside-expected.txt

@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
       "position": [5, 15],
       "bounds": [90, 80],
       "contentsOpaque": true,
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/geometry/clip-with-shadow-expected.txt

@@ -10,7 +10,7 @@
       "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
       "position": [-5, -5],
       "bounds": [110, 110],
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/flag-specific/composite-after-paint/compositing/geometry/preserve-3d-switching-expected.txt

@@ -24,7 +24,7 @@ transform: translateZ(-100px) rotateY(45deg);
     {
       "name": "LayoutNGBlockFlow (positioned) DIV",
       "bounds": [200, 200],
-      "backgroundColor": "#008000",
+      "backgroundColor": "#008000B3",
       "transform": 6
     }
   ],

third_party/blink/web_tests/flag-specific/composite-after-paint/paint/invalidation/compositing/new-stacking-context-expected.txt

@@ -15,7 +15,7 @@
     {
       "name": "LayoutNGBlockFlow DIV id='target'",
       "bounds": [200, 200],
-      "backgroundColor": "#008000",
+      "backgroundColor": "#00800080",
       "invalidations": [
         [0, 0, 200, 200]
       ],

third_party/blink/web_tests/flag-specific/composite-after-paint/paint/invalidation/compositing/overlap-test-with-filter-expected.txt

@@ -21,8 +21,7 @@
     {
       "name": "LayoutNGBlockFlow (positioned) DIV",
       "position": [151, 0],
-      "bounds": [300, 100],
-      "backgroundColor": "#D3D3D3"
+      "bounds": [300, 100]
     }
   ],
   "transforms": [

third_party/blink/web_tests/flag-specific/composite-after-paint/paint/invalidation/reflection/scroll-fixed-reflected-layer-expected.txt

@@ -10,7 +10,6 @@
     {
       "name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'",
       "bounds": [100, 100],
-      "backgroundColor": "#008000",
       "invalidations": [
         [0, 0, 100, 100]
       ],

third_party/blink/web_tests/flag-specific/disable-layout-ng/compositing/background-color/background-color-coverage-expected.txt

@@ -2,22 +2,100 @@
   "layers": [
     {
       "name": "Scrolling Contents Layer",
-      "bounds": [785, 628],
+      "bounds": [800, 600],
       "contentsOpaque": true,
       "backgroundColor": "#FFFFFF"
     },
     {
-      "name": "LayoutBlockFlow (positioned) DIV id='target'",
-      "bounds": [620, 620],
+      "name": "LayoutBlockFlow (positioned) DIV id='green1'",
+      "bounds": [170, 170],
+      "contentsOpaque": true,
+      "backgroundColor": "#008000"
+    },
+    {
+      "name": "LayoutBlockFlow (positioned) DIV id='green2'",
+      "bounds": [170, 170],
       "contentsOpaque": true,
       "backgroundColor": "#008000",
       "transform": 1
     },
+    {
+      "name": "LayoutBlockFlow (positioned) DIV id='green3'",
+      "bounds": [110, 110],
+      "backgroundColor": "#008000",
+      "transform": 2
+    },
+    {
+      "name": "LayoutBlockFlow (positioned) DIV id='brown1'",
+      "bounds": [100, 100],
+      "backgroundColor": "#664C00",
+      "transform": 3
+    },
+    {
+      "name": "LayoutBlockFlow (positioned) DIV id='brown2'",
+      "bounds": [100, 100],
+      "backgroundColor": "#664C00",
+      "transform": 4
+    },
+    {
+      "name": "LayoutBlockFlow (positioned) DIV id='brown3'",
+      "bounds": [100, 100],
+      "transform": 5
+    },
+    {
+      "name": "ContentsLayer for Horizontal Scrollbar Layer",
+      "position": [0, 85],
+      "bounds": [85, 15],
+      "transform": 5
+    },
+    {
+      "name": "ContentsLayer for Vertical Scrollbar Layer",
+      "position": [85, 0],
+      "bounds": [15, 85],
+      "transform": 5
+    },
+    {
+      "name": "Scroll Corner Layer",
+      "position": [85, 85],
+      "bounds": [15, 15],
+      "transform": 5
+    },
+    {
+      "name": "Scrolling Contents Layer",
+      "bounds": [85, 10000],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 5
+    },
+    {
+      "name": "LayoutBlockFlow (positioned) DIV id='brown4'",
+      "bounds": [100, 100],
+      "transform": 6
+    },
+    {
+      "name": "ContentsLayer for Horizontal Scrollbar Layer",
+      "position": [0, 85],
+      "bounds": [85, 15],
+      "transform": 6
+    },
     {
       "name": "ContentsLayer for Vertical Scrollbar Layer",
-      "position": [785, 0],
-      "bounds": [15, 600],
-      "contentsOpaque": true
+      "position": [85, 0],
+      "bounds": [15, 85],
+      "transform": 6
+    },
+    {
+      "name": "Scroll Corner Layer",
+      "position": [85, 85],
+      "bounds": [15, 15],
+      "transform": 6
+    },
+    {
+      "name": "Scrolling Contents Layer",
+      "bounds": [85, 10000],
+      "contentsOpaque": true,
+      "backgroundColor": "#664C00",
+      "transform": 6
     }
   ],
   "transforms": [
@@ -27,7 +105,52 @@
         [1, 0, 0, 0],
         [0, 1, 0, 0],
         [0, 0, 1, 0],
-        [8, 8, 0, 1]
+        [200, 0, 0, 1]
+      ]
+    },
+    {
+      "id": 2,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [400, 0, 0, 1]
+      ]
+    },
+    {
+      "id": 3,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [0, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 4,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [200, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 5,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [400, 200, 0, 1]
+      ]
+    },
+    {
+      "id": 6,
+      "transform": [
+        [1, 0, 0, 0],
+        [0, 1, 0, 0],
+        [0, 0, 1, 0],
+        [600, 200, 0, 1]
       ]
     }
   ]

third_party/blink/web_tests/flag-specific/disable-layout-ng/compositing/contents-opaque/filter-expected.txt

@@ -15,7 +15,6 @@
     {
       "name": "LayoutBlockFlow DIV class='composited container-box'",
       "bounds": [100, 100],
-      "backgroundColor": "#008000",
       "transform": 2
     }
   ],

third_party/blink/web_tests/flag-specific/disable-layout-ng/compositing/geometry/clip-expected.txt

@@ -12,7 +12,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
       "name": "LayoutBlockFlow (positioned) DIV class='composited box'",
       "position": [-5, -5],
       "bounds": [110, 110],
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/flag-specific/disable-layout-ng/compositing/geometry/clip-inside-expected.txt

@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
       "position": [5, 15],
       "bounds": [90, 80],
       "contentsOpaque": true,
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/flag-specific/disable-layout-ng/compositing/geometry/clip-with-shadow-expected.txt

@@ -10,7 +10,7 @@
       "name": "LayoutBlockFlow (positioned) DIV class='composited box'",
       "position": [-5, -5],
       "bounds": [110, 110],
-      "backgroundColor": "#00000033",
+      "backgroundColor": "#666666",
       "transform": 2
     },
     {

third_party/blink/web_tests/flag-specific/disable-layout-ng/paint/invalidation/compositing/new-stacking-context-expected.txt

@@ -26,7 +26,7 @@
     {
       "name": "Scrolling Contents Layer",
       "bounds": [200, 200],
-      "backgroundColor": "#008000",
+      "backgroundColor": "#00800080",
       "invalidations": [
         [0, 0, 200, 200]
       ],

third_party/blink/web_tests/flag-specific/disable-layout-ng/paint/invalidation/reflection/scroll-fixed-layer-with-reflection-expected.txt

@@ -10,7 +10,6 @@
     {
       "name": "LayoutBlockFlow (positioned) DIV id='moveMe' class='fixed clipped'",
       "bounds": [100, 100],
-      "backgroundColor": "#008000",
       "invalidations": [
         [0, 0, 100, 100]
       ],

third_party/blink/web_tests/flag-specific/disable-layout-ng/paint/invalidation/reflection/scroll-fixed-reflected-layer-expected.txt

@@ -11,7 +11,7 @@
       "name": "LayoutBlockFlow (positioned) DIV class='reflected fixed'",
       "bounds": [100, 100],
       "contentsOpaque": true,
-      "backgroundColor": "#008000",
+      "backgroundColor": "#FF0000",
       "invalidations": [
         [0, 0, 100, 100]
       ],

third_party/blink/web_tests/paint/invalidation/compositing/new-stacking-context-expected.txt

@@ -26,7 +26,7 @@
     {
       "name": "Scrolling Contents Layer",
       "bounds": [200, 200],
-      "backgroundColor": "#008000",
+      "backgroundColor": "#00800080",
       "invalidations": [
         [0, 0, 200, 200]
       ],

third_party/blink/web_tests/paint/invalidation/reflection/scroll-fixed-layer-with-reflection-expected.txt

@@ -10,7 +10,6 @@
     {
       "name": "LayoutNGBlockFlow (positioned) DIV id='moveMe' class='fixed clipped'",
       "bounds": [100, 100],
-      "backgroundColor": "#008000",
       "invalidations": [
         [0, 0, 100, 100]
       ],

third_party/blink/web_tests/paint/invalidation/reflection/scroll-fixed-reflected-layer-expected.txt

@@ -11,7 +11,7 @@
       "name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'",
       "bounds": [100, 100],
       "contentsOpaque": true,
-      "backgroundColor": "#008000",
+      "backgroundColor": "#FF0000",
       "invalidations": [
         [0, 0, 100, 100]
       ],