[dw-free] Expanding cut tags doesn't work in certain browser/style combinations due to CSS conflicts

[fu]

[commit: http://hg.dwscoalition.org/dw-free/rev/55b70d4d9440]

http://bugs.dwscoalition.org/show_bug.cgi?id=2686

Nest the cuttag div in a span (inline element to still allow for inline
cuts). Hack-y workaround to account for Firefox not refreshing the display
when there is a :first-letter on the entry.

Patch by fu.

Files modified:

• cgi-bin/LJ/CleanHTML.pm
• t/cleaner-ljtags.t

--------------------------------------------------------------------------------
diff -r 030adc21b5aa -r 55b70d4d9440 cgi-bin/LJ/CleanHTML.pm
--- a/cgi-bin/LJ/CleanHTML.pm	Mon Jun 28 18:19:02 2010 +0800
+++ b/cgi-bin/LJ/CleanHTML.pm	Mon Jun 28 19:21:39 2010 +0800
@@ -484,10 +484,13 @@ sub clean
 
                     # include empty span and div to be filled in on page
                     # load if javascript is enabled
-                    $newdata .= "<span style=\"display: none;\" id=\"span-cuttag_" . $journal . "_" . $ditemid . "_" . $cutcount. "\" class=\"cuttag\"></span>";
+                    # Note: cuttag_container is a hack, to guard against Firefox bug
+                    # where toggling an element's display is glitchy in the presence
+                    # of certain CSS pseudo-elements (:first-letter, others?)
+                    $newdata .= "<span class=\"cuttag_container\"><span style=\"display: none;\" id=\"span-cuttag_" . $journal . "_" . $ditemid . "_" . $cutcount. "\" class=\"cuttag\"></span>";
                     $newdata .= "<b>(&nbsp;<a href=\"$url#cutid$cutcount\">$etext</a>&nbsp;)</b>";
                     $newdata .= "<div style=\"display: none;\" id=\"div-cuttag_" . $journal . "_" . $ditemid . "_" . $cutcount ."\" aria-live=\"assertive\">";
-                    $newdata .="</div>";
+                    $newdata .="</div></span>";
                     $newdata .= "</div>" if $tag eq "div";
 
                     unless ($opts->{'cutpreview'}) {
diff -r 030adc21b5aa -r 55b70d4d9440 t/cleaner-ljtags.t
--- a/t/cleaner-ljtags.t	Mon Jun 28 18:19:02 2010 +0800
+++ b/t/cleaner-ljtags.t	Mon Jun 28 19:21:39 2010 +0800
@@ -35,24 +35,24 @@ is($clean->("[<span class=ljuser>bob <im
 
 # old lj-cut
 is($clean->("And a cut:<lj-cut>foooooooooooooo</lj-cut>"),
-            "And a cut:<span style=\"display: none;\" id=\"span-cuttag___1\" class=\"cuttag\"></span><b>(&nbsp;<a href=\"$fullurl#cutid1\">Read more...</a>&nbsp;)</b><div style=\"display: none;\" id=\"div-cuttag___1\" aria-live=\"assertive\"></div>",
+            "And a cut:<span class=\"cuttag_container\"><span style=\"display: none;\" id=\"span-cuttag___1\" class=\"cuttag\"></span><b>(&nbsp;<a href=\"$fullurl#cutid1\">Read more...</a>&nbsp;)</b><div style=\"display: none;\" id=\"div-cuttag___1\" aria-live=\"assertive\"></div></span>",
             "old lj-cut");
 is($clean->("And a cut:<lj-cut text='foo'>foooooooooooooo</lj-cut>"),
-            "And a cut:<span style=\"display: none;\" id=\"span-cuttag___1\" class=\"cuttag\"></span><b>(&nbsp;<a href=\"$fullurl#cutid1\">foo</a>&nbsp;)</b><div style=\"display: none;\" id=\"div-cuttag___1\" aria-live=\"assertive\"></div>",
+            "And a cut:<span class=\"cuttag_container\"><span style=\"display: none;\" id=\"span-cuttag___1\" class=\"cuttag\"></span><b>(&nbsp;<a href=\"$fullurl#cutid1\">foo</a>&nbsp;)</b><div style=\"display: none;\" id=\"div-cuttag___1\" aria-live=\"assertive\"></div></span>",
             "old lj-cut w/ text");
 
 # new lj-cut
 is($clean->(qq{New cut: <div class="ljcut">baaaaaaaaaarrrrr</div>}),
-   qq{New cut: <div><span style="display: none;" id="span-cuttag___1" class="cuttag"></span><b>(&nbsp;<a href="http://lj.example/full.html#cutid1">Read more...</a>&nbsp;)</b><div style="display: none;" id="div-cuttag___1" aria-live="assertive"></div></div>},
+   qq{New cut: <div><span class="cuttag_container"><span style="display: none;" id="span-cuttag___1" class="cuttag"></span><b>(&nbsp;<a href="http://lj.example/full.html#cutid1">Read more...</a>&nbsp;)</b><div style="display: none;" id="div-cuttag___1" aria-live="assertive"></div></span></div>},
    "new lj-cut w/ div");
 
 is($clean->(qq{New cut: <div class="ljcut" text="This is my div cut">baaaaaaaaaarrrrr</div>}),
-   qq{New cut: <div><span style="display: none;" id="span-cuttag___1" class="cuttag"></span><b>(&nbsp;<a href="http://lj.example/full.html#cutid1">This is my div cut</a>&nbsp;)</b><div style="display: none;" id="div-cuttag___1" aria-live="assertive"></div></div>},
+   qq{New cut: <div><span class="cuttag_container"><span style="display: none;" id="span-cuttag___1" class="cuttag"></span><b>(&nbsp;<a href="http://lj.example/full.html#cutid1">This is my div cut</a>&nbsp;)</b><div style="display: none;" id="div-cuttag___1" aria-live="assertive"></div></span></div>},
    "new lj-cut w/ div w/ text");
 
 # nested div cuts
 is($clean->(qq{Nested: <div class="ljcut" text="Nested">baaaaaaaaaa<div style="background: red">I AM RED</div>arrrrrr</div>}),
-   qq{Nested: <div><span style="display: none;" id="span-cuttag___1" class="cuttag"></span><b>(&nbsp;<a href="http://lj.example/full.html#cutid1">Nested</a>&nbsp;)</b><div style="display: none;" id="div-cuttag___1" aria-live="assertive"></div></div>},
+   qq{Nested: <div><span class="cuttag_container"><span style="display: none;" id="span-cuttag___1" class="cuttag"></span><b>(&nbsp;<a href="http://lj.example/full.html#cutid1">Nested</a>&nbsp;)</b><div style="display: none;" id="div-cuttag___1" aria-live="assertive"></div></span></div>},
    "nested div cuts");
 is($clean->(qq{Nested: <div class="ljcut" text="Nested">baaaaaaaaaa<div style="background: red">I AM RED</div>arrrrrr</div>},
             cuturl => ""),
--------------------------------------------------------------------------------