290018 - when you document.write() a stylesheet @import rules are ignored when you use local file://s

Status: RESOLVED FIXED

(Core :: DOM: CSS Object Model, defect)

Description

[Jasper de Vries]

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

might be a problem with missing mime types for the css @import files

Reproducible: Always

Comment 1

[Jasper de Vries]

I'm working on a testcase. There are more factors involved than just the
document.write(). I've got a fairly complex page with a lot of CSS and
Javascript. I have to strip it down and isolate the problem.

Comment 2

[Jasper de Vries]

Attachment: css files were not included

I don't have a webserver to test this at home. I think it works.. it's a
stripped down version of a date picker I created at work. When viewed on a
server the imported CSS works for the popup, when viewed directly from disc it
doesn't.

Comment 3

[WADA:World Anti-bad-Duping Agency]

(In reply to comment #0)
> might be a problem with missing mime types for the css @import files

I suspect it too because local only problem.
(When remote, extention->mime type conversion is done by Apache according to
addtype directive setting.)
Is "Content Type" of HKEY_CLASSES_ROOT\.css set as "text/css" in Windows registry?
Go "Command Prompt" then enter "regedit".

Comment 4

[Jasper de Vries]

(In reply to comment #3)
> Is "Content Type" of HKEY_CLASSES_ROOT\.css set as "text/css" in Windows registry?

It is. The PercievedType (don't know what that is) value is 'text'.

Comment 5

[WADA:World Anti-bad-Duping Agency]

Check View/Page Info/Privacy/External Loaded Documents.
The @import'ed css file is listed in it?
(Please check both local and remote case.)

Comment 6

[WADA:World Anti-bad-Duping Agency]

(In reply to comment #4)
See
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/shellcc/platform/shell/programmersguide/shell_basics/shell_basics_extending/fileassociations/fa_perceived_types.asp
for PerceivedType.
(Was not "PercievedType", though some hits with this. Google is a very kind
spell checker for Japanese :-) )

Comment 7

[Jasper de Vries]

(In reply to comment #5)
> Check View/Page Info/Privacy/External Loaded Documents.
> The @import'ed css file is listed in it?
> (Please check both local and remote case.)

Is there a way to check this in Firefox? The Mozilla Suite isn't downloadable as
a .zip and I can't install software at work.

Comment 8

[WADA:World Anti-bad-Duping Agency]

If problem on CSS file on server, viewing HTTP header log using "Live HTTP
Headers"   is a way to check whether CSS file is read or not.
 ( http://livehttpheaders.mozdev.org/index.html )
But this is local CSS file case...

Can you check what happens when you delete the should-be-@imported'ed CSS file?
If "tried to read but not found", I think some error messages will be issued on
JavaScript Console.
Then check JavaScript console again when @import'ed CSS file exists.
  

Comment 9

[WADA:World Anti-bad-Duping Agency]

If should-be-@import'ed CSS file is read, check "CSS Style Rules" and "Computed
Style" of elements using DOM Inspector.
Please note that DOM Inspector is included only when "custom" is choosed on
installation if installer build.

Comment 10

[Jasper de Vries]

Attachment: testcase

Comment 11

[Jasper de Vries]

"Live HTTP Headers" doesn't work for files. I've collected some information from
the "Web Developer Toolbar"
(http://chrispederick.com/work/firefox/webdeveloper/) when I view this testcase
from a file server.

Web Developer Toolbar, View CSS:
------------------
CSS - wyciwyg://10/file:///P:/public_htdocs/290018/index.html
file:///P:/public_htdocs/290018/index.html
file:///P:/public_htdocs/290018/screen.css
@import url("import.css");
body {
	background: #ffc;
}

file:///P:/public_htdocs/290018/import.css
body {
	color: red;
}
------------------

Dom Inspector, Computed style for the body: rgb(0, 0, 0)


When I test my larger, more complex style sheet from a file server

Web Developer Toolbar, View CSS:
------------------
CSS - wyciwyg://12/file:///P:/public_htdocs/page/index.html
file:///P:/public_htdocs/page/index.html
file:///P:/public_htdocs/page/_css/screen.css
@import url("screen_menu.css");
@import url("screen_crumb.css");
@import url("screen_datepicker.css");
@import url("screen_form.css");
@import url("screen_table.css");
@import url("screen_tabset.css");

* {
	padding: 0;
	margin: 0;
	font-family: "Verdana";
	font-size: 11px;
	line-height: 16px;
	background-repeat: no-repeat;
}

.. cut ..

file:///P:/public_htdocs/page/_css/screen_menu.css
#menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 600px;
	z-index: 2;
}

.. cut (screen_menu.css was completely available to the Web Developer Toolbar) ..
------------------

When I remove the "screen_menu.css", clear the cache and reopen the popup

Web Developer Toolbar, View CSS:
------------------
CSS - wyciwyg://12/file:///P:/public_htdocs/page/index.html
file:///P:/public_htdocs/page/index.html
file:///P:/public_htdocs/page/_css/screen.css
@import url("screen_menu.css");
@import url("screen_crumb.css");
@import url("screen_datepicker.css");
@import url("screen_form.css");
@import url("screen_table.css");
@import url("screen_tabset.css");

* {
	padding: 0;
	margin: 0;
	font-family: "Verdana";
	font-size: 11px;
	line-height: 16px;
	background-repeat: no-repeat;
}

.. cut (main sheet loads but no other sheets were available to the Web Developer
Toolbar) ..
------------------

Comment 12

[Boris Zbarsky [:bzbarsky]]

Fixing bug 183348 should fix this; the problem is that the first sheet load gets
canceled when you clobber its <link> and the second sheet load gets a broken
cloned sheet.

Comment 13

[Philip Chee]

Since there is a test case and a dependency changing to NEW

Comment 14

[Boris Zbarsky [:bzbarsky]]

Fixed by checkin for bug 183348.