semi-opaque backgroundColor and fillLineGap don't play nicely #200
Description
When the tts:backgroundColor applied to span elements has some level of transparency more than 0% and less than 100%, and itts:fillLineGap="true", the presence of overlapping background areas gives rise to unexpected effects caused by the application of transparency multiple times.
Example rendering using http://sandflow.com/imsc1_1/index.html:
I imagine this is going to be very tricky to resolve before proper CSS support for fillLineGap is available, but wanted to log it so it's present as a known issue.
Having looked at the way the padding is extended, I wonder if the use of Math.ceil() in html.js applyFillLineGap() is exacerbating the problem, and why the px values are being made integers - perhaps this is a result of implementation experience, since I could not find a specification constraint on px units. In some cases the overlap seems to be >1 pixel though, so it could be irrelevant.
Generated by this IMSC document:
<?xml version="1.0" encoding="UTF-8"?> <tt ttp:cellResolution="40 24" ttp:timeBase="media" xml:lang="en-GB" xml:space="default" xmlns="http://www.w3.org/ns/ttml" xmlns:ebutts="urn:ebu:tt:style" xmlns:itts="http://www.w3.org/ns/ttml/profile/imsc1#styling" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling" xmlns:xml="http://www.w3.org/XML/1998/namespace"> <head> <styling> <style ebutts:linePadding="0.5c" tts:textAlign="start" itts:fillLineGap="true" xml:id="S1"/> <style tts:textAlign="center" xml:id="S2"/> <style tts:backgroundColor="#00000040" tts:color="#ffffffff" xml:id="S3"/> <style tts:fontFamily="proportionalSansSerif, default" xml:id="fontFamilyStyle"/> <style tts:fontSize="150%" tts:lineHeight="120%" xml:id="autogenFontStyle_n_150_120"/> </styling> <layout> <region tts:displayAlign="after" tts:extent="74.125% 15.652%" tts:origin="12% 79.348%" tts:overflow="visible" xml:id="agr_0_20_39_4_after"/> </layout> </head> <body> <div style="autogenFontStyle_n_150_120 S1 fontFamilyStyle"> <p region="agr_0_20_39_4_after" style="S2" xml:id="C2_1"> <span style="S3">First Line background</span> <br/> <span style="S3">overlaps second line</span> </p> </div> </body> </tt>