831388 - incorrect targeting of parent container element--not named child--for inline CSS insertion by Mootools

Status: VERIFIED INVALID

(Firefox :: Untriaged, defect)

Description

[vincent.grovestine]

Attachment: HTML dump of http://writingcentre.acadiau.ca/faqs.html where issue can be observed

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

Steps to reproduce:

Mootools (v.1.2.5) accordion widget bundled with Contao CMS (v.2.9.3) works without issue on all versions of Chrome, Safari and Internet Explorer; as well as Firefox up to v.17.  Accordion content is not visible using FF 18 and 19-beta, however, as the browser injects additional inline CSS intended for the child elements into the parent elements also.



Actual results:

Example ~ http://writingcentre.acadiau.ca/faqs.html

Child elements: div.accordion

Parent elements: div.ce_accordion 

Parent is incorrectly targeted; notice inline style "... padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;" which should only be present on the child div.


As generated by Firefox 18 and 19-beta on load, incl. preliminary MooTools activity:

[code]
...

<div style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;" class="ce_accordion block">

<div class="toggler">
How do I sign up for a tutorial, workshop, or presentation? 
</div>

<div class="accordion" style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px;"><div>

<p>Just click on the "Sign up for a Writing Tutorial" box on the right-hand side of our website. --&gt;</p>

<p>This will open an online booking calendar that shows all available tutorials, presentations, and workshops &ndash; so you can choose a time that's convenient for you.&nbsp; You'll need your Acadia username and password to sign up, and then you'll receive a confirmation email (and even a reminder email the day before your session).</p>

</div></div>

</div>

...
[/code]


Expected results:

Same segment of HTML as generated by Chrome (and other browsers, incl FF17) on load:

[code]
...

<div class="ce_accordion block" style="margin-top:20px; margin-bottom:20px;">

<div class="toggler">
How do I sign up for a tutorial, workshop, or presentation? 
</div>

<div class="accordion" style="padding-top: 0px; border-top-style: none; padding-bottom: 0px; border-bottom-style: none; overflow: hidden; height: 160px;"><div>

<p>Just click on the "Sign up for a Writing Tutorial" box on the right-hand side of our website. --&gt;</p>

<p>This will open an online booking calendar that shows all available tutorials, presentations, and workshops – so you can choose a time that's convenient for you.&nbsp; You'll need your Acadia username and password to sign up, and then you'll receive a confirmation email (and even a reminder email the day before your session).</p>

</div></div>

</div>

...
[/code]

Comment 1

[Matthias Versen [:Matti]]

MooTools 1.2.x is known to be broken, see bug 789036
Does your issue happen with 1.3+ versions ?

Comment 2

[vincent.grovestine]

RESOLVED by upgrading MooTools from 1.2.5 to 1.3.2 (acquired from Contao's LTS branch on Github).



For interest's sake, I first tried MooTools 1.4.5 (also acquired from Contao LTS). That corrected the specific problem cited in my initial bug report, but triggered a similar issue with another MooTools-driven widget where, again, superfluous inline styles were being applied to more HTML elements than desired.

More investigation is required on my end to isolate the potential conflict between my CMS environment, MooTools 1.4.5 and FireFox 18, however.  It quite possibly has more to do with the MooTools version change and image-slider plugin, than FF.