contributors/aryehgregor/incoming/viewer.html

Wed, 29 Feb 2012 19:05:51 -0800

author
fantasai <fantasai.cvs@inkedblade.net>
date
Wed, 29 Feb 2012 19:05:51 -0800
changeset 2809
b047c7e7c66b
parent 2732
bad1d890dda0
child 2819
08dc6d4f8407
permissions
-rw-r--r--

Move Media Queries test suite to Approved

     1 <!doctype html>
     2 <title>Transforms reftest viewer</title>
     3 <base href="ref-2d/">
     4 <style>iframe { overflow:hidden; height:600px;width:800px }</style>
     5 <p><input type=button id=prev value=Prev onclick="prev()" disabled>
     6 <input type=button id=next value=Next onclick="next()" disabled>
     7 <p>Test: <span id=testname>(loading)</span>
     8 <p>Ref: <span id=refname>(loading)</span>
     9 <p><label><input type=radio name=toggle id=matches onclick="reset()" disabled checked> Matches</label>
    10 <label><input type=radio name=toggle id=mismatches onclick="reset()" disabled> Mismatches</label>
    11 <p><label><input type=radio name=mode id=2d onclick="initialize()" checked> 2D</label>
    12 <label><input type=radio name=mode id=3d onclick="initialize()"> 3D</label>
    13 <script>
    14 "use strict";
    15 // FIXME: Test fixed backgrounds when they become defined
    16 // https://www.w3.org/Bugs/Public/show_bug.cgi?id=15833
    17 var testNames = {
    18 	"2d": [
    19 		"abspos-1a.html",
    20 		"abspos-1b.html",
    21 		"abspos-1c.html",
    22 		"abspos-1d.html",
    23 		"abspos-1e.html",
    24 		"abspos-1f.html",
    25 		"abspos-1g.html",
    26 		"background-1a.html",
    27 		"background-1b.html",
    28 		"background-1c.html",
    29 		"background-1d.html",
    30 		"background-2a.html",
    31 		"background-2b.html",
    32 		// FIXME: Uncomment if behavior becomes defined
    33 		// https://www.w3.org/Bugs/Public/show_bug.cgi?id=15834
    34 		//"background-2c.html",
    35 		//"background-2d.html",
    36 		"compound-1a.html",
    37 		"descendant-1.html",
    38 		"display-1a.html",
    39 		"display-1b.html",
    40 		"display-1c.html",
    41 		"display-1d.html",
    42 		"generated-1a.html",
    43 		"generated-2a.html",
    44 		"iframe-1.html",
    45 		"image-1a.html",
    46 		// FIXME: Spec no longer supports these two tests
    47 		// https://www.w3.org/Bugs/Public/show_bug.cgi?id=15797
    48 		//"inherit-1a.html",
    49 		"inherit-1b.html",
    50 		"inherit-origin-1a.html",
    51 		"inherit-origin-1b.html",
    52 		"inline-1a.html",
    53 		"input-1a.html",
    54 		"input-2a.html",
    55 		"input-3a.html",
    56 		"input-4a.html",
    57 		"input-5a.html",
    58 		"input-6a.html",
    59 		"input-7a.html",
    60 		"input-8a.html",
    61 		"input-9a.html",
    62 		"input-10a.html",
    63 		"input-11a.html",
    64 		"input-12a.html",
    65 		"input-13a.html",
    66 		"input-14a.html",
    67 		"input-15a.html",
    68 		"input-16a.html",
    69 		"input-17a.html",
    70 		"input-18a.html",
    71 		"input-19a.html",
    72 		"matrix-1a.html",
    73 		"matrix-2a.html",
    74 		"matrix-3a.html",
    75 		"matrix-4a.html",
    76 		"matrix-5a.html",
    77 		"matrix-6a.html",
    78 		"matrix-7a.html",
    79 		"matrix-8a.html",
    80 		"origin-1a.html",
    81 		"origin-1b.html",
    82 		"origin-2a.html",
    83 		"origin-2b.html",
    84 		"origin-2c.html",
    85 		"origin-2d.html",
    86 		"origin-name-1a.html",
    87 		"origin-name-1b.html",
    88 		"origin-name-2a.html",
    89 		"origin-name-2b.html",
    90 		"origin-name-2c.html",
    91 		"origin-name-3a.html",
    92 		"origin-name-3b.html",
    93 		"overflow-1a.html",
    94 		"overflow-2a.html",
    95 		"percent-1a.html",
    96 		"percent-1b.html",
    97 		"percent-1c.html",
    98 		"percent-1d.html",
    99 		"percent-1e.html",
   100 		"percent-1f.html",
   101 		"percent-1g.html",
   102 		"percent-1h.html",
   103 		"propagate-inherit-boolean.html",
   104 		"rotate-1a.html",
   105 		"rotate-1b.html",
   106 		"rotate-1c.html",
   107 		"rotate-1d.html",
   108 		"rotate-1e.html",
   109 		"rotate-1f.html",
   110 		"rotate-2a.html",
   111 		// FIXME: The spec doesn't actually impose any rounding constraints just
   112 		// yet, even minimal ones.
   113 		// https://www.w3.org/Bugs/Public/show_bug.cgi?id=15709
   114 		"rounding-1a.html",
   115 		"scale-1a.html",
   116 		"scale-1b.html",
   117 		"scale-percent-1.html",
   118 		"scalex-1.html",
   119 		"scaley-1.html",
   120 		"singular-1a.html",
   121 		"skew-1a.html",
   122 		"skew-1b.html",
   123 		"skew-2a.html",
   124 		"stacking-1a.html",
   125 		"stacking-1b.html",
   126 		"stacking-1c.html",
   127 		"stacking-1d.html",
   128 		"stresstest-1.html",
   129 		// FIXME: The spec doesn't yet explicitly support these tests (but they
   130 		// match everyone).
   131 		// https://www.w3.org/Bugs/Public/show_bug.cgi?id=15815
   132 		"table-1a.html",
   133 		"table-1b.html",
   134 		"table-1c.html",
   135 		"table-2a.html",
   136 		"table-2b.html",
   137 		// FIXME: The spec here doesn't match browsers and is probably wrong.
   138 		// https://www.w3.org/Bugs/Public/show_bug.cgi?id=15943
   139 		//"table-3a.html",
   140 		//"table-3b.html",
   141 		//"table-3c.html",
   142 		//"table-4a.html",
   143 		//"table-4b.html",
   144 		//"table-4c.html",
   145 		"translate-1a.html",
   146 		"translate-1b.html",
   147 		"translate-1c.html",
   148 		"translate-1d.html",
   149 		"translate-1e.html",
   150 		"translatex-1a.html",
   151 		"translatex-1b.html",
   152 		"translatex-1c.html",
   153 		"translatex-1d.html",
   154 		"translatex-1e.html",
   155 		"translatex-2.html",
   156 		"translatey-1a.html",
   157 		"translatey-1b.html",
   158 		"translatey-1c.html",
   159 		"translatey-1d.html",
   160 		"translatey-1e.html",
   161 		"translatey-2.html",
   162 	],
   163 	"3d": [
   164 		"backface-visibility-1a.html",
   165 		"backface-visibility-1b.html",
   166 		"backface-visibility-1c.html",
   167 		"matrix3d-1a.html",
   168 		"matrix3d-2a.html",
   169 		"matrix3d-3a.html",
   170 		"matrix3d-4a.html",
   171 		"matrix3d-5a.html",
   172 		"perspective-1a.html",
   173 		"perspective-1b.html",
   174 		"perspective-1c.html",
   175 		"perspective-1d.html",
   176 		"perspective-1e.html",
   177 		"perspective-1f.html",
   178 		"perspective-1g.html",
   179 		"perspective-1h.html",
   180 		"perspective-2a.html",
   181 		"perspective-3a.html",
   182 		"perspective-3b.html",
   183 		"perspective-origin-1a.html",
   184 		"perspective-origin-1b.html",
   185 		"preserve3d-1a.html",
   186 		"preserve3d-2a.html",
   187 		"preserve3d-2b.html",
   188 		"preserve3d-2c.html",
   189 		"preserve3d-2d.html",
   190 		"preserve3d-2e.html",
   191 		"preserve3d-2f.html",
   192 		"preserve3d-2g.html",
   193 		"preserve3d-2h.html",
   194 		"preserve3d-2i.html",
   195 		// FIXME: The spec currently contradicts this one, but browsers support
   196 		// it.  https://www.w3.org/Bugs/Public/show_bug.cgi?id=15871
   197 		//"preserve3d-2j.html",
   198 		"preserve3d-3a.html",
   199 		"preserve3d-4a.html",
   200 		"rotate3d-1a.html",
   201 		"rotate3d-2a.html",
   202 		"rotatex-1a.html",
   203 		"rotatex-perspective-1a.html",
   204 		"rotatex-perspective-1b.html",
   205 		"rotatex-perspective-1c.html",
   206 		"rotatex-perspective-3a.html",
   207 		"rotatex-transformorigin-1a.html",
   208 		"rotatey-1a.html",
   209 		"scale-1a.html",
   210 		"scale-1b.html",
   211 		"scale-1c.html",
   212 		"scale-1d.html",
   213 		"scale-1e.html",
   214 		"scale-2a.html",
   215 		"scale-2b.html",
   216 		"scale-3a.html",
   217 		"sorting-1a.html",
   218 		"sorting-2a.html",
   219 		"sorting-2b.html",
   220 		"sorting-3a.html",
   221 		"sorting-3b.html",
   222 		// FIXME: Not yet actually required behavior
   223 		// https://www.w3.org/Bugs/Public/show_bug.cgi?id=15784
   224 		"sorting-4a.html",
   225 		"translate3d-1a.html",
   226 		"translatez-1a.html",
   227 		"translatez-1b.html",
   228 	]
   229 };
   231 var prefix = "transform" in document.body.style ? ""
   232 	: "msTransform" in document.body.style ? "-ms-"
   233 	: "MozTransform" in document.body.style ? "-moz-"
   234 	: "webkitTransform" in document.body.style ? "-webkit-"
   235 	: "OTransform" in document.body.style ? "-o-"
   236 	: "";
   238 var mode = "";
   239 var tests, refs;
   240 var matchTests, matchRefs;
   241 var mismatchTests, mismatchRefs;
   242 var testIdx, refIdx;
   243 var interval;
   245 initialize();
   247 function initialize() {
   248 	var newMode = document.getElementById("2d").checked
   249 		? "2d" : "3d";
   250 	if (mode == newMode) {
   251 		return;
   252 	}
   253 	mode = newMode;
   254 	tests = null;
   255 	refs = [];
   256 	matchTests = null;
   257 	matchRefs = [];
   258 	mismatchTests = null;
   259 	mismatchRefs = [];
   260 	testIdx = 0;
   261 	refIdx = 0;
   263 	if (interval !== undefined) {
   264 		clearInterval(interval);
   265 		interval = undefined;
   266 	}
   268 	document.querySelector("#testname").textContent = "(loading)";
   269 	document.querySelector("#refname").textContent = "(loading)";
   271 	[].forEach.call(document.querySelectorAll("iframe"), function(iframe) {
   272 		iframe.parentNode.removeChild(iframe);
   273 	});
   275 	// IE9 seems not to support relative URLs in <base href>
   276 	document.querySelector("base").href =
   277 		String(location).replace(/[^\/]*$/, "ref-" + mode + "/");
   279 	testNames[mode].forEach(function(testName, i) {
   280 		var test = document.createElement("iframe");
   281 		test.onload = testLoaded;
   282 		test.src = testName;
   283 		test.style.display = "none";
   284 		test.setAttribute("data-test", i);
   285 		test.setAttribute("data-not-loaded", "");
   286 		document.body.insertBefore(test, document.querySelector("p"));
   287 	});
   289 	return true;
   290 }
   292 function testLoaded(e) {
   293 	var test = e.target;
   294 	test.removeAttribute("data-not-loaded");
   296 	var matches = test.contentDocument.querySelectorAll("link[rel=match]");
   297 	if (matches.length) {
   298 		test.setAttribute("data-matches", "");
   299 	}
   300 	for (var i = 0; i < matches.length; i++) {
   301 		var ref = document.createElement("iframe");
   302 		ref.onload = refLoaded;
   303 		ref.src = matches[i].getAttribute("href");
   304 		ref.style.display = "none";
   305 		ref.setAttribute("data-test", test.getAttribute("data-test"));
   306 		ref.setAttribute("data-ref-match", i);
   307 		ref.setAttribute("data-not-loaded", "");
   308 		document.body.insertBefore(ref, document.querySelector("p"));
   309 	}
   311 	var mismatches = test.contentDocument.querySelectorAll("link[rel=mismatch]");
   312 	if (mismatches.length) {
   313 		test.setAttribute("data-mismatches", "");
   314 	}
   315 	for (var i = 0; i < mismatches.length; i++) {
   316 		var ref = document.createElement("iframe");
   317 		ref.onload = refLoaded;
   318 		ref.src = mismatches[i].getAttribute("href");
   319 		ref.style.display = "none";
   320 		ref.setAttribute("data-test", test.getAttribute("data-test"));
   321 		ref.setAttribute("data-ref-mismatch", i);
   322 		ref.setAttribute("data-not-loaded", "");
   323 		document.body.insertBefore(ref, document.querySelector("p"));
   324 	}
   326 	prefixStyles(test.contentDocument);
   327 }
   329 function refLoaded(e) {
   330 	prefixStyles(e.target.contentDocument);
   331 	e.target.removeAttribute("data-not-loaded");
   332 	conditionalLoadHandler();
   333 }
   335 function prefixStyles(doc) {
   336 	[].forEach.call(doc.querySelectorAll("[style]"), function(el) {
   337 		el.setAttribute("style",
   338 			el.getAttribute("style").replace(
   339 				/((transform(-origin|-style)?|perspective(-origin)?|backface-visibility)\s*:)/g,
   340 				prefix + "$1")
   341 		);
   342 	});
   343 	[].forEach.call(doc.querySelectorAll("style"), function(el) {
   344 		el.textContent = el.textContent
   345 			.replace(
   346 				/((transform(-origin|-style)?|perspective(-origin)?|backface-visibility)\s*:)/g,
   347 				prefix + "$1");
   348 	});
   349 	[].forEach.call(doc.querySelectorAll("iframe"), function(el) {
   350 		prefixStyles(el.contentDocument);
   351 	});
   352 }
   354 function reset() {
   355 	tests[testIdx].style.display = "none";
   356 	refs[testIdx][refIdx].style.display = "none";
   357 	testIdx = 0;
   358 	refIdx = 0;
   359 	if (document.querySelector("#matches").checked) {
   360 		tests = matchTests;
   361 		refs = matchRefs;
   362 	} else {
   363 		tests = mismatchTests;
   364 		refs = mismatchRefs;
   365 	}
   366 	document.querySelector("#testname").textContent = tests[testIdx].getAttribute("src");
   367 	document.querySelector("#refname").textContent = refs[testIdx][refIdx].getAttribute("src");
   368 	document.querySelector("#prev").disabled = true;
   369 	document.querySelector("#next").disabled = false;
   370 	return true;
   371 }
   373 function next() {
   374 	document.querySelector("#prev").disabled = false;
   375 	tests[testIdx].style.display = "none";
   376 	refs[testIdx][refIdx].style.display = "none";
   377 	if (refIdx + 1 < refs[testIdx].length) {
   378 		refIdx++;
   379 	} else {
   380 		testIdx++;
   381 		refIdx = 0;
   382 	}
   384 	if (testIdx == tests.length - 1
   385 	&& refIdx == refs[testIdx].length - 1) {
   386 		document.querySelector("#next").disabled = true;
   387 	}
   388 	document.querySelector("#testname").textContent = tests[testIdx].getAttribute("src");
   389 	document.querySelector("#refname").textContent = refs[testIdx][refIdx].getAttribute("src");
   390 	tests[testIdx].style.display = "";
   391 }
   393 function prev() {
   394 	document.querySelector("#next").disabled = false;
   395 	tests[testIdx].style.display = "none";
   396 	refs[testIdx][refIdx].style.display = "none";
   397 	if (refIdx > 0) {
   398 		refIdx--;
   399 	} else {
   400 		testIdx--;
   401 		refIdx = refs[testIdx].length - 1;
   402 	}
   403 	if (testIdx == 0 && refIdx == 0) {
   404 		document.querySelector("#prev").disabled = true;
   405 	}
   406 	document.querySelector("#testname").textContent = tests[testIdx].getAttribute("src");
   407 	document.querySelector("#refname").textContent = refs[testIdx][refIdx].getAttribute("src");
   408 	tests[testIdx].style.display = "";
   409 }
   411 // This is run once on load and once on every mode change.
   412 function conditionalLoadHandler() {
   413 	if (document.readyState != "complete") {
   414 		return;
   415 	}
   416 	if ([].some.call(document.querySelectorAll("iframe"), function(iframe) {
   417 		return iframe.hasAttribute("data-not-loaded");
   418 	})) {
   419 		return;
   420 	}
   421 	if (tests !== null) {
   422 		throw "This should be impossible: conditionalLoadHandler run multiple times";
   423 	}
   425 	matchTests = document.querySelectorAll("[data-matches]");
   426 	for (var i = 0; i < matchTests.length; i++) {
   427 		matchRefs.push(document.querySelectorAll("[data-test='" +
   428 			matchTests[i].getAttribute("data-test") + "']"
   429 			+ "[data-ref-match]"));
   430 	}
   432 	mismatchTests = document.querySelectorAll("[data-mismatches]");
   433 	for (var i = 0; i < mismatchTests.length; i++) {
   434 		mismatchRefs.push(document.querySelectorAll("[data-test='" +
   435 			mismatchTests[i].getAttribute("data-test") + "']"
   436 			+ "[data-ref-mismatch]"));
   437 	}
   439 	tests = matchTests;
   440 	refs = matchRefs;
   442 	interval = setInterval(function() {
   443 		if (tests[testIdx].style.display) {
   444 			tests[testIdx].style.display = "";
   445 			refs[testIdx][refIdx].style.display = "none";
   446 		} else {
   447 			tests[testIdx].style.display = "none";
   448 			refs[testIdx][refIdx].style.display = "";
   449 		}
   450 	}, 100);
   452 	document.querySelector("#matches").disabled = false;
   453 	document.querySelector("#mismatches").disabled = false;
   455 	reset();
   456 }
   458 window.onload = conditionalLoadHandler;
   459 </script>

mercurial