Description
When an empty line is inserted using a <br/> it is considered by imscJS as generating an inline area even though it contains no text. The result is that when itts:fillLineGap is true, the background areas of the non-blank lines are extended in a strange way, between the lines that do contain text. At first I thought this might be a consequence of setting ebutts:linePadding but that doesn't make any difference to the behaviour in the block-progression direction.
I'm not sure if the blank line should indeed constitute an inline area (I think not), but this behaviour seems weird to me. Possibly this should be escalated to a specification issue, but raising here for discussion first, since potentially it is an implementation issue.
The test content below generates this sequence of images demonstrating the behaviour:
What should be the correct behaviour? It is permitted to insert empty lines with <br/> even if it isn't good practice.
I think the expectation would be that there should be a deliberate gap in the background area regardless of itts:fillLineGap in this case, since there's no inline area generated for these empty lines.
Example IMSC content used to generate the above images
<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling"
xmlns:ttm="http://www.w3.org/ns/ttml#metadata" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
xmlns:ebuttm="urn:ebu:tt:metadata" xmlns:ebutts="urn:ebu:tt:style" ttp:timeBase="media" ttp:cellResolution="40 24"
xml:lang="en-GB"
xmlns:ittp="http://www.w3.org/ns/ttml/profile/imsc1#parameter"
xmlns:itts="http://www.w3.org/ns/ttml/profile/imsc1#styling">
<head>
<ebuttm:documentMetadata>
<ebuttm:conformsToStandard>urn:ebu:tt:distribution:2018-04</ebuttm:conformsToStandard>
<ebuttm:conformsToStandard>http://www.w3.org/ns/ttml/profile/imsc1/text</ebuttm:conformsToStandard>
</ebuttm:documentMetadata>
<styling>
<style xml:id="S0" tts:fontSize="150%" tts:textAlign="center" tts:lineHeight="120%"
ebutts:linePadding="0.5c" tts:fontFamily="proportionalSansSerif, default"
itts:fillLineGap="true"/>
<style xml:id="S1" tts:fontSize="150%" tts:textAlign="center" tts:lineHeight="120%"
tts:fontFamily="proportionalSansSerif, default"
itts:fillLineGap="true"/>
<style xml:id="S4" tts:color="#FFFFFF" tts:backgroundColor="#000000"/>
</styling>
<layout>
<region xml:id="R1" tts:origin="11.562% 5.000%" tts:extent="76.875% 23.478%" tts:displayAlign="after"
tts:overflow="visible"/>
<region xml:id="R2" tts:origin="11.562% 5.000%" tts:extent="76.875% 31.304%" tts:displayAlign="after"
tts:overflow="visible"/>
<region xml:id="R3" tts:origin="11.562% 5.000%" tts:extent="76.875% 39.130%" tts:displayAlign="after"
tts:overflow="visible"/>
<region xml:id="R4" tts:origin="11.562% 50.000%" tts:extent="76.875% 23.478%" tts:displayAlign="after"
tts:overflow="visible"/>
<region xml:id="R5" tts:origin="11.562% 50.000%" tts:extent="76.875% 31.304%" tts:displayAlign="after"
tts:overflow="visible"/>
<region xml:id="R6" tts:origin="11.562% 50.000%" tts:extent="76.875% 39.130%" tts:displayAlign="after"
tts:overflow="visible"/>
</layout>
</head>
<body ttm:role="caption">
<div style="S1">
<p xml:id="C1" begin="00:00:00.000" end="00:00:02.000" region="R1"><span style="S4">No linePadding, no blank lines below</span><br/><span style="S4">Text</span></p>
<p xml:id="C2" begin="00:00:02.000" end="00:00:04.000" region="R1"><span style="S4">No linePadding, 1 blank line below</span><br/><br/><span style="S4">Text</span></p>
<p xml:id="C3" begin="00:00:04.000" end="00:00:06.000" region="R2"><span style="S4">No linePadding, 2 blank lines below</span><br/><br/><br/><span style="S4">Text</span></p>
<p xml:id="C4" begin="00:00:06.000" end="00:00:08.000" region="R3"><span style="S4">No linePadding, 3 blank lines below</span><br/><br/><br/><br/><span style="S4">Text</span></p>
</div>
<div style="S0">
<p xml:id="C5" begin="00:00:00.000" end="00:00:02.000" region="R4"><span style="S4">linePadding, no blank lines below</span><br/><span style="S4">Text</span></p>
<p xml:id="C6" begin="00:00:02.000" end="00:00:04.000" region="R4"><span style="S4">linePadding, 1 blank line below</span><br/><br/><span style="S4">Text</span></p>
<p xml:id="C7" begin="00:00:04.000" end="00:00:06.000" region="R5"><span style="S4">linePadding, 2 blank lines below</span><br/><br/><br/><span style="S4">Text</span></p>
<p xml:id="C8" begin="00:00:06.000" end="00:00:08.000" region="R6"><span style="S4">linePadding, 3 blank lines below</span><br/><br/><br/><br/><span style="S4">Text</span></p>
</div>
</body>
</tt>