Index: LayoutTests/compositing/visibility/visibility-composited-incremental-update.html |
diff --git a/LayoutTests/compositing/visibility/visibility-composited-incremental-update.html b/LayoutTests/compositing/visibility/visibility-composited-incremental-update.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8389ef78179b8e6e9eb31aa1bad4e08e54af43fb |
--- /dev/null |
+++ b/LayoutTests/compositing/visibility/visibility-composited-incremental-update.html |
@@ -0,0 +1,80 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <style> |
+ .set { |
+ position: absolute; |
+ top: 8px; |
+ } |
+ .box { |
+ height: 100px; |
+ width: 100px; |
+ background-color: blue; |
+ } |
+ |
+ .hidden { |
+ visibility: hidden; |
+ } |
+ |
+ .container.hidden { |
+ outline: 4px solid red; |
+ } |
+ |
+ .visible { |
+ visibility: visible; |
+ } |
+ .should-be-hidden { |
+ background-color: red !important; |
+ } |
+ .should-be-visible { |
+ background-color: green !important; |
+ } |
+ .composited { |
+ -webkit-transform: translateZ(1px); |
+ } |
+ |
+ .visible-indicator { |
+ background-color: green; |
+ } |
+ |
+ .hidden-indicator { |
+ background-color: red; |
+ } |
+ </style> |
+ <script> |
+ if (window.testRunner) |
+ testRunner.waitUntilDone(); |
+ requestAnimationFrame(function() { |
+ requestAnimationFrame(function() { |
+ document.getElementById('target').classList.add('visible'); |
+ setTimeout(function() { |
+ if (window.testRunner) |
+ testRunner.notifyDone(); |
+ }); |
+ }); |
+ }); |
+ </script> |
+</head> |
+<body> |
+ <!-- Tests that making a child of a composited layer visible causes that child to actually paint --> |
+ <div class="set"> |
+ <div class="hidden-indicator box"></div> |
+ <div class="visible-indicator box"></div> |
+ <div class="hidden-indicator box"></div> |
+ </div> |
+ |
+ <div class="set"> |
+ <div class="hidden container composited"> |
+ <div class="visible box should-be-visible"></div> |
+ </div> |
+ |
+ <div class="hidden container composited"> |
+ <div class="box should-be-hidden"></div> |
+ </div> |
+ |
+ <div class="hidden container composited"> |
+ <div id="target" class="box should-be-visible"></div> |
+ </div> |
+ </div> |
+</body> |
+</html> |