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

在 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