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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types.html

Issue 731293006: Implement style invalidation tracking (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: More tests Created 6 years 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
« LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html ('K') | « LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations-expected.txt ('k') | LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types-expected.txt » ('j') | Source/devtools/front_end/timeline/TimelineModel.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types.html
diff --git a/LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types.html b/LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types.html
new file mode 100644
index 0000000000000000000000000000000000000000..1022feadaa70d4ad7aa6132dc7f16e6b5f1103f0
--- /dev/null
+++ b/LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types.html
@@ -0,0 +1,157 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script src="../../http/tests/inspector/inspector-test.js"></script>
+<script src="../../http/tests/inspector/timeline-test.js"></script>
+<script>
+function changeClassNameAndDisplay(callback)
+{
+ requestAnimationFrame(function() {
+ document.getElementById("testElementOne").className = "red";
+ document.getElementById("testElementTwo").className = "red";
+ var forceStyleRecalc = document.body.offsetTop;
+ if (window.testRunner)
+ testRunner.displayAsyncThen(callback);
+ });
+}
+
+function changeIdWithoutStyleChangeAndDisplay(callback)
+{
+ requestAnimationFrame(function() {
+ document.getElementById("testElementOne").id = "testElementNoMatchingStyles1";
+ document.getElementById("testElementTwo").id = "testElementNoMatchingStyles2";
+ var forceStyleRecalc = document.body.offsetTop;
+ if (window.testRunner)
+ testRunner.displayAsyncThen(callback);
+ });
+}
+
+function changeIdAndDisplay(callback)
+{
+ requestAnimationFrame(function() {
+ document.getElementById("testElementNoMatchingStyles1").id = "testElementFour";
+ document.getElementById("testElementNoMatchingStyles2").id = "testElementFive";
+ var forceStyleRecalc = document.body.offsetTop;
+ if (window.testRunner)
+ testRunner.displayAsyncThen(callback);
+ });
+}
+
+function changeStyleAttributeAndDisplay(callback)
+{
+ requestAnimationFrame(function() {
+ document.getElementById("testElementFour").setAttribute("style", "color: purple");
+ document.getElementById("testElementFive").setAttribute("style", "color: pink");
+ var forceStyleRecalc = document.body.offsetTop;
+ if (window.testRunner)
+ testRunner.displayAsyncThen(callback);
+ });
+}
+
+function changeAttributeAndDisplay(callback)
+{
+ requestAnimationFrame(function() {
+ document.getElementById("testElementFour").setAttribute("dir", "rtl");
+ document.getElementById("testElementFive").setAttribute("dir", "rtl");
+ var forceStyleRecalc = document.body.offsetTop;
+ if (window.testRunner)
+ testRunner.displayAsyncThen(callback);
+ });
+}
+
+function changePseudoAndDisplay(callback)
+{
+ requestAnimationFrame(function() {
+ var element1 = document.getElementById("testElementFour");
+ var element2 = document.getElementById("testElementFive");
+ eventSender.mouseMoveTo(element2.offsetLeft + 2, element2.offsetTop + 2);
+ requestAnimationFrame(function() {
+ var forceStyleRecalc = document.body.offsetTop;
+ if (window.testRunner)
+ testRunner.displayAsyncThen(callback);
+ });
+ });
+}
+
+function test()
+{
+ var currentPanel = WebInspector.inspectorView.currentPanel();
+ InspectorTest.assertEquals(currentPanel._panelName, "timeline", "Current panel should be the timeline.");
+ Runtime.experiments.enableForTest("timelineInvalidationTracking");
+
+ InspectorTest.runTestSuite([
+ function testClassName(next)
+ {
+ InspectorTest.invokeAsyncWithTimeline("changeClassNameAndDisplay", function() {
+ var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
+ InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters);
+ next();
+ });
+ },
+
+ function testIdWithoutStyleChange(next)
+ {
+ InspectorTest.invokeAsyncWithTimeline("changeIdWithoutStyleChangeAndDisplay", function() {
+ var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
+ InspectorTest.assertTrue(record === undefined, "There should be no style recalculation for an id change without style changes.");
+ next();
+ });
+ },
+
+ function testId(next)
+ {
+ InspectorTest.invokeAsyncWithTimeline("changeIdAndDisplay", function() {
+ var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
+ InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters);
+ next();
+ });
+ },
+
+ function testStyleAttributeChange(next)
+ {
+ InspectorTest.invokeAsyncWithTimeline("changeStyleAttributeAndDisplay", function() {
+ var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
+ InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters);
+ next();
+ });
+ },
+
+ function testAttributeChange(next)
+ {
+ InspectorTest.invokeAsyncWithTimeline("changeAttributeAndDisplay", function() {
+ var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
+ InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters);
+ next();
+ });
+ },
+
+ function testPseudoChange(next)
+ {
+ InspectorTest.invokeAsyncWithTimeline("changePseudoAndDisplay", function() {
+ var record = InspectorTest.findFirstTimelineRecord(WebInspector.TimelineModel.RecordType.RecalculateStyles);
+ InspectorTest.addArray(record._event.invalidationTrackingEvents, InspectorTest.InvalidationFormatters);
+ next();
+ });
+ }
+ ]);
+}
+</script>
+<style>
+ #testElementFour { color: yellow; }
+ #testElementFive { color: teal; }
+ #testElementFour:hover { color: azure; }
+ #testElementFive:hover { color: cornsilk; }
+
+ .testHolder > .red { background-color: red; }
+ .testHolder > .green { background-color: green; }
+ .testHolder > .blue { background-color: blue; }
+ .testHolder > .snow { background-color: snow; }
+</style>
+</head>
+<body onload="runTest()">
+<p>Tests the Timeline API instrumentation of style recalc invalidator invalidations.</p>
+<div class="testHolder">
+<div id="testElementOne">PASS</div><div id="testElementTwo">PASS</div><div id="testElementThree">PASS</div>
+</div>
+</body>
+</html>
« LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations.html ('K') | « LayoutTests/inspector/tracing/timeline-paint-and-multiple-style-invalidations-expected.txt ('k') | LayoutTests/inspector/tracing/timeline-style-recalc-all-invalidator-types-expected.txt » ('j') | Source/devtools/front_end/timeline/TimelineModel.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698