← Back to team overview

openlp-core team mailing list archive

[Merge] lp:~alisonken1/openlp/strings-templates2 into lp:openlp

 

Ken Roberts has proposed merging lp:~alisonken1/openlp/strings-templates2 into lp:openlp.

Commit message:
Convert htmlbuilder.py to use Template() strings for css

Requested reviews:
  Tim Bentley (trb143)

For more details, see:
https://code.launchpad.net/~alisonken1/openlp/strings-templates2/+merge/296656

Convert htmlbuilder.py to use Template() strings for css

- Changed strings to use Template() instead of format() for css building
- Fix htmlbuilder strings tests
- Cleanup template variables and fix tests to match

--------------------------------
lp:~alisonken1/openlp/strings-templates2 (revision 2676)
[SUCCESS] https://ci.openlp.io/job/Branch-01-Pull/1599/
[SUCCESS] https://ci.openlp.io/job/Branch-02-Functional-Tests/1510/
[SUCCESS] https://ci.openlp.io/job/Branch-03-Interface-Tests/1448/
[SUCCESS] https://ci.openlp.io/job/Branch-04a-Windows_Functional_Tests/1221/
[SUCCESS] https://ci.openlp.io/job/Branch-04b-Windows_Interface_Tests/811/
[SUCCESS] https://ci.openlp.io/job/Branch-05a-Code_Analysis/879/
[SUCCESS] https://ci.openlp.io/job/Branch-05b-Test_Coverage/747/

-- 
Your team OpenLP Core is subscribed to branch lp:openlp.
=== modified file 'openlp/core/lib/htmlbuilder.py'
--- openlp/core/lib/htmlbuilder.py	2016-05-17 13:21:29 +0000
+++ openlp/core/lib/htmlbuilder.py	2016-06-07 13:17:46 +0000
@@ -390,163 +390,207 @@
 import logging
 
 from PyQt5 import QtWebKit
+from string import Template
 
 from openlp.core.common import Settings
 from openlp.core.lib.theme import BackgroundType, BackgroundGradientType, VerticalType, HorizontalType
 
 log = logging.getLogger(__name__)
 
