Ignore CSS for subscript/superscript
authorAryeh Gregor <AryehGregor+gitcommit@gmail.com>
Fri, 05 Aug 2011 11:50:14 -0600
changeset 498 0642e8783522
parent 497 ced5e9bfc246
child 499 8f862352eefe
Ignore CSS for subscript/superscript

This degrades behavior for input markup like <span
style=vertical-align:sub>, but it's simpler, it matches all non-WebKit
browsers, and Ryosuke is in favor, so I'm sold.

Reported-By: Ryosuke Niwa
Report-URL: http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-August/032809.html
editing.html
implementation.js
source.html
--- a/editing.html	Fri Aug 05 11:23:26 2011 -0600
+++ b/editing.html	Fri Aug 05 11:50:14 2011 -0600
@@ -1497,10 +1497,6 @@
   <code class=external data-anolis-spec=html title="the style attribute"><a href=http://www.whatwg.org/html/#the-style-attribute>style</a></code>, and the <code class=external data-anolis-spec=html title="the style attribute"><a href=http://www.whatwg.org/html/#the-style-attribute>style</a></code> attribute sets exactly one CSS property
   (including invalid or unrecognized properties), which is "font-style".
 
-  <li>It is a <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sub</a></code> or <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sup</a></code> element with exactly one attribute, which is
-  <code class=external data-anolis-spec=html title="the style attribute"><a href=http://www.whatwg.org/html/#the-style-attribute>style</a></code>, and the <code class=external data-anolis-spec=html title="the style attribute"><a href=http://www.whatwg.org/html/#the-style-attribute>style</a></code> attribute sets exactly one CSS property
-  (including invalid or unrecognized properties), which is "vertical-align".
-
   <li>It is an <code class=external data-anolis-spec=html title="the a element"><a href=http://www.whatwg.org/html/#the-a-element>a</a></code>, <code class=external data-anolis-spec=html title=font><a href=http://www.whatwg.org/html/#font>font</a></code>, or <code class=external data-anolis-spec=html title="the span element"><a href=http://www.whatwg.org/html/#the-span-element>span</a></code> element with exactly one attribute,
   which is <code class=external data-anolis-spec=html title="the style attribute"><a href=http://www.whatwg.org/html/#the-style-attribute>style</a></code>, and the <code class=external data-anolis-spec=html title="the style attribute"><a href=http://www.whatwg.org/html/#the-style-attribute>style</a></code> attribute sets exactly one CSS property
   (including invalid or unrecognized properties), and that property is not
@@ -1655,18 +1651,17 @@
       <p class=comments>Firefox 6.0a2 ignores vertical-align for this purpose,
       and only cares about &lt;sub&gt; and &lt;sup&gt; tags themselves.  Opera 11.11
       is similar, and in fact behaves like that even for commands like bold.
-      The spec follows Chrome 14 dev, mainly because WebKit itself will produce
-      spans with vertical-align sub or super, and we want to handle them
-      correctly.
-
-      <p>If <var title="">node</var>'s "vertical-align" property has <a href=http://dev.w3.org/csswg/cssom/#resolved-value>resolved value</a> "sub",
-      set <var title="">affected by subscript</var> to true.
-
-      <li>Otherwise, if <var title="">node</var>'s "vertical-align" property has
-      <a href=http://dev.w3.org/csswg/cssom/#resolved-value>resolved value</a> "super", set <var title="">affected by superscript</var> to true.
-
-      <li>Otherwise, if <var title="">node</var>'s "vertical-align" property has
-      <a href=http://dev.w3.org/csswg/cssom/#resolved-value>resolved value</a> other than "baseline", return the string "other".
+      The spec originally followed Chrome 14 dev, mainly because WebKit itself
+      will produce spans with vertical-align sub or super, and we want to
+      handle them correctly.  However, Ryosuke <a href=http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-August/032809.html>informs</a>
+      me that WebKit's behavior here is viewed as <a href="https://bugs.webkit.org/show_bug.cgi?id=11089">a bug</a>, so I
+      changed it to match Gecko/Opera.
+
+      <p>If <var title="">node</var> is a <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sub</a></code>, set <var title="">affected by subscript</var>
+      to true.
+
+      <li>Otherwise, if <var title="">node</var> is a <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sup</a></code>, set <var title="">affected by
+      superscript</var> to true.
 
       <li>Set <var title="">node</var> to its <a class=external data-anolis-spec=domcore href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-tree-parent title=concept-tree-parent>parent</a>.
     </ol>
