Index: LayoutTests/compositing/will-change/will-change-contents-suppresses-compositing.html |
diff --git a/LayoutTests/compositing/will-change/will-change-contents-suppresses-compositing.html b/LayoutTests/compositing/will-change/will-change-contents-suppresses-compositing.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..d3f9d67ef3356d03b53ee2c9e0057b5a8f051527 |
--- /dev/null |
+++ b/LayoutTests/compositing/will-change/will-change-contents-suppresses-compositing.html |
@@ -0,0 +1,74 @@ |
+<!DOCTYPE html> |
+<style> |
+ .shouldNotComposite { |
+ width: 30px; |
+ height: 30px; |
+ margin: 4px; |
+ background-color: blue; |
+ } |
+ |
+ .positioned { |
+ position: relative; |
+ left: 40px; |
+ } |
+ |
+ #willChangeContents { |
+ will-change: contents; |
+ } |
+ |
+ #willChangeOpacity { |
+ will-change: opacity; |
+ } |
+ |
+ #willChangeTransform { |
+ will-change: -webkit-transform; |
+ } |
+ |
+ #willChangeTop { |
+ will-change: top; |
+ } |
+ |
+ #willChangeLeft { |
+ will-change: left; |
+ } |
+ |
+ #animateOpacity { |
+ -webkit-animation: fade-in-out 0.1s linear infinite alternate; |
+ } |
+ |
+ @-webkit-keyframes fade-in-out { from { opacity: 0.3; } to { opacity: 0.9; } } |
+</style> |
+ |
+<script> |
+ if (window.testRunner) { |
+ testRunner.dumpAsText(); |
+ testRunner.waitUntilDone(); |
+ } |
+ |
+ function animationEventListener() { |
+ if (window.testRunner) { |
+ document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document); |
+ testRunner.notifyDone(); |
+ } |
+ } |
+ |
+ onload = function() { |
+ document.getElementById('animateOpacity').addEventListener('webkitAnimationIteration', animationEventListener); |
+ }; |
+</script> |
+<div id="willChangeContents"> |
+ <div id="willChangeOpacity" class="shouldNotComposite"></div> |
+ <div> |
+ <div id="willChangeLeft" class="positioned shouldNotComposite"></div> |
+ </div> |
+ <div> |
+ <div> |
+ <div id="willChangeTransform" class="shouldNotComposite"> |
+ <div id="willChangeTop" class="positioned shouldNotComposite"></div> |
+ </div> |
+ </div> |
+ </div> |
+ <div id="animateOpacity" class="shouldNotComposite"></div> |
+</div> |
+ |
+<pre id="layertree"></pre> |