-# TODO: Verify where this is used before converting to python3
-HTMLSRC = """
-<!DOCTYPE html>
-<html>
-<head>
-<title>OpenLP Display</title>
-<style>
-*{
+HTML_SRC = Template("""
+    <!DOCTYPE html>
+    <html>
+    <head>
+    <title>OpenLP Display</title>
+    <style>
+    *{
+        margin: 0;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        -webkit-user-select: none;
+    }
+    body {
+        ${bg_css};
+    }
+    .size {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+    }
+    #black {
+        z-index: 8;
+        background-color: black;
+        display: none;
+    }
+    #bgimage {
+        z-index: 1;
+    }
+    #image {
+        z-index: 2;
+    }
+    ${css_additions}
+    #footer {
+        position: absolute;
+        z-index: 6;
+        ${footer_css}
+    }
+    /* lyric css */${lyrics_css}
+    sup {
+        font-size: 0.6em;
+        vertical-align: top;
+        position: relative;
+        top: -0.3em;
+    }
+    </style>
+    <script>
+        var timer = null;
+        var transition = ${transitions};
+        ${js_additions}
+
+        function show_image(src){
+            var img = document.getElementById('image');
+            img.src = src;
+            if(src == '')
+                img.style.display = 'none';
+            else
+                img.style.display = 'block';
+        }
+
+        function show_blank(state){
+            var black = 'none';
+            var lyrics = '';
+            switch(state){
+                case 'theme':
+                    lyrics = 'hidden';
+                    break;
+                case 'black':
+                    black = 'block';
+                    break;
+                case 'desktop':
+                    break;
+            }
+            document.getElementById('black').style.display = black;
+            document.getElementById('lyricsmain').style.visibility = lyrics;
+            document.getElementById('image').style.visibility = lyrics;
+            document.getElementById('footer').style.visibility = lyrics;
+        }
+
+        function show_footer(footertext){
+            document.getElementById('footer').innerHTML = footertext;
+        }
+
+        function show_text(new_text){
+            var match = /-webkit-text-fill-color:[^;\"]+/gi;
+            if(timer != null)
+                clearTimeout(timer);
+            /*
+            QtWebkit bug with outlines and justify causing outline alignment
+            problems. (Bug 859950) Surround each word with a <span> to workaround,
+            but only in this scenario.
+            */
+            var txt = document.getElementById('lyricsmain');
+            if(window.getComputedStyle(txt).textAlign == 'justify'){
+                if(window.getComputedStyle(txt).webkitTextStrokeWidth != '0px'){
+                    new_text = new_text.replace(/(\s|&nbsp;)+(?![^<]*>)/g,
+                        function(match) {
+                            return '</span>' + match + '<span>';
+                        });
+                    new_text = '<span>' + new_text + '</span>';
+                }
+            }
+            text_fade('lyricsmain', new_text);
+        }
+
+        function text_fade(id, new_text){
+            /*
+            Show the text.
+            */
+            var text = document.getElementById(id);
+            if(text == null) return;
+            if(!transition){
+                text.innerHTML = new_text;
+                return;
+            }
+            // Fade text out. 0.1 to minimize the time "nothing" is shown on the screen.
+            text.style.opacity = '0.1';
+            // Fade new text in after the old text has finished fading out.
+            timer = window.setTimeout(function(){_show_text(text, new_text)}, 400);
+        }
+
+        function _show_text(text, new_text) {
+            /*
+            Helper function to show the new_text delayed.
+            */
+            text.innerHTML = new_text;
+            text.style.opacity = '1';
+            // Wait until the text is completely visible. We want to save the timer id, to be able to call
+            // clearTimeout(timer) when the text has changed before finishing fading.
+            timer = window.setTimeout(function(){timer = null;}, 400);
+        }
+
+        function show_text_completed(){
+            return (timer == null);
+        }
+    </script>
+    </head>
+    <body>
+    <img id="bgimage" class="size" ${bg_image} />
+    <img id="image" class="size" ${image} />
+    ${html_additions}
+    <div class="lyricstable"><div id="lyricsmain" style="opacity:1" class="lyricscell lyricsmain"></div></div>
+    <div id="footer" class="footer"></div>
+    <div id="black" class="size"></div>
+    </body>
+    </html>
+    """)
+
+LYRICS_SRC = Template("""
+    .lyricstable {
+        z-index: 5;
+        position: absolute;
+        display: table;
+        ${stable}
+    }
+    .lyricscell {
+        display: table-cell;
+        word-wrap: break-word;
+        -webkit-transition: opacity 0.4s ease;
+        ${lyrics}
+    }
+    .lyricsmain {
+       ${main}
+    }
+    """)
+
+FOOTER_SRC = Template("""
+    left: ${left}px;
+    bottom: ${bottom}px;
+    width: ${width}px;
+    font-family: ${family};
+    font-size: ${size}pt;
+    color: ${color};
+    text-align: left;
+    white-space: ${space};
+    """)
+
+LYRICS_FORMAT_SRC = Template("""
+    ${justify}word-wrap: break-word;
+    text-align: ${align};
+    vertical-align: ${valign};
+    font-family: ${font};
+    font-size: ${size}pt;
+    color: ${color};
+    line-height: ${line}%;
     margin: 0;
     padding: 0;
-    border: 0;
-    overflow: hidden;
-    -webkit-user-select: none;
-}
-body {
-    %s;
-}
-.size {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 100%%;
-    height: 100%%;
-}
-#black {
-    z-index: 8;
-    background-color: black;
-    display: none;
-}
-#bgimage {
-    z-index: 1;
-}
-#image {
-    z-index: 2;
-}
-%s
-#footer {
-    position: absolute;
-    z-index: 6;
-    %s
-}
-/* lyric css */
-%s
-sup {
-    font-size: 0.6em;
-    vertical-align: top;
-    position: relative;
-    top: -0.3em;
-}
-</style>
-<script>
-    var timer = null;
-    var transition = %s;
-    %s
-
-    function show_image(src){
-        var img = document.getElementById('image');
-        img.src = src;
-        if(src == '')
-            img.style.display = 'none';
-        else
-            img.style.display = 'block';
-    }
-
-    function show_blank(state){
-        var black = 'none';
-        var lyrics = '';
-        switch(state){
-            case 'theme':
-                lyrics = 'hidden';
-                break;
-            case 'black':
-                black = 'block';
-                break;
-            case 'desktop':
-                break;
-        }
-        document.getElementById('black').style.display = black;
-        document.getElementById('lyricsmain').style.visibility = lyrics;
-        document.getElementById('image').style.visibility = lyrics;
-        document.getElementById('footer').style.visibility = lyrics;
-    }
-
-    function show_footer(footertext){
-        document.getElementById('footer').innerHTML = footertext;
-    }
-
-    function show_text(new_text){
-        var match = /-webkit-text-fill-color:[^;\"]+/gi;
-        if(timer != null)
-            clearTimeout(timer);
-        /*
-        QtWebkit bug with outlines and justify causing outline alignment
-        problems. (Bug 859950) Surround each word with a <span> to workaround,
-        but only in this scenario.
-        */
-        var txt = document.getElementById('lyricsmain');
-        if(window.getComputedStyle(txt).textAlign == 'justify'){
-            if(window.getComputedStyle(txt).webkitTextStrokeWidth != '0px'){
-                new_text = new_text.replace(/(\s|&nbsp;)+(?![^<]*>)/g,
-                    function(match) {
-                        return '</span>' + match + '<span>';
-                    });
-                new_text = '<span>' + new_text + '</span>';
-            }
-        }
-        text_fade('lyricsmain', new_text);
-    }
-
-    function text_fade(id, new_text){
-        /*
-        Show the text.
-        */
-        var text = document.getElementById(id);
-        if(text == null) return;
-        if(!transition){
-            text.innerHTML = new_text;
-            return;
-        }
-        // Fade text out. 0.1 to minimize the time "nothing" is shown on the screen.
-        text.style.opacity = '0.1';
-        // Fade new text in after the old text has finished fading out.
-        timer = window.setTimeout(function(){_show_text(text, new_text)}, 400);
-    }
-
-    function _show_text(text, new_text) {
-        /*
-        Helper function to show the new_text delayed.
-        */
-        text.innerHTML = new_text;
-        text.style.opacity = '1';
-        // Wait until the text is completely visible. We want to save the timer id, to be able to call
-        // clearTimeout(timer) when the text has changed before finishing fading.
-        timer = window.setTimeout(function(){timer = null;}, 400);
-    }
-
-    function show_text_completed(){
-        return (timer == null);
-    }
-</script>
-</head>
-<body>
-<img id="bgimage" class="size" %s />
-<img id="image" class="size" %s />
-%s
-<div class="lyricstable"><div id="lyricsmain" style="opacity:1" class="lyricscell lyricsmain"></div></div>
-<div id="footer" class="footer"></div>
-<div id="black" class="size"></div>
-</body>
-</html>
-"""
+    padding-bottom: ${bottom};
+    padding-left: ${left}px;
+    width: ${width}px;
+    height: ${height}px;${font_style}${font_weight}
+    """)
 
 
 def build_html(item, screen, is_live, background, image=None, plugins=None):
