92220 2012-07-24 23:50:50 -0700 Make transitions work between different Length types 2012-09-01 18:02:02 -0700 1 1 1 Unclassified WebKit New Bugs 528+ (Nightly build) Unspecified Unspecified RESOLVED FIXED P2 Normal --- 1 mikelawther mikelawther dino hyatt mitz simon.fraser tony webkit.review.bot oldest_to_newest 677706 0 mikelawther 2012-07-24 23:50:50 -0700 Make transitions work between different Length types 677710 1 154276 mikelawther 2012-07-24 23:54:05 -0700 Created attachment 154276 Patch 677713 2 mikelawther 2012-07-25 00:04:20 -0700 This patch makes this simple example behave the same in WebKit as it does in Firefox: -------- <style> #transition { width: 10px; height: 10px; background-color: green; -webkit-transition: all 10s linear; -moz-transition: all 10s linear; -o-transition: all 10s linear; } #transition:hover { width: 400px; height: 90%; } </style> <div style="width: 500px; height: 500px; border: 1px solid black;"> <div id="transition"></div> </div> ​-------- Clicky: http://jsfiddle.net/Fyqb9/2/ Hovering over the green box causes both width and height to smoothly transition, as they do in Firefox. Currently, height will snap between 10px and 90%, which is pretty jarring, especially if you unhover the box halfway through the transition. See https://bugs.webkit.org/show_bug.cgi?id=90037 for some profiling I did when implementing this blending function for calc. 678134 3 simon.fraser 2012-07-25 09:13:22 -0700 So what happens if height:90% resolves to different values at the start and end of the transition? Say; <div class="container"> <div class="inner"></div> </div> <style> .container { height: 100px; } .container:hover { height: 200px; } .inner { height: 20px; transition: height 1s; } .container:hover .inner { height: 90%; } </style> 678868 4 mikelawther 2012-07-25 22:43:16 -0700 Hi Simon - it does just what you'd expect :) If you run your example in Firefox (adding some background colors and moz-transition etc), you'll see the same thing in WebKit with my patch applied. What happens is: - 'container' instantly snaps to 200px - 'inner' smoothly transitions from 20px to 90% of 200px It's a bit more interesting to have container transition over 1s as well (make the transition linear so it's clearer what's going on). Again, it works the way you'd expect (and the same as Firefox), with 'inner's height velocity accelerating to maintain the correct distance over the transition. I wrote a layouttest for transitioning of dependent values as part of one of my previous changes: http://trac.webkit.org/browser/trunk/LayoutTests/css3/calc/transitions-dependent.html This patch uses the same machinery that that test covers, so what you see in there for calc() is now what you'll see for non-calc values. 680017 5 mikelawther 2012-07-26 19:13:34 -0700 I also tested IE10 (the first version of IE to support CSS3 transitions), and it matches Firefox in that it will smoothly interpolate between px and %. Simon and I had an IRC conversation about whether this behaviour was correct. The transition spec does say that the transition happens over computed values, hence it's unclear as to whether a smooth transition between px and % is allowed (as the computed value for % is % - it's the *used* value where a % becomes px). David Baron proposed on www-style (http://lists.w3.org/Archives/Public/www-style/2012Jun/0125.html) that animation of certain properties that were able to be defined as a length or a percentage should happen "between a length and a percentage (in either order) as a calc". Which is just what this patch does :) There was support for and no disagreement with this proposal, so for web compat I reckon we should go ahead and match Firefox and IE10's behaviour. 680062 6 154276 simon.fraser 2012-07-26 20:40:25 -0700 Comment on attachment 154276 Patch OK then! 680063 7 simon.fraser 2012-07-26 20:41:16 -0700 Does this work right for transforms too, like translateX(10px) to translateX(90%)? 680090 8 154276 webkit.review.bot 2012-07-26 21:32:35 -0700 Comment on attachment 154276 Patch Clearing flags on attachment: 154276 Committed r123837: <http://trac.webkit.org/changeset/123837> 680091 9 webkit.review.bot 2012-07-26 21:32:39 -0700 All reviewed patches have been landed. Closing bug. 680093 10 mikelawther 2012-07-26 21:36:00 -0700 Good question! Yes it does - the following example code works the same in Firefox and my patched WebKit (ie the div smoothly translates to the right): ----- <style> #transition { width: 200px; height: 200px; -webkit-transform: translateX(10px); -moz-transform: translateX(10px); background-color: green; -webkit-transition: all 10s linear; -moz-transition: all 10s linear; } #transition:hover { -webkit-transform: translateX(50%); -moz-transform: translateX(50%); } </style> <div id="transition"></div> ------- 710301 11 mitz 2012-09-01 18:02:02 -0700 (In reply to comment #8) > (From update of attachment 154276 [details]) > Clearing flags on attachment: 154276 > > Committed r123837: <http://trac.webkit.org/changeset/123837> This caused bug 95650. 154276 2012-07-24 23:54:05 -0700 2012-07-26 21:32:35 -0700 Patch bug-92220-20120725165352.patch text/plain 5055 mikelawther U3VidmVyc2lvbiBSZXZpc2lvbjogMTIzNDk0CmRpZmYgLS1naXQgYS9Tb3VyY2UvV2ViQ29yZS9D aGFuZ2VMb2cgYi9Tb3VyY2UvV2ViQ29yZS9DaGFuZ2VMb2cKaW5kZXggYzBlZDYwOTk5OThiMWMz ZjEwNjZlMTJlNzNmYTNjYjFlYTU0YWZlMC4uZjQzNzZkMTU0YmZlMTc5Nzc4YThhNDRmNTMzOTI1 MmQ4MWNkY2ZkMiAxMDA2NDQKLS0tIGEvU291cmNlL1dlYkNvcmUvQ2hhbmdlTG9nCisrKyBiL1Nv dXJjZS9XZWJDb3JlL0NoYW5nZUxvZwpAQCAtMSwzICsxLDIxIEBACisyMDEyLTA3LTI0ICBNaWtl IExhd3RoZXIgIDxtaWtlbGF3dGhlckBjaHJvbWl1bS5vcmc+CisKKyAgICAgICAgTWFrZSB0cmFu c2l0aW9ucyB3b3JrIGJldHdlZW4gZGlmZmVyZW50IExlbmd0aCB0eXBlcworICAgICAgICBodHRw czovL2J1Z3Mud2Via2l0Lm9yZy9zaG93X2J1Zy5jZ2k/aWQ9OTIyMjAKKworICAgICAgICBSZXZp ZXdlZCBieSBOT0JPRFkgKE9PUFMhKS4KKworICAgICAgICBVc2UgdGhlIGV4aXN0aW5nIENTUyBj YWxjIG1hY2hpbmVyeSBmb3IgYmxlbmRpbmcgYmV0d2VlbiB0d28gY2FsY3VsYXRpb25zCisgICAg ICAgIHRvIGJsZW5kIGJldHdlZW4gdHdvIExlbmd0aHMgb2YgZGlmZmVyaW5nIHR5cGVzLgorCisg ICAgICAgIFRlc3Q6IHRyYW5zaXRpb25zL21peGVkLXR5cGUuaHRtbAorCisgICAgICAgICogcGxh dGZvcm0vTGVuZ3RoLmNwcDoKKyAgICAgICAgKFdlYkNvcmU6Okxlbmd0aDo6YmxlbmRNaXhlZFR5 cGVzKToKKyAgICAgICAgKiBwbGF0Zm9ybS9MZW5ndGguaDoKKyAgICAgICAgKFdlYkNvcmU6Okxl bmd0aDo6YmxlbmQpOgorICAgICAgICAoTGVuZ3RoKToKKwogMjAxMi0wNy0yNCAgVnNldm9sb2Qg Vmxhc292ICA8dnNldmlrQGNocm9taXVtLm9yZz4KIAogICAgICAgICBXZWIgSW5zcGVjdG9yOiBT bmlwcGV0cyBVSSBwb2xpc2gKZGlmZiAtLWdpdCBhL1NvdXJjZS9XZWJDb3JlL3BsYXRmb3JtL0xl bmd0aC5jcHAgYi9Tb3VyY2UvV2ViQ29yZS9wbGF0Zm9ybS9MZW5ndGguY3BwCmluZGV4IDExMGRi Y2Q5NmJmYjkwNjdlNWFjNmY2MTFjNzdlN2UwZjA5ZGNjYjUuLjE1ZGJlZWE4MDNjYmExNzAyNDYz YmE4ODU0N2QxM2ExNmUwYjE0ZTUgMTAwNjQ0Ci0tLSBhL1NvdXJjZS9XZWJDb3JlL3BsYXRmb3Jt L0xlbmd0aC5jcHAKKysrIGIvU291cmNlL1dlYkNvcmUvcGxhdGZvcm0vTGVuZ3RoLmNwcApAQCAt MjAyLDcgKzIwMiw3IEBAIExlbmd0aDo6TGVuZ3RoKFBhc3NSZWZQdHI8Q2FsY3VsYXRpb25WYWx1 ZT4gY2FsYykKICAgICBtX2ludFZhbHVlID0gY2FsY0hhbmRsZXMoKS5pbnNlcnQoY2FsYyk7CiB9 CiAgICAgICAgIAotTGVuZ3RoIExlbmd0aDo6YmxlbmRDYWxjdWxhdGlvbihjb25zdCBMZW5ndGgm IGZyb20sIGRvdWJsZSBwcm9ncmVzcykgY29uc3QKK0xlbmd0aCBMZW5ndGg6OmJsZW5kTWl4ZWRU eXBlcyhjb25zdCBMZW5ndGgmIGZyb20sIGRvdWJsZSBwcm9ncmVzcykgY29uc3QKIHsKICAgICBp ZiAocHJvZ3Jlc3MgPD0gMC4wKQogICAgICAgICByZXR1cm4gZnJvbTsKZGlmZiAtLWdpdCBhL1Nv dXJjZS9XZWJDb3JlL3BsYXRmb3JtL0xlbmd0aC5oIGIvU291cmNlL1dlYkNvcmUvcGxhdGZvcm0v TGVuZ3RoLmgKaW5kZXggNzE3MWUzNDk0OGE1YjYzN2FlOTNiMGIzZGViMGFlMTcyN2Y2NGI0Zi4u MTRjYmYwNjZiYzE4ZTY3MDA4N2FmOGQyYTY1MzNhZmI3OTM2MzFkNyAxMDA2NDQKLS0tIGEvU291 cmNlL1dlYkNvcmUvcGxhdGZvcm0vTGVuZ3RoLmgKKysrIGIvU291cmNlL1dlYkNvcmUvcGxhdGZv cm0vTGVuZ3RoLmgKQEAgLTIzMSwxMCArMjMxLDEwIEBAIHB1YmxpYzoKICAgICB7CiAgICAgICAg IC8vIEJsZW5kIHR3byBsZW5ndGhzIHRvIHByb2R1Y2UgYSBuZXcgbGVuZ3RoIHRoYXQgaXMgaW4g YmV0d2VlbiB0aGVtLiAgVXNlZCBmb3IgYW5pbWF0aW9uLgogICAgICAgICBpZiAoZnJvbS50eXBl KCkgPT0gQ2FsY3VsYXRlZCB8fCB0eXBlKCkgPT0gQ2FsY3VsYXRlZCkKLSAgICAgICAgICAgIHJl dHVybiBibGVuZENhbGN1bGF0aW9uKGZyb20sIHByb2dyZXNzKTsKKyAgICAgICAgICAgIHJldHVy biBibGVuZE1peGVkVHlwZXMoZnJvbSwgcHJvZ3Jlc3MpOwogICAgICAgICAKICAgICAgICAgaWYg KCFmcm9tLmlzWmVybygpICYmICFpc1plcm8oKSAmJiBmcm9tLnR5cGUoKSAhPSB0eXBlKCkpCi0g ICAgICAgICAgICByZXR1cm4gKnRoaXM7CisgICAgICAgICAgICByZXR1cm4gYmxlbmRNaXhlZFR5 cGVzKGZyb20sIHByb2dyZXNzKTsKIAogICAgICAgICBpZiAoZnJvbS5pc1plcm8oKSAmJiBpc1pl cm8oKSkKICAgICAgICAgICAgIHJldHVybiAqdGhpczsKQEAgLTI5Miw3ICsyOTIsNyBAQCBwcml2 YXRlOgogICAgICAgICAgICAgaW5jcmVtZW50Q2FsY3VsYXRlZFJlZigpOwogICAgIH0KIAotICAg IExlbmd0aCBibGVuZENhbGN1bGF0aW9uKGNvbnN0IExlbmd0aCYgZnJvbSwgZG91YmxlIHByb2dy ZXNzKSBjb25zdDsKKyAgICBMZW5ndGggYmxlbmRNaXhlZFR5cGVzKGNvbnN0IExlbmd0aCYgZnJv bSwgZG91YmxlIHByb2dyZXNzKSBjb25zdDsKIAogICAgIGludCBjYWxjdWxhdGlvbkhhbmRsZSgp IGNvbnN0CiAgICAgewpkaWZmIC0tZ2l0IGEvTGF5b3V0VGVzdHMvQ2hhbmdlTG9nIGIvTGF5b3V0 VGVzdHMvQ2hhbmdlTG9nCmluZGV4IGRjMjJiYjM2ZmViMDA5MTJjYmZiYjZlZjNlYzNhN2MwZmFi MzkxOGUuLjA1YmFhY2U0ZDFkMmIyODBhODYxMjgwZWE2MzYxMThjYTM2ODU5MTEgMTAwNjQ0Ci0t LSBhL0xheW91dFRlc3RzL0NoYW5nZUxvZworKysgYi9MYXlvdXRUZXN0cy9DaGFuZ2VMb2cKQEAg LTEsMyArMSwxMyBAQAorMjAxMi0wNy0yNCAgTWlrZSBMYXd0aGVyICA8bWlrZWxhd3RoZXJAY2hy b21pdW0ub3JnPgorCisgICAgICAgIE1ha2UgdHJhbnNpdGlvbnMgd29yayBiZXR3ZWVuIGRpZmZl cmVudCBMZW5ndGggdHlwZXMKKyAgICAgICAgaHR0cHM6Ly9idWdzLndlYmtpdC5vcmcvc2hvd19i dWcuY2dpP2lkPTkyMjIwCisKKyAgICAgICAgUmV2aWV3ZWQgYnkgTk9CT0RZIChPT1BTISkuCisK KyAgICAgICAgKiB0cmFuc2l0aW9ucy9taXhlZC10eXBlLWV4cGVjdGVkLnR4dDogQWRkZWQuCisg ICAgICAgICogdHJhbnNpdGlvbnMvbWl4ZWQtdHlwZS5odG1sOiBBZGRlZC4KKwogMjAxMi0wNy0y NCAgSnVsaWVuIENoYWZmcmFpeCAgPGpjaGFmZnJhaXhAd2Via2l0Lm9yZz4KIAogICAgICAgICBp bmxpbmUtdGFibGUgd3JhcHBlciBzaG91bGQgYmUgZ2VuZXJhdGVkIGZvciBkaXNwbGF5OiBpbmxp bmUgZWxlbWVudCBvbmx5CmRpZmYgLS1naXQgYS9MYXlvdXRUZXN0cy90cmFuc2l0aW9ucy9taXhl ZC10eXBlLWV4cGVjdGVkLnR4dCBiL0xheW91dFRlc3RzL3RyYW5zaXRpb25zL21peGVkLXR5cGUt ZXhwZWN0ZWQudHh0Cm5ldyBmaWxlIG1vZGUgMTAwNjQ0CmluZGV4IDAwMDAwMDAwMDAwMDAwMDAw MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAuLjZlNjc1YTAxNDE2NGI5ZmIxNDBhZjk5ZWJlYjA3MTE5 ZDQ3NDg2NTIKLS0tIC9kZXYvbnVsbAorKysgYi9MYXlvdXRUZXN0cy90cmFuc2l0aW9ucy9taXhl ZC10eXBlLWV4cGVjdGVkLnR4dApAQCAtMCwwICsxLDQgQEAKK1Rlc3RzIHRyYW5zaXRpb25zIHRv IGFuZCBmcm9tIGEgbWl4IG9mIGFic29sdXRlIGFuZCBwZXJjZW50IHZhbHVlcworUEFTUyAtICJ3 aWR0aCIgcHJvcGVydHkgZm9yICJib3giIGVsZW1lbnQgYXQgMC41cyBzYXcgc29tZXRoaW5nIGNs b3NlIHRvOiAyMjUKK1BBU1MgLSAiaGVpZ2h0IiBwcm9wZXJ0eSBmb3IgImJveCIgZWxlbWVudCBh dCAwLjVzIHNhdyBzb21ldGhpbmcgY2xvc2UgdG86IDI3NQorCmRpZmYgLS1naXQgYS9MYXlvdXRU ZXN0cy90cmFuc2l0aW9ucy9taXhlZC10eXBlLmh0bWwgYi9MYXlvdXRUZXN0cy90cmFuc2l0aW9u cy9taXhlZC10eXBlLmh0bWwKbmV3IGZpbGUgbW9kZSAxMDA2NDQKaW5kZXggMDAwMDAwMDAwMDAw MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMC4uMzMzMjM2OGQ2ZTQ0ODUyMGZiODE2ODM3ZDQ5 ZjdjOTc4ZTQ0ODlmYQotLS0gL2Rldi9udWxsCisrKyBiL0xheW91dFRlc3RzL3RyYW5zaXRpb25z L21peGVkLXR5cGUuaHRtbApAQCAtMCwwICsxLDQwIEBACis8IURPQ1RZUEUgaHRtbD4KKzxzdHls ZT4KKyNib3ggeworICAgIHdpZHRoOiAxMCU7CisgICAgaGVpZ2h0OiAxMDBweDsKKyAgICBiYWNr Z3JvdW5kLWNvbG9yOiBncmVlbjsKKyAgICAtd2Via2l0LXRyYW5zaXRpb246IGFsbCAxcyBsaW5l YXI7Cit9CisKKyNib3guZmluYWwgeworICAgIHdpZHRoOiA0MDBweDsKKyAgICBoZWlnaHQ6IDkw JTsKK30KKzwvc3R5bGU+CitUZXN0cyB0cmFuc2l0aW9ucyB0byBhbmQgZnJvbSBhIG1peCBvZiBh YnNvbHV0ZSBhbmQgcGVyY2VudCB2YWx1ZXMKKzwvcD4KKzxkaXYgc3R5bGU9IndpZHRoOiA1MDBw eDsgaGVpZ2h0OiA1MDBweDsiPgorICA8ZGl2IGlkPSJib3giPjwvZGl2PgorPC9kaXY+CisKKzxk aXYgaWQ9InJlc3VsdCI+Cis8c2NyaXB0IHNyYz0icmVzb3VyY2VzL3RyYW5zaXRpb24tdGVzdC1o ZWxwZXJzLmpzIj48L3NjcmlwdD4KKzxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KKwor Y29uc3QgZXhwZWN0ZWRWYWx1ZXMgPSBbCisgIC8vIFt0aW1lLCBlbGVtZW50LWlkLCBwcm9wZXJ0 eSwgZXhwZWN0ZWQtdmFsdWUsIHRvbGVyYW5jZV0KKyAgLy8gVGhlIHRyYW5zaXRpb24gdGFrZXMg MSBzZWNvbmQsIHNvIHdlIGNvbXB1dGUgdG9sZXJhbmNlIHRvIGFsbG93CisgIC8vIDEwJSBvciAx MDBtcyB2YXJpYW5jZSwgKGVuZFZhbHVlIC0gc3RhcnRWYWx1ZSkgLyAxMC4KKyAgWzAuNSwgJ2Jv eCcsICd3aWR0aCcsIDIyNSwgMzVdLAorICBbMC41LCAnYm94JywgJ2hlaWdodCcsIDI3NSwgMzVd LAorXTsKKworZnVuY3Rpb24gc2V0dXBUZXN0KCkKK3sKKyAgdmFyIGJveCA9IGRvY3VtZW50Lmdl dEVsZW1lbnRCeUlkKCdib3gnKTsKKyAgYm94LmNsYXNzTmFtZSA9ICdmaW5hbCc7Cit9CisKK3J1 blRyYW5zaXRpb25UZXN0KGV4cGVjdGVkVmFsdWVzLCBzZXR1cFRlc3QsIHVzZVBhdXNlQVBJKTsK Kzwvc2NyaXB0PgpcIE5vIG5ld2xpbmUgYXQgZW5kIG9mIGZpbGUK