--- a/autoimplementation.html Tue Apr 12 15:54:14 2011 -0600
+++ b/autoimplementation.html Tue Apr 12 16:06:24 2011 -0600
@@ -43,219 +43,10 @@
<h1>Table of Contents</h1>
<ul>
- <li><a href=#backcolor>backcolor</a>
- <li><a href=#bold>bold</a>
- <li><a href=#createlink>createlink</a>
- <li><a href=#fontname>fontname</a>
- <li><a href=#fontsize>fontsize</a>
- <li><a href=#forecolor>forecolor</a>
- <li><a href=#hilitecolor>hilitecolor</a>
- <li><a href=#inserthorizontalrule>inserthorizontalrule</a>
- <li><a href=#insertimage>insertimage</a>
- <li><a href=#italic>italic</a>
- <li><a href=#removeformat>removeformat</a>
- <li><a href=#strikethrough>strikethrough</a>
- <li><a href=#subscript>subscript</a>
- <li><a href=#superscript>superscript</a>
- <li><a href=#underline>underline</a>
- <li><a href=#unlink>unlink</a>
</ul>
<button onclick="for (var command in tests) runTests(command)">Run all tests</button>
-<div id=backcolor>
-<h1>backcolor</h1>
-
-<button onclick="runTests('backcolor')">Run tests</button>
-
-<p>Tests set the color to "#FF8888". <strong>Note:</strong> No spec has yet
-been written, so the spec column does nothing.
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('backcolor')">Add test</button>
-</div>
-
-<div id=bold>
-<h1>bold</h1>
-
-<button onclick="runTests('bold')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('bold')">Add test</button>
-</div>
-
-<div id=createlink>
-<h1>createlink</h1>
-
-<button onclick="runTests('createlink')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('createlink')">Add test</button>
-</div>
-
-<div id=fontname>
-<h1>fontname</h1>
-
-<button onclick="runTests('fontname')">Run tests</button>
-
-<p>Note that the body's font-family is "serif".
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('fontname')">Add test</button>
-</div>
-
-<div id=fontsize>
-<h1>fontsize</h1>
-
-<button onclick="runTests('fontsize')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('fontsize')">Add test</button>
-</div>
-
-<div id=forecolor>
-<h1>forecolor</h1>
-
-<button onclick="runTests('forecolor')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('forecolor')">Add test</button>
-</div>
-
-<div id=hilitecolor>
-<h1>hilitecolor</h1>
-
-<button onclick="runTests('hilitecolor')">Run tests</button>
-
-<p>In IE we run backColor instead of hiliteColor.
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('hilitecolor')">Add test</button>
-</div>
-
-<div id=inserthorizontalrule>
-<h1>inserthorizontalrule</h1>
-
-<button onclick="runTests('inserthorizontalrule')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('inserthorizontalrule')">Add test</button>
-</div>
-
-<div id=insertimage>
-<h1>insertimage</h1>
-
-<button onclick="runTests('insertimage')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label><label>New test value: <input></label>
-<button onclick="addTest('insertimage')">Add test</button>
-</div>
-
-<div id=italic>
-<h1>italic</h1>
-
-<button onclick="runTests('italic')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('italic')">Add test</button>
-</div>
-
-<div id=removeformat>
-<h1>removeformat</h1>
-
-<button onclick="runTests('removeformat')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('removeformat')">Add test</button>
-</div>
-
-<div id=strikethrough>
-<h1>strikethrough</h1>
-
-<button onclick="runTests('strikethrough')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('strikethrough')">Add test</button>
-</div>
-
-<div id=subscript>
-<h1>subscript</h1>
-
-<button onclick="runTests('subscript')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('subscript')">Add test</button>
-</div>
-
-<div id=superscript>
-<h1>superscript</h1>
-
-<button onclick="runTests('superscript')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('superscript')">Add test</button>
-</div>
-
-<div id=underline>
-<h1>underline</h1>
-
-<button onclick="runTests('underline')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('underline')">Add test</button>
-</div>
-
-<div id=unlink>
-<h1>unlink</h1>
-
-<button onclick="runTests('unlink')">Run tests</button>
-
-<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>
-
-<p><label>New test input: <input></label>
-<button onclick="addTest('unlink')">Add test</button>
-</div>
-
<script src=implementation.js></script>
<script>
var tests = {
@@ -1020,6 +811,37 @@
insertimage: "/img/lion.svg",
};
+var notes = {
+ backcolor: '<strong>Note:</strong> No spec has yet been written, so the spec column does nothing.',
+ fontname: 'Note that the body\'s font-family is "serif".',
+ hilitecolor: 'In IE we run backColor instead of hiliteColor.',
+};
+
+var doubleTestingCommands = ["backcolor", "bold", "italic", "strikethrough",
+ "underline", "forecolor", "fontname", "fontsize", "subscript",
+ "superscript"];
+
+// Set up all the HTML automatically so I can add new commands to test without
+// copy-pasting in five places
+var toc = document.querySelector("ul");
+for (var command in tests) {
+ var li = document.createElement("li");
+ li.innerHTML = "<a href=#" + command + ">" + command + "</a>";
+ toc.appendChild(li);
+
+ var div = document.createElement("div");
+ div.id = command;
+ div.innerHTML = "<h1>" + command + "</h1>"
+ + "<button onclick=\"runTests('" + command + "')\">Run tests</button>"
+ + (command in notes ? "<p>" + notes[command] : "")
+ + "<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>"
+ + (command in doubleTestingCommands ? "<table border=1><tr><th>Input <th>Spec <th>Browser <th>Same?</table>" : "")
+ + "<p><label>New test input: <input></label>"
+ + (command in defaultValues ? "<label>New test value: <input></label>" : "")
+ + "<button onclick=\"addTest('" + command + "')\">Add test</button>";
+ document.body.appendChild(div);
+}
+
function runTests(command) {
var runTestsButton = document.querySelector("#" + command + " button");
runTestsButton.parentNode.removeChild(runTestsButton);
@@ -1047,9 +869,7 @@
}
function addTest(command) {
- var doubleTesting = ["backcolor", "bold", "italic", "strikethrough",
- "underline", "forecolor", "fontname", "fontsize", "subscript",
- "superscript"].indexOf(command) != -1;
+ var doubleTesting = doubleTestingCommands.indexOf(command) != -1;
// I tried to feature-detect styleWithCSS, but it was too much of a pain,
// with Firefox randomly throwing exceptions all over the place. So I'm