@@ -582,18 +626,17 @@
             css_additions += plugin.get_display_css()
             js_additions += plugin.get_display_javascript()
             html_additions += plugin.get_display_html()
-    html = HTMLSRC % (
-        build_background_css(item, width),
-        css_additions,
-        build_footer_css(item, height),
-        build_lyrics_css(item),
-        'true' if theme_data and theme_data.display_slide_transition and is_live else 'false',
-        js_additions,
-        bgimage_src,
-        image_src,
-        html_additions
-    )
-    return html
+    return HTML_SRC.substitute(bg_css=build_background_css(item, width),
+                               css_additions=css_additions,
+                               footer_css=build_footer_css(item, height),
+                               lyrics_css=build_lyrics_css(item),
+                               transitions='true' if (theme_data and
+                                                      theme_data.display_slide_transition and
+                                                      is_live) else 'false',
+                               js_additions=js_additions,
+                               bg_image=bgimage_src,
+                               image=image_src,
+                               html_additions=html_additions)
 
 
 def webkit_version():
@@ -650,24 +693,6 @@
 
     :param item: Service Item containing theme and location information
     """
-    # TODO: Verify this before converting to python3
-    style = """
-.lyricstable {
-    z-index: 5;
-    position: absolute;
-    display: table;
-    %s
-}
-.lyricscell {
-    display: table-cell;
-    word-wrap: break-word;
-    -webkit-transition: opacity 0.4s ease;
-    %s
-}
-.lyricsmain {
-    %s
-}
-"""
     theme_data = item.theme_data
     lyricstable = ''
     lyrics = ''
@@ -680,8 +705,7 @@
             lyricsmain += ' text-shadow: {theme} {shadow}px ' \
                 '{shadow}px;'.format(theme=theme_data.font_main_shadow_color,
                                      shadow=theme_data.font_main_shadow_size)
-    lyrics_css = style % (lyricstable, lyrics, lyricsmain)
-    return lyrics_css
+    return LYRICS_SRC.substitute(stable=lyricstable, lyrics=lyrics, main=lyricsmain)
 
 
 def build_lyrics_outline_css(theme_data):
@@ -710,38 +734,23 @@
     """
     align = HorizontalType.Names[theme_data.display_horizontal_align]
     valign = VerticalType.Names[theme_data.display_vertical_align]