@@ -1674,11 +1669,11 @@
     <li>If <var title="">affected by subscript</var> and <var title="">affected by
     superscript</var> are both true, return the string "mixed".
 
-    <li>If <var title="">affected by subscript</var> is true, return "sub".
-
-    <li>If <var title="">affected by superscript</var> is true, return "super".
-
-    <li>Return "baseline".
+    <li>If <var title="">affected by subscript</var> is true, return "subscript".
+
+    <li>If <var title="">affected by superscript</var> is true, return "superscript".
+
+    <li>Return null.
   </ol>
 
   <li>If <var title="">command</var> is "strikethrough", and the "text-decoration"
@@ -1716,13 +1711,9 @@
   <ol>
     <li>If <var title="">element</var> is not an <a href=#inline-node>inline node</a>, return null.
 
-    <li>If <var title="">element</var> has a <code class=external data-anolis-spec=html title="the style attribute"><a href=http://www.whatwg.org/html/#the-style-attribute>style</a></code> attribute set, and that attribute
-    has the effect of setting "vertical-align", return the value that it sets
-    "vertical-align" to.
-
-    <li>If <var title="">element</var> is a <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sup</a></code>, return "super".
-
-    <li>If <var title="">element</var> is a <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sub</a></code>, return "sub".
+    <li>If <var title="">element</var> is a <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sup</a></code>, return "superscript".
+
+    <li>If <var title="">element</var> is a <code class=external data-anolis-spec=html title="the sub and sup elements"><a href=http://www.whatwg.org/html/#the-sub-and-sup-elements>sub</a></code>, return "subscript".
 
     <li>Return null.
   </ol>
@@ -2339,20 +2330,20 @@
   Gecko and contradicting WebKit.  This is because &lt;span
   value="vertical-align: sub/super"&gt;, the obvious equivalent (and what WebKit
   uses), behaves quite differently: it doesn't reduce font-size, which is ugly.
+  WebKit's behavior is <a href="https://bugs.webkit.org/show_bug.cgi?id=11089">a
+  bug</a> anyway.
 
   <p>If <var title="">command</var> is "subscript" or "superscript" and <var title="">new
-  value</var> is "sub", let <var title="">new parent</var> be the result of calling
-  <code class=external data-anolis-spec=domcore title=dom-Document-createElement><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createelement>createElement("sub")</a></code> on the
-  <code class=external data-anolis-spec=domcore title=dom-Node-ownerDocument><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-ownerdocument>ownerDocument</a></code> of <var title="">node</var>.
+  value</var> is "subscript", let <var title="">new parent</var> be the result of
+  calling <code class=external data-anolis-spec=domcore title=dom-Document-createElement><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createelement>createElement("sub")</a></code> on the <code class=external data-anolis-spec=domcore title=dom-Node-ownerDocument><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-ownerdocument>ownerDocument</a></code> of <var title="">node</var>.
 
   <li>If <var title="">command</var> is "subscript" or "superscript" and <var title="">new
-  value</var> is "super", let <var title="">new parent</var> be the result of calling
-  <code class=external data-anolis-spec=domcore title=dom-Document-createElement><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createelement>createElement("sup")</a></code> on the
-  <code class=external data-anolis-spec=domcore title=dom-Node-ownerDocument><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-ownerdocument>ownerDocument</a></code> of <var title="">node</var>.
+  value</var> is "superscript", let <var title="">new parent</var> be the result of
+  calling <code class=external data-anolis-spec=domcore title=dom-Document-createElement><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createelement>createElement("sup")</a></code> on the <code class=external data-anolis-spec=domcore title=dom-Node-ownerDocument><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-ownerdocument>ownerDocument</a></code> of <var title="">node</var>.
 
   <li>If <var title="">new parent</var> is null, let <var title="">new parent</var> be the result
-  of calling <code class=external data-anolis-spec=domcore title=dom-Document-createElement><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createelement>createElement("span")</a></code> on the
-  <code class=external data-anolis-spec=domcore title=dom-Node-ownerDocument><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-ownerdocument>ownerDocument</a></code> of <var title="">node</var>.
+  of calling <code class=external data-anolis-spec=domcore title=dom-Document-createElement><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createelement>createElement("span")</a></code> on the <code class=external data-anolis-spec=domcore title=dom-Node-ownerDocument><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-ownerdocument>ownerDocument</a></code> of
+  <var title="">node</var>.
 
   <li>
   <p class=comments>This preserves boundary points correctly, as usual.
