Test case details

Preparation Code

<script src="http://code.jquery.com/jquery-1.7.2.min.js"> </script> <script src="http://code.angularjs.org/angular-1.0.1.min.js"> </script> <script src=" http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"> </script> <script> var Ctrl = function($scope) { $scope.data = ""; $scope.numberofChanges1 = 0; $scope.numberofChanges2 = 0; $scope.numberofChanges3 = 0; $scope.numberofChanges4 = 0; $scope.numberofChanges5 = 0; $scope.numberofChanges6 = 0; $scope.numberofChanges7 = 0; $scope.numberofChanges8 = 0; $scope.numberofChanges9 = 0; $scope.numberofChanges10 = 0; $scope.$watch('data', function(a,b,c){ $scope.numberofChanges1++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges2++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges3++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges4++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges5++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges6++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges7++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges8++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges9++; }); $scope.$watch('data', function(a,b,c){ $scope.numberofChanges10++; }); } angular.element(document).ready(function() { var ang_scope = $('#angList').scope(); ANGclear = function() { ang_scope.data = "OMGOMGOMG"; }; ANGpush = function() { ang_scope.data += "OMGOMGOMG"; ang_scope.$apply(); }; }); </script> <script> var KOData = ko.observable(""); var KOUpdates1 = ko.observable(0); var KOUpdates2 = ko.observable(0); var KOUpdates3 = ko.observable(0); var KOUpdates4 = ko.observable(0); var KOUpdates5 = ko.observable(0); var KOUpdates6 = ko.observable(0); var KOUpdates7 = ko.observable(0); var KOUpdates8 = ko.observable(0); var KOUpdates9 = ko.observable(0); var KOUpdates10 = ko.observable(0); KOData.subscribe(function(){ KOUpdates1(KOUpdates1() + 1); }); KOData.subscribe(function(){ KOUpdates2(KOUpdates2() + 1); }); KOData.subscribe(function(){ KOUpdates3(KOUpdates3() + 1); }); KOData.subscribe(function(){ KOUpdates4(KOUpdates4() + 1); }); KOData.subscribe(function(){ KOUpdates5(KOUpdates5() + 1); }); KOData.subscribe(function(){ KOUpdates6(KOUpdates6() + 1); }); KOData.subscribe(function(){ KOUpdates7(KOUpdates7() + 1); }); KOData.subscribe(function(){ KOUpdates8(KOUpdates8() + 1); }); KOData.subscribe(function(){ KOUpdates9(KOUpdates9() + 1); }); KOData.subscribe(function(){ KOUpdates10(KOUpdates10() + 1); }); var KOviewmodel = {data: KOData, updates1: KOUpdates1, updates2: KOUpdates2, updates3: KOUpdates3, updates4: KOUpdates4, updates5: KOUpdates5, updates6: KOUpdates6, updates7: KOUpdates7, updates8: KOUpdates8, updates9: KOUpdates9, updates10: KOUpdates10}; ko.applyBindings(KOviewmodel, document.getElementById('koapp')); var KOclear = function (){ KOData(""); }; var KOpush = function (){ var old = KOData() KOData(old += "OMGOMGOMG"); }; </script> <!-- Angular --> <div style="width: 200px; height: 300px; overflow: hidden" ng-app> Angular: <span ng-controller="Ctrl" id="angList"> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> <span> {{numberofChanges1}}</span> <span> {{numberofChanges2}}</span> <span> {{numberofChanges3}}</span> <span> {{numberofChanges4}}</span> <span> {{numberofChanges5}}</span> <span> {{numberofChanges6}}</span> <span> {{numberofChanges7}}</span> <span> {{numberofChanges8}}</span> <span> {{numberofChanges9}}</span> <span> {{numberofChanges10}}</span> AngularTestArea Data: {{data}} </span> </div> <!-- Knockout --> <div style="width: 200px; height: 300px; overflow: hidden" id="koapp"> Knockout: <span> KnockoutTestArea Subscriber Updates: <span data-bind="text: data"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates1"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates2"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates3"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates4"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates5"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates6"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates7"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates8"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates9"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> <span data-bind="text: updates10"></span> </span> </div>

Test cases

Test #1

ANGclear(); for (var i = 0; i < 10; i++) { ANGpush(); }

Test #2

KOclear(); for (var i = 0; i < 10; i++) { KOpush(); }

Test #3

ANGclear(); for (var i = 0; i < 100; i++) { ANGpush(); }

Test #4

KOclear(); for (var i = 0; i < 100; i++) { KOpush(); }

Test #5

ANGclear(); for (var i = 0; i < 500; i++) { ANGpush(); }

Test #6

KOclear(); for (var i = 0; i < 500; i++) { KOpush(); }

Test #7

ANGclear(); for (var i = 0; i < 1000; i++) { ANGpush(); }

Test #8

KOclear(); for (var i = 0; i < 1000; i++) { KOpush(); }