Bug 84320

Summary: Appended element's CSSStyleDeclaration doesn't update correctly.
Product: WebKit Reporter: Leo Deng <myst.dg>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: antaryami.pandia, ap, simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Windows 7   
Attachments:
Description Flags
a demo for this bug none

Leo Deng
Reported 2012-04-18 23:03:46 PDT
Created attachment 137846 [details] a demo for this bug The appended DIV element's transition doesn't work as expected. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>computing style bug</title> <style> div { width: 500px; height: 500px; background: red; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } </style> </head> <body> <script> var cell = document.createElement('div'); document.body.appendChild(cell); /* * A present workaround is to read any property's value of its CSSStyleDeclaration. * For instance: * var oHeight = cell.offsetHeight; * or * getComputedStyle(cell).clear; */ cell.style.width = '200px'; /* * Or alternatively, call a timeout function. * setTimeout("cell.style.width = '200px'", 0); */ </script> </body> </html>
Attachments
a demo for this bug (1000 bytes, text/html)
2012-04-18 23:03 PDT, Leo Deng 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2012-04-19 10:07:46 PDT
What is the expected behavior on this test? I just get a red rectangle, in both Safari and Firefox.
Leo Deng
Comment 2 2012-04-19 10:46:36 PDT
Width changed from 500px to 200px, duration is 1 second. The expected transition does not happen, the DIV's width changed to 200px in no time. But if you try my given workaround, the transition comes back. (In reply to comment #1) > What is the expected behavior on this test? I just get a red rectangle, in both Safari and Firefox.
Simon Fraser (smfr)
Comment 3 2012-04-19 11:24:11 PDT
Transitions should not run when appending nodes or switching from display:none. The spec now says this.
Leo Deng
Comment 4 2012-04-19 19:14:34 PDT
(In reply to comment #3) > Transitions should not run when appending nodes or switching from display:none. The spec now says this. I didn't mean "appending child". The follwing statement should trigger the transition: cell.style.width = '200px';
Leo Deng
Comment 5 2012-04-19 19:16:02 PDT
(In reply to comment #3) > Transitions should not run when appending nodes or switching from display:none. The spec now says this. I didn't mean "appending child". The follwing statement should trigger the transition: cell.style.width = '200px';
Simon Fraser (smfr)
Comment 6 2012-04-19 20:47:55 PDT
(In reply to comment #5) > (In reply to comment #3) > > Transitions should not run when appending nodes or switching from display:none. The spec now says this. > > I didn't mean "appending child". The follwing statement should trigger the transition: > cell.style.width = '200px'; It will, but not if you've just appended the node to the document. The "initial" style has to have been rendered at least once.
Note You need to log in before you can comment on or make changes to this bug.