@@ -3366,19 +3357,19 @@
   <li>Call <code title=queryCommandState()><a href=#querycommandstate()>queryCommandState("subscript")</a></code>, and let
   <var title="">state</var> be the result.
 
-  <li><a href="#set-the-selection's-value">Set the selection's value</a> to "baseline".
+  <li><a href="#set-the-selection's-value">Set the selection's value</a> to null.
 
   <li>If <var title="">state</var> is false, <a href="#set-the-selection's-value">set the selection's value</a> to
-  "sub".
+  "subscript".
 </ol>
 
 <p><a href=#indeterminate>Indeterminate</a>: True if either among <a href=#editable>editable</a>
 <code class=external data-anolis-spec=domcore><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#text>Text</a></code> nodes that are <a href=#effectively-contained>effectively contained</a> in the <a href=#active-range>active
 range</a>, there is at least one with <a href=#effective-command-value>effective command value</a>
-"sub" and at least one with some other <a href=#effective-command-value>effective command value</a>; or
-if there is some <a href=#editable>editable</a> <code class=external data-anolis-spec=domcore><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#text>Text</a></code> node <a href=#effectively-contained>effectively
-contained</a> in the <a href=#active-range>active range</a> with <a href=#effective-command-value>effective command
-value</a> "mixed".  Otherwise false.
+"subscript" and at least one with some other <a href=#effective-command-value>effective command
+value</a>; or if there is some <a href=#editable>editable</a> <code class=external data-anolis-spec=domcore><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#text>Text</a></code> node
+<a href=#effectively-contained>effectively contained</a> in the <a href=#active-range>active range</a> with
+<a href=#effective-command-value>effective command value</a> "mixed".  Otherwise false.
 
 <p class=comments> For &lt;sup&gt;&lt;sub&gt;foo&lt;/sub&gt;&lt;/sup&gt;, Firefox 6.0a2 and
 Opera 11.11 say the state is true for both superscript and subscript, and
@@ -3391,9 +3382,7 @@
 matches what happens in other indeterminate situations, so it's fair to
 consider it indeterminate.
 
-<p><a href=#inline-command-activated-values>Inline command activated values</a>: "sub"
-
-<p><a href=#relevant-css-property>Relevant CSS property</a>: "vertical-align"
+<p><a href=#inline-command-activated-values>Inline command activated values</a>: "subscript"
 
 
 <h3 id=the-superscript-command><span class=secno>7.18 </span><dfn>The <code title="">superscript</code> command</dfn></h3>
@@ -3404,23 +3393,21 @@
   <li>Call <code title=queryCommandState()><a href=#querycommandstate()>queryCommandState("superscript")</a></code>, and let
   <var title="">state</var> be the result.
 
-  <li><a href="#set-the-selection's-value">Set the selection's value</a> to "baseline".
+  <li><a href="#set-the-selection's-value">Set the selection's value</a> to null.
 
   <li>If <var title="">state</var> is false, <a href="#set-the-selection's-value">set the selection's value</a> to
-  "super".
+  "superscript".
 </ol>
 
 <p><a href=#indeterminate>Indeterminate</a>: True if either among <a href=#editable>editable</a>
 <code class=external data-anolis-spec=domcore><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#text>Text</a></code> nodes that are <a href=#effectively-contained>effectively contained</a> in the <a href=#active-range>active
 range</a>, there is at least one with <a href=#effective-command-value>effective command value</a>
-"super" and at least one with some other <a href=#effective-command-value>effective command value</a>;
-or if there is some <a href=#editable>editable</a> <code class=external data-anolis-spec=domcore><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#text>Text</a></code> node <a href=#effectively-contained>effectively
-contained</a> in the <a href=#active-range>active range</a> with <a href=#effective-command-value>effective command
-value</a> "mixed".  Otherwise false.
-
-<p><a href=#inline-command-activated-values>Inline command activated values</a>: "super"
-
-<p><a href=#relevant-css-property>Relevant CSS property</a>: "vertical-align"
+"superscript" and at least one with some other <a href=#effective-command-value>effective command
+value</a>; or if there is some <a href=#editable>editable</a> <code class=external data-anolis-spec=domcore><a href=http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#text>Text</a></code> node
+<a href=#effectively-contained>effectively contained</a> in the <a href=#active-range>active range</a> with
+<a href=#effective-command-value>effective command value</a> "mixed".  Otherwise false.
+
+<p><a href=#inline-command-activated-values>Inline command activated values</a>: "superscript"
 
 
 <h3 id=the-underline-command><span class=secno>7.19 </span><dfn>The <code title="">underline</code> command</dfn></h3>