-    if theme_data.font_main_outline:
-        left_margin = int(theme_data.font_main_outline_size) * 2
-    else:
-        left_margin = 0
-    justify = 'white-space:pre-wrap;'
+    left_margin = (int(theme_data.font_main_outline_size) * 2) if theme_data.font_main_outline else 0
     # fix tag incompatibilities
-    if theme_data.display_horizontal_align == HorizontalType.Justify:
-        justify = ''
-    if theme_data.display_vertical_align == VerticalType.Bottom:
-        padding_bottom = '0.5em'
-    else:
-        padding_bottom = '0'
-    lyrics = '{justify} word-wrap: break-word; ' \
-        'text-align: {align}; vertical-align: {valign}; font-family: {font}; ' \
-        'font-size: {size}pt; color: {color}; line-height: {line:d}%; margin: 0;' \
-        'padding: 0; padding-bottom: {bottom}; padding-left: {left}px; width: {width}px; ' \
-        'height: {height}px; '.format(justify=justify,
-                                      align=align,
-                                      valign=valign,
-                                      font=theme_data.font_main_name,
-                                      size=theme_data.font_main_size,
-                                      color=theme_data.font_main_color,
-                                      line=100 + int(theme_data.font_main_line_adjustment),
-                                      bottom=padding_bottom,
-                                      left=left_margin,
-                                      width=width,
-                                      height=height)
-    if theme_data.font_main_italics:
-        lyrics += 'font-style:italic; '
-    if theme_data.font_main_bold:
-        lyrics += 'font-weight:bold; '
-    return lyrics
+    justify = '' if (theme_data.display_horizontal_align == HorizontalType.Justify) else '    white-space: pre-wrap;\n'
+    padding_bottom = '0.5em' if (theme_data.display_vertical_align == VerticalType.Bottom) else '0'
+    return LYRICS_FORMAT_SRC.substitute(justify=justify,
+                                        align=align,
+                                        valign=valign,
+                                        font=theme_data.font_main_name,
+                                        size=theme_data.font_main_size,
+                                        color=theme_data.font_main_color,
+                                        line='{line:d}'.format(line=100 + int(theme_data.font_main_line_adjustment)),
+                                        bottom=padding_bottom,
+                                        left=left_margin,
+                                        width=width,
+                                        height=height,
+                                        font_style='\n    font-style: italic;' if theme_data.font_main_italics else '',
+                                        font_weight='\n    font-weight: bold;' if theme_data.font_main_bold else '')
 
 
 def build_footer_css(item, height):
