Bug 18098 - <marquee> element forces itself to be at least 1em high, regardless of 'height' declaration
Summary: <marquee> element forces itself to be at least 1em high, regardless of 'heigh...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.1)
Hardware: PC Windows XP
: P2 Normal
Assignee: Tab Atkins
URL: http://www.matichon.co.th/khaosod/
Keywords: HasReduction
Depends on:
Blocks:
 
Reported: 2008-03-25 18:38 PDT by jasneet
Modified: 2012-10-05 12:19 PDT (History)
10 users (show)

See Also:


Attachments
screenshot (258.68 KB, image/jpeg)
2008-03-25 18:39 PDT, jasneet
no flags Details
reduction (492 bytes, text/html)
2008-03-25 18:39 PDT, jasneet
no flags Details
Patch (346.69 KB, patch)
2012-10-04 17:14 PDT, Tab Atkins
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description jasneet 2008-03-25 18:38:25 PDT
I Steps:
Go to 
http://www.matichon.co.th/khaosod/

II Issue:
The marquee text at right side of the page(above images) is cut off. 

III Conclusion:
The height defined in the style of the <marquee> tag is set to 8px which is insufficient to display the text with font-size of 10pt. If I change the height to 13px or bigger, then the text is not truncated in Safari.

IV Other browsers:
IE7: ok
FF3: ok
Opera9.24: not ok

V Nightly tested: 31238
Comment 1 jasneet 2008-03-25 18:39:18 PDT
Created attachment 20071 [details]
screenshot
Comment 2 jasneet 2008-03-25 18:39:52 PDT
Created attachment 20072 [details]
reduction
Comment 3 Daniel Bates 2010-02-07 00:13:34 PST
Can you elaborate on what the expected behavior should be? I take it you are implying that there should be some minimum height h for a <marquee> such that h is equal to the minimum height necessary to display the content in the <marquee>?
Comment 4 Tab Atkins 2011-10-20 01:58:45 PDT
This is a bug, but it's the opposite of what the reporter stated.  No other browser currently pays attention to the size of the text - they all keep the marquees short and cut off the text.

We, on the other hand, appear to ensure that a marquee is at least 1em high.  This means that we'll cut off text that is made large from a font-size declaration *within* the marquee, but not text that is made large from a font-size declaration on/outside the marquee.

We should match the other platforms in their behavior, because it's saner.  If you don't want the marquee to cut off the text, you should make it large enough to contain the text.

Here's a better testcase:

<!doctype html>
<marquee style="height: 10px; width: 400px; border: thin solid black;"><span style="font-size:20px;">I'm too small for my text.</span></marquee>
<marquee style="font-size:20px; height: 10px; width: 400px; border: thin solid black;"><span>But I'm big enough to hold my text in WebKit only.</span></marquee>
Comment 5 Jerome Leclanche 2012-01-26 07:11:22 PST
Still an issue in 535.18. What's the proper behaviour? webkit's, firefox's?
Comment 6 Tab Atkins 2012-10-04 17:14:35 PDT
Created attachment 167210 [details]
Patch
Comment 7 Tab Atkins 2012-10-04 17:16:09 PDT
(In reply to comment #6)
> Created an attachment (id=167210) [details]
> Patch

This patch removes the magic "must be at least 1em tall" behavior, since we're now the only browser with this strange magic.

It also rewrites the old <marquee> layout test to be better, and be a text-based test - the old one had a bunch of different pixel baselines for absolutely no reason.
Comment 8 Eric Seidel (no email) 2012-10-05 11:41:18 PDT
Comment on attachment 167210 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=167210&action=review

If we could make this not scroll (and not have visible text) we could presumably share results between platforms.

> LayoutTests/fast/css/MarqueeLayoutTest-expected.txt:16
> + foo 
> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  

You could have it remove this from teh DOM when it's done, but this is OK too.
Comment 9 Tab Atkins 2012-10-05 11:55:33 PDT
(In reply to comment #8)
> (From update of attachment 167210 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=167210&action=review
> 
> If we could make this not scroll (and not have visible text) we could presumably share results between platforms.

I'm not sure I understand.  I removed all the pixel tests and replaced them with a dumpAsText test, so it should be automatically shareable by all platforms.
Comment 10 Eric Seidel (no email) 2012-10-05 12:10:03 PDT
SorryI just misread the prettydif.
Comment 11 Eric Seidel (no email) 2012-10-05 12:11:22 PDT
Comment on attachment 167210 [details]
Patch

I suspect we're losing some amount of rendering coverage at the expense of a more maintainable test suite.  But I think this is OK.
Comment 12 WebKit Review Bot 2012-10-05 12:19:21 PDT
Comment on attachment 167210 [details]
Patch

Clearing flags on attachment: 167210

Committed r130541: <http://trac.webkit.org/changeset/130541>
Comment 13 WebKit Review Bot 2012-10-05 12:19:26 PDT
All reviewed patches have been landed.  Closing bug.