■ GeckoのReflowをアニメーションにする 23:19

MDCの記事用にGeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。

まず、みんなの好きなGoogle。あんまり面白くないです

続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。

最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。

作り方は大体以下のような感じです

1. 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードをMozillaに仕込む
2. Rubyスクリプトでログを舐めて、frame treeを再構成する
3. もう一度最初からログを舐めて、各frameの時系列変化を再現する（ここでRuby/SDLで描画してbmpに吐き出す）
4. GIMP、TMPGEncなどで後処理