@@ -751,22 +760,11 @@
     :param item: Service Item to be processed.
     :param height:
     """
-    style = """
-    left: {left}px;
-    bottom: {bottom}px;
-    width: {width}px;
-    font-family: {family};
-    font-size: {size}pt;
-    color: {color};
-    text-align: left;
-    white-space: {space};
-    """
     theme = item.theme_data
     if not theme or not item.footer:
         return ''
     bottom = height - int(item.footer.y()) - int(item.footer.height())
     whitespace = 'normal' if Settings().value('themes/wrap footer') else 'nowrap'
-    lyrics_html = style.format(left=item.footer.x(), bottom=bottom, width=item.footer.width(),
-                               family=theme.font_footer_name, size=theme.font_footer_size,
-                               color=theme.font_footer_color, space=whitespace)
-    return lyrics_html
+    return FOOTER_SRC.substitute(left=item.footer.x(), bottom=bottom, width=item.footer.width(),
+                                 family=theme.font_footer_name, size=theme.font_footer_size,
+                                 color=theme.font_footer_color, space=whitespace)

=== modified file 'tests/functional/openlp_core_lib/test_htmlbuilder.py'
--- tests/functional/openlp_core_lib/test_htmlbuilder.py	2016-05-31 21:40:13 +0000
+++ tests/functional/openlp_core_lib/test_htmlbuilder.py	2016-06-07 13:17:46 +0000
@@ -14,177 +14,190 @@
 from tests.helpers.testmixin import TestMixin
 
 HTML = """