--- a/implementation.js	Fri Aug 05 11:23:26 2011 -0600
+++ b/implementation.js	Fri Aug 05 11:50:14 2011 -0600
@@ -1749,16 +1749,6 @@
 		return true;
 	}
 
-	// "It is a sub or sub element with exactly one attribute, which is style,
-	// and the style attribute sets exactly one CSS property (including invalid
-	// or unrecognized properties), which is "vertical-align"."
-	if ((node.tagName == "SUB" || node.tagName == "SUP")
-	&& node.hasAttribute("style")
-	&& node.style.length == 1
-	&& node.style.verticalAlign != "") {
-		return true;
-	}
-
 	// "It is an a, font, or span element with exactly one attribute, which is
 	// style, and the style attribute sets exactly one CSS property (including
 	// invalid or unrecognized properties), and that property is not
@@ -1926,18 +1916,13 @@
 		while (isInlineNode(node)) {
 			var verticalAlign = getComputedStyle(node).verticalAlign;
 
-			// "If node's "vertical-align" property has resolved value "sub",
-			// set affected by subscript to true."
-			if (verticalAlign == "sub") {
+			// "If node is a sub, set affected by subscript to true."
+			if (isHtmlElement(node, "sub")) {
 				affectedBySubscript = true;
-			// "Otherwise, if node's "vertical-align" property has resolved
-			// value "super", set affected by superscript to true."
-			} else if (verticalAlign == "super") {
+			// "Otherwise, if node is a sup, set affected by superscript to
+			// true."
+			} else if (isHtmlElement(node, "sup")) {
 				affectedBySuperscript = true;
-			// "Otherwise, if node's "vertical-align" property has resolved
-			// value other than "baseline", return the string "other"."
-			} else if (verticalAlign != "baseline") {
-				return "other";
 			}
 
 			// "Set node to its parent."
@@ -1950,18 +1935,18 @@
 			return "mixed";
 		}
 
-		// "If affected by subscript is true, return "sub"."
+		// "If affected by subscript is true, return "subscript"."
 		if (affectedBySubscript) {
-			return "sub";
-		}
-
-		// "If affected by superscript is true, return "super"."
+			return "subscript";
+		}
+
+		// "If affected by superscript is true, return "superscript"."
 		if (affectedBySuperscript) {
-			return "super";
-		}
-
-		// "Return "baseline"."
-		return "baseline";
+			return "superscript";
+		}
+
+		// "Return null."
+		return null;
 	}
 
 	// "If command is "strikethrough", and the "text-decoration" property of
@@ -2028,21 +2013,14 @@
 			return null;
 		}
 
-		// "If element has a style attribute set, and that attribute has
-		// the effect of setting "vertical-align", return the value that it
-		// sets "vertical-align" to."
-		if (element.style.verticalAlign != "") {
-			return element.style.verticalAlign;
-		}
-
-		// "If element is a sup, return "super"."
-		if (isHtmlElement(element, "SUP")) {
-			return "super";
-		}
-
-		// "If element is a sub, return "sub"."
-		if (isHtmlElement(element, "SUB")) {
-			return "sub";
+		// "If element is a sup, return "superscript"."
+		if (isHtmlElement(element, "sup")) {
+			return "superscript";
+		}
+
+		// "If element is a sub, return "subscript"."
+		if (isHtmlElement(element, "sub")) {
+			return "subscript";
 		}
 
 		// "Return null."
@@ -2675,19 +2653,19 @@
 		newParent.size = cssSizeToLegacy(newValue);
 	}
 
-	// "If command is "subscript" or "superscript" and new value is "sub", let
-	// new parent be the result of calling createElement("sub") on the
-	// ownerDocument of node."
+	// "If command is "subscript" or "superscript" and new value is
+	// "subscript", let new parent be the result of calling
+	// createElement("sub") on the ownerDocument of node."
 	if ((command == "subscript" || command == "superscript")
-	&& newValue == "sub") {
+	&& newValue == "subscript") {
 		newParent = node.ownerDocument.createElement("sub");
 	}
 
