XSL : Generated DOM seems in weird order - xslt

Question

I'm experiencing an issue with an xsl cheatsheet. The generated DOM seems to be in wrong order. Here is my xsl :
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:param name="site-path" select="site-path" />
<xsl:param name="target" select="target" />
<xsl:param name="page-id" select="page-id" />
<xsl:variable name="portlet-id" select="portlet/portlet-id" />
<xsl:template match="portlet">
<xsl:variable name="device_class">
<xsl:choose>
<xsl:when test="string(display-on-small-device)='0'">hidden-xs</xsl:when>
<xsl:when test="string(display-on-normal-device)='0'">hidden-sm</xsl:when>
<xsl:when test="string(display-on-large-device)='0'">hidden-md</xsl:when>
<xsl:when test="string(display-on-xlarge-device)='0'">hidden-lg</xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</xsl:variable>
<div class="portlet {$device_class}">
<xsl:if test="not(string(display-portlet-title)='1')">
<h3 id="article_{$portlet-id}" class="heading"><xsl:value-of disable-output-escaping="yes" select="portlet-name" /></h3>
</xsl:if>
<ul class="news-list gallery news-cards">
<xsl:apply-templates select="document-list-portlet/document" />
<xsl:text disable-output-escaping="yes">
<![CDATA[<div class="clearfix"> </div>]]>
</xsl:text>
</ul>
</div>
</xsl:template>
<xsl:template match="document">
<xsl:if test="not(string(document-xml-content)='null')">
<xsl:variable name="vignette-id" select="document-xml-content/article/article-vignette/file-resource/resource-document-id" />
<xsl:variable name="attribute-id" select="document-xml-content/article/article-vignette/file-resource/resource-attribute-id" />
<li class="news-list-card-item">
<a href="{$site-path}?document_id={document-id}&portlet_id={$portlet-id}" class="news-card">
<div style="background-image: url(document?id={$vignette-id}&id_attribute={$attribute-id}&working_content=true)" class="news-card-image" />
<div class="news-card-wrapper">
<div class="news-card-content">
<div class="news-card-category">
<span>Catégorie</span>
</div>
<div class="news-card-title">
<xsl:value-of select="document-xml-content/article/document-title" />
</div>
</div>
</div>
</a>
<xsl:if test="(string(resource-is-votable)='1')">
<br />
<xsl:variable name="resource-score" select="resource-score" />
<img src="images/local/skin/plugins/rating/stars_{$resource-score}.png" alt="Score" title="Score" />
</xsl:if>
<xsl:if test="(string(is-download-stat)='1')">
<br />
#i18n{rating.resource_vote.labelDownloadCount} : <xsl:value-of select="resource-download-stat" />
</xsl:if>
</li>
</xsl:if>
</xsl:template>
After the render, the generated DOM is :
<li class="news-list-card-item">
<a class="news-card" href="jsp/site/Portal.jsp?document_id=35&portlet_id=100">
</a>
<div class="news-card-image" style="background-image: url(document?id=35&id_attribute=64&working_content=true)">
<a class="news-card" href="jsp/site/Portal.jsp?document_id=35&portlet_id=100">
<div class="news-card-wrapper">
<div class="news-card-content">
<div class="news-card-category">
<span>Catégorie</span>
</div>
<div class="news-card-title">Artu avec vignette 2</div>
</div>
</div>
</a>
</div>
</li>
Here is the expected HTML :
<li class="news-list-card-item">
<a href="#" class="news-card">
<div class="news-card-wrapper">
<div style="background-image: url(../../modules/news-card/image.jpg)" class="news-card-image"></div>
<div class="news-card-content">
<div class="news-card-category"><span>Mobilité</span>
</div>
<div class="news-card-title">Découvrez les neuf Autolib' customisées qui vont sillonner Paris</div>
</div>
</div>
</a>
</li>
Differences are :
In the expected, you got :
li > a > div >div > div ...
In the generated you got :
li > a
div > a > div > div > div
HEre is a smaller reproductible example :
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="portlet">
<div class="portlet">
<ul class="news-list gallery news-cards">
<xsl:apply-templates select="document-list-portlet/document" />
</ul>
</div>
</xsl:template>
<xsl:template match="document">
<li class="news-list-card-item">
<a class="news-card">
<div style="background-image: url(hello_world.png)" class="news-card-image" />
<div class="news-card-wrapper">
<div class="news-card-content">
<div class="news-card-category">
<span>Catégorie</span>
</div>
<div class="news-card-title">
Title
</div>
</div>
</div>
</a>
</li>
</xsl:template>
</xsl:stylesheet>
Here is an example data used to generate my DOM :
<?xml version="1.0" encoding="UTF-8"?>
<portlet>
<portlet-name>Actualités projet</portlet-name>
<portlet-id>100</portlet-id>
<page-id>1</page-id>
<plugin-name>document</plugin-name>
<display-portlet-title>0</display-portlet-title>
<display-on-small-device>1</display-on-small-device>
<display-on-normal-device>1</display-on-normal-device>
<display-on-large-device>1</display-on-large-device>
<display-on-xlarge-device>1</display-on-xlarge-device>
<document-list-portlet>
<document>
<document-id>35</document-id>
<document-date-publication>11/07/2017</document-date-publication>
<document-xml-content>
<article>
<document-id>35</document-id>
<document-title>Artu avec vignette 2</document-title>
<document-summary>Artu avec vignette 2</document-summary>
<document-date-begin>11/07/2017</document-date-begin>
<document-date-end>
<document-categories>
<article-url>http://</article-url>
<article-attachment>
<article-vignette>
<file-resource>
<resource-document-id>35</resource-document-id>
<resource-attribute-id>64</resource-attribute-id>
<resource-content-type>image/jpeg</resource-content-type>
</file-resource>
<file-size>134783</file-size>
</article-vignette>
<article-body>&lt;p&gt;Artu avec vignette 2&lt;/p&gt;</article-body>
</article-attachment>
</document-categories>
</document-date-end>
</article>
</document-xml-content>
</document>
</document-list-portlet>
</portlet>
I'm using Google Chrome 59.
I'm searching the issue since 2 days and i'm currently lost. Can you help me?
Thx,
SLED

Answer 1

I just solved my issue by adding a   in my background-image div :
<div class="news-card-wrapper">
<div style="background-image: url(document?id={$vignette-id}&id_attribute={$attribute-id}&working_content=true)" class="news-card-image" > </div>
<div class="news-card-content">
<div class="news-card-category">
<span>Catégorie</span>
</div>
<div class="news-card-title">
<xsl:value-of select="document-xml-content/article/document-title" />
</div>
</div>
</div>
Thanks for all your answer and for #MartinHonnen explaination.