W3C home > Mailing lists > Public > www-style@w3.org > December 2014

Re: [cssom] What should happen with getComputedStyle on a node in another document when used values are involved?

From: 段垚 <duanyao@ustc.edu>
Date: Wed, 10 Dec 2014 14:49:55 +0800
Message-ID: <5487ED13.6020701@ustc.edu>
To: Boris Zbarsky <bzbarsky@mit.edu>, www-style@w3.org

在 2014/12/9 23:47, Boris Zbarsky 写道:
> Consider this testcase:
>
> <!DOCTYPE html>
> <iframe srcdoc="<div style='width: 100%'>"
>         style="width: 200px">
> </iframe>
> <script>
> onload = function() {
>   alert(
> getComputedStyle(frames[0].document.querySelector("div")).width
>   );
> }
> </script>
>
> What should be alerted?
>
> Per spec, this should be "the value [of width] being the resolved 
> value computed for obj using the style rules associated with doc", 
> where "doc" is the parent document.
>
> But for "width" the resolved value is the used value.  How exactly is 
> this supposed to be calculated "using the style rules associated with 
> doc"?
>
> -Boris
>
Hi,

My test results of getComputedStyle() on a foreign element in 3 desktop 
browsers is as follows:


	Firefox33 	IE11 	chrome39
elementiniframe,nomatchingrulein parent,hasmatchingruleinself: 	self 
self 	self
elementiniframe,hasmatchingruleinbothselfandparent: 	self 	self 	self
elementiniframe,nomatchingruleinbothdocs: 	layout 	layout 	layout
elementininvisibledoc,nomatchingruleinbothdocs: 	initial 	initial 	empty
elementininvisibledoc,hasmatchingruleinbothselfandparent: 	parent 
self 	empty
elementininvisibledoc,hasmatchingruleparent,hasinlineruleinself: 
parent 	self 	empty
elementininvisibledoc,nomatchingruleparent,hasinlineruleinself: 
initial 	self 	empty


Notes on above table:

* getComputedStyle() lives in the parent doc's window, and the parameter 
element(div) lives in a subdoc, and the tested property is "width".
* CSS rules are not inlined unless marked as such.
* "invisibledoc" is a subdoc created by 
document.implementation.createHTMLDocument() and innerHTML.
* "self" means the subdoc or the CSS rules defined in the subdoc are used.
* "layout" means the CSS values are determined by layout result (i.e. 
width of the iframe).
* "initial" means inital values are reported, i.e. width is "auto".
* "parent" means rules in parent doc are used. Note that in FF the 
parameter element's context is used when matching selectors.
* "empty" means empty string is returned.

Summray of the test:

* Browsers are consistent for visible subdoc (i.e. in a frame). That is, 
parent doc's CSS rules are never considered, and 
getComputedStyle(el_in_frame)
is equivalent to 
el_in_frame.ownerDocument.defaultView.getComputedStyle(el_in_frame). 
However this behavior conflicts with current CSSOM spec.

* Browsers are inconsistent for invisible subdoc. Firefox's behavior 
seems similar to the one defined spec, but layout is not performed to 
compute used values,
   and inline rules are dropped. Chrome doesn't support 
getComputedStyle() on invisible subdoc at all. IE always uses subdoc's 
rules.

My suggestion:

* For visible subdoc, change the spec to match browsers' behavior, i.e. 
getComputedStyle(el_in_frame)
   is equivalent to 
el_in_frame.ownerDocument.defaultView.getComputedStyle(el_in_frame).

* For invisible subdoc, change the spec to match Chrome's behavior, i.e. 
getComputedStyle() on an element in an invisible doc is not supported.
   I don't think this change would break many sites, because current 
behaviors of browsers are so fragmented that no one can do a meaningful
   job with them. Also I don't think it is useful to apply parent doc's 
rules to subdoc in getComputedStyle() without doing a layout, because
   this is inconsistent with visible subdoc.

Regards,
   Duan Yao
Received on Wednesday, 10 December 2014 06:50:52 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:49 UTC