This test passes if the container's scrolling contents layer (the first child of the GraphicsLayer with 4 children) draws content only on iterations 2 and 3, and its scrolling block selection layer (the child of the scrolling contents layer) draws content only on iteration 4. The scrolling block selection layer should also be much smaller than the scrolling contents layer.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum


*** iteration 1: ***

{
  "name": "Content Root Layer",
  "bounds": [800, 600],
  "children": [
    {
      "name": "LayoutView #document",
      "bounds": [800, 600],
      "contentsOpaque": true,
      "drawsContent": true,
      "children": [
        {
          "name": "LayoutBlockFlow DIV id='container'",
          "position": [8, 80],
          "bounds": [300, 500],
          "shouldFlattenTransform": false,
          "drawsContent": true,
          "children": [
            {
              "name": "Scrolling Layer",
              "bounds": [285, 485],
              "shouldFlattenTransform": false,
              "children": [
                {
                  "name": "Scrolling Contents Layer",
                  "bounds": [285, 665]
                }
              ]
            },
            {
              "name": "Overflow Controls Host Layer",
              "bounds": [300, 500],
              "children": [
                {
                  "name": "Horizontal Scrollbar Layer",
                  "position": [0, 485],
                  "bounds": [285, 15]
                },
                {
                  "name": "Vertical Scrollbar Layer",
                  "position": [285, 0],
                  "bounds": [15, 485]
                },
                {
                  "name": "Scroll Corner Layer",
                  "position": [285, 485],
                  "bounds": [15, 15],
                  "drawsContent": true
                }
              ]
            }
          ]
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 95],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 160],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV id='selection' class='scrolled'",
          "position": [23, 225],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 290],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 355],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 420],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 485],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 550],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 615],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 680],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        }
      ]
    }
  ]
}


*** iteration 2: ***

{
  "name": "Content Root Layer",
  "bounds": [785, 2706],
  "children": [
    {
      "name": "LayoutView #document",
      "bounds": [785, 2706],
      "contentsOpaque": true,
      "drawsContent": true,
      "children": [
        {
          "name": "LayoutBlockFlow DIV id='container'",
          "position": [8, 80],
          "bounds": [300, 500],
          "contentsOpaque": true,
          "shouldFlattenTransform": false,
          "drawsContent": true,
          "backgroundColor": "#0000FF",
          "children": [
            {
              "name": "Scrolling Layer",
              "bounds": [285, 485],
              "shouldFlattenTransform": false,
              "children": [
                {
                  "name": "Scrolling Contents Layer",
                  "bounds": [285, 665],
                  "drawsContent": true
                }
              ]
            },
            {
              "name": "Overflow Controls Host Layer",
              "bounds": [300, 500],
              "children": [
                {
                  "name": "Horizontal Scrollbar Layer",
                  "position": [0, 485],
                  "bounds": [285, 15]
                },
                {
                  "name": "Vertical Scrollbar Layer",
                  "position": [285, 0],
                  "bounds": [15, 485]
                },
                {
                  "name": "Scroll Corner Layer",
                  "position": [285, 485],
                  "bounds": [15, 15],
                  "drawsContent": true
                }
              ]
            }
          ]
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 95],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 160],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV id='selection' class='scrolled'",
          "position": [23, 225],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 290],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 355],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 420],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 485],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 550],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 615],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 680],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        }
      ]
    }
  ]
}


*** iteration 3: ***

{
  "name": "Content Root Layer",
  "bounds": [785, 4851],
  "children": [
    {
      "name": "LayoutView #document",
      "bounds": [785, 4851],
      "contentsOpaque": true,
      "drawsContent": true,
      "children": [
        {
          "name": "LayoutBlockFlow DIV id='container'",
          "position": [8, 80],
          "bounds": [300, 500],
          "contentsOpaque": true,
          "shouldFlattenTransform": false,
          "drawsContent": true,
          "backgroundColor": "#0000FF",
          "children": [
            {
              "name": "Scrolling Layer",
              "bounds": [285, 485],
              "shouldFlattenTransform": false,
              "children": [
                {
                  "name": "Scrolling Contents Layer",
                  "bounds": [285, 665],
                  "drawsContent": true
                }
              ]
            },
            {
              "name": "Overflow Controls Host Layer",
              "bounds": [300, 500],
              "children": [
                {
                  "name": "Horizontal Scrollbar Layer",
                  "position": [0, 485],
                  "bounds": [285, 15]
                },
                {
                  "name": "Vertical Scrollbar Layer",
                  "position": [285, 0],
                  "bounds": [15, 485]
                },
                {
                  "name": "Scroll Corner Layer",
                  "position": [285, 485],
                  "bounds": [15, 15],
                  "drawsContent": true
                }
              ]
            }
          ]
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 95],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 160],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV id='selection' class='scrolled'",
          "position": [23, 225],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 290],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 355],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 420],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 485],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 550],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 615],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 680],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        }
      ]
    }
  ]
}


*** iteration 4: ***

{
  "name": "Content Root Layer",
  "bounds": [785, 6996],
  "children": [
    {
      "name": "LayoutView #document",
      "bounds": [785, 6996],
      "contentsOpaque": true,
      "drawsContent": true,
      "children": [
        {
          "name": "LayoutBlockFlow DIV id='container'",
          "position": [8, 80],
          "bounds": [300, 500],
          "shouldFlattenTransform": false,
          "drawsContent": true,
          "children": [
            {
              "name": "Scrolling Layer",
              "bounds": [285, 485],
              "shouldFlattenTransform": false,
              "children": [
                {
                  "name": "Scrolling Contents Layer",
                  "bounds": [285, 665]
                }
              ]
            },
            {
              "name": "Overflow Controls Host Layer",
              "bounds": [300, 500],
              "children": [
                {
                  "name": "Horizontal Scrollbar Layer",
                  "position": [0, 485],
                  "bounds": [285, 15]
                },
                {
                  "name": "Vertical Scrollbar Layer",
                  "position": [285, 0],
                  "bounds": [15, 485]
                },
                {
                  "name": "Scroll Corner Layer",
                  "position": [285, 485],
                  "bounds": [15, 15],
                  "drawsContent": true
                }
              ]
            }
          ]
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 95],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 160],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV id='selection' class='scrolled'",
          "position": [23, 225],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 290],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 355],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 420],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 485],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 550],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 615],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        },
        {
          "name": "LayoutBlockFlow DIV class='scrolled'",
          "position": [23, 680],
          "bounds": [100, 50],
          "contentsOpaque": true,
          "drawsContent": true,
          "backgroundColor": "#FFA500"
        }
      ]
    }
  ]
}