Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(38)

Unified Diff: LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html

Issue 182383019: Should not repaint if a CSS property change can be composited (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: as your wish! (remove table) Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html
diff --git a/LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html b/LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html
new file mode 100644
index 0000000000000000000000000000000000000000..49ea94926d466079ed0db0a616751aaa793f340d
--- /dev/null
+++ b/LayoutTests/compositing/repaint/should-not-repaint-composited-styles.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<style>
+ .spacer {
+ width: 100px;
+ height: 100px;
+ }
+
+ .clipping-container {
+ -webkit-transform: translateZ(0);
+ position: relative;
+ left: 0;
+ top: 0;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ .child {
+ width: 150px;
+ height: 150px;
+ border: 1px black solid;
+ background-color: yellow;
+ }
+
+ .composited {
+ -webkit-transform: translateZ(0);
+ }
+</style>
+<style id="alt1">
+ .clipping-container { width: 100px; }
+ .position { position: relative; }
+ .zindex { z-index: 0; }
+ .opacity { opacity: 0.99; }
+ .transform { -webkit-transform: translateZ(10px); }
+ .filter { -webkit-filter: invert(70%); }
+</style>
+<style id="alt2">
+ .clipping-container { width: 100%; }
+ .position { position: static; }
+ .zindex { z-index: 1; }
+ .opacity { opacity: 0.5; }
+ .transform { -webkit-transform: translateZ(20px); }
+ .filter { -webkit-filter: invert(100%); }
+</style>
+<script src="../../resources/run-after-display.js"></script>
+<script>
+ var alt1 = document.getElementById('alt1');
+ var alt2 = document.getElementById('alt2');
+ alt2.disabled = true;
+
+ function toggle() {
+ if (alt1.disabled) {
+ alt1.disabled = false;
+ alt2.disabled = true;
+ } else {
+ alt2.disabled = false;
+ alt1.disabled = true;
+ }
+ }
+
+ function doTest() {
+ internals.startTrackingRepaints(document);
+ toggle();
+ document.getElementById("console").textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
+ testRunner.notifyDone();
+ }
+
+ if (window.testRunner && window.internals) {
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ runAfterDisplay(doTest);
+ }
+</script>
+<h1>position change with composited child</h1>
+<div class="spacer"><div class="clipping-container position"><div class="child composited"></div></div></div>
+<h1>position change with non-composited child</h1>
+<div class="spacer"><div class="clipping-container position"><div class="child"></div></div></div>
+<h1>z-index change with composited child</h1>
+<div class="spacer"><div class="clipping-container zindex"><div class="child composited"></div></div></div>
+<h1>z-index change with non-composited child</h1>
+<div class="spacer"><div class="clipping-container zindex"><div class="child"></div></div></div>
+<h1>opacity change with composited child</h1>
+<div class="spacer"><div class="clipping-container opacity"><div class="child composited"></div></div></div>
+<h1>opacity change with non-composited child</h1>
+<div class="spacer"><div class="clipping-container opacity"><div class="child"></div></div></div>
+<h1>transform change with composited child</h1>
+<div class="spacer"><div class="clipping-container transform"><div class="child composited"></div></div></div>
+<h1>transform change with non-composited child</h1>
+<div class="spacer"><div class="clipping-container transform"><div class="child"></div></div></div>
+<h1>filter change with composited child</h1>
+<div class="spacer"><div class="clipping-container filter"><div class="child composited"></div></div></div>
+<h1>filter change with non-composited child</h1>
+<div class="spacer"><div class="clipping-container filter"><div class="child"></div></div></div>
+<pre id="console"></pre>

Powered by Google App Engine
This is Rietveld 408576698