Closed Bug 298039 Opened 20 years ago Closed 20 years ago

[PP] CSS Generated Content fails when applied to empty elements

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: jon, Assigned: dbaron)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050617
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050617

The source of the above document is:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">

img {
display: block !important;
}

img::after {
content: attr(src);
display: block;
}

</style>
</head>
<body>
<p><img src="http://www.google.com/intl/en/images/logo.gif" alt="Google" /></p>
</body>
</html>

It should display display the "src" below the Google logo.

Reproducible: Always

Steps to Reproduce:
1. Create page which has generated content on "img" elements
2. Load page in Gecko, generated content will not display
3. Page does work correctly in Opera 8

Actual Results:  
The CSS spec says this:

http://www.w3.org/TR/REC-CSS2/generate.html#before-after-content

    * If the subject of the selector is a block-level element, allowed values
are 'none', 'inline', 'block', and 'marker'. If the value of the 'display' has
any other value, the pseudo-element will behave as if the value were 'block'.
    * If the subject of the selector is an inline-level element, allowed values
are 'none' and 'inline'. If the value of the 'display' has any other value, the
pseudo-element will behave as if the value were 'inline'. 

Since "img" is by default "display: inline", the generated content may have been
"display: none". However, forcing the generated content to "display: inline"
doesn't work. Forcing "img" itself to "display: block", accepted values for
generated content still do not work.

Expected Results:  
Gecko should have generated content and respected the "display" property that
was being applied via CSS.

Having tried further test cases, it appears the issue not only affects "img",
but other non-block empty elements such as "br", or mixed mode arbitary XML
documents.

Using the following CSS as am example:

http://www.w3.org/People/mimasa/test/xhtml/media-types/xhtml.css

... line breaks created be "br" are just generated content:

br:before       { content: "\A" }

With the following document, there should be a total of 3 line carriages:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
  <title>Test</title>
  <style type="text/css">

br:before {
content: "\A\A\A" !important;
}
br:after {
content: "" !important;
}
  </style>
 </head>
 <body>

  <span>This test should be broken<br />with a total of 3 carriage returns</span>

 </body>
</html>

... however Gecko will always only render just the one (Opera 8 curiously
renders n+1, which is incorrect too)

With the following arbitary XML, elements called "x" and "y", there should be 2
line breaks:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="#css" type="text/css"?>
<root>
<style id="css" xmlns="http://www.w3.org/1999/xhtml">
x { display: block; }
y {display: inline; }
y:before { content: "\A\A"; }
</style>
<x>This line of text<y />should have two breaks</x>
</root>

Opera 8 does handle this test case correctly.
See this mail thread:
http://lists.w3.org/Archives/Public/www-style/2005Jun/0034.html
Rendering of ::before and ::after content for replaced elements is not defined
in css2.1, it seems.
You've put two bug reports in one bug, and both are invalid.  I think both are
duplicates of other bugs where it's clearly explained why they're invalid, but
since I can't mark as duplicate of two separate bugs, I'll just mark both invalid.

The brief explanations are:
 * :before and :after aren't supposed to do anything on replaced elements; the
replacement replaces the contents, which includes the :before and :after

 * content: '\a' requires 'white-space: pre' or similar to generate line breaks
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.