Re: [css3-transitions] transitioning to/from auto value

On Apr 28, 2010, at 8:21 AM, Boris Zbarsky wrote:

> On 4/28/10 11:07 AM, Brad Kemper wrote:
>>>  Is the idea that all change processing needs to complete before sampling the "auto" height the transition should run to?
>> 
>> Wel, yeah.
> 
> That's not what your original mail said, though.

I don't understand what I said that was contradictory.

>>> The moment such a thing is implemented, people will start demanding that various corner cases "work correctly"
>> 
>> That still sounds better than having a huge number of non-edge cases broken.
> 
> From a UA developer's point of view, no.  It's not.

From the standpoint of reading complaints from authors about what the "correct" way for it to work should be? I'd think you'd get more from the non-edge cases not working "correctly". In the end, "correct" is what the spec says is correct, but the complaints will come from people that disagree that the "correct" is "reasonable".

>> On Apr 28, 2010, at 6:55 AM, Boris Zbarsky wrote:
>> 
>>>   var div = document.getElementById("x");
>>>   div.style.height = "auto";
>>>   div.style.width = "200px";
>>> 
>>> What height should the div transition to and why?  Note that in current UAs those two style changes can be processed in arbitrary order; the page can't detect the difference.
>> 
>> I guess I'll take your word on that, but I find it surprising.
> 
> Why?
> 
>> I would have thought that they would be processed in the order they were specified.
> 
> In Gecko that's not necessarily the case at all.  Note that the key is that style changes are coalesced; they are NOT processed when you make the .style.whatever change but at some later point in time. 

Hmm. Maybe instead of just snapshotting the values, you also let other properties continue to change that snapshot of what "auto" means. Don't you have to do that sort of thing anyway for other values, such as percentages or ems/font-size? For instance:

div#x {
  transition: margin-right 1s;
  margin-right : 0;
  width: 100px;
}

Then I have:

<div>
	<!-- The parent node is inside a 1000px padding box -->
	<div id="x">This is some text that is 150px wide</div>
</div>

and this script:

 var divX = document.getElementById("x");
 divX.style.marginRight = "50%";
 divX.parentNode.style.width = "200px";

>> Couldn't their order be forced when there is a transition involved
> 
> Well, one can totally rewrite style change processing, yes....  But would that really give the right behavior?  As an author, I wouldn't expect behavior to depend on the ordering of the two lines above if a transition were to happen in this case.

I would, because sequential lines of JavaScript within the same block are usually executed sequentially. Aren't they?