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'", "bounds": [150, 150] } ], "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'", "bounds": [150, 150], "invalidations": [ [0, 0, 141, 141] ] } ], "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'", "bounds": [150, 150], "invalidations": [ [0, 0, 141, 141] ] } ], "transforms": [ { "id": 1, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [100, 100, 0, 1] ] } ] }