Commit 595ecc20 authored by Xianzhu Wang's avatar Xianzhu Wang Committed by Commit Bot

[CompositeAfterPaint] Update web test expectations

- Don't output repaint rects if PaintArtifactCompositor is not tracking
  raster invalidations.
- Rebaseline tests.

Bug: 648274, 757977, 765003, 842356, 931486, 937573, 1029620
Change-Id: Icdf154ca6cb39ead80e1b2aa7eaf71e1c3d941ed
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2014177Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#734252}
parent 2be1b2e1
......@@ -67,6 +67,11 @@ std::unique_ptr<JSONObject> PaintArtifactCompositor::GetLayersAsJSON(
const PaintArtifact* paint_artifact) const {
DCHECK(RuntimeEnabledFeatures::CompositeAfterPaintEnabled() ||
paint_artifact);
if (RuntimeEnabledFeatures::CompositeAfterPaintEnabled() &&
!tracks_raster_invalidations_)
flags &= ~kLayerTreeIncludesPaintInvalidations;
LayersAsJSON layers_as_json(flags);
if (RuntimeEnabledFeatures::CompositeAfterPaintEnabled()) {
for (const auto& layer : root_layer_->children()) {
......
......@@ -37,13 +37,15 @@ crbug.com/918155 virtual/prefer_compositing_to_lcd_text/scrollbars/overlay-scrol
crbug.com/1039401 virtual/scroll_customization/fast/scrolling/scrollbar-mousedown-mouseup.html [ Pass ]
# Missing composited layers for elements without visible contents.
crbug.com/937573 compositing/geometry/foreground-layer.html [ Failure ]
crbug.com/937573 compositing/geometry/limit-layer-bounds-opacity-transition.html [ Failure ]
crbug.com/937573 compositing/geometry/limit-layer-bounds-overflow-root.html [ Failure ]
crbug.com/937573 compositing/geometry/limit-layer-bounds-positioned-transition.html [ Failure ]
crbug.com/937573 compositing/geometry/limit-layer-bounds-positioned.html [ Failure ]
crbug.com/937573 compositing/geometry/limit-layer-bounds-transformed.html [ Failure ]
crbug.com/937573 compositing/layer-creation/scroll-partial-update.html [ Failure ]
crbug.com/937573 paint/invalidation/compositing/iframe-inside-squashed-layer.html [ Failure ]
crbug.com/937573 paint/invalidation/compositing/remove-squashed-layer-plus-move.html [ Failure ]
crbug.com/937573 paint/invalidation/compositing/resize-squashing-layer-that-needs-full-repaint.html [ Failure ]
virtual/android/fullscreen/video-overlay-scroll.html [ Failure ]
virtual/android/rootscroller/fixed-chaining-with-implicit-pointer-events-none.html [ Failure ]
......@@ -51,14 +53,8 @@ virtual/android/rootscroller/nested-rootscroller-browser-controls-bounds-shown.h
virtual/android/url-bar/bottom-and-top-fixed-sticks-to-top.html [ Crash ]
virtual/android/url-bar/bottom-fixed-adjusted-when-showing-url-bar.html [ Crash ]
# Composited filters are not working.
crbug.com/1008501 compositing/reflections/deeply-nested-reflections.html [ Failure ]
# Wrong contentsOpaque or background color.
crbug.com/1029620 compositing/contents-opaque/control-layer.html [ Failure ]
crbug.com/1029620 compositing/contents-opaque/layer-opacity.html [ Failure ]
# Flaky result of contentsOpqaue.
crbug.com/1029620 paint/invalidation/window-resize/window-resize-child-background-image-fixed-centered.html [ Pass Failure ]
# Wrong clip of nested reflection.
compositing/reflections/deeply-nested-reflections.html [ Failure ]
# Needs to implement logic for CompositingReasons::kAssumedOverlap.
compositing/layer-creation/overlap-animation-clipping.html [ Failure ]
......@@ -74,7 +70,6 @@ crbug.com/667946 compositing/overflow/scrolls-with-respect-to-nested.html [ Fail
crbug.com/667946 compositing/overflow/scrolls-with-respect-to-transform.html [ Failure ]
crbug.com/667946 compositing/overflow/scrolls-with-respect-to.html [ Failure ]
compositing/squashing/do-not-squash-scroll-child-with-composited-descendants.html [ Failure ]
compositing/squashing/squashed-repaints.html [ Failure ]
compositing/visibility/layer-visible-content.html [ Failure ]
external/wpt/css/css-transforms/transform3d-backface-visibility-006.html [ Failure ]
external/wpt/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-overflow.html [ Crash ]
......@@ -109,37 +104,25 @@ paint/invalidation/compositing/should-invoke-deferred-compositing.html [ Failure
paint/invalidation/scroll/overflow-hidden-yet-scrolled-with-custom-scrollbar.html [ Failure ]
paint/invalidation/scroll/overflow-hidden-yet-scrolled.html [ Failure ]
# "Missing" raster invalidation because composited layers are re-created.
crbug.com/842356 paint/invalidation/compositing/containing-block-added-individual.html [ Failure ]
crbug.com/842356 paint/invalidation/compositing/containing-block-added.html [ Failure ]
crbug.com/842356 paint/invalidation/compositing/containing-block-removed-individual.html [ Failure ]
crbug.com/842356 paint/invalidation/compositing/containing-block-removed.html [ Failure ]
# Extra raster invalidations.
compositing/overflow/do-not-repaint-if-scrolling-composited-layers.html [ Failure ]
paint/invalidation/compositing/clipping-should-not-repaint-composited-descendants.html [ Failure ]
paint/invalidation/compositing/should-not-repaint-composited-filter.html [ Failure ]
paint/invalidation/compositing/should-not-repaint-composited-opacity.html [ Failure ]
paint/invalidation/compositing/should-not-repaint-move-backface-hidden.html [ Failure ]
paint/invalidation/scroll/iframe-scroll-repaint.html [ Failure ]
paint/invalidation/scroll/repaint-composited-child-in-scrolled-container.html [ Failure ]
paint/invalidation/position/relative-positioned-movement-repaint.html [ Failure ]
# Wrong invalidation/painting/rasterization for multicol. Different layer tree.
crbug.com/648274 paint/invalidation/multicol/multicol-as-paint-container.html [ Failure ]
# Different layer tree about squashing.
crbug.com/757977 compositing/squashing/squashed-layer-loses-graphicslayer.html [ Failure ]
crbug.com/757977 paint/invalidation/compositing/remove-squashed-layer-plus-move.html [ Failure ]
crbug.com/757977 paint/invalidation/compositing/resize-squashing-layer-that-needs-full-repaint.html [ Failure ]
# Should not decomposite effects for composited elements.
crbug.com/765003 paint/invalidation/compositing/should-not-repaint-composited-filter.html [ Failure ]
crbug.com/765003 paint/invalidation/compositing/should-not-repaint-composited-opacity.html [ Failure ]
crbug.com/765003 compositing/contents-opaque/layer-opacity.html [ Failure ]
# Less layers or other different layer trees.
paint/invalidation/compositing/iframe-inside-squashed-layer.html [ Failure ]
paint/invalidation/compositing/overlap-test-with-filter.html [ Failure ]
paint/invalidation/compositing/should-not-repaint-composited-descendants.html [ Failure ]
# Subpixel or invisible color differences that look benign, but we can't rebaseline ref tests.
compositing/overflow/ancestor-with-clip-path.html [ Failure ]
css3/blending/svg-isolation-add-clipper-text.html [ Failure ]
fast/multicol/mixed-opacity-fixed-test.html [ Failure ]
fullscreen/rendering/backdrop-object.html [ Failure ]
external/wpt/svg/render/reftests/blending-001.svg [ Failure ]
......@@ -153,9 +136,6 @@ virtual/threaded/fast/events/pinch/scroll-visual-viewport-send-boundary-events.h
virtual/threaded/compositing/visibility/layer-visible-content.html [ Failure ]
crbug.com/931486 compositing/overflow/overlap-testing-ancestor-scroller-high-dpi.html [ Failure ]
crbug.com/931486 compositing/squashing/squash-above-fixed-1.html [ Failure ]
crbug.com/931486 compositing/squashing/squash-above-fixed-3.html [ Failure ]
crbug.com/931486 paint/invalidation/compositing/pointer-events-composited-scrolling.html [ Failure ]
crbug.com/931486 paint/invalidation/compositing/scrolling-neg-z-index-descendants.html [ Failure ]
crbug.com/931486 paint/invalidation/scroll/composited-iframe-scroll-repaint.html [ Failure ]
......@@ -171,8 +151,6 @@ paint/invalidation/compositing/subpixel-offset-scaled-transform-composited.html
paint/pagination/composited-paginated-outlined-box.html [ Failure ]
paint/invalidation/media-audio-no-spurious-repaints.html [ Failure ]
paint/invalidation/reflection/scroll-fixed-layer-with-reflection.html [ Failure ]
paint/invalidation/reflection/scroll-fixed-reflected-layer.html [ Failure ]
# Extra raster invalidation on start/end of animation. Caused by animation
# element id namespaces
......
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutButton INPUT id='control' class='composited'",
"bounds": [127, 22],
"backgroundColor": "#EFEFEF",
"transform": 1
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[8, 8, 0, 1]
]
}
]
}
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (relative positioned) DIV class='main box'",
"position": [-30, -30],
"bounds": [340, 340],
"backgroundColor": "#FF0000",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (relative positioned) DIV class='main box'",
"position": [-30, -30],
"bounds": [340, 340],
"backgroundColor": "#FF0000",
"transform": 2
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[38, 108, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[382, 38, 0, 1]
]
}
]
}
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
}
#target {
visibility: hidden;
height: 100%;
overflow-y: scroll;
}
.item {
visibility: visible;
height: 800px;
background: lightgray;
width: 100%;
}
</style>
<body>
<div id="target">
<div class="item">Item 2</div>
</div>
</body>
</html>
The gray div is a composited fixed-position element, and the cyan/lime elements should be squashed together on top. When scrolling, paragraphs may pop in-and-out of the squashing layer when they change overlapping status with respect to the composited layer underneath.
This scenario tests (1) that content repaints correctly as layers pop in and out of squashing, and (2) that the positioning of the squashing layer remains correct (i.e. scrolls properly) when the squashing layer is on top of a fixed-position composited layer.
CASE 1, original layer tree:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 1400],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
"bounds": [300, 300],
"contentsOpaque": true,
"backgroundColor": "#D3D3D3",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-b' class='overlapping lime'",
"position": [0, 100],
"bounds": [200, 1300],
"contentsOpaque": true,
"backgroundColor": "#00FF00"
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[100, 150, 0, 1]
]
}
]
}
CASE 2, scrolling y to 80, new layers will be squashed, so things repaint:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 1400],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-b' class='overlapping lime'",
"rect": [0, 100, 200, 100],
"reason": "chunk appeared"
}
],
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
"bounds": [300, 300],
"contentsOpaque": true,
"backgroundColor": "#D3D3D3",
"transform": 2
},
{
"name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
"position": [0, 200],
"bounds": [200, 1200],
"contentsOpaque": true,
"backgroundColor": "#00FFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
"rect": [0, 0, 200, 1200],
"reason": "full layer"
}
],
"transform": 1
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -80, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[100, 150, 0, 1]
]
}
]
}
CASE 3, scrolling y to 120, no repaints expected:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 1400],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
"bounds": [300, 300],
"contentsOpaque": true,
"backgroundColor": "#D3D3D3",
"transform": 2
},
{
"name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
"position": [0, 200],
"bounds": [200, 1200],
"contentsOpaque": true,
"backgroundColor": "#00FFFF",
"transform": 1
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -120, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[100, 150, 0, 1]
]
}
]
}
CASE 4, scrolling y to 170 new layers will be squashed, so things repaint:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 1400],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
"rect": [0, 200, 200, 100],
"reason": "chunk appeared"
}
],
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
"bounds": [300, 300],
"contentsOpaque": true,
"backgroundColor": "#D3D3D3",
"transform": 2
},
{
"name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-d' class='overlapping lime'",
"position": [0, 300],
"bounds": [200, 1100],
"contentsOpaque": true,
"backgroundColor": "#00FF00",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-d' class='overlapping lime'",
"rect": [0, 0, 200, 1100],
"reason": "full layer"
}
],
"transform": 1
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -170, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[100, 150, 0, 1]
]
}
]
}
This scenario verifies that the green "container" element and lime "innerScrolling" element scroll properly even though there is a blue fixed-position element layered in between them.
The catch is that the squashing requirements should be computed in correct paint order, so that the green container does not accidentally position itself with respect to the wrong layer and not scroll.
CASE 1, original layer tree:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 4100],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='backgroundFixed'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
"position": [100, 100],
"bounds": [100, 4000],
"contentsOpaque": true,
"backgroundColor": "#008000"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='innerFixed'",
"bounds": [200, 100],
"contentsOpaque": true,
"backgroundColor": "#0000FF",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='innerScrolling'",
"position": [200, 100],
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#00FF00"
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[100, 150, 0, 1]
]
}
]
}
CASE 2, scrolling y by 10 pixels, both the "container" and "inner" should scroll properly.
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 4100],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='backgroundFixed'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
"position": [100, 100],
"bounds": [100, 4000],
"contentsOpaque": true,
"backgroundColor": "#008000",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='innerFixed'",
"bounds": [200, 100],
"contentsOpaque": true,
"backgroundColor": "#0000FF",
"transform": 2
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='innerScrolling'",
"position": [200, 100],
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#00FF00",
"transform": 1
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -10, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[100, 150, 0, 1]
]
}
]
}
CASE 3, scrolling y further so that "inner" no longer overlaps the fixed-pos layer, then the stacking context of "container" includes the "innerScrolling" layer, and doubles in width:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 4100],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='backgroundFixed'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
"position": [100, 100],
"bounds": [200, 4000],
"backgroundColor": "#008000",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='innerScrolling'",
"rect": [100, 0, 100, 100],
"reason": "chunk appeared"
}
],
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='innerFixed'",
"bounds": [200, 100],
"contentsOpaque": true,
"backgroundColor": "#0000FF",
"transform": 2
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -110, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[100, 150, 0, 1]
]
}
]
}
A squashing Layer that becomes non-composited should correctly send a repaint invalidation to the new container GraphicsLayer that it paints into. When run interactively, hovering over the force-composited gray div should not cause other layers to disappear.
CASE 1, original layer tree:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='forceComposited' class='composited underneath'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"position": [140, 140],
"bounds": [260, 260],
"backgroundColor": "#0000FF"
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
]
}
]
}
CASE 2, The original composited layer is no longer composited, which then also removes all squashing layers. The important point is that there should be an appropriate repaint to the root GraphicsLayer:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [300, 300, 100, 100],
"reason": "chunk appeared"
},
{
"object": "LayoutNGBlockFlow (positioned) DIV id='B' class='overlap2'",
"rect": [220, 220, 100, 100],
"reason": "chunk appeared"
},
{
"object": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"rect": [140, 140, 100, 100],
"reason": "chunk appeared"
},
{
"object": "LayoutNGBlockFlow (positioned) DIV id='forceComposited' class='underneath'",
"rect": [60, 60, 100, 100],
"reason": "chunk appeared"
}
]
}
]
}
Basic repaint test for squashed layers. The entire squashing layer should not need repainting when only a portion of it is invalidated. Test interactively by using --show-paint-rects and hovering over elements to change their color.
CASE 1, original layer tree:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"position": [140, 140],
"bounds": [260, 260],
"backgroundColor": "#0000FF"
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
]
}
]
}
CASE 2, overlap1 changes color:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"position": [140, 140],
"bounds": [260, 260],
"backgroundColor": "#008000",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"rect": [0, 0, 100, 100],
"reason": "background"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
]
}
]
}
CASE 3, overlap1 and overlap2 change color:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"position": [140, 140],
"bounds": [260, 260],
"backgroundColor": "#0000FF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='B' class='overlap2'",
"rect": [80, 80, 100, 100],
"reason": "background"
},
{
"object": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"rect": [0, 0, 100, 100],
"reason": "background"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
]
}
]
}
CASE 4, overlap2 and overlap3 change color:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"position": [140, 140],
"bounds": [260, 260],
"backgroundColor": "#0000FF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [160, 160, 100, 100],
"reason": "background"
},
{
"object": "LayoutNGBlockFlow (positioned) DIV id='B' class='overlap2'",
"rect": [80, 80, 100, 100],
"reason": "background"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
]
}
]
}
CASE 5, overlap3 and overlap1 change color:
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='composited'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"position": [140, 140],
"bounds": [260, 260],
"backgroundColor": "#008000",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [160, 160, 100, 100],
"reason": "background"
},
{
"object": "LayoutNGBlockFlow (positioned) DIV id='A' class='overlap1'",
"rect": [0, 0, 100, 100],
"reason": "background"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
]
}
]
}
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
"bounds": [125, 125],
"backgroundColor": "#0000FF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='container'",
"rect": [0, 0, 125, 125],
"reason": "full layer"
}
],
"transform": 1
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[200, 100, 0, 1]
]
}
]
}
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
"bounds": [125, 125],
"backgroundColor": "#0000FF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='container'",
"rect": [0, 0, 125, 125],
"reason": "full layer"
}
],
"transform": 1
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[200, 100, 0, 1]
]
}
]
}
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#0000FF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='container'",
"rect": [0, 0, 100, 100],
"reason": "full layer"
}
],
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='fixed'",
"position": [50, 50],
"bounds": [75, 75],
"contentsOpaque": true,
"backgroundColor": "#008000",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV class='fixed'",
"rect": [0, 0, 75, 75],
"reason": "full layer"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[200, 100, 0, 1]
]
}
]
}
CONSOLE MESSAGE: line 30: debug
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
"bounds": [100, 100],
"contentsOpaque": true,
"backgroundColor": "#0000FF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='container'",
"rect": [0, 0, 100, 100],
"reason": "full layer"
}
],
"transform": 1
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='fixed'",
"position": [50, 50],
"bounds": [75, 75],
"contentsOpaque": true,
"backgroundColor": "#008000",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV class='fixed'",
"rect": [0, 0, 75, 75],
"reason": "full layer"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[200, 100, 0, 1]
]
}
]
}
......@@ -7,8 +7,8 @@
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutBlockFlow INPUT",
"rect": [11, 9, 17, 17],
"object": "LayoutNGBlockFlow INPUT",
"rect": [9, 7, 21, 21],
"reason": "subtree"
}
]
......
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutMultiColumnFlowThread (anonymous)",
"position": [8, -172],
"bounds": [625, 520],
"backfaceVisibility": "hidden",
"paintInvalidations": [
{
"object": "InlineTextBox 'Lorem ipsum'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'adipiscing'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'consectetur'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'dolor sit amet,'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'elit. Fusce'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'eu fringilla'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'pulvinar, ipsum'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'sapien'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'varius, metus'",
"rect": [0, 0, 625, 360],
"reason": "style change"
},
{
"object": "InlineTextBox 'eget, dapibus'",
"rect": [0, 180, 625, 340],
"reason": "style change"
},
{
"object": "InlineTextBox 'libero,'",
"rect": [0, 180, 625, 340],
"reason": "style change"
},
{
"object": "InlineTextBox 'non condimentum'",
"rect": [0, 180, 625, 340],
"reason": "style change"
},
{
"object": "InlineTextBox 'purus. Ut nisl'",
"rect": [0, 180, 625, 340],
"reason": "style change"
},
{
"object": "InlineTextBox 'quam est eu'",
"rect": [0, 180, 625, 340],
"reason": "style change"
},
{
"object": "InlineTextBox 'suscipit ut leo'",
"rect": [0, 180, 625, 340],
"reason": "style change"
},
{
"object": "InlineTextBox 'ultrices dolor.'",
"rect": [0, 180, 625, 340],
"reason": "style change"
},
{
"object": "InlineTextBox 'ultricies arcu,'",
"rect": [0, 180, 625, 340],
"reason": "style change"
}
]
}
]
}
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 2016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV class='absolute green reflected'",
"bounds": [100, 100],
"backgroundColor": "#008000",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV class='absolute green reflected'",
"rect": [0, 0, 100, 100],
"reason": "paint property change"
},
{
"object": "LayoutNGBlockFlow (positioned) DIV class='absolute red'",
"rect": [0, 0, 100, 100],
"reason": "paint property change"
}
],
"transform": 2
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -180, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[250, 100, 0, 1]
]
}
]
}
{
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [785, 2016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"transform": 1
},
{
"name": "VerticalScrollbar",
"position": [785, 0],
"bounds": [15, 600]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='hideMe' class='absolute red'",
"bounds": [100, 100],
"backgroundColor": "#FF0000",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='hideMe' class='absolute red'",
"rect": [0, 0, 100, 100],
"reason": "full layer"
}
],
"transform": 2
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -180, 0, 1]
]
},
{
"id": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[250, 100, 0, 1]
]
}
]
}
......@@ -4,19 +4,19 @@
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "HorizontalScrollbar",
"bounds": [300, 300],
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow (positioned) DIV id='outer'",
"rect": [8, 8, 285, 285],
"reason": "paint property change"
},
{
"object": "HorizontalScrollbar",
"rect": [0, 285, 285, 15],
"rect": [8, 293, 285, 15],
"reason": "scroll control"
}
],
"transform": 1
]
},
{
"name": "LayoutNGBlockFlow (positioned) DIV id='container'",
......
......@@ -4,7 +4,14 @@
"name": "Scrolling background of LayoutView #document",
"bounds": [1008, 1016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [8, 8, 1000, 1000],
"reason": "background"
}
]
},
{
"name": "HorizontalScrollbar",
......@@ -17,26 +24,14 @@
"bounds": [15, 235]
},
{
"name": "LayoutView #document",
"bounds": [600, 250],
"name": "Scroll corner of LayoutView #document",
"position": [585, 235],
"bounds": [15, 15],
"paintInvalidations": [
{
"object": "LayoutView #document",
"rect": [0, 0, 600, 250],
"reason": "geometry"
}
]
},
{
"name": "LayoutNGBlockFlow HTML",
"position": [8, 8],
"bounds": [1000, 1000],
"contentsOpaque": true,
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [0, 0, 1000, 1000],
"reason": "background"
"object": "Scroll corner of LayoutView #document",
"rect": [0, 0, 15, 15],
"reason": "paint property change"
}
]
}
......@@ -48,7 +43,14 @@
"name": "Scrolling background of LayoutView #document",
"bounds": [1008, 1016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [8, 8, 1000, 1000],
"reason": "background"
}
]
},
{
"name": "HorizontalScrollbar",
......@@ -61,26 +63,14 @@
"bounds": [15, 235]
},
{
"name": "LayoutView #document",
"bounds": [400, 250],
"name": "Scroll corner of LayoutView #document",
"position": [385, 235],
"bounds": [15, 15],
"paintInvalidations": [
{
"object": "LayoutView #document",
"rect": [0, 0, 400, 250],
"reason": "geometry"
}
]
},
{
"name": "LayoutNGBlockFlow HTML",
"position": [8, 8],
"bounds": [1000, 1000],
"contentsOpaque": true,
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [0, 0, 1000, 1000],
"reason": "background"
"object": "Scroll corner of LayoutView #document",
"rect": [0, 0, 15, 15],
"reason": "paint property change"
}
]
}
......@@ -92,7 +82,14 @@
"name": "Scrolling background of LayoutView #document",
"bounds": [1008, 1016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [8, 8, 1000, 1000],
"reason": "background"
}
]
},
{
"name": "HorizontalScrollbar",
......@@ -105,26 +102,14 @@
"bounds": [15, 585]
},
{
"name": "LayoutView #document",
"bounds": [400, 600],
"name": "Scroll corner of LayoutView #document",
"position": [385, 585],
"bounds": [15, 15],
"paintInvalidations": [
{
"object": "LayoutView #document",
"rect": [0, 0, 400, 600],
"reason": "geometry"
}
]
},
{
"name": "LayoutNGBlockFlow HTML",
"position": [8, 8],
"bounds": [1000, 1000],
"contentsOpaque": true,
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [0, 0, 1000, 1000],
"reason": "background"
"object": "Scroll corner of LayoutView #document",
"rect": [0, 0, 15, 15],
"reason": "paint property change"
}
]
}
......@@ -136,7 +121,14 @@
"name": "Scrolling background of LayoutView #document",
"bounds": [1008, 1016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
"backgroundColor": "#FFFFFF",
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [8, 8, 1000, 1000],
"reason": "background"
}
]
},
{
"name": "HorizontalScrollbar",
......@@ -149,26 +141,14 @@
"bounds": [15, 585]
},
{
"name": "LayoutView #document",
"bounds": [800, 600],
"name": "Scroll corner of LayoutView #document",
"position": [785, 585],
"bounds": [15, 15],
"paintInvalidations": [
{
"object": "LayoutView #document",
"rect": [0, 0, 800, 600],
"reason": "geometry"
}
]
},
{
"name": "LayoutNGBlockFlow HTML",
"position": [8, 8],
"bounds": [1000, 1000],
"contentsOpaque": true,
"paintInvalidations": [
{
"object": "LayoutNGBlockFlow DIV id='target'",
"rect": [0, 0, 1000, 1000],
"reason": "background"
"object": "Scroll corner of LayoutView #document",
"rect": [0, 0, 15, 15],
"reason": "paint property change"
}
]
}
......
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