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 box behind'", "bounds": [100, 100], "contentsOpaque": true, "backgroundColor": "#0000FF", "transform": 1 }, { "name": "LayoutNGBlockFlow (positioned) DIV class='box middle'", "position": [4, 4], "bounds": [146, 146] } ], "transforms": [ { "id": 1, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [100, 100, 0, 1] ] } ] } CASE 2, hovering over the outer div { "layers": [ { "name": "Scrolling background of LayoutView #document", "bounds": [800, 600], "contentsOpaque": true, "backgroundColor": "#FFFFFF" }, { "name": "LayoutNGBlockFlow (positioned) DIV class='composited box behind'", "bounds": [100, 100], "contentsOpaque": true, "backgroundColor": "#0000FF", "transform": 1 }, { "name": "LayoutNGBlockFlow (positioned) DIV class='box middle'", "position": [4, 4], "bounds": [146, 146], "invalidations": [ [0, 0, 132, 132] ] } ], "transforms": [ { "id": 1, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [100, 100, 0, 1] ] } ] } CASE 3, hovering over the inner div { "layers": [ { "name": "Scrolling background of LayoutView #document", "bounds": [800, 600], "contentsOpaque": true, "backgroundColor": "#FFFFFF" }, { "name": "LayoutNGBlockFlow (positioned) DIV class='composited box behind'", "bounds": [100, 100], "contentsOpaque": true, "backgroundColor": "#0000FF", "transform": 1 }, { "name": "LayoutNGBlockFlow (positioned) DIV class='box middle'", "position": [4, 4], "bounds": [146, 146], "invalidations": [ [46, 46, 100, 100] ] } ], "transforms": [ { "id": 1, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [100, 100, 0, 1] ] } ] }