Split the tests for clarity

core/modules/widgets/element.js

@@ -25,7 +25,6 @@ Render this widget into the DOM
 */
 ElementWidget.prototype.render = function(parent,nextSibling) {
 	this.parentDomNode = parent;
-	this.computeAttributes();
 	// Neuter blacklisted elements
 	this.tag = this.parseTreeNode.tag;
 	if($tw.config.htmlUnsafeElements.indexOf(this.tag) !== -1) {
@@ -42,6 +41,8 @@ ElementWidget.prototype.render = function(parent,nextSibling) {
 		headingLevel = Math.min(Math.max(headingLevel + 1 + baseLevel,1),6);
 		this.tag = "h" + headingLevel;
 	}
+	// Compute the attributes, mapping the element tag if needed
+	this.computeAttributes();
 	// Select the namespace for the tag
 	var XHTML_NAMESPACE = "http://www.w3.org/1999/xhtml",
 		tagNamespaces = {
@@ -99,4 +100,25 @@ ElementWidget.prototype.refresh = function(changedTiddlers) {
 	return this.refreshChildren(changedTiddlers) || hasChangedAttributes;
 };
 
+/*
+Override the base computeAttributes method
+*/
+ElementWidget.prototype.computeAttributes = function() {
+	// Call the base class to compute the initial values of the attributes
+	var changedAttributes = Widget.prototype.computeAttributes.call(this);
+	// Check for element mapping
+	var mappedTag = this.getVariable("tv-map-" + this.tag),
+		mappedClass = this.getVariable("tv-map-" + this.tag + "-class");
+	if(mappedTag) {
+		this.tag = mappedTag.trim();
+		// Add an attribute to indicate the original tag
+		this.attributes["data-element-mapping-from"] = this.parseTreeNode.tag;
+		// Check for a mapped class
+		if(mappedClass) {
+			this.attributes["class"] = mappedClass.trim() + (this.attributes["class"] ? " " + this.attributes["class"] : "");
+		}
+	}
+	return changedAttributes;
+};
+
 exports.element = ElementWidget;

editions/test/tiddlers/tests/data/element-mapping/Basic.tid

@@ -0,0 +1,18 @@
+title: ElementMapping/Basic
+description: Mapping one element to another
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+
+<!-- Map <p> to <div>, adding the class my-class -->
+\define tv-map-p() div
+
+This is a paragraph
+
++
+title: ExpectedResult
+
+<div data-element-mapping-from="p">This is a paragraph</div>

editions/test/tiddlers/tests/data/element-mapping/BasicWithClass.tid

@@ -0,0 +1,19 @@
+title: ElementMapping/BasicWithClass
+description: Mapping one element to another with an added class
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+
+<!-- Map <p> to <div>, adding the class my-class -->
+\define tv-map-p() div
+\define tv-map-p-class() my-class
+
+This is a paragraph
+
++
+title: ExpectedResult
+
+<div class="my-class" data-element-mapping-from="p">This is a paragraph</div>