-	// "If command is "subscript" or "superscript" and new value is "super",
-	// let new parent be the result of calling createElement("sup") on the
-	// ownerDocument of node."
+	// "If command is "subscript" or "superscript" and new value is
+	// "superscript", let new parent be the result of calling
+	// createElement("sup") on the ownerDocument of node."
 	if ((command == "subscript" || command == "superscript")
-	&& newValue == "super") {
+	&& newValue == "superscript") {
 		newParent = node.ownerDocument.createElement("sup");
 	}
 
@@ -3380,28 +3358,27 @@
 		// "Call queryCommandState("subscript"), and let state be the result."
 		var state = myQueryCommandState("subscript");
 
-		// "Set the selection's value to "baseline"."
-		setSelectionValue("subscript", "baseline");
-
-		// "If state is false, set the selection's value to "sub"."
+		// "Set the selection's value to null."
+		setSelectionValue("subscript", null);
+
+		// "If state is false, set the selection's value to "subscript"."
 		if (!state) {
-			setSelectionValue("subscript", "sub");
+			setSelectionValue("subscript", "subscript");
 		}
 	}, indeterm: function() {
 		// "True if either among editable Text nodes that are effectively
 		// contained in the active range, there is at least one with effective
-		// command value "sub" and at least one with some other effective
+		// command value "subscript" and at least one with some other effective
 		// command value; or if there is some editable Text node effectively
 		// contained in the active range with effective command value "mixed".
 		// Otherwise false."
 		var nodes = getAllEffectivelyContainedNodes(getActiveRange(), function(node) {
 			return isEditable(node) && node.nodeType == Node.TEXT_NODE;
 		});
-		return (nodes.some(function(node) { return getEffectiveCommandValue(node, "subscript") == "sub" })
-			&& nodes.some(function(node) { return getEffectiveCommandValue(node, "subscript") != "sub" }))
+		return (nodes.some(function(node) { return getEffectiveCommandValue(node, "subscript") == "subscript" })
+			&& nodes.some(function(node) { return getEffectiveCommandValue(node, "subscript") != "subscript" }))
 			|| nodes.some(function(node) { return getEffectiveCommandValue(node, "subscript") == "mixed" });
-	}, inlineCommandActivatedValues: ["sub"],
-	relevantCssProperty: "verticalAlign"
+	}, inlineCommandActivatedValues: ["subscript"],
 };
 
 //@}
@@ -3413,29 +3390,28 @@
 		// result."
 		var state = myQueryCommandState("superscript");
 
-		// "Set the selection's value to "baseline"."
-		setSelectionValue("superscript", "baseline");
-
-		// "If state is false, set the selection's value to "super"."
+		// "Set the selection's value to null."
+		setSelectionValue("superscript", null);
+
+		// "If state is false, set the selection's value to "superscript"."
 		if (!state) {
-			setSelectionValue("superscript", "super");
+			setSelectionValue("superscript", "superscript");
 		}
 	}, indeterm: function() {
 		// "True if either among editable Text nodes that are effectively
 		// contained in the active range, there is at least one with effective
-		// command value "super" and at least one with some other effective
-		// command value; or if there is some editable Text node effectively
-		// contained in the active range with effective command value "mixed".
-		// Otherwise false."
+		// command value "superscript" and at least one with some other
+		// effective command value; or if there is some editable Text node
+		// effectively contained in the active range with effective command
+		// value "mixed".  Otherwise false."
 		var nodes = getAllEffectivelyContainedNodes(getActiveRange(),
 				function(node) {
 			return isEditable(node) && node.nodeType == Node.TEXT_NODE;
 		});
-		return (nodes.some(function(node) { return getEffectiveCommandValue(node, "superscript") == "super" })
-			&& nodes.some(function(node) { return getEffectiveCommandValue(node, "superscript") != "super" }))
+		return (nodes.some(function(node) { return getEffectiveCommandValue(node, "superscript") == "superscript" })
+			&& nodes.some(function(node) { return getEffectiveCommandValue(node, "superscript") != "superscript" }))
 			|| nodes.some(function(node) { return getEffectiveCommandValue(node, "superscript") == "mixed" });
-	}, inlineCommandActivatedValues: ["super"],
-	relevantCssProperty: "verticalAlign"
+	}, inlineCommandActivatedValues: ["superscript"],
 };
 
 //@}
