src/third_party/WebKit/LayoutTests/compositing/squashing/squash-compositing-hover-expected.txt

   1 Test overlap is rendered correctly when hovering over elements
   2
   3 Case 1, original layer tree:
   4 {
   5   "bounds": [800, 600],
   6   "children": [
   7     {
   8       "bounds": [800, 600],
   9       "contentsOpaque": true,
  10       "drawsContent": true,
  11       "children": [
  12         {
  13           "position": [8, 8],
  14           "bounds": [784, 0]
  15         },
  16         {
  17           "shouldFlattenTransform": false,
  18           "children": [
  19             {
  20               "position": [100, 100],
  21               "bounds": [100, 100],
  22               "contentsOpaque": true,
  23               "drawsContent": true,
  24               "backgroundColor": "#0000FF"
  25             },
  26             {
  27               "position": [180, 180],
  28               "bounds": [260, 260],
  29               "drawsContent": true
  30             }
  31           ]
  32         }
  33       ]
  34     }
  35   ]
  36 }
  37 Case 2: hovering over the "middle" element (causes that div to become its own composited layer)
  38 {
  39   "bounds": [800, 600],
  40   "children": [
  41     {
  42       "bounds": [800, 600],
  43       "contentsOpaque": true,
  44       "drawsContent": true,
  45       "children": [
  46         {
  47           "position": [8, 8],
  48           "bounds": [784, 0]
  49         },
  50         {
  51           "position": [100, 100],
  52           "bounds": [100, 100],
  53           "contentsOpaque": true,
  54           "drawsContent": true,
  55           "backgroundColor": "#0000FF"
  56         },
  57         {
  58           "shouldFlattenTransform": false,
  59           "children": [
  60             {
  61               "position": [180, 180],
  62               "bounds": [100, 100],
  63               "contentsOpaque": true,
  64               "drawsContent": true,
  65               "backgroundColor": "#008000"
  66             },
  67             {
  68               "position": [260, 260],
  69               "bounds": [180, 180],
  70               "drawsContent": true
  71             }
  72           ]
  73         }
  74       ]
  75     }
  76   ]
  77 }
  78 Case 3: hovering over the "middle2" element (causes that div to become its own composited layer)
  79 {
  80   "bounds": [800, 600],
  81   "children": [
  82     {
  83       "bounds": [800, 600],
  84       "contentsOpaque": true,
  85       "drawsContent": true,
  86       "children": [
  87         {
  88           "position": [8, 8],
  89           "bounds": [784, 0]
  90         },
  91         {
  92           "shouldFlattenTransform": false,
  93           "children": [
  94             {
  95               "position": [100, 100],
  96               "bounds": [100, 100],
  97               "contentsOpaque": true,
  98               "drawsContent": true,
  99               "backgroundColor": "#0000FF"
 100             },
 101             {
 102               "position": [180, 180],
 103               "bounds": [100, 100],
 104               "drawsContent": true
 105             }
 106           ]
 107         },
 108         {
 109           "shouldFlattenTransform": false,
 110           "children": [
 111             {
 112               "position": [260, 260],
 113               "bounds": [100, 100],
 114               "contentsOpaque": true,
 115               "drawsContent": true,
 116               "backgroundColor": "#008000"
 117             },
 118             {
 119               "position": [340, 340],
 120               "bounds": [100, 100],
 121               "drawsContent": true
 122             }
 123           ]
 124         }
 125       ]
 126     }
 127   ]
 128 }
 129 Case 4: hovering over the "top" element (causes that div to become its own composited layer)
 130 {
 131   "bounds": [800, 600],
 132   "children": [
 133     {
 134       "bounds": [800, 600],
 135       "contentsOpaque": true,
 136       "drawsContent": true,
 137       "children": [
 138         {
 139           "position": [8, 8],
 140           "bounds": [784, 0]
 141         },
 142         {
 143           "shouldFlattenTransform": false,
 144           "children": [
 145             {
 146               "position": [100, 100],
 147               "bounds": [100, 100],
 148               "contentsOpaque": true,
 149               "drawsContent": true,
 150               "backgroundColor": "#0000FF"
 151             },
 152             {
 153               "position": [180, 180],
 154               "bounds": [180, 180],
 155               "drawsContent": true
 156             }
 157           ]
 158         },
 159         {
 160           "position": [340, 340],
 161           "bounds": [100, 100],
 162           "contentsOpaque": true,
 163           "drawsContent": true,
 164           "backgroundColor": "#008000"
 165         }
 166       ]
 167     }
 168   ]
 169 }
 170 Case 5: back to situation in case 1
 171 {
 172   "bounds": [800, 600],
 173   "children": [
 174     {
 175       "bounds": [800, 600],
 176       "contentsOpaque": true,
 177       "drawsContent": true,
 178       "children": [
 179         {
 180           "position": [8, 8],
 181           "bounds": [784, 0]
 182         },
 183         {
 184           "shouldFlattenTransform": false,
 185           "children": [
 186             {
 187               "position": [100, 100],
 188               "bounds": [100, 100],
 189               "contentsOpaque": true,
 190               "drawsContent": true,
 191               "backgroundColor": "#0000FF"
 192             },
 193             {
 194               "position": [180, 180],
 195               "bounds": [260, 260],
 196               "drawsContent": true
 197             }
 198           ]
 199         }
 200       ]
 201     }
 202   ]
 203 }
 204