chromium/src/third_party/blink/web_tests/fast/harness/archived-results-dashboard.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <style>

 html {
     height: 100%;
 }

 body {
     margin: 1.0em;
     font-family: Helvetica, sans-serif;
     font-size: 11pt;
     display: -webkit-flex;
     -webkit-flex-direction: column;
     height: 100%;
 }

 body > * {
     margin-left: 4px;
     margin-top: 4px;
 }

 h1 {
     font-size: 150%;
     margin-top: 1.5em;
     text-align: center;
 }

 a {
     text-decoration: none;
 }

 table {
     position: relative;
     top: 100px;
 }

 th {
     background: rgb(200, 200, 200);
     border-radius: 5px;
 }

 td {
     padding: 1px 4px;
     vertical-align: middle;
     min-width: 20px;
     height: 25px;
     border: 1px solid rgb(200, 200, 200);
     border-radius: 5px;
 }

 input[type=text] {
     border: 2px solid rgb(128, 128, 128);
     font-size: 120%;
     height: 30px;
     margin-bottom: 1.0em;
     margin-top: 1.0em;
     margin-left: 1.0em;
     padding-left: 0.8em;
     width: 500px;
 }

 input[type=checkbox] {
     padding: 0.1em;
     width: 20px;
     height: 20px;
 }

 .rerun-button {
     background: rgb(66, 184, 221);
     border-radius: 5px;
     font-size: 120%;
     height: 40px;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     width: 150px;
 }

 .rerun-button:hover {
     background: rgb(80, 200, 250);
 }

 .result-cell, .test-pass, .test-fail, .test-skip, .test-run{
     border: 0px;
     border-radius: 5px;
 }

 .test-pass {
     background-color: rgb(143, 223, 95);
 }

 .test-fail {
     background-color: rgb(233, 128, 128);
 }

 .test-skip {
     background-color: rgb(255, 255, 255);
 }

 .test-run {
     background-color: rgb(255, 252, 108);
 }

 .log {
     font-family: "Courier New";
     display: block;
     position: relative;
 }

 .stdio-href {
     color: grey;
     font-weight: bold;
     text-decoration: underline;
 }

 .stdio-href:hover {
     color:black;
 }

 .odd-row {
     background: rgb(66, 184, 221);
 }

 .even-row {
     background: rgb(200, 200, 200);
 }

 .toolbox {
     display: block;
     position: fixed;
     padding: 4px;
     top: 10px;
     right: 10px;
     z-index: 9999;
 }

 .toolbox span {
     color: rgb(104, 104, 104);
     position: absolute;
     text-align: right;
     top: 30px;
     left: 570px;
     width: 100px;
 }

 </style>
 <script>
 var g_state;
 function globalState()
 {
     if (!g_state) {
         g_state = {
             results: {}
         }
     }
     return g_state;
 }

 function ADD_RESULTS(input)
 {
     globalState().results = input;
 }
 </script>
 <script src="archived_results.json"></script>
 <script>
 function processGlobalStateFor(testObject)
 {
     var table = document.getElementById('results-table');
     var row = table.insertRow(-1);
     if (table.rows.length % 2 == 0)
         row.className = 'even-row';
     else
         row.className = 'odd-row';
     var checkboxcell = row.insertCell(-1);
     var checkbox = document.createElement("input");
     checkbox.setAttribute('type','checkbox');
     checkboxcell.appendChild(checkbox);
     var cell = row.insertCell(-1);
     cell.innerHTML = testObject.name;
     for (var result in testObject.archived_results) {
         var res = testObject.archived_results[result];
         var cell = row.insertCell(-1);
         if( res == 'PASS')
             cell.className = 'test-pass';
         else if( res == 'SKIP')
             cell.className = 'test-skip';
         else
             cell.className = 'test-fail';
         var hrefElement = document.createElement("a");
         hrefElement.href = globalState().results.result_links[result];
         hrefElement.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;';
         cell.appendChild(hrefElement);
     }


 }
 function forEachTest(handler, opt_tree, opt_prefix)
 {
     var tree = opt_tree || globalState().results.tests;
     var prefix = opt_prefix || '';

     for (var key in tree) {
         var newPrefix = prefix ? (prefix + '/' + key) : key;
         if ('archived_results' in tree[key]) {
             var testObject = tree[key];
             testObject.name = newPrefix;
             handler(testObject);
         } else
             forEachTest(handler, tree[key], newPrefix);
     }
 }
 function getTests()
 {
     var table = document.getElementById('results-table');
     var testCount = table.rows.length;
     var tests_list = {
         tests : []
     };
     for(var i = 2; i < testCount; i++) {
         var selected = table.rows[i].cells[0].getElementsByTagName("input")[0];
         if(selected.checked) {
             var test = table.rows[i].cells[1].innerHTML;
             tests_list.tests.push(test);
         }
     }
     return tests_list;
 }
 function rerun()
 {
     var log = document.getElementById('log');
     var testList = JSON.stringify(getTests());
     var logText = document.createElement('p');
     logText.innerHTML = 'Re running the tests';
     logText.className = 'test-run';
     var stdioIframe = document.createElement("IFRAME");
     stdioIframe.style.display = 'none';
     stdioIframe.width = window.innerWidth;
     stdioIframe.height = '100px';
     stdioIframe.onload = function () {
             stdioIframe.contentWindow.scrollTo(0,stdioIframe.contentWindow.document.scrollingElement.scrollHeight);
     }
     var stdio = document.createElement("a");
     stdio.innerHTML = '<p>stdio<p>';
     stdio.className = 'stdio-href';
     stdio.onclick = function() {
         if(stdioIframe.style.display == 'none')
             stdioIframe.style.display = 'block';
         else
             stdioIframe.style.display = 'none';

     };
     log.appendChild(logText);
     log.appendChild(stdio);
     log.appendChild(stdioIframe);
     if (testList == '')
         alert('Please select atlest one Test');
     else {
         xmlhttp = new XMLHttpRequest();
         var url ='http://localhost:9630/';
         xmlhttp.open('POST', url, true);
         xmlhttp.onerror = function() {
             logText.innerHTML = 'Please run the server using "blink_tool.py layout-test-server"';
             logText.className = 'test-fail';
             alert('Server offline');
         }
         xmlhttp.setRequestHeader("Content-type", "application/json");
         xmlhttp.onreadystatechange = function() {
             if(xmlhttp.readyState > 0) {
                 stdioIframe.srcdoc = xmlhttp.responseText;
             }
             if(xmlhttp.readyState == 4) {
                 logText.innerHTML = 'Tests Re-run done Reloading this page';
                 logText.className = 'test-pass';
                 location.reload();
             }
         }
         xmlhttp.send(testList);
     }
 }
 function checkalltests()
 {
     var value = document.getElementById("check_all").checked;
     var table = document.getElementById("results-table");
     var length = table.rows.length;
     for (var i = 2; i < length; i++) {
         var checkbox = table.rows[i].cells[0].getElementsByTagName("input")[0];
         var disabled = checkbox.disabled;
         if(!disabled)
             checkbox.checked = value;
     }

 }

 function searchTable(filterExp)
 {
     var table = document.getElementById('results-table');
     var testCount = table.rows.length;
     var tests_list = {
         tests : []
     };
     var searchCount = 0;
     for(var i = 2; i < testCount; i++) {
         var cellContent = table.rows[i].cells[1].innerHTML;
         var checkbox = table.rows[i].cells[0].getElementsByTagName("input")[0];
         var index = cellContent.search(filterExp);
         if (index < 0) {
             table.rows[i].style.display = 'none';
             checkbox.checked = false;
             checkbox.disabled = true;
         }
         else {
             table.rows[i].style.display = '';
             checkbox.disabled = false;
             searchCount += 1;
         }
     }
     return searchCount;
 }
 function applyfilter()
 {
     var filterString = document.getElementById('applyfilter').value;
     var searchCount = document.getElementById('searchcount');
     var filterExp = new RegExp(filterString, "i");
     var count = searchTable(filterExp);
     if(filterString == '') {
         searchCount.innerHTML = '';
         return;
     }
     var totalCount = document.getElementById('results-table').rows.length - 2;
     searchCount.innerHTML = count + '/' + totalCount;
 }

 function createTableHeader()
 {
     var count = globalState().results.result_links.length;
     var tableHeader= '<table id=results-table><thead><tr>' +
         '<th rowspan="2">' +
             '<input type="checkbox" name="checkall" id="check_all" onclick="checkalltests()"></input>' +
         '</th>' +
         '<th rowspan="2" text-align:left;>Tests</th>' +
         '<th colspan= '+ count +'>Latest &#8594; Oldest</th> </tr><tr>';
     for( var i = 0; i < count; i++)
         tableHeader += '<th>'+ (i+1) +'</th>';
     tableHeader += '</tr></thead></table>';
     document.body.innerHTML += tableHeader;
 }

 function generatePage()
 {
     createTableHeader();
     forEachTest(processGlobalStateFor);
 }

 </script>
 <!-- To run the tests -->
 <script src="resources/archived-results-dashboard-test.js"></script>
 <body onload="generatePage()">
     <h1>Dashboard</h1>
     <div id=log class="log"></div>
     <div class="toolbox">
         <button onclick=rerun() class="rerun-button">Re Run Tests</button>
         <input type="text" id=applyfilter oninput="applyfilter()" placeholder="Search via regular expression"></input>
         <span id=searchcount></span>
     </div>
 </body>
 </html>
	<!DOCTYPE html>
	<style>

	html {
	height: 100%;
	}

	body {
	margin: 1.0em;
	font-family: Helvetica, sans-serif;
	font-size: 11pt;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	height: 100%;
	}

	body > * {
	margin-left: 4px;
	margin-top: 4px;
	}

	h1 {
	font-size: 150%;
	margin-top: 1.5em;
	text-align: center;
	}

	a {
	text-decoration: none;
	}

	table {
	position: relative;
	top: 100px;
	}

	th {
	background: rgb(200, 200, 200);
	border-radius: 5px;
	}

	td {
	padding: 1px 4px;
	vertical-align: middle;
	min-width: 20px;
	height: 25px;
	border: 1px solid rgb(200, 200, 200);
	border-radius: 5px;
	}

	input[type=text] {
	border: 2px solid rgb(128, 128, 128);
	font-size: 120%;
	height: 30px;
	margin-bottom: 1.0em;
	margin-top: 1.0em;
	margin-left: 1.0em;
	padding-left: 0.8em;
	width: 500px;
	}

	input[type=checkbox] {
	padding: 0.1em;
	width: 20px;
	height: 20px;
	}

	.rerun-button {
	background: rgb(66, 184, 221);
	border-radius: 5px;
	font-size: 120%;
	height: 40px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	width: 150px;
	}

	.rerun-button:hover {
	background: rgb(80, 200, 250);
	}

	.result-cell, .test-pass, .test-fail, .test-skip, .test-run{
	border: 0px;
	border-radius: 5px;
	}

	.test-pass {
	background-color: rgb(143, 223, 95);
	}

	.test-fail {
	background-color: rgb(233, 128, 128);
	}

	.test-skip {
	background-color: rgb(255, 255, 255);
	}

	.test-run {
	background-color: rgb(255, 252, 108);
	}

	.log {
	font-family: "Courier New";
	display: block;
	position: relative;
	}

	.stdio-href {
	color: grey;
	font-weight: bold;
	text-decoration: underline;
	}

	.stdio-href:hover {
	color:black;
	}

	.odd-row {
	background: rgb(66, 184, 221);
	}

	.even-row {
	background: rgb(200, 200, 200);
	}

	.toolbox {
	display: block;
	position: fixed;
	padding: 4px;
	top: 10px;
	right: 10px;
	z-index: 9999;
	}

	.toolbox span {
	color: rgb(104, 104, 104);
	position: absolute;
	text-align: right;
	top: 30px;
	left: 570px;
	width: 100px;
	}

	</style>
	<script>
	var g_state;
	function globalState()
	{
	if (!g_state) {
	g_state = {
	results: {}
	}
	}
	return g_state;
	}

	function ADD_RESULTS(input)
	{
	globalState().results = input;
	}
	</script>
	<script src="archived_results.json"></script>
	<script>
	function processGlobalStateFor(testObject)
	{
	var table = document.getElementById('results-table');
	var row = table.insertRow(-1);
	if (table.rows.length % 2 == 0)
	row.className = 'even-row';
	else
	row.className = 'odd-row';
	var checkboxcell = row.insertCell(-1);
	var checkbox = document.createElement("input");
	checkbox.setAttribute('type','checkbox');
	checkboxcell.appendChild(checkbox);
	var cell = row.insertCell(-1);
	cell.innerHTML = testObject.name;
	for (var result in testObject.archived_results) {
	var res = testObject.archived_results[result];
	var cell = row.insertCell(-1);
	if( res == 'PASS')
	cell.className = 'test-pass';
	else if( res == 'SKIP')
	cell.className = 'test-skip';
	else
	cell.className = 'test-fail';
	var hrefElement = document.createElement("a");
	hrefElement.href = globalState().results.result_links[result];
	hrefElement.innerHTML = '    ';
	cell.appendChild(hrefElement);
	}


	}
	function forEachTest(handler, opt_tree, opt_prefix)
	{
	var tree = opt_tree \|\| globalState().results.tests;
	var prefix = opt_prefix \|\| '';

	for (var key in tree) {
	var newPrefix = prefix ? (prefix + '/' + key) : key;
	if ('archived_results' in tree[key]) {
	var testObject = tree[key];
	testObject.name = newPrefix;
	handler(testObject);
	} else
	forEachTest(handler, tree[key], newPrefix);
	}
	}
	function getTests()
	{
	var table = document.getElementById('results-table');
	var testCount = table.rows.length;
	var tests_list = {
	tests : []
	};
	for(var i = 2; i < testCount; i++) {
	var selected = table.rows[i].cells[0].getElementsByTagName("input")[0];
	if(selected.checked) {
	var test = table.rows[i].cells[1].innerHTML;
	tests_list.tests.push(test);
	}
	}
	return tests_list;
	}
	function rerun()
	{
	var log = document.getElementById('log');
	var testList = JSON.stringify(getTests());
	var logText = document.createElement('p');
	logText.innerHTML = 'Re running the tests';
	logText.className = 'test-run';
	var stdioIframe = document.createElement("IFRAME");
	stdioIframe.style.display = 'none';
	stdioIframe.width = window.innerWidth;
	stdioIframe.height = '100px';
	stdioIframe.onload = function () {
	stdioIframe.contentWindow.scrollTo(0,stdioIframe.contentWindow.document.scrollingElement.scrollHeight);
	}
	var stdio = document.createElement("a");
	stdio.innerHTML = '<p>stdio<p>';
	stdio.className = 'stdio-href';
	stdio.onclick = function() {
	if(stdioIframe.style.display == 'none')
	stdioIframe.style.display = 'block';
	else
	stdioIframe.style.display = 'none';

	};
	log.appendChild(logText);
	log.appendChild(stdio);
	log.appendChild(stdioIframe);
	if (testList == '')
	alert('Please select atlest one Test');
	else {
	xmlhttp = new XMLHttpRequest();
	var url ='http://localhost:9630/';
	xmlhttp.open('POST', url, true);
	xmlhttp.onerror = function() {
	logText.innerHTML = 'Please run the server using "blink_tool.py layout-test-server"';
	logText.className = 'test-fail';
	alert('Server offline');
	}
	xmlhttp.setRequestHeader("Content-type", "application/json");
	xmlhttp.onreadystatechange = function() {
	if(xmlhttp.readyState > 0) {
	stdioIframe.srcdoc = xmlhttp.responseText;
	}
	if(xmlhttp.readyState == 4) {
	logText.innerHTML = 'Tests Re-run done Reloading this page';
	logText.className = 'test-pass';
	location.reload();
	}
	}
	xmlhttp.send(testList);
	}
	}
	function checkalltests()
	{
	var value = document.getElementById("check_all").checked;
	var table = document.getElementById("results-table");
	var length = table.rows.length;
	for (var i = 2; i < length; i++) {
	var checkbox = table.rows[i].cells[0].getElementsByTagName("input")[0];
	var disabled = checkbox.disabled;
	if(!disabled)
	checkbox.checked = value;
	}

	}

	function searchTable(filterExp)
	{
	var table = document.getElementById('results-table');
	var testCount = table.rows.length;
	var tests_list = {
	tests : []
	};
	var searchCount = 0;
	for(var i = 2; i < testCount; i++) {
	var cellContent = table.rows[i].cells[1].innerHTML;
	var checkbox = table.rows[i].cells[0].getElementsByTagName("input")[0];
	var index = cellContent.search(filterExp);
	if (index < 0) {
	table.rows[i].style.display = 'none';
	checkbox.checked = false;
	checkbox.disabled = true;
	}
	else {
	table.rows[i].style.display = '';
	checkbox.disabled = false;
	searchCount += 1;
	}
	}
	return searchCount;
	}
	function applyfilter()
	{
	var filterString = document.getElementById('applyfilter').value;
	var searchCount = document.getElementById('searchcount');
	var filterExp = new RegExp(filterString, "i");
	var count = searchTable(filterExp);
	if(filterString == '') {
	searchCount.innerHTML = '';
	return;
	}
	var totalCount = document.getElementById('results-table').rows.length - 2;
	searchCount.innerHTML = count + '/' + totalCount;
	}

	function createTableHeader()
	{
	var count = globalState().results.result_links.length;
	var tableHeader= '<table id=results-table><thead><tr>' +
	'<th rowspan="2">' +
	'<input type="checkbox" name="checkall" id="check_all" onclick="checkalltests()"></input>' +
	'</th>' +
	'<th rowspan="2" text-align:left;>Tests</th>' +
	'<th colspan= '+ count +'>Latest → Oldest</th> </tr><tr>';
	for( var i = 0; i < count; i++)
	tableHeader += '<th>'+ (i+1) +'</th>';
	tableHeader += '</tr></thead></table>';
	document.body.innerHTML += tableHeader;
	}

	function generatePage()
	{
	createTableHeader();
	forEachTest(processGlobalStateFor);
	}

	</script>
	<!-- To run the tests -->
	<script src="resources/archived-results-dashboard-test.js"></script>
	<body onload="generatePage()">
	<h1>Dashboard</h1>
	<div id=log class="log"></div>
	<div class="toolbox">
	<button onclick=rerun() class="rerun-button">Re Run Tests</button>
	<input type="text" id=applyfilter oninput="applyfilter()" placeholder="Search via regular expression"></input>
	<span id=searchcount></span>
	</div>
	</body>
	</html>