Commit 2b23491b authored by Xianzhu Wang's avatar Xianzhu Wang Committed by Commit Bot

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: default avatarStefan Zager <szager@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827330}
parent 7bd7e137
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
#include "third_party/blink/renderer/platform/graphics/compositing/paint_chunks_to_cc_layer.h" #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 "base/numerics/safe_conversions.h"
#include "cc/base/features.h" #include "cc/base/features.h"
#include "cc/layers/layer.h" #include "cc/layers/layer.h"
...@@ -800,20 +801,21 @@ scoped_refptr<cc::DisplayItemList> PaintChunksToCcLayer::Convert( ...@@ -800,20 +801,21 @@ scoped_refptr<cc::DisplayItemList> PaintChunksToCcLayer::Convert(
// The heuristic for picking a checkerboarding color works as follows: // The heuristic for picking a checkerboarding color works as follows:
// - During paint, PaintChunker will look for background color display items, // - During paint, PaintChunker will look for background color display items,
// and record the background color of the latest display item with the // and record the blending of background colors if the background is larger
// largest background or bigger a ratio of the chunk bounds. // than a ratio of the chunk bounds.
// - After layer allocation, the paint chunks assigned to a layer are // - After layer allocation, the paint chunks assigned to a layer are
// examined for a background color annotation. // 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. // 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 // - 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 // color. Otherwise the color of the largest background is used, without the
// size requirement, as safe opaque background color should always get a // size requirement, as safe opaque background color should always get a
// value if possible. // value if possible.
static void UpdateBackgroundColor(cc::Layer& layer, static void UpdateBackgroundColor(cc::Layer& layer,
const EffectPaintPropertyNode& layer_effect,
const PaintChunkSubset& paint_chunks) { const PaintChunkSubset& paint_chunks) {
SkColor background_color = SK_ColorTRANSPARENT; Vector<Color, 4> background_colors;
SkColor safe_opaque_background_color = SK_ColorTRANSPARENT; Color safe_opaque_background_color;
float safe_opaque_background_area = 0; float safe_opaque_background_area = 0;
float min_background_area = kMinBackgroundColorCoverageRatio * float min_background_area = kMinBackgroundColorCoverageRatio *
layer.bounds().width() * layer.bounds().height(); layer.bounds().width() * layer.bounds().height();
...@@ -822,19 +824,37 @@ static void UpdateBackgroundColor(cc::Layer& layer, ...@@ -822,19 +824,37 @@ static void UpdateBackgroundColor(cc::Layer& layer,
if (chunk.background_color == Color::kTransparent) if (chunk.background_color == Color::kTransparent)
continue; continue;
if (chunk.background_color_area >= min_background_area) { if (chunk.background_color_area >= min_background_area) {
background_color = chunk.background_color.Rgb(); Color chunk_background_color = chunk.background_color;
safe_opaque_background_color = background_color; const auto& chunk_effect = chunk.properties.Effect().Unalias();
break; 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. // 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; safe_opaque_background_area = chunk.background_color_area;
} }
} }
layer.SetBackgroundColor(background_color); Color background_color;
layer.SetSafeOpaqueBackgroundColor(safe_opaque_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( static void UpdateTouchActionRegion(
...@@ -980,7 +1000,7 @@ void PaintChunksToCcLayer::UpdateLayerProperties( ...@@ -980,7 +1000,7 @@ void PaintChunksToCcLayer::UpdateLayerProperties(
const PropertyTreeState& layer_state, const PropertyTreeState& layer_state,
const PaintChunkSubset& chunks, const PaintChunkSubset& chunks,
PropertyTreeManager* property_tree_manager) { PropertyTreeManager* property_tree_manager) {
UpdateBackgroundColor(layer, chunks); UpdateBackgroundColor(layer, layer_state.Effect(), chunks);
UpdateTouchActionWheelEventHandlerAndNonFastScrollableRegions( UpdateTouchActionWheelEventHandlerAndNonFastScrollableRegions(
layer, layer_state, chunks, property_tree_manager); layer, layer_state, chunks, property_tree_manager);
} }
......
...@@ -226,6 +226,12 @@ class PLATFORM_EXPORT EffectPaintPropertyNode ...@@ -226,6 +226,12 @@ class PLATFORM_EXPORT EffectPaintPropertyNode
!BackdropFilter().IsEmpty(); !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 // Returns a rect covering the pixels that can be affected by pixels in
// |inputRect|. The rects are in the space of localTransformSpace. // |inputRect|. The rects are in the space of localTransformSpace.
FloatRect MapRect(const FloatRect& input_rect) const; FloatRect MapRect(const FloatRect& input_rect) const;
......
...@@ -189,13 +189,19 @@ void PaintChunker::CreateScrollHitTestChunk( ...@@ -189,13 +189,19 @@ void PaintChunker::CreateScrollHitTestChunk(
bool PaintChunker::ProcessBackgroundColorCandidate(const PaintChunk::Id& id, bool PaintChunker::ProcessBackgroundColorCandidate(const PaintChunk::Id& id,
Color color, Color color,
float area) { float area) {
if (color == Color::kTransparent)
return false;
bool created_new_chunk = EnsureCurrentChunk(id); bool created_new_chunk = EnsureCurrentChunk(id);
if (color != Color::kTransparent && float min_background_area = kMinBackgroundColorCoverageRatio *
(area >= candidate_background_area_ || chunks_->back().bounds.Width() *
area >= kMinBackgroundColorCoverageRatio * chunks_->back().bounds.Height();
chunks_->back().bounds.Width() * if (created_new_chunk || area >= candidate_background_area_ ||
chunks_->back().bounds.Height())) { area >= min_background_area) {
candidate_background_color_ = color; candidate_background_color_ =
candidate_background_area_ >= min_background_area
? candidate_background_color_.Blend(color)
: color;
candidate_background_area_ = area; candidate_background_area_ = area;
} }
return created_new_chunk; return created_new_chunk;
......
...@@ -2,22 +2,100 @@ ...@@ -2,22 +2,100 @@
"layers": [ "layers": [
{ {
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [785, 628], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#FFFFFF"
}, },
{ {
"name": "LayoutNGBlockFlow (positioned) DIV id='target'", "name": "LayoutNGBlockFlow (positioned) DIV id='green1'",
"bounds": [620, 620], "bounds": [170, 170],
"contentsOpaque": true,
"backgroundColor": "#008000"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='green2'",
"bounds": [170, 170],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#008000", "backgroundColor": "#008000",
"transform": 1 "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", "name": "ContentsLayer for Vertical Scrollbar Layer",
"position": [785, 0], "position": [85, 0],
"bounds": [15, 600], "bounds": [15, 85],
"contentsOpaque": true "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": [ "transforms": [
...@@ -27,7 +105,52 @@ ...@@ -27,7 +105,52 @@
[1, 0, 0, 0], [1, 0, 0, 0],
[0, 1, 0, 0], [0, 1, 0, 0],
[0, 0, 1, 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]
] ]
} }
] ]
......
...@@ -7,8 +7,35 @@ onload = () => { ...@@ -7,8 +7,35 @@ onload = () => {
} }
} }
</script> </script>
<div id="target" style="background: hotpink; padding: 10px; will-change: transform; position: absolute"> <div id="green1" style="background: hotpink; padding: 10px; will-change: transform; position: absolute; top: 0; left: 0">
<div style="background: green; padding: 200px"> <div style="background: green; padding: 50px">
<div style="background: red; width: 200px; height: 200px"></div> <div style="background: red; width: 50px; height: 50px"></div>
</div> </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>
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
{ {
"name": "LayoutNGBlockFlow DIV class='composited container-box'", "name": "LayoutNGBlockFlow DIV class='composited container-box'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#008000",
"transform": 2 "transform": 2
} }
], ],
......
...@@ -12,7 +12,7 @@ Test CSS clip with composited layers. Left and right sides should look the same. ...@@ -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'", "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
"position": [-5, -5], "position": [-5, -5],
"bounds": [110, 110], "bounds": [110, 110],
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same. ...@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
"position": [5, 15], "position": [5, 15],
"bounds": [90, 80], "bounds": [90, 80],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"name": "LayoutNGBlockFlow (positioned) DIV class='composited box'", "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
"position": [-5, -5], "position": [-5, -5],
"bounds": [110, 110], "bounds": [110, 110],
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -2,21 +2,104 @@ ...@@ -2,21 +2,104 @@
"layers": [ "layers": [
{ {
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [785, 628], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#FFFFFF"
}, },
{ {
"name": "LayoutNGBlockFlow (positioned) DIV id='target'", "name": "LayoutNGBlockFlow (positioned) DIV id='green1'",
"bounds": [620, 620], "bounds": [170, 170],
"contentsOpaque": true,
"backgroundColor": "#008000"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='green2'",
"bounds": [170, 170],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#008000", "backgroundColor": "#008000",
"transform": 1 "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", "name": "VerticalScrollbar",
"position": [785, 0], "position": [85, 0],
"bounds": [15, 600] "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": [ "transforms": [
...@@ -26,7 +109,52 @@ ...@@ -26,7 +109,52 @@
[1, 0, 0, 0], [1, 0, 0, 0],
[0, 1, 0, 0], [0, 1, 0, 0],
[0, 0, 1, 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]
] ]
} }
] ]
......
...@@ -9,13 +9,11 @@ ...@@ -9,13 +9,11 @@
{ {
"name": "LayoutNGBlockFlow DIV class='composited container-box'", "name": "LayoutNGBlockFlow DIV class='composited container-box'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#008000",
"transform": 1 "transform": 1
}, },
{ {
"name": "LayoutNGBlockFlow DIV class='composited container-box'", "name": "LayoutNGBlockFlow DIV class='composited container-box'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#008000",
"transform": 2 "transform": 2
} }
], ],
......
...@@ -15,8 +15,7 @@ ...@@ -15,8 +15,7 @@
}, },
{ {
"name": "LayoutNGBlockFlow (positioned) DIV id='software'", "name": "LayoutNGBlockFlow (positioned) DIV id='software'",
"bounds": [125, 125], "bounds": [125, 125]
"backgroundColor": "#008000"
} }
], ],
"transforms": [ "transforms": [
......
...@@ -15,8 +15,7 @@ ...@@ -15,8 +15,7 @@
}, },
{ {
"name": "LayoutNGBlockFlow (positioned) DIV id='software'", "name": "LayoutNGBlockFlow (positioned) DIV id='software'",
"bounds": [125, 125], "bounds": [125, 125]
"backgroundColor": "#008000"
} }
], ],
"transforms": [ "transforms": [
......
...@@ -12,7 +12,7 @@ Test CSS clip with composited layers. Left and right sides should look the same. ...@@ -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'", "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
"position": [-5, -5], "position": [-5, -5],
"bounds": [110, 110], "bounds": [110, 110],
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same. ...@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
"position": [5, 15], "position": [5, 15],
"bounds": [90, 80], "bounds": [90, 80],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"name": "LayoutNGBlockFlow (positioned) DIV class='composited box'", "name": "LayoutNGBlockFlow (positioned) DIV class='composited box'",
"position": [-5, -5], "position": [-5, -5],
"bounds": [110, 110], "bounds": [110, 110],
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -24,7 +24,7 @@ transform: translateZ(-100px) rotateY(45deg); ...@@ -24,7 +24,7 @@ transform: translateZ(-100px) rotateY(45deg);
{ {
"name": "LayoutNGBlockFlow (positioned) DIV", "name": "LayoutNGBlockFlow (positioned) DIV",
"bounds": [200, 200], "bounds": [200, 200],
"backgroundColor": "#008000", "backgroundColor": "#008000B3",
"transform": 6 "transform": 6
} }
], ],
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
{ {
"name": "LayoutNGBlockFlow DIV id='target'", "name": "LayoutNGBlockFlow DIV id='target'",
"bounds": [200, 200], "bounds": [200, 200],
"backgroundColor": "#008000", "backgroundColor": "#00800080",
"invalidations": [ "invalidations": [
[0, 0, 200, 200] [0, 0, 200, 200]
], ],
......
...@@ -21,8 +21,7 @@ ...@@ -21,8 +21,7 @@
{ {
"name": "LayoutNGBlockFlow (positioned) DIV", "name": "LayoutNGBlockFlow (positioned) DIV",
"position": [151, 0], "position": [151, 0],
"bounds": [300, 100], "bounds": [300, 100]
"backgroundColor": "#D3D3D3"
} }
], ],
"transforms": [ "transforms": [
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
{ {
"name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'", "name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
...@@ -2,22 +2,100 @@ ...@@ -2,22 +2,100 @@
"layers": [ "layers": [
{ {
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [785, 628], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#FFFFFF"
}, },
{ {
"name": "LayoutBlockFlow (positioned) DIV id='target'", "name": "LayoutBlockFlow (positioned) DIV id='green1'",
"bounds": [620, 620], "bounds": [170, 170],
"contentsOpaque": true,
"backgroundColor": "#008000"
},
{
"name": "LayoutBlockFlow (positioned) DIV id='green2'",
"bounds": [170, 170],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#008000", "backgroundColor": "#008000",
"transform": 1 "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", "name": "ContentsLayer for Vertical Scrollbar Layer",
"position": [785, 0], "position": [85, 0],
"bounds": [15, 600], "bounds": [15, 85],
"contentsOpaque": true "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": [ "transforms": [
...@@ -27,7 +105,52 @@ ...@@ -27,7 +105,52 @@
[1, 0, 0, 0], [1, 0, 0, 0],
[0, 1, 0, 0], [0, 1, 0, 0],
[0, 0, 1, 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]
] ]
} }
] ]
......
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
{ {
"name": "LayoutBlockFlow DIV class='composited container-box'", "name": "LayoutBlockFlow DIV class='composited container-box'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#008000",
"transform": 2 "transform": 2
} }
], ],
......
...@@ -12,7 +12,7 @@ Test CSS clip with composited layers. Left and right sides should look the same. ...@@ -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'", "name": "LayoutBlockFlow (positioned) DIV class='composited box'",
"position": [-5, -5], "position": [-5, -5],
"bounds": [110, 110], "bounds": [110, 110],
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same. ...@@ -13,7 +13,7 @@ Test CSS clip with composited layers. Left and right sides should look the same.
"position": [5, 15], "position": [5, 15],
"bounds": [90, 80], "bounds": [90, 80],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"name": "LayoutBlockFlow (positioned) DIV class='composited box'", "name": "LayoutBlockFlow (positioned) DIV class='composited box'",
"position": [-5, -5], "position": [-5, -5],
"bounds": [110, 110], "bounds": [110, 110],
"backgroundColor": "#00000033", "backgroundColor": "#666666",
"transform": 2 "transform": 2
}, },
{ {
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
{ {
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [200, 200], "bounds": [200, 200],
"backgroundColor": "#008000", "backgroundColor": "#00800080",
"invalidations": [ "invalidations": [
[0, 0, 200, 200] [0, 0, 200, 200]
], ],
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
{ {
"name": "LayoutBlockFlow (positioned) DIV id='moveMe' class='fixed clipped'", "name": "LayoutBlockFlow (positioned) DIV id='moveMe' class='fixed clipped'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"name": "LayoutBlockFlow (positioned) DIV class='reflected fixed'", "name": "LayoutBlockFlow (positioned) DIV class='reflected fixed'",
"bounds": [100, 100], "bounds": [100, 100],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#008000", "backgroundColor": "#FF0000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
{ {
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [200, 200], "bounds": [200, 200],
"backgroundColor": "#008000", "backgroundColor": "#00800080",
"invalidations": [ "invalidations": [
[0, 0, 200, 200] [0, 0, 200, 200]
], ],
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
{ {
"name": "LayoutNGBlockFlow (positioned) DIV id='moveMe' class='fixed clipped'", "name": "LayoutNGBlockFlow (positioned) DIV id='moveMe' class='fixed clipped'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'", "name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'",
"bounds": [100, 100], "bounds": [100, 100],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#008000", "backgroundColor": "#FF0000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment