@phoenix-plugin-registry/brackets-markdown-preview/tests/test-sanitize-anchors.md

Markdown live preview incl. detached window, code syntax highlighting, output themes, adaptive preview width, graphical checkboxes, activation on start...

# "Sanitizing Anchors (HTML5)" tests

## Sanitize from "`<a... />`" to "`<a ...></a>`"

As for HTML5 Anchors, **neither tag is omissible** ('_Tag omission in text/html_' clause)

<a title="THETITLE1"/>
<a title="THETITLE2" rel="ANOTHER_ATTRIBUTE_VALUE"/>
<a title="THETITLE3" />

The markdown code (faulty: the preview is not able to display correctly)

<pre>
&lt;a title="THETITLE1"<b style="color:red">/&gt;</b>
&lt;a title="THETITLE2" rel="ANOTHER_ATTRIBUTE_VALUE"<b style="color:red">/&gt;</b>
&lt;a title="THETITLE3" <b style="color:red">/&gt;</b>
</pre>

should result in 

<pre>
&lt;a title="THETITLE1"<b style="color:red">&gt;&lt;/a&gt;</b>
&lt;a title="THETITLE2" rel="ANOTHER_ATTRIBUTE_VALUE"<b style="color:red">&gt;&lt;/a&gt;</b>
&lt;a title="THETITLE3"<b style="color:red">&gt;&lt;/a&gt;</b>
</pre>

**Note**: you'll need to open the html source code of the _preview document_ in order to check the result.

## Sanitize from "`<a... name=... >...`" to "`<a id=...>...`"

As for HTML5 Anchors, the "**name**" attribute is not allowed anymore. Instead, the "**id**" attribute should be used.

The code 

<a rel="ANOTHER_ATTRIBUTE_VALUE1"></a>
<a name="THENAME1"></a>
<a name="THENAME2" rel="ANOTHER_ATTRIBUTE_VALUE2"></a>
<a title="ANOTHER_ATTRIBUTE_VALUE3" name="THENAME3"></a>
<a title="ANOTHER_ATTRIBUTE_VALUE4" name="THENAME4" dir="ltr"></a>

<pre>
&lt;a rel="ANOTHER_ATTRIBUTE_VALUE1"&gt;&lt;/a&gt;
&lt;a <b style="color:red">name</b>="THENAME1"&gt;&lt;/a&gt;
&lt;a <b style="color:red">name</b>="THENAME2" rel="ANOTHER_ATTRIBUTE_VALUE2"&gt;&lt;/a&gt;
&lt;a title="ANOTHER_ATTRIBUTE_VALUE3" <b style="color:red">name</b>="THENAME3"&gt;&lt;/a&gt;
&lt;a title="ANOTHER_ATTRIBUTE_VALUE4" <b style="color:red">name</b>="THENAME4" dir="ltr"&gt;&lt;/a&gt;
</pre>

should result in

<pre>
&lt;a rel="ANOTHER_ATTRIBUTE_VALUE1"&gt;&lt;/a&gt;
&lt;a <b style="color:red">id</b>="THENAME1"&gt;&lt;/a&gt;
&lt;a <b style="color:red">id</b>="THENAME2" rel="ANOTHER_ATTRIBUTE_VALUE2"&gt;&lt;/a&gt;
&lt;a title="ANOTHER_ATTRIBUTE_VALUE3" <b style="color:red">id</b>="THENAME3"&gt;&lt;/a&gt;
&lt;a title="ANOTHER_ATTRIBUTE_VALUE4" <b style="color:red">id</b>="THENAME4" dir="ltr"&gt;&lt;/a&gt;
</pre>

**Note**: you'll need to open the html source code of the _preview document_ in order to check the result.

## Sources

HTML5 a-element (W3C recomandation): <https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element>

END.