third_party/blink/web_tests/compositing/squashing/squash-above-fixed-1-expected.txt

The gray div is a composited fixed-position element, and the cyan/lime elements should be squashed together on top. When scrolling, paragraphs may pop in-and-out of the squashing layer when they change overlapping status with respect to the composited layer underneath.

This scenario tests (1) that content repaints correctly as layers pop in and out of squashing, and (2) that the positioning of the squashing layer remains correct (i.e. scrolls properly) when the squashing layer is on top of a fixed-position composited layer.

CASE 1, original layer tree:
{
  "layers": [
    {
      "name": "Scrolling Contents Layer",
      "bounds": [785, 1400],
      "contentsOpaque": true,
      "backgroundColor": "#FFFFFF"
    },
    {
      "name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
      "bounds": [300, 300],
      "contentsOpaque": true,
      "backgroundColor": "#D3D3D3",
      "transform": 1
    },
    {
      "name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-b' class='overlapping lime'",
      "bounds": [200, 100],
      "contentsOpaque": true,
      "backgroundColor": "#00FF00",
      "transform": 2
    },
    {
      "name": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan')",
      "position": [0, 100],
      "bounds": [200, 300],
      "transform": 3
    }
  ],
  "transforms": [
    {
      "id": 1,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [100, 150, 0, 1]
      ]
    },
    {
      "id": 2,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 100, 0, 1]
      ]
    },
    {
      "id": 3,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 100, 0, 1]
      ]
    }
  ]
}

CASE 2, scrolling y to 80, new layers will be squashed, so things repaint:
{
  "layers": [
    {
      "name": "Scrolling Contents Layer",
      "bounds": [785, 1400],
      "contentsOpaque": true,
      "backgroundColor": "#FFFFFF",
      "scrollPosition": [0, 80],
      "paintInvalidations": [
        {
          "object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-f' class='overlapping lime'",
          "rect": [0, 500, 200, 100],
          "reason": "chunk disappeared"
        },
        {
          "object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-b' class='overlapping lime'",
          "rect": [0, 100, 200, 100],
          "reason": "chunk appeared"
        }
      ],
      "transform": 1
    },
    {
      "name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
      "bounds": [300, 300],
      "contentsOpaque": true,
      "backgroundColor": "#D3D3D3",
      "transform": 2
    },
    {
      "name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
      "bounds": [200, 100],
      "contentsOpaque": true,
      "backgroundColor": "#00FFFF",
      "paintInvalidations": [
        {
          "object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
          "rect": [0, 0, 200, 100],
          "reason": "full layer"
        }
      ],
      "transform": 4
    },
    {
      "name": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (relative positioned) DIV id='paragraph-d' class='overlapping lime')",
      "position": [0, 100],
      "bounds": [200, 300],
      "paintInvalidations": [
        {
          "object": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (relative positioned) DIV id='paragraph-d' class='overlapping lime')",
          "rect": [0, 0, 200, 300],
          "reason": "full layer"
        }
      ],
      "transform": 6
    }
  ],
  "transforms": [
    {
      "id": 1,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -80, 0, 1]
      ]
    },
    {
      "id": 2,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [100, 150, 0, 1]
      ]
    },
    {
      "id": 3,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -80, 0, 1]
      ]
    },
    {
      "id": 4,
      "parent": 3,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 200, 0, 1]
      ]
    },
    {
      "id": 5,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -80, 0, 1]
      ]
    },
    {
      "id": 6,
      "parent": 5,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 200, 0, 1]
      ]
    }
  ]
}

CASE 3, scrolling y to 120, no repaints expected:
{
  "layers": [
    {
      "name": "Scrolling Contents Layer",
      "bounds": [785, 1400],
      "contentsOpaque": true,
      "backgroundColor": "#FFFFFF",
      "scrollPosition": [0, 120],
      "transform": 1
    },
    {
      "name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
      "bounds": [300, 300],
      "contentsOpaque": true,
      "backgroundColor": "#D3D3D3",
      "transform": 2
    },
    {
      "name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
      "bounds": [200, 100],
      "contentsOpaque": true,
      "backgroundColor": "#00FFFF",
      "transform": 4
    },
    {
      "name": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (relative positioned) DIV id='paragraph-d' class='overlapping lime')",
      "position": [0, 100],
      "bounds": [200, 300],
      "transform": 6
    }
  ],
  "transforms": [
    {
      "id": 1,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -120, 0, 1]
      ]
    },
    {
      "id": 2,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [100, 150, 0, 1]
      ]
    },
    {
      "id": 3,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -120, 0, 1]
      ]
    },
    {
      "id": 4,
      "parent": 3,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 200, 0, 1]
      ]
    },
    {
      "id": 5,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -120, 0, 1]
      ]
    },
    {
      "id": 6,
      "parent": 5,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 200, 0, 1]
      ]
    }
  ]
}

CASE 4, scrolling y to 170 new layers will be squashed, so things repaint:
{
  "layers": [
    {
      "name": "Scrolling Contents Layer",
      "bounds": [785, 1400],
      "contentsOpaque": true,
      "backgroundColor": "#FFFFFF",
      "scrollPosition": [0, 170],
      "paintInvalidations": [
        {
          "object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-g' class='overlapping cyan'",
          "rect": [0, 600, 200, 100],
          "reason": "chunk disappeared"
        },
        {
          "object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-c' class='overlapping cyan'",
          "rect": [0, 200, 200, 100],
          "reason": "chunk appeared"
        }
      ],
      "transform": 1
    },
    {
      "name": "LayoutNGBlockFlow (positioned) DIV class='composited background'",
      "bounds": [300, 300],
      "contentsOpaque": true,
      "backgroundColor": "#D3D3D3",
      "transform": 2
    },
    {
      "name": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-d' class='overlapping lime'",
      "bounds": [200, 100],
      "contentsOpaque": true,
      "backgroundColor": "#00FF00",
      "paintInvalidations": [
        {
          "object": "LayoutNGBlockFlow (relative positioned) DIV id='paragraph-d' class='overlapping lime'",
          "rect": [0, 0, 200, 100],
          "reason": "full layer"
        }
      ],
      "transform": 4
    },
    {
      "name": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (relative positioned) DIV id='paragraph-e' class='overlapping cyan')",
      "position": [0, 100],
      "bounds": [200, 300],
      "paintInvalidations": [
        {
          "object": "Squashing Layer (first squashed layer: LayoutNGBlockFlow (relative positioned) DIV id='paragraph-e' class='overlapping cyan')",
          "rect": [0, 0, 200, 300],
          "reason": "full layer"
        }
      ],
      "transform": 6
    }
  ],
  "transforms": [
    {
      "id": 1,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -170, 0, 1]
      ]
    },
    {
      "id": 2,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [100, 150, 0, 1]
      ]
    },
    {
      "id": 3,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -170, 0, 1]
      ]
    },
    {
      "id": 4,
      "parent": 3,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 300, 0, 1]
      ]
    },
    {
      "id": 5,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, -170, 0, 1]
      ]
    },
    {
      "id": 6,
      "parent": 5,
      "transform": [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 300, 0, 1]
      ]
    }
  ]
}