From 3e96d8ed5a210c63b2a1323e431cceaa05c0907d Mon Sep 17 00:00:00 2001
From: Arlo Breault <abreault@wikimedia.org>
Date: Thu, 10 Aug 2017 12:20:20 -0400
Subject: [PATCH] Use figure-inline instead of span for inline media

Bug: T118520
Depends-On: I0681c39301e52a3368b53d38ed518ac66e18f0d6
Change-Id: Id8ec5b77207f43fc7c379b35859dc09f264e2c04
---
 .../ve-mw/dm/nodes/ve.dm.MWInlineImageNode.js | 25 +++++++++++--------
 modules/ve-mw/tests/dm/ve.dm.mwExample.js     |  4 +--
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/modules/ve-mw/dm/nodes/ve.dm.MWInlineImageNode.js b/modules/ve-mw/dm/nodes/ve.dm.MWInlineImageNode.js
index 0187c7a3d2..730ceee5c2 100644
--- a/modules/ve-mw/dm/nodes/ve.dm.MWInlineImageNode.js
+++ b/modules/ve-mw/dm/nodes/ve.dm.MWInlineImageNode.js
@@ -43,17 +43,20 @@ ve.dm.MWInlineImageNode.static.preserveHtmlAttributes = function ( attribute ) {
 	return attributes.indexOf( attribute ) === -1;
 };
 
-ve.dm.MWInlineImageNode.static.matchTagNames = [ 'span' ];
+// <span> is here for backwards compatibility with Parsoid content that may be
+// stored in RESTBase.  This is now generated as <figure-inline>.  It should
+// be safe to remove when verion 1.5 content is no longer acceptable.
+ve.dm.MWInlineImageNode.static.matchTagNames = [ 'span', 'figure-inline' ];
 
 ve.dm.MWInlineImageNode.static.blacklistedAnnotationTypes = [ 'link' ];
 
 ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements, converter ) {
 	var dataElement, attributes, types,
-		$span = $( domElements[ 0 ] ),
-		$firstChild = $span.children().first(), // could be <span> or <a>
+		$figureInline = $( domElements[ 0 ] ),
+		$firstChild = $figureInline.children().first(), // could be <span> or <a>
 		$img = $firstChild.children().first(),
-		typeofAttrs = $span.attr( 'typeof' ).split( ' ' ),
-		classes = $span.attr( 'class' ),
+		typeofAttrs = $figureInline.attr( 'typeof' ).split( ' ' ),
+		classes = $figureInline.attr( 'class' ),
 		recognizedClasses = [],
 		errorIndex = typeofAttrs.indexOf( 'mw:Error' ),
 		width = $img.attr( 'width' ),
@@ -147,7 +150,7 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements, converter
 ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
 	var firstChild,
 		mediaClass = data.attributes.mediaClass,
-		span = doc.createElement( 'span' ),
+		figureInline = doc.createElement( 'figure-inline' ),
 		img = doc.createElement( mediaClass === 'Image' ? 'img' : 'video' ),
 		classes = [],
 		originalClasses = data.attributes.originalClasses;
@@ -156,7 +159,7 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
 	img.setAttribute( mediaClass === 'Image' ? 'src' : 'poster', data.attributes.src );
 
 	// RDFa type
-	span.setAttribute( 'typeof', this.getRdfa( mediaClass, data.attributes.type ) );
+	figureInline.setAttribute( 'typeof', this.getRdfa( mediaClass, data.attributes.type ) );
 
 	if ( data.attributes.defaultSize ) {
 		classes.push( 'mw-default-size' );
@@ -178,9 +181,9 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
 		originalClasses &&
 		ve.compare( originalClasses.trim().split( /\s+/ ).sort(), classes.sort() )
 	) {
-		span.className = originalClasses;
+		figureInline.className = originalClasses;
 	} else if ( classes.length > 0 ) {
-		span.className = classes.join( ' ' );
+		figureInline.className = classes.join( ' ' );
 	}
 
 	if ( data.attributes.isLinked ) {
@@ -190,10 +193,10 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
 		firstChild = doc.createElement( 'span' );
 	}
 
-	span.appendChild( firstChild );
+	figureInline.appendChild( firstChild );
 	firstChild.appendChild( img );
 
-	return [ span ];
+	return [ figureInline ];
 };
 
 /* Registration */
diff --git a/modules/ve-mw/tests/dm/ve.dm.mwExample.js b/modules/ve-mw/tests/dm/ve.dm.mwExample.js
index 0de598658e..51024e03ea 100644
--- a/modules/ve-mw/tests/dm/ve.dm.mwExample.js
+++ b/modules/ve-mw/tests/dm/ve.dm.mwExample.js
@@ -286,11 +286,11 @@ ve.dm.mwExample.MWBlockImage = {
 
 ve.dm.mwExample.MWInlineImage = {
 	html:
-		'<span typeof="mw:Image" class="foo mw-valign-text-top">' +
+		'<figure-inline typeof="mw:Image" class="foo mw-valign-text-top">' +
 			'<a href="./File:Wiki.png">' +
 				'<img resource="./File:Wiki.png" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" height="155" width="135">' +
 			'</a>' +
-		'</span>',
+		'</figure-inline>',
 	data: {
 		type: 'mwInlineImage',
 		attributes: {