--- a/source.html	Fri Aug 05 11:23:26 2011 -0600
+++ b/source.html	Fri Aug 05 11:50:14 2011 -0600
@@ -1468,10 +1468,6 @@
   [[style]], and the [[style]] attribute sets exactly one CSS property
   (including invalid or unrecognized properties), which is "font-style".
 
-  <li>It is a [[sub]] or [[sup]] element with exactly one attribute, which is
-  [[style]], and the [[style]] attribute sets exactly one CSS property
-  (including invalid or unrecognized properties), which is "vertical-align".
-
   <li>It is an [[a]], [[font]], or [[span]] element with exactly one attribute,
   which is [[style]], and the [[style]] attribute sets exactly one CSS property
   (including invalid or unrecognized properties), and that property is not
@@ -1627,18 +1623,19 @@
       <p class=comments>Firefox 6.0a2 ignores vertical-align for this purpose,
       and only cares about &lt;sub> and &lt;sup> tags themselves.  Opera 11.11
       is similar, and in fact behaves like that even for commands like bold.
-      The spec follows Chrome 14 dev, mainly because WebKit itself will produce
-      spans with vertical-align sub or super, and we want to handle them
-      correctly.
-
-      <p>If <var>node</var>'s "vertical-align" property has [[resval]] "sub",
-      set <var>affected by subscript</var> to true.
-
-      <li>Otherwise, if <var>node</var>'s "vertical-align" property has
-      [[resval]] "super", set <var>affected by superscript</var> to true.
-
-      <li>Otherwise, if <var>node</var>'s "vertical-align" property has
-      [[resval]] other than "baseline", return the string "other".
+      The spec originally followed Chrome 14 dev, mainly because WebKit itself
+      will produce spans with vertical-align sub or super, and we want to
+      handle them correctly.  However, Ryosuke <a
+      href=http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-August/032809.html>informs</a>
+      me that WebKit's behavior here is viewed as <a
+      href=https://bugs.webkit.org/show_bug.cgi?id=11089>a bug</a>, so I
+      changed it to match Gecko/Opera.
+
+      <p>If <var>node</var> is a [[sub]], set <var>affected by subscript</var>
+      to true.
+
+      <li>Otherwise, if <var>node</var> is a [[sup]], set <var>affected by
+      superscript</var> to true.
 
       <li>Set <var>node</var> to its [[parent]].
     </ol>
@@ -1646,11 +1643,11 @@
     <li>If <var>affected by subscript</var> and <var>affected by
     superscript</var> are both true, return the string "mixed".
 
-    <li>If <var>affected by subscript</var> is true, return "sub".
-
-    <li>If <var>affected by superscript</var> is true, return "super".
-
-    <li>Return "baseline".
+    <li>If <var>affected by subscript</var> is true, return "subscript".
+
+    <li>If <var>affected by superscript</var> is true, return "superscript".
+
+    <li>Return null.
   </ol>
 
   <li>If <var>command</var> is "strikethrough", and the "text-decoration"
@@ -1688,13 +1685,9 @@
   <ol>
     <li>If <var>element</var> is not an <span>inline node</span>, return null.
 
-    <li>If <var>element</var> has a [[style]] attribute set, and that attribute
-    has the effect of setting "vertical-align", return the value that it sets
-    "vertical-align" to.
-
-    <li>If <var>element</var> is a [[sup]], return "super".
-
-    <li>If <var>element</var> is a [[sub]], return "sub".
+    <li>If <var>element</var> is a [[sup]], return "superscript".
+
+    <li>If <var>element</var> is a [[sub]], return "subscript".
 
     <li>Return null.
   </ol>
@@ -2334,23 +2327,20 @@
   Gecko and contradicting WebKit.  This is because &lt;span
   value="vertical-align: sub/super">, the obvious equivalent (and what WebKit
   uses), behaves quite differently: it doesn't reduce font-size, which is ugly.
+  WebKit's behavior is <a href=https://bugs.webkit.org/show_bug.cgi?id=11089>a
+  bug</a> anyway.
 
   <p>If <var>command</var> is "subscript" or "superscript" and <var>new
