Commit 3998126b authored by Xianzhu Wang's avatar Xianzhu Wang Committed by Commit Bot

Use background color smaller than previous ones but big enough

In the following case
 <div style="will-change: transform; width: 300px; height: 300px; background: blue">
   <div style="width: 250px; height: 250px; background: green"></div>
 </div>
we'll use green as the background color instead of blue. Though the
green background is smaller than the blue background, green affects
more area than blue.

Bug: 1143099
Change-Id: I5032c0448a827c8ddf9e97d460147227e8a0fed2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2508292Reviewed-by: default avatarStefan Zager <szager@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#823731}
parent 8eb425c8
...@@ -800,36 +800,41 @@ scoped_refptr<cc::DisplayItemList> PaintChunksToCcLayer::Convert( ...@@ -800,36 +800,41 @@ 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 annotates the chunk with the index of the display item that paints // and record the background color of the latest display item with the
// the largest area background color (ties are broken by selecting the // largest background or bigger a ratio of the chunk bounds.
// display item that paints last).
// - 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. The chunk with the largest // examined for a background color annotation.
// background color annotation is selected. // - The background color of the latest chunk with a background larger than
// - If the area of the selected background color is at least half the size // a ratio of the layer is set as the layer's background color.
// of the layer, then it is set as the layer's background color. // - If the above color exists, it's also used as the safe opaque background
// - The same color is used for the layer's safe opaque background color, but // color. Otherwise the color of the largest background is used, without the
// without the size requirement, as safe opaque background color should // size requirement, as safe opaque background color should always get a
// always get a value if possible. // value if possible.
static void UpdateBackgroundColor(cc::Layer& layer, static void UpdateBackgroundColor(cc::Layer& layer,
const PaintChunkSubset& paint_chunks) { const PaintChunkSubset& paint_chunks) {
SkColor color = SK_ColorTRANSPARENT; SkColor background_color = SK_ColorTRANSPARENT;
uint64_t area = 0; SkColor safe_opaque_background_color = SK_ColorTRANSPARENT;
for (const auto& chunk : paint_chunks) { float safe_opaque_background_area = 0;
if (chunk.background_color != Color::kTransparent && float min_background_area = kMinBackgroundColorCoverageRatio *
chunk.background_color_area >= area) { layer.bounds().width() * layer.bounds().height();
color = chunk.background_color.Rgb(); for (auto it = paint_chunks.end(); it != paint_chunks.begin();) {
area = chunk.background_color_area; const auto& chunk = *(--it);
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;
}
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_area = chunk.background_color_area;
} }
} }
layer.SetSafeOpaqueBackgroundColor(color); layer.SetBackgroundColor(background_color);
layer.SetSafeOpaqueBackgroundColor(safe_opaque_background_color);
uint64_t layer_area =
static_cast<uint64_t>(layer.bounds().width()) * layer.bounds().height();
if (area < layer_area / 2)
color = SK_ColorTRANSPARENT;
layer.SetBackgroundColor(color);
} }
static void UpdateTouchActionRegion( static void UpdateTouchActionRegion(
......
...@@ -78,7 +78,7 @@ bool DrawingDisplayItem::Equals(const DisplayItem& other) const { ...@@ -78,7 +78,7 @@ bool DrawingDisplayItem::Equals(const DisplayItem& other) const {
return BitmapsEqual(std::move(record), std::move(other_record), bounds); return BitmapsEqual(std::move(record), std::move(other_record), bounds);
} }
SkColor DrawingDisplayItem::BackgroundColor(uint64_t& area) const { SkColor DrawingDisplayItem::BackgroundColor(float& area) const {
if (GetType() != DisplayItem::kBoxDecorationBackground && if (GetType() != DisplayItem::kBoxDecorationBackground &&
GetType() != DisplayItem::kDocumentBackground && GetType() != DisplayItem::kDocumentBackground &&
GetType() != DisplayItem::kDocumentRootBackdrop) GetType() != DisplayItem::kDocumentRootBackdrop)
...@@ -111,8 +111,7 @@ SkColor DrawingDisplayItem::BackgroundColor(uint64_t& area) const { ...@@ -111,8 +111,7 @@ SkColor DrawingDisplayItem::BackgroundColor(uint64_t& area) const {
default: default:
continue; continue;
} }
area = area = item_rect.width() * item_rect.height();
base::saturated_cast<uint64_t>(item_rect.width() * item_rect.height());
return flags.getColor(); return flags.getColor();
} }
return SK_ColorTRANSPARENT; return SK_ColorTRANSPARENT;
......
...@@ -51,7 +51,7 @@ class PLATFORM_EXPORT DrawingDisplayItem : public DisplayItem { ...@@ -51,7 +51,7 @@ class PLATFORM_EXPORT DrawingDisplayItem : public DisplayItem {
known_to_be_opaque_ = true; known_to_be_opaque_ = true;
} }
SkColor BackgroundColor(uint64_t& area) const; SkColor BackgroundColor(float& area) const;
private: private:
bool CalculateKnownToBeOpaque(const PaintRecord*) const; bool CalculateKnownToBeOpaque(const PaintRecord*) const;
......
...@@ -14,7 +14,7 @@ struct SameSizeAsPaintChunk { ...@@ -14,7 +14,7 @@ struct SameSizeAsPaintChunk {
wtf_size_t begin_index; wtf_size_t begin_index;
wtf_size_t end_index; wtf_size_t end_index;
Color background_color; Color background_color;
uint64_t background_color_area; float background_color_area;
PaintChunk::Id id; PaintChunk::Id id;
PropertyTreeState properties; PropertyTreeState properties;
IntRect bounds; IntRect bounds;
......
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
namespace blink { namespace blink {
constexpr float kMinBackgroundColorCoverageRatio = 0.5;
// A contiguous sequence of drawings with common paint properties. // A contiguous sequence of drawings with common paint properties.
// //
// This is expected to be owned by the paint artifact which also owns the // This is expected to be owned by the paint artifact which also owns the
...@@ -113,7 +115,7 @@ struct PLATFORM_EXPORT PaintChunk { ...@@ -113,7 +115,7 @@ struct PLATFORM_EXPORT PaintChunk {
Color background_color; Color background_color;
// The area that is painted by the paint op that defines background_color. // The area that is painted by the paint op that defines background_color.
uint64_t background_color_area; float background_color_area;
// Identifier of this chunk. It should be unique if |is_cacheable| is true. // Identifier of this chunk. It should be unique if |is_cacheable| is true.
// This is used to match a new chunk to a cached old chunk to track changes // This is used to match a new chunk to a cached old chunk to track changes
......
...@@ -60,6 +60,10 @@ class PaintChunkSubset { ...@@ -60,6 +60,10 @@ class PaintChunkSubset {
++subset_or_chunk_index_; ++subset_or_chunk_index_;
return *this; return *this;
} }
const Iterator& operator--() {
--subset_or_chunk_index_;
return *this;
}
Iterator operator+(wtf_size_t offset) const { Iterator operator+(wtf_size_t offset) const {
DCHECK_LE(subset_or_chunk_index_ + offset, DCHECK_LE(subset_or_chunk_index_ + offset,
subset_.end().subset_or_chunk_index_); subset_.end().subset_or_chunk_index_);
......
...@@ -98,7 +98,7 @@ bool PaintChunker::IncrementDisplayItemIndex(const DisplayItem& item) { ...@@ -98,7 +98,7 @@ bool PaintChunker::IncrementDisplayItemIndex(const DisplayItem& item) {
// If this paints the background and it's larger than our current candidate, // If this paints the background and it's larger than our current candidate,
// set the candidate to be this item. // set the candidate to be this item.
if (item.IsDrawing() && item.DrawsContent()) { if (item.IsDrawing() && item.DrawsContent()) {
uint64_t item_area; float item_area;
Color item_color = Color item_color =
static_cast<const DrawingDisplayItem&>(item).BackgroundColor(item_area); static_cast<const DrawingDisplayItem&>(item).BackgroundColor(item_area);
ProcessBackgroundColorCandidate(chunk.id, item_color, item_area); ProcessBackgroundColorCandidate(chunk.id, item_color, item_area);
...@@ -188,11 +188,13 @@ void PaintChunker::CreateScrollHitTestChunk( ...@@ -188,11 +188,13 @@ void PaintChunker::CreateScrollHitTestChunk(
bool PaintChunker::ProcessBackgroundColorCandidate(const PaintChunk::Id& id, bool PaintChunker::ProcessBackgroundColorCandidate(const PaintChunk::Id& id,
Color color, Color color,
uint64_t area) { float area) {
bool created_new_chunk = EnsureCurrentChunk(id); bool created_new_chunk = EnsureCurrentChunk(id);
if (color != Color::kTransparent && if (color != Color::kTransparent &&
(candidate_background_color_ == Color::kTransparent || (area >= candidate_background_area_ ||
(area >= candidate_background_area_))) { area >= kMinBackgroundColorCoverageRatio *
chunks_->back().bounds.Width() *
chunks_->back().bounds.Height())) {
candidate_background_color_ = color; candidate_background_color_ = color;
candidate_background_area_ = area; candidate_background_area_ = area;
} }
......
...@@ -71,7 +71,7 @@ class PLATFORM_EXPORT PaintChunker final { ...@@ -71,7 +71,7 @@ class PLATFORM_EXPORT PaintChunker final {
// Returns true if a new chunk is created. // Returns true if a new chunk is created.
bool ProcessBackgroundColorCandidate(const PaintChunk::Id& id, bool ProcessBackgroundColorCandidate(const PaintChunk::Id& id,
Color color, Color color,
uint64_t area); float area);
// Returns true if a new chunk is created. // Returns true if a new chunk is created.
bool EnsureChunk() { return EnsureCurrentChunk(*next_chunk_id_); } bool EnsureChunk() { return EnsureCurrentChunk(*next_chunk_id_); }
...@@ -103,7 +103,7 @@ class PLATFORM_EXPORT PaintChunker final { ...@@ -103,7 +103,7 @@ class PLATFORM_EXPORT PaintChunker final {
bool will_force_new_chunk_ = true; bool will_force_new_chunk_ = true;
Color candidate_background_color_ = Color::kTransparent; Color candidate_background_color_ = Color::kTransparent;
uint64_t candidate_background_area_ = 0; float candidate_background_area_ = 0;
DISALLOW_COPY_AND_ASSIGN(PaintChunker); DISALLOW_COPY_AND_ASSIGN(PaintChunker);
}; };
......
{
"layers": [
{
"name": "Scrolling Contents Layer",
"bounds": [785, 628],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='target'",
"bounds": [620, 620],
"contentsOpaque": true,
"backgroundColor": "#008000",
"transform": 1
},
{
"name": "ContentsLayer for Vertical Scrollbar Layer",
"position": [785, 0],
"bounds": [15, 600],
"contentsOpaque": true
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[8, 8, 0, 1]
]
}
]
}
<!DOCTYPE html>
<script>
onload = () => {
if (window.testRunner && window.internals) {
testRunner.dumpAsText();
testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
}
}
</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>
</div>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [1008, 1008], "bounds": [1008, 1008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#C0C0C0"
}, },
{ {
"name": "ContentsLayer for Horizontal Scrollbar Layer", "name": "ContentsLayer for Horizontal Scrollbar Layer",
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 2 "transform": 2
}, },
{ {
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 4 "transform": 4
}, },
{ {
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 6 "transform": 6
}, },
{ {
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 8 "transform": 8
}, },
{ {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#ADD8E6"
}, },
{ {
"name": "LayoutNGBlockFlow (positioned) DIV class='compositedlayer'", "name": "LayoutNGBlockFlow (positioned) DIV class='compositedlayer'",
......
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 628],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='target'",
"bounds": [620, 620],
"contentsOpaque": true,
"backgroundColor": "#008000",
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[8, 8, 0, 1]
]
}
]
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [1008, 1008], "bounds": [1008, 1008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#C0C0C0"
}, },
{ {
"name": "HorizontalScrollbar", "name": "HorizontalScrollbar",
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
"name": "LayoutNGBlockFlow (relative positioned) DIV class='scroller'", "name": "LayoutNGBlockFlow (relative positioned) DIV class='scroller'",
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 2 "transform": 2
}, },
{ {
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
"name": "LayoutNGBlockFlow DIV class='scroller'", "name": "LayoutNGBlockFlow DIV class='scroller'",
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 4 "transform": 4
}, },
{ {
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
"name": "LayoutNGBlockFlow DIV class='scroller'", "name": "LayoutNGBlockFlow DIV class='scroller'",
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 6 "transform": 6
}, },
{ {
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
"name": "LayoutNGBlockFlow DIV class='scroller'", "name": "LayoutNGBlockFlow DIV class='scroller'",
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 8 "transform": 8
}, },
{ {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#003300",
"invalidations": [ "invalidations": [
[550, 50, 100, 500] [550, 50, 100, 500]
] ]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[8, 208, 300, 100] [8, 208, 300, 100]
] ]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[8, 8, 300, 300] [8, 8, 300, 300]
] ]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 1516], "bounds": [2008, 1516],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[8, 8, 2000, 1500] [8, 8, 2000, 1500]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[8, 174, 500, 168], [8, 174, 500, 168],
[8, 341, 500, 167], [8, 341, 500, 167],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [800, 1000], "bounds": [800, 1000],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#0000FF",
"invalidations": [ "invalidations": [
[400, 0, 200, 1000] [400, 0, 200, 1000]
] ]
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
{ {
"name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'", "name": "LayoutNGBlockFlow (positioned) DIV class='reflected fixed'",
"bounds": [100, 100], "bounds": [100, 100],
"backgroundColor": "#FF0000", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [1516, 585], "bounds": [1516, 585],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#008000" "backgroundColor": "#ADD8E6"
}, },
{ {
"name": "HorizontalScrollbar", "name": "HorizontalScrollbar",
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [804, 604], "bounds": [804, 604],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FF0000", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[2, 2, 800, 600] [2, 2, 800, 600]
] ]
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
"name": "LayoutNGBlockFlow DIV id='scroller'", "name": "LayoutNGBlockFlow DIV id='scroller'",
"bounds": [200, 1620], "bounds": [200, 1620],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#D3D3D3", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[0, 610, 22, 20] [0, 610, 22, 20]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#FF0000",
"invalidations": [ "invalidations": [
[314, 114, 435, 450], [314, 114, 435, 450],
[314, 564, 435, 15] [314, 564, 435, 15]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
"name": "Scrolling background of LayoutView #document", "name": "Scrolling background of LayoutView #document",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
......
{
"layers": [
{
"name": "Scrolling Contents Layer",
"bounds": [785, 628],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutBlockFlow (positioned) DIV id='target'",
"bounds": [620, 620],
"contentsOpaque": true,
"backgroundColor": "#008000",
"transform": 1
},
{
"name": "ContentsLayer for Vertical Scrollbar Layer",
"position": [785, 0],
"bounds": [15, 600],
"contentsOpaque": true
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[8, 8, 0, 1]
]
}
]
}
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 2 "transform": 2
}, },
{ {
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 4 "transform": 4
}, },
{ {
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 6 "transform": 6
}, },
{ {
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
"position": [5, 5], "position": [5, 5],
"bounds": [220, 236], "bounds": [220, 236],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#DDDDDD",
"transform": 8 "transform": 8
}, },
{ {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#ADD8E6"
}, },
{ {
"name": "LayoutBlockFlow (positioned) DIV class='compositedlayer'", "name": "LayoutBlockFlow (positioned) DIV class='compositedlayer'",
......
...@@ -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": "#FF0000", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [200, 1620], "bounds": [200, 1620],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#D3D3D3", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[0, 610, 22, 19] [0, 610, 22, 19]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#003300",
"invalidations": [ "invalidations": [
[550, 50, 100, 500] [550, 50, 100, 500]
] ]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[8, 208, 300, 100] [8, 208, 300, 100]
] ]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[8, 8, 300, 300] [8, 8, 300, 300]
] ]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 1516], "bounds": [2008, 1516],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[8, 8, 2000, 1500] [8, 8, 2000, 1500]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[8, 174, 500, 168], [8, 174, 500, 168],
[8, 341, 500, 167], [8, 341, 500, 167],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 1000], "bounds": [800, 1000],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#0000FF",
"invalidations": [ "invalidations": [
[400, 0, 200, 1000] [400, 0, 200, 1000]
] ]
......
...@@ -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": "#FF0000", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[0, 0, 100, 100] [0, 0, 100, 100]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [1516, 585], "bounds": [1516, 585],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#008000" "backgroundColor": "#ADD8E6"
}, },
{ {
"name": "ContentsLayer for Horizontal Scrollbar Layer", "name": "ContentsLayer for Horizontal Scrollbar Layer",
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [804, 604], "bounds": [804, 604],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FF0000", "backgroundColor": "#008000",
"invalidations": [ "invalidations": [
[2, 2, 800, 600] [2, 2, 800, 600]
] ]
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2016], "bounds": [2008, 2016],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [2008, 2008], "bounds": [2008, 2008],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#0000FF"
} }
] ]
} }
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [200, 1620], "bounds": [200, 1620],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#D3D3D3", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[0, 610, 22, 20] [0, 610, 22, 20]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#FF0000",
"invalidations": [ "invalidations": [
[314, 114, 435, 450], [314, 114, 435, 450],
[314, 564, 435, 15] [314, 564, 435, 15]
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [200, 1620], "bounds": [200, 1620],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#D3D3D3", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[0, 610, 23, 18] [0, 610, 23, 18]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF" "backgroundColor": "#FF0000"
}, },
{ {
"name": "LayoutNGTableCell (relative positioned) TD id='cellToScroll' class='relative'", "name": "LayoutNGTableCell (relative positioned) TD id='cellToScroll' class='relative'",
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [200, 1620], "bounds": [200, 1620],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#D3D3D3", "backgroundColor": "#ADD8E6",
"invalidations": [ "invalidations": [
[0, 610, 21, 20] [0, 610, 21, 20]
], ],
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"name": "Scrolling Contents Layer", "name": "Scrolling Contents Layer",
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"backgroundColor": "#FFFFFF", "backgroundColor": "#FF0000",
"invalidations": [ "invalidations": [
[314, 114, 435, 450], [314, 114, 435, 450],
[314, 564, 435, 15] [314, 564, 435, 15]
......
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