| Test overlap is rendered correctly when hovering over elements |
| |
| Case 1, original layer tree: |
| { |
| "layers": [ |
| { |
| "name": "Scrolling Contents Layer", |
| "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": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (positioned) DIV class='box middle')", |
| "position": [80, 80], |
| "bounds": [260, 260], |
| "transform": 1 |
| } |
| ], |
| "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 "middle" element (causes that div to become its own composited layer) |
| { |
| "layers": [ |
| { |
| "name": "Scrolling Contents Layer", |
| "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": [100, 100], |
| "contentsOpaque": true, |
| "backgroundColor": "#008000", |
| "transform": 2 |
| }, |
| { |
| "name": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (positioned) DIV class='box middle2')", |
| "position": [80, 80], |
| "bounds": [180, 180], |
| "transform": 2 |
| } |
| ], |
| "transforms": [ |
| { |
| "id": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [100, 100, 0, 1] |
| ] |
| }, |
| { |
| "id": 2, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [180, 180, 0, 1] |
| ] |
| } |
| ] |
| } |
| |
| Case 3: hovering over the "middle2" element (causes that div to become its own composited layer) |
| { |
| "layers": [ |
| { |
| "name": "Scrolling Contents Layer", |
| "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": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (positioned) DIV class='box middle')", |
| "position": [80, 80], |
| "bounds": [100, 100], |
| "transform": 1 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='box middle2'", |
| "bounds": [100, 100], |
| "contentsOpaque": true, |
| "backgroundColor": "#008000", |
| "transform": 2 |
| }, |
| { |
| "name": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (positioned) DIV class='box top')", |
| "position": [80, 80], |
| "bounds": [100, 100], |
| "transform": 2 |
| } |
| ], |
| "transforms": [ |
| { |
| "id": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [100, 100, 0, 1] |
| ] |
| }, |
| { |
| "id": 2, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [260, 260, 0, 1] |
| ] |
| } |
| ] |
| } |
| |
| Case 4: hovering over the "top" element (causes that div to become its own composited layer) |
| { |
| "layers": [ |
| { |
| "name": "Scrolling Contents Layer", |
| "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": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (positioned) DIV class='box middle')", |
| "position": [80, 80], |
| "bounds": [180, 180], |
| "transform": 1 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV class='box top'", |
| "bounds": [100, 100], |
| "contentsOpaque": true, |
| "backgroundColor": "#008000", |
| "transform": 2 |
| } |
| ], |
| "transforms": [ |
| { |
| "id": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [100, 100, 0, 1] |
| ] |
| }, |
| { |
| "id": 2, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [340, 340, 0, 1] |
| ] |
| } |
| ] |
| } |
| |
| Case 5: back to situation in case 1 |
| { |
| "layers": [ |
| { |
| "name": "Scrolling Contents Layer", |
| "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": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (positioned) DIV class='box middle')", |
| "position": [80, 80], |
| "bounds": [260, 260], |
| "transform": 1 |
| } |
| ], |
| "transforms": [ |
| { |
| "id": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [100, 100, 0, 1] |
| ] |
| } |
| ] |
| } |
| |