-  value</var> is "sub", let <var>new parent</var> be the result of calling
-  <code data-anolis-spec=domcore
-  title=dom-Document-createElement>createElement("sub")</code> on the
-  [[ownerdocument]] of <var>node</var>.
+  value</var> is "subscript", let <var>new parent</var> be the result of
+  calling [[createelement|"sub"]] on the [[ownerdocument]] of <var>node</var>.
 
   <li>If <var>command</var> is "subscript" or "superscript" and <var>new
-  value</var> is "super", let <var>new parent</var> be the result of calling
-  <code data-anolis-spec=domcore
-  title=dom-Document-createElement>createElement("sup")</code> on the
-  [[ownerdocument]] of <var>node</var>.
+  value</var> is "superscript", let <var>new parent</var> be the result of
+  calling [[createelement|"sup"]] on the [[ownerdocument]] of <var>node</var>.
 
   <li>If <var>new parent</var> is null, let <var>new parent</var> be the result
-  of calling <code data-anolis-spec=domcore
-  title=dom-Document-createElement>createElement("span")</code> on the
-  [[ownerdocument]] of <var>node</var>.
+  of calling [[createelement|"span"]] on the [[ownerdocument]] of
+  <var>node</var>.
 
   <li>
   <p class=comments>This preserves boundary points correctly, as usual.
@@ -3373,19 +3363,19 @@
   title=queryCommandState()>queryCommandState("subscript")</code>, and let
   <var>state</var> be the result.
 
-  <li><span>Set the selection's value</span> to "baseline".
+  <li><span>Set the selection's value</span> to null.
 
   <li>If <var>state</var> is false, <span>set the selection's value</span> to
-  "sub".
+  "subscript".
 </ol>
 
 <p><span>Indeterminate</span>: True if either among <span>editable</span>
 [[text]] nodes that are <span>effectively contained</span> in the <span>active
 range</span>, there is at least one with <span>effective command value</span>
-"sub" and at least one with some other <span>effective command value</span>; or
-if there is some <span>editable</span> [[text]] node <span>effectively
-contained</span> in the <span>active range</span> with <span>effective command
-value</span> "mixed".  Otherwise false.
+"subscript" and at least one with some other <span>effective command
+value</span>; or if there is some <span>editable</span> [[text]] node
+<span>effectively contained</span> in the <span>active range</span> with
+<span>effective command value</span> "mixed".  Otherwise false.
 
 <p class=comments> For &lt;sup>&lt;sub>foo&lt;/sub>&lt;/sup>, Firefox 6.0a2 and
 Opera 11.11 say the state is true for both superscript and subscript, and
@@ -3398,9 +3388,7 @@
 matches what happens in other indeterminate situations, so it's fair to
 consider it indeterminate.
 
-<p><span>Inline command activated values</span>: "sub"
-
-<p><span>Relevant CSS property</span>: "vertical-align"
+<p><span>Inline command activated values</span>: "subscript"
 
 <!-- @} -->
 <h3><dfn>The <code title>superscript</code> command</dfn></h3>
@@ -3412,23 +3400,21 @@
   title=queryCommandState()>queryCommandState("superscript")</code>, and let
   <var>state</var> be the result.
 
-  <li><span>Set the selection's value</span> to "baseline".
+  <li><span>Set the selection's value</span> to null.
 
   <li>If <var>state</var> is false, <span>set the selection's value</span> to
-  "super".
+  "superscript".
 </ol>
 
 <p><span>Indeterminate</span>: True if either among <span>editable</span>
 [[text]] nodes that are <span>effectively contained</span> in the <span>active
 range</span>, there is at least one with <span>effective command value</span>
-"super" and at least one with some other <span>effective command value</span>;
-or if there is some <span>editable</span> [[text]] node <span>effectively
-contained</span> in the <span>active range</span> with <span>effective command
-value</span> "mixed".  Otherwise false.
-
-<p><span>Inline command activated values</span>: "super"
-
-<p><span>Relevant CSS property</span>: "vertical-align"
+"superscript" and at least one with some other <span>effective command
+value</span>; or if there is some <span>editable</span> [[text]] node
+<span>effectively contained</span> in the <span>active range</span> with
+<span>effective command value</span> "mixed".  Otherwise false.
+
+<p><span>Inline command activated values</span>: "superscript"
 
 <!-- @} -->
 <h3><dfn>The <code title>underline</code> command</dfn></h3>