-<!DOCTYPE html>
-<html>
-<head>
-<title>OpenLP Display</title>
-<style>
-*{
-    margin: 0;
-    padding: 0;
-    border: 0;
-    overflow: hidden;
-    -webkit-user-select: none;
-}
-body {
-    ;
-}
-.size {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 100%;
-    height: 100%;
-}
-#black {
-    z-index: 8;
-    background-color: black;
-    display: none;
-}
-#bgimage {
-    z-index: 1;
-}
-#image {
-    z-index: 2;
-}
-plugin CSS
-#footer {
-    position: absolute;
-    z-index: 6;
-    dummy: dummy;
-}
-/* lyric css */
-
-sup {
-    font-size: 0.6em;
-    vertical-align: top;
-    position: relative;
-    top: -0.3em;
-}
-</style>
-<script>
-    var timer = null;
-    var transition = false;
-    plugin JS
-
-    function show_image(src){
-        var img = document.getElementById('image');
-        img.src = src;
-        if(src == '')
-            img.style.display = 'none';
-        else
-            img.style.display = 'block';
-    }
-
-    function show_blank(state){
-        var black = 'none';
-        var lyrics = '';
-        switch(state){
-            case 'theme':
-                lyrics = 'hidden';
-                break;
-            case 'black':
-                black = 'block';
-                break;
-            case 'desktop':
-                break;
-        }
-        document.getElementById('black').style.display = black;
-        document.getElementById('lyricsmain').style.visibility = lyrics;
-        document.getElementById('image').style.visibility = lyrics;
-        document.getElementById('footer').style.visibility = lyrics;
-    }
-
-    function show_footer(footertext){
-        document.getElementById('footer').innerHTML = footertext;
-    }
-
-    function show_text(new_text){
-        var match = /-webkit-text-fill-color:[^;"]+/gi;
-        if(timer != null)
-            clearTimeout(timer);
-        /*
-        QtWebkit bug with outlines and justify causing outline alignment
-        problems. (Bug 859950) Surround each word with a <span> to workaround,
-        but only in this scenario.
-        */
-        var txt = document.getElementById('lyricsmain');
-        if(window.getComputedStyle(txt).textAlign == 'justify'){
-            if(window.getComputedStyle(txt).webkitTextStrokeWidth != '0px'){
-                new_text = new_text.replace(/(\s|&nbsp;)+(?![^<]*>)/g,
-                    function(match) {
-                        return '</span>' + match + '<span>';
-                    });
-                new_text = '<span>' + new_text + '</span>';
-            }
-        }
-        text_fade('lyricsmain', new_text);
-    }
-
-    function text_fade(id, new_text){
-        /*
-        Show the text.
-        */
-        var text = document.getElementById(id);
-        if(text == null) return;
-        if(!transition){
+    <!DOCTYPE html>
+    <html>
+    <head>
+    <title>OpenLP Display</title>
+    <style>
+    *{
+        margin: 0;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        -webkit-user-select: none;
+    }
+    body {
+        ;
+    }
+    .size {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        height: 100%;
+    }
+    #black {
+        z-index: 8;
+        background-color: black;
+        display: none;
+    }
+    #bgimage {
+        z-index: 1;
+    }
+    #image {
+        z-index: 2;
+    }
+    plugin CSS
+    #footer {
+        position: absolute;
+        z-index: 6;
+        dummy: dummy;
+    }
+    /* lyric css */
+    sup {
+        font-size: 0.6em;
+        vertical-align: top;
+        position: relative;
+        top: -0.3em;
+    }
+    </style>
+    <script>
+        var timer = null;
+        var transition = false;
+        plugin JS
+
+        function show_image(src){
+            var img = document.getElementById('image');
+            img.src = src;
+            if(src == '')
+                img.style.display = 'none';
+            else
+                img.style.display = 'block';
+        }
+
+        function show_blank(state){
+            var black = 'none';
+            var lyrics = '';
+            switch(state){
+                case 'theme':
+                    lyrics = 'hidden';
+                    break;
+                case 'black':
+                    black = 'block';
+                    break;
+                case 'desktop':
+                    break;
+            }
+            document.getElementById('black').style.display = black;
+            document.getElementById('lyricsmain').style.visibility = lyrics;
+            document.getElementById('image').style.visibility = lyrics;
+            document.getElementById('footer').style.visibility = lyrics;
+        }
+
+        function show_footer(footertext){
+            document.getElementById('footer').innerHTML = footertext;
+        }
+
+        function show_text(new_text){
+            var match = /-webkit-text-fill-color:[^;"]+/gi;
+            if(timer != null)
+                clearTimeout(timer);
+            /*
+            QtWebkit bug with outlines and justify causing outline alignment
+            problems. (Bug 859950) Surround each word with a <span> to workaround,
+            but only in this scenario.
+            */
+            var txt = document.getElementById('lyricsmain');
+            if(window.getComputedStyle(txt).textAlign == 'justify'){
+                if(window.getComputedStyle(txt).webkitTextStrokeWidth != '0px'){
+                    new_text = new_text.replace(/(\s|&nbsp;)+(?![^<]*>)/g,
+                        function(match) {
+                            return '</span>' + match + '<span>';
+                        });
+                    new_text = '<span>' + new_text + '</span>';
+                }
+            }
+            text_fade('lyricsmain', new_text);
+        }
+
+        function text_fade(id, new_text){
+            /*
+            Show the text.
+            */
+            var text = document.getElementById(id);
+            if(text == null) return;
+            if(!transition){
+                text.innerHTML = new_text;
+                return;
+            }
+            // Fade text out. 0.1 to minimize the time "nothing" is shown on the screen.
+            text.style.opacity = '0.1';
+            // Fade new text in after the old text has finished fading out.
+            timer = window.setTimeout(function(){_show_text(text, new_text)}, 400);
+        }
+
+        function _show_text(text, new_text) {
+            /*
+            Helper function to show the new_text delayed.
+            */
             text.innerHTML = new_text;
-            return;
-        }
-        // Fade text out. 0.1 to minimize the time "nothing" is shown on the screen.
-        text.style.opacity = '0.1';
-        // Fade new text in after the old text has finished fading out.
-        timer = window.setTimeout(function(){_show_text(text, new_text)}, 400);
-    }
-
-    function _show_text(text, new_text) {
-        /*
-        Helper function to show the new_text delayed.
-        */
-        text.innerHTML = new_text;
-        text.style.opacity = '1';
-        // Wait until the text is completely visible. We want to save the timer id, to be able to call
-        // clearTimeout(timer) when the text has changed before finishing fading.
-        timer = window.setTimeout(function(){timer = null;}, 400);
-    }
-
-    function show_text_completed(){
-        return (timer == null);
-    }
-</script>
-</head>
-<body>
-<img id="bgimage" class="size" style="display:none;" />
-<img id="image" class="size" style="display:none;" />
-plugin HTML
-<div class="lyricstable"><div id="lyricsmain" style="opacity:1" class="lyricscell lyricsmain"></div></div>
-<div id="footer" class="footer"></div>
-<div id="black" class="size"></div>
-</body>
-</html>
-"""
+            text.style.opacity = '1';
+            // Wait until the text is completely visible. We want to save the timer id, to be able to call
+            // clearTimeout(timer) when the text has changed before finishing fading.
+            timer = window.setTimeout(function(){timer = null;}, 400);
+        }
+
+        function show_text_completed(){
+            return (timer == null);
+        }
+    </script>
+    </head>
+    <body>
+    <img id="bgimage" class="size" style="display:none;" />
+    <img id="image" class="size" style="display:none;" />
+    plugin HTML
+    <div class="lyricstable"><div id="lyricsmain" style="opacity:1" class="lyricscell lyricsmain"></div></div>
+    <div id="footer" class="footer"></div>
+    <div id="black" class="size"></div>
+    </body>
+    </html>
+    """
 BACKGROUND_CSS_RADIAL = 'background: -webkit-gradient(radial, 5 50%, 100, 5 50%, 5, from(#000000), to(#FFFFFF)) fixed'
 LYRICS_CSS = """
-.lyricstable {
-    z-index: 5;
-    position: absolute;
-    display: table;
-    left: 10px; top: 20px;
-}
-.lyricscell {
-    display: table-cell;
+    .lyricstable {
+        z-index: 5;
+        position: absolute;
+        display: table;
+        left: 10px; top: 20px;
+    }
+    .lyricscell {
+        display: table-cell;
+        word-wrap: break-word;
+        -webkit-transition: opacity 0.4s ease;
+        lyrics_format_css
+    }
+    .lyricsmain {
+        text-shadow: #000000 5px 5px;
+    }
+    """
+LYRICS_OUTLINE_CSS = ' -webkit-text-stroke: 0.125em #000000; -webkit-text-fill-color: #FFFFFF; '
+LYRICS_FORMAT_CSS = """
     word-wrap: break-word;
-    -webkit-transition: opacity 0.4s ease;
-    lyrics_format_css
-}
-.lyricsmain {
-     text-shadow: #000000 5px 5px;
-}
-"""
-LYRICS_OUTLINE_CSS = ' -webkit-text-stroke: 0.125em #000000; -webkit-text-fill-color: #FFFFFF; '
-LYRICS_FORMAT_CSS = ' word-wrap: break-word; text-align: justify; vertical-align: bottom; ' + \
-    'font-family: Arial; font-size: 40pt; color: #FFFFFF; line-height: 108%; margin: 0;padding: 0; ' + \
-    'padding-bottom: 0.5em; padding-left: 2px; width: 1580px; height: 810px; font-style:italic; font-weight:bold; '
+    text-align: justify;
+    vertical-align: bottom;
+    font-family: Arial;
+    font-size: 40pt;
+    color: #FFFFFF;
+    line-height: 108%;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 0.5em;
+    padding-left: 2px;
+    width: 1580px;
+    height: 810px;
+    font-style: italic;
+    font-weight: bold;
+    """
 FOOTER_CSS_BASE = """
     left: 10px;
     bottom: 0px;
@@ -243,6 +256,8 @@
             # WHEN: Create the html.
             html = build_html(item, screen, is_live, background, plugins=plugins)
 
+            self.maxDiff = None
+
             # THEN: The returned html should match.
             self.assertEqual(html, HTML, 'The returned html should match')
 


Follow ups