blob: 282682bfaaa40aac74d46e288a133025da4b4989 [file] [log] [blame]
Test that layers can be nicely added or removed from a squashed layer, without unnecessary repaints on any layer. Click anywhere to test interactively; keep clicking to proceed through the test.
CASE 1, original layer tree with overlap1 and overlap2:
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [800, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutBlockFlow (positioned) DIV class='composited'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV id='A' class='overlap1')",
"position": [140, 140],
"bounds": [180, 180]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
],
"flattenInheritedTransform": false
}
]
}
CASE 2, overlap3 gets added:
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [800, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutBlockFlow (positioned) DIV class='composited'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV id='A' class='overlap1')",
"position": [140, 140],
"bounds": [260, 260],
"paintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [160, 160, 100, 100],
"reason": "appeared"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
],
"flattenInheritedTransform": false
}
],
"objectPaintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"reason": "appeared"
}
]
}
CASE 3, overlap2 gets removed. Since this does not resize the layer, there should only be a repaint of overlap2:
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [800, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutBlockFlow (positioned) DIV class='composited'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV id='A' class='overlap1')",
"position": [140, 140],
"bounds": [260, 260],
"paintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'",
"rect": [80, 80, 100, 100],
"reason": "disappeared"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
],
"flattenInheritedTransform": false
}
]
}
CASE 4, overlap1 gets removed:
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [800, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutBlockFlow (positioned) DIV class='composited'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV id='C' class='overlap3')",
"position": [300, 300],
"bounds": [100, 100],
"paintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'",
"rect": [0, 0, 100, 100],
"reason": "disappeared"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [0, 0, 100, 100],
"reason": "paint property change"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
],
"flattenInheritedTransform": false
}
],
"objectPaintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"reason": "compositing update"
}
]
}
CASE 5, overlap2 gets added back:
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [800, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutBlockFlow (positioned) DIV class='composited'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV id='B' class='overlap2')",
"position": [220, 220],
"bounds": [180, 180],
"paintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [80, 80, 100, 100],
"reason": "paint property change"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'",
"rect": [0, 0, 100, 100],
"reason": "appeared"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [0, 0, 100, 100],
"reason": "paint property change"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
],
"flattenInheritedTransform": false
}
],
"objectPaintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'",
"reason": "appeared"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"reason": "compositing update"
}
]
}
CASE 6, overlap1 gets added back, and overlap3 gets removed:
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [800, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutBlockFlow (positioned) DIV class='composited'",
"bounds": [400, 400],
"contentsOpaque": true,
"backgroundColor": "#808080",
"transform": 1
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV id='A' class='overlap1')",
"position": [140, 140],
"bounds": [180, 180],
"paintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'",
"rect": [80, 80, 100, 100],
"reason": "paint property change"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='C' class='overlap3'",
"rect": [80, 80, 100, 100],
"reason": "disappeared"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'",
"rect": [0, 0, 100, 100],
"reason": "appeared"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'",
"rect": [0, 0, 100, 100],
"reason": "paint property change"
}
]
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[60, 60, 0, 1]
],
"flattenInheritedTransform": false
}
],
"objectPaintInvalidations": [
{
"object": "LayoutBlockFlow (positioned) DIV id='A' class='overlap1'",
"reason": "appeared"
},
{
"object": "LayoutBlockFlow (positioned) DIV id='B' class='overlap2'",
"reason": "compositing update"
}
]
}