Skip to content

Commit

Permalink
Some animations can cause InteractionRegion layers to disappear
Browse files Browse the repository at this point in the history 
https://bugs.webkit.org/show_bug.cgi?id=266436
<rdar://119496239>

Reviewed by Mike Wyrzykowski.

When a GraphicsLayer stops requiring a tiled layer, we change its layer
type but skip updating its coverage.
This results in a freshly created PlatformCALayer without any visibleRect
set. Which in turn causes all descendent InteractionRegion layers to get
culled.

Always update the coverage when changing layer type if Interaction
Regions are enabled.

* Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::changeLayerTypeTo):
Always add CoverageRectChanged to the uncommitted changes list when
Interaction Regions are enabled.

* LayoutTests/interaction-region/interaction-layers-culling-layer-type-change-expected.txt: Added.
* LayoutTests/interaction-region/interaction-layers-culling-layer-type-change.html: Added.
Add a new LayerTree-based test covering the specific scenario where an element temporarily
requires a tiled layer during an animation.

Canonical link: https://commits.webkit.org/272101@main
  • Loading branch information
@etiennesegonzac
etiennesegonzac committed Dec 15, 2023
1 parent 70d3574 commit 694cea7
Show file tree
Hide file tree
Showing 3 changed files with 419 additions and 4 deletions.
324 changes: 324 additions & 0 deletions LayoutTests/interaction-region/interaction-layers-culling-layer-type-change-expected.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,324 @@

(CALayer tree root
(layer bounds [x: 0 y: 0 width: 800 height: 600])
(layer position [x: 400 y: 400])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 600])
(layer position [x: 400 y: 400])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 713])
(layer anchorPoint [x: 0 y: 0])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 713])
(layer anchorPoint [x: 0 y: 0])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 713])
(layer position [x: 400 y: 400])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 713])
(layer position [x: 400 y: 400])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 713])
(layer anchorPoint [x: 0 y: 0])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 713])
(layer anchorPoint [x: 0 y: 0])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 0 height: 0])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 512])
(layer anchorPoint [x: 0 y: 0]))
(
(layer bounds [x: 0 y: 0 width: 800 height: 201])
(layer position [x: 0 y: 0])
(layer anchorPoint [x: 0 y: 0]))))
(
(layer bounds [x: 0 y: 0 width: 0 height: 0])
(layer anchorPoint [x: 0 y: 0])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 800 height: 700])
(layer position [x: 400 y: 400])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 0 height: 0])
(sublayers
(
(type 0)
(layer bounds [x: 0 y: 0 width: 700 height: 36])
(layer position [x: 400 y: 400])
(layer cornerRadius 8))
(
(type 0)
(layer bounds [x: 0 y: 0 width: 700 height: 36])
(layer position [x: 400 y: 400])
(layer cornerRadius 8))
(
(type 0)
(layer bounds [x: 0 y: 0 width: 700 height: 36])
(layer position [x: 400 y: 400])
(layer cornerRadius 8))))))))))))))))))
(
(layer bounds [x: 0 y: 0 width: 0 height: 0]))))
(
(layer bounds [x: 0 y: 0 width: 0 height: 0])
(layer anchorPoint [x: 0 y: 0]))
(
(layer bounds [x: 0 y: 0 width: 800 height: 12])
(layer position [x: 400 y: 400])
(layer zPosition 1000)
(layer opacity 0)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 116 height: 32])
(layer position [x: 400 y: 400]))
(
(layer bounds [x: 0 y: 0 width: 800 height: 12])
(layer position [x: 400 y: 400])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 96 height: 12])
(layer position [x: 400 y: 400])
(layer cornerRadius 6)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 96 height: 12])
(layer position [x: 48 y: 48])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 96 height: 12])
(layer position [x: 48 y: 48])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 96 height: 12])
(layer position [x: 48 y: 48])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 96 height: 12])
(layer position [x: 48 y: 48])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 96 height: 12])
(layer position [x: 48 y: 48])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 96 height: 12])
(layer position [x: 48 y: 48])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 5.999999999999995 height: 90])
(layer position [x: 48 y: 48])
(layer opacity 0)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 5.999999999999995 height: 90])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer opacity 0.15)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 2.9999999999999973 y: 2.9999999999999973])
(layer cornerRadius 1))))))
(
(layer bounds [x: 0 y: 0 width: 90 height: 6])
(layer position [x: 48 y: 48])
(layer opacity 0.15)
(layer cornerRadius 3))))))))
(
(layer bounds [x: 0 y: 0 width: 12 height: 600])
(layer position [x: 791 y: 791])
(layer zPosition 1000)
(layer opacity 0)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 32 height: 116])
(layer position [x: 6 y: 6]))
(
(layer bounds [x: 0 y: 0 width: 12 height: 600])
(layer position [x: 6 y: 6])
(sublayers
(
(layer bounds [x: 0 y: 0 width: 12 height: 96])
(layer position [x: 6 y: 6])
(layer cornerRadius 6)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 12 height: 96])
(layer position [x: 6 y: 6])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 12 height: 96])
(layer position [x: 6 y: 6])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 12 height: 96])
(layer position [x: 6 y: 6])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 12 height: 96])
(layer position [x: 6 y: 6])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 12 height: 96])
(layer position [x: 6 y: 6])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 12 height: 96])
(layer position [x: 6 y: 6])
(layer cornerRadius 6))
(
(layer bounds [x: 0 y: 0 width: 6 height: 90])
(layer position [x: 6 y: 6])
(layer opacity 0)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 6 height: 90])
(layer position [x: 3 y: 3])
(layer opacity 0.15)
(sublayers
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))
(
(layer bounds [x: 0 y: 0 width: 4 height: 2])
(layer position [x: 3 y: 3])
(layer cornerRadius 1))))))
(
(layer bounds [x: 0 y: 0 width: 6 height: 75.5])
(layer position [x: 6 y: 6])
(layer opacity 0.15)
(layer cornerRadius 3))))))))))))
Loading

0 comments on commit 694cea7

Please sign in to comment.