Taken SPC

話題になっているらしいので、各レンダリングエンジンの Acid 3 対策用のバグをまとめてみました。

Gecko

WebKit

KHTML

WebKit の trunk で独自 CSS プロパティ -webkit-transform などが動くようになりました (作業が入り始めたのは一週間ほど前あたりから)。この独自プロパティは何かというと、CSS でコンテンツを回転したり、傾けたり、拡大したり、縮小したり、といったことができるようになります。この 9 月に出た CSS3 basic box model 草案では rotation プロパティが載っており、Dave Hyatt (Apple 社) が transform プロパティを提案している旨もかかれています。

さて、-webkit-transform は以下のように指定できます。

p.rotate {
  -webkit-transform: translate(50%, 0) rotate(90deg);
  -webkit-transform-origin: 0 0;
}

上記の意味は、X 方向に 50% 移動させて、90 度回転させなさい (時計回り)。その変形の原点は対象となるボックスの (0, 0)。

以下は サンプルページ のスクリーンショットです。

Gecko でのスクリーンショットは以下。

各ボックスの配置は変換が適用される前のものを使っているようです。ですので、変形のかかったボックスが元のボックスから飛び出すことが多くなると思います。

-webkit-transform に指定できるのは、CSSParser.cpp 等をみると以下のようです。

先に挙げた Dave Hyatt の提案にある通り、SVG の transform 属性の構文に近いものになっています。

scale(x, y)/scaleX(x)/scaleY(y)

拡大縮小。x, y とも初期値は 1 で、取りうる値は実数。手元では scaleX と scaleY は動かなかった。

translate(x, y)/translateX(x)/translateY(y)

移動。X, Y とも単位つきの数を取って、初期値は 0。手元では translateX と translateY は動かなかった。

rotate(angle)

回転。angle は角度 (単位は deg 等)をとって初期値は 0。時計回りに回転。

skew(x, y)/skewX(x)/skewY(y)

傾け。x, y とも角度をとって、初期値は 0。時計回り。手元では skewX と skewY は動かなかった。

matrix(a, b, c, d, e,f )

変換行列。a から f までのパラメタは SVG の変換行列の場合と同じように扱われる、と思われる。手元では動かなかった。

-webkit-transform-origin の取る値は background-position と同じようです (初期値は 50%, 50%)。 -webkit-transform-origin-x や -webkit-transform-origin-y はそれぞれ、X 方向と Y 方向についてです。

まだバグもありますし、最終的な仕様がどうなるのかもまだわかりません。今後に注目したいところです。

先日 WebKit の Subversion レポジトリには Safari-3-branch が出来、10 月 26 日には Mac OS X Leopard が出るとのことで、Safari/WebKit 関連が何かとホットですね。

さて、Trolltech (Qt の開発元) Labs に WebKit に関する記事がありました。以下はその Open QtWebKit Development の翻訳です。

オープンな QtWebKit 開発

Simon による投稿 @ 2007 年 10 月 12 日 (金) 16:24

我々は WebKit を Qt4.4 に統合することを計画しているので、WebKit の安定したコードベースを選ばなくてはなりません。Maciej が WebKit 開発メーリングリストでアナウンスしたように、WebKit の trunk は feature branch とマージされ、将来より機能開発されそうです。その代りに Apple は WebKit の Subversion レポジトリに Safari-3-branch を作り、安定化にはそれを使うつもりです。同時に我々も QtWebKit ポートのパッチ開発を Subversion から git に切り替える決断をしました。我々の開発ブランチは Trolltech Labs の公開 git レポジトリにホストされる予定です。GitWeb インタフェースを介してオンラインでブラウズできます。レポジトリ自体も git プロトコルを通して利用できるので、あなたもレポジトリをクローンして我々の開発を追いかけることができます。(Subversion の safari-3 branch を基にしている) qtwebkit ブランチで行った我々の変更全てを、Subversion の WebKit の trunk に提出する事も計画しています。

この開発モデルは我々の開発のオープンさを保ち、実験的な作業を公開するのを容易にしてくれます。同時にこれはブランチ間の変更のマージを容易にし、公式の WebKit の Subversion レポジトリと連絡を取り合うことも容易にするでしょう。git レポジトリの svn/* ブランチは Subversion から自動的にインポートされています。

文中で言及されている Maciej さんのメールは [webkit-dev] Branch Plan だと思われます。簡単な図にしてみました。

QtWebKit の開発が Apple の管理下に置かれるわけでは無いので、Trolltech 自身がホストするということでしょう。QtWebKit でも Mac OS X 版や Windows 版相当の機能が使えるようになるのが楽しみですね!

QtWebKit なのか WebKitQt なのか。はてさてどちらだろう。

WebKit の feature-branch で DOMContentLoaded イベントがサポートされるようになった、ようです。feature-branch は Mac OS X でしか手軽に試せないのであれですが。

これで画像の読み込みを待つことなく DOM ツリーが構築された時点で処理するのが楽になるでしょうか。

DOMContentLoaded は HTML5 の草案でも言及されています (8.2.5. The End)

LinuxConf Europe 2007 で WebKit の GTK 移植版についての発表があったようです。

• Alp Toker ? Blog Archive ? WebKit/Gtk+ at LinuxConf Europe 2007

スライドでは、WebKit の歴史から、WebKit/GTK+ の計画まで触れられています。

モバイル

モバイルに関しては 6 スライド目などで言及されています。

• Linux ベースのモバイル端末の多くのコアで動作している新興のデファクトのブラウザは、多くの場合、そのプラットフォームで唯一のプロプライエタリなコンポーネント
• ベンダは Opera を選んでいる
• コミュニティはデスクトップに集中している
• ....その間に、潜在的に巨大な組込み世界のチャンスを逃している

スライドにはいくつかのモバイル端末で動作している WebKit/GTK のスクリーンショットがあります。

• Nokia の Internet Tablet (N700 と N800)
• OpenMoko
• OLPC

その他

その他気になったことを以下に書き出してみます。

• cairo をグラフィックライブラリとして使っている
• 可能な場所では GTK+ の技術を使う
• GNOME への依存は避けている
• WebKit/GTK+ をバックエンドに使っている Epiphany
• HTML 5 canvas 要素のサポートがもうすぐ入る
• HTML 5 video/audio 要素を GStreamer を使ってサポートすることを計画中

WebKit の Qt 移植版をビルドした話は以前しましたが、今回は Gdk 移植版を Linux (Ubuntu 7.04) でビルドしてみました。

ビルド

WebKit の Wiki ページ BuildingGdk を参考にしました。

ソースを引っ張ってきます。

svn co http://svn.webkit.org/repository/webkit/trunk WebKit

必要な開発パッケージをそろえます。たまたま私の環境では既にインストールされていました。Ubuntu で /usr/bin/qmake が /usr/bin/qmake-qt4 を指すようにするには

sudo update-alternatives --config qmake

で qmake-qt4 を選びます。必要なパッケージが揃ったら

(WebKit)/WebKitTools/Scripts/build-webkit --gdk

とするだけです。

GdkLauncher

ビルドに成功したら GdkLauncher で簡単なブラウジングができます。

(WebKit)/WebKitBuild/Release/WebKitTools/GdkLauncher/GdkLauncher

で実行します。非常に殺風景なウィンドウの中に Google が表示されます。

日本語が全て化けました。テキストエリアに入力することは一応できますが、Backspace も正しく処理されていないようです。日本語入力もできません。

もちろん表示しているページのリンクもたどれます。しかしページ内リンクではスクロールしてくれません。アドレスバーにアドレスを入力して Enter か Go ボタンを押せば移動することもできます。ページが遷移してもアドレスバーは更新されません。

JavaScript も動作しますが、非常に重いです。User-Agent の値は以下のとおりでした

Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/420+ (KHTML, like Gecko)

Acid2 も試してみましたが、通っていません。

まだまだ完成度は低く WebKit を試そうという方は Qt 移植版をビルドした方が良いと思われます。

Another 朝顔日記 経由。Adobe の Apollo のサンプルアプリケーション Scout を試してみた。Windows XP で弄ってみて感じたこと。レンダリングまわりが中心です。

• アルファベットの表示はとても綺麗。日本語の表示はかなり汚い。
• application/xhtml+xml も大丈夫
• navigator.userAgent は Mozilla/5.0 (Windows; U; en) AppleWebKit/420+ (KHTML, like Gecko) Safari/419.3 Apollo/1.0.Alpha1
  • WebKit の Subversion における WebKit-419 タグ (2006 年 12 月 18 日)
  • WebKit-419 タグ ができる 2 月ほど前のRecent WebKit Features。
• DOM3 XPath に対応しているみたい
• CSS
  • Acid2 は通らない
  • CSS3 resize は使える
  • CSS3 MediaQuery も使える
  • CSS3 text-overflow も使える
  • CSS3 Multi-column は使えない
  • CSS3 box-shadow/text-shadow は使えない
  • text-stroke/text-fill は使えない
• canvas はスクリプトオブジェクト (CanvasRenderingContext2D) はあるけれど、描画されない (Mac OS X 版だったら描画されるかもしれません)。
• SVG には未対応

Konqueror 3.5.6 は CSS Selectors testsuite に通ったということで、WebKitQt ではどうなのかと思い試してみました。BuildBot を見ると最新のリビジョンではビルドに失敗しているので、前チェックアウトしていた r19165 をビルドしたものを使いました。

実際に試してみると 43 セレクタ中 23 のみ通るという結果になりました。

From the 43 selectors 23 have passed, 9 are buggy and 11 are unsupported (Passed 353 out of 578 tests

この表を作るにあたり、hxxk.jp - IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめ からテストの一覧をパクりました。許可してくださった真琴さんに感謝します。

「WebKit のビルドに挑戦」では見事に失敗してしまいましたが、また挑戦しました。

Qt 4.3 snapshot

BuildBot: WebKit を見ると最近は安定して WebKitQt のビルドに成功しているようです。WebKit のソースを最新版に更新するには以下のスクリプトを実行します。

(WebKit)/WebKitTools/Scripts/update-webkit

その後は以前と同じように

(WebKit)/WebKitTools/Scripts/set-webkit-configuration --release
export QTDIR=/usr/share/qt4
(WebKit)/WebKitTools/Scripts/build-webkit

とします。ところがエラーが発生してビルドに失敗しました。

g++ -c -pipe -g -I/usr/include/libxml2 -D_REENTRANT -fPIC-DXPATH_SUPPORT=1 -DXSLT_SUPPORT=1 -DSVG_SUPPORT=1 -DWTF_CHANGES=1 -DBUILDING_QT__=1 -DQT_GUI_LIB -DQT_NETWORK_LIB -DQT_CORE_LIB -DQT_SHARED -I/usr/share/qt4/mkspecs/linux-g++ -I../../../WebCore -I/usr/include/qt4/QtCore -I/usr/include/qt4/QtNetwork -I/usr/include/qt4/QtGui -I/usr/include/qt4 -Itmp -I../../../JavaScriptCore -I../../../WebCore -I/usr/src/3rdparty/sqlite/ -I../../../WebCore/ForwardingHeaders -I../../../JavaScriptCore/kjs -I../../../JavaScriptCore/bindings -I../../../WebCore/platform -I../../../WebCore/platform/qt -I../../../WebCore/platform/network -I../../../WebCore/platform/network/qt -I../../../WebCore/platform/graphics -I../../../WebCore/platform/graphics/qt -I../../../WebCore/platform/graphics/svg -I../../../WebCore/platform/graphics/svg/qt -I../../../WebCore/platform/graphics/svg/filters -I../../../WebCore/loader -I../../../WebCore/loader/icon -I../../../WebCore/loader/qt -I../../../WebCore/css -I../../../WebCore/dom -I../../../WebCore/page -I../../../WebCore/page/qt -I../../../WebCore/bridge -I../../../WebCore/editing -I../../../WebCore/rendering -I../../../WebCore/history -I../../../WebCore/xml -I../../../WebCore/html -I../../../WebCore/bindings/js -I/home/taken/src/WebKit/WebCore/kcanvas -I/home/taken/src/WebKit/WebCore/kcanvas/device -I/home/taken/src/WebKit/WebCore/kcanvas/device/qt -I../../../WebCore/ksvg2 -I../../../WebCore/ksvg2/css -I../../../WebCore/ksvg2/svg -I../../../WebCore/ksvg2/misc -I../../../WebCore/ksvg2/events -I../../../WebCore/platform/image-decoders -I../../../WebKitQt/WebCoreSupport -I../../../WebKitQt/Api -I/home/taken/src/WebKit/WebCore/WebCore+SVG -I../../../WebCore -I../../../WebCore -I. -o tmp/ImageQt.o ../../../WebCore/platform/graphics/qt/ImageQt.cpp
../../../WebCore/platform/graphics/qt/ImageQt.cpp:43:22: error: QTransform: No such file or directory
make[1]: *** [tmp/ImageQt.o] Error 1

Qt 4.2 のドキュメントを見ると QTransform はありません。そこで Qt 4.3 のスナップショット をダウンロードしてインストールすることに

tar xjf qt-x11-opensource-src-4.3.0-snapshot-20070119.tar.bz2
cd qt-x11-opensource-src-4.3.0-snapshot-20070119
./configure
make
sudo make install

Qt のディレクトリが変更されるので、指定しなおしてからビルドします。

export QTDIR=/usr/local/Trolltech/Qt-4.3.0-snapshot-20070119
export PATH=$QTDIR/bin:$PATH
(WebKit)/WebKitTools/Scripts/set-webkit-configuration --release
(WebKit)/WebKitTools/Scripts/build-webkit

flex のインストール

今度はうまくいくかと思う程ビルドが進んだのですが、以下のようなエラーが出て失敗しました。

g++ -Wl,-rpath,/home/taken/src/WebKit/WebKitBuild/Release/lib -o QtLauncher main.o -L/usr/lib -L/home/taken/src/WebKit/WebKitBuild/Release/lib -lWebKitQt -lJavaScriptCore -lQtGui -L/build/buildd/qt4-x11-4.2.0/lib -L/usr/X11R6/lib -laudio -lXt -lpng -lSM -lICE -lXrender -lXrandr -lXfixes -lXcursor -lXinerama -lfreetype -lXext -lX11 -lQtCore -lfontconfig -lz -lm -lglib-2.0 -ldl -lpthread
 /home/taken/src/WebKit/WebKitBuild/Release/lib/libWebKitQt.so: undefined reference to `WebCore::CSSParser::lex()'
collect2: ld returned 1 exit status
make[1]: *** [QtLauncher] Error 1
make[1]: Leaving directory
(WebKit)/WebKitBuild/Release/WebKitQt/QtLauncher'
make: *** [sub-WebKitQt_QtLauncher-make_default-ordered] Error 2

ということで、IRC チャンネル #webkit で質問してみました。すると bison と flex はインストールしてあるかい? と尋ねられたので、確認すると bison はインストールされていましたが flex はしていなかったのでインストール。

sudo apt-get install flex

(WebKit)/WebKitBuild を削除してから build-webkit してねとのこと。その通りにしたところ、ビルドに成功しました 。

QtLauncher

実際に WebKitQt を試してみるには

(WebKit)/WebKitBuild/Release/WebKitQt/QtLauncher (任意の URI)

読み込み率位しか表示されませんが、リンクをたどることはできます。ウィンドウをリサイズしても、中身はリサイズされないので注意が必要です。https やフォームのサブミットにも対応していません。画像の読み込みも多少おかしなところがありました。CSS 関連では Multi Column には対応していますが、フィルとストロークの個別指定 (-webkit-text-fill, -webkit-text-stroke 等) や box-shadow (-webkit-box-shadow などには未対応です。Web Applications 1.0 の canvas 要素も未対応でした。

SVG には対応していますが、object 要素などからの参照には対応していないようです。直接読み込ませれば表示されます。文字列の選択もできます。

Linux で WebKit のビルドに挑戦して見事に失敗した顛末。

1/21 追記 : WebKit のビルド その2 でビルドに成功しました。詳細は その2 を御覧ください。この記事の情報もそれに則して更新しました。

ビルド環境

VMWare Player 上の Kubuntu 6.10(Edgy Eft) で行いました。KDE4 のスナップショットをインストールしてありますが、WebKit のビルドに KDE4 が必要かどうかはわかりません。

少なくとも以下のパッケージ(とその依存パッケージ)が必要になるかと思います。

• subversion
• libqt4-dev
• build-essential
• libxml2-dev
• libxslt-dev
• libsqlite3-dev
• bison
• flex

sudo apt-get install subversion libqt4-dev build-essential libxml2-dev libxslt-dev libsqlite3-dev bison flex

WebKit のチェックアウト

適当なディレクトリに WebKit をチェックアウトしてきます。

svn checkout svn://anonsvn.opensource.apple.com/svn/webkit/trunk WebKit

これが結構かかります。

WebKit の config

(WebKit)/WebKitTools/Scripts/set-webkit-configuration --release
export QTDIR=/usr/share/qt4

WebKit のビルド

実際にビルドします。

(WebKit)/WebKitTools/Scripts/build-webkit

これでビルドが始まります。

結果

失敗しました。

g++ -c -pipe -O2 -I/usr/include/libxml2 -D_REENTRANT -fPIC  -DXPATH_SUPPORT=1 -DXSLT_SUPPORT=1 -DSVG_SUPPORT=1 -DWTF_CHANGES=1 -DBUILDING_QT__=1 -DQT_NO_DEBUG -DQT_GUI_LIB -DQT_NETWORK_LIB -DQT_CORE_LIB -DQT_SHARED -I/usr/share/qt4/mkspecs/linux-g++ -I../../../WebCore -I/usr/include/qt4/QtCore -I/usr/include/qt4/QtCore -I/usr/include/qt4/QtNetwork -I/usr/include/qt4/QtNetwork -I/usr/include/qt4/QtGui -I/usr/include/qt4/QtGui -I/usr/include/qt4 -Itmp -I../../../JavaScriptCore -I../../../WebCore -I/usr/src/3rdparty/sqlite/ -I../../../WebCore/ForwardingHeaders -I../../../JavaScriptCore/kjs -I../../../JavaScriptCore/bindings -I../../../WebCore/platform -I../../../WebCore/platform/qt -I../../../WebCore/platform/network -I../../../WebCore/platform/network/qt -I../../../WebCore/platform/graphics -I../../../WebCore/platform/graphics/qt -I../../../WebCore/platform/graphics/svg -I../../../WebCore/platform/graphics/svg/qt -I../../../WebCore/platform/graphics/svg/filters -I../../../WebCore/loader -I../../../WebCore/loader/icon -I../../../WebCore/loader/qt -I../../../WebCore/css -I../../../WebCore/dom -I../../../WebCore/page -I../../../WebCore/bridge -I../../../WebCore/editing -I../../../WebCore/rendering -I../../../WebCore/history -I../../../WebCore/xml -I../../../WebCore/html -I../../../WebCore/bindings/js -I/home/taken/src/WebKit/WebCore/kcanvas -I/home/taken/src/WebKit/WebCore/kcanvas/device -I/home/taken/src/WebKit/WebCore/kcanvas/device/qt -I../../../WebCore/ksvg2 -I../../../WebCore/ksvg2/css -I../../../WebCore/ksvg2/svg -I../../../WebCore/ksvg2/misc -I../../../WebCore/ksvg2/events -I../../../WebCore/platform/image-decoders -I../../../WebKitQt/WebCoreSupport -I/home/taken/src/WebKit/WebCore/WebCore+SVG -I../../../WebCore -I../../../WebCore -I. -o tmp/FrameLoader.o ../../../WebCore/loader/FrameLoader.cpp
../../../WebCore/loader/FrameLoader.cpp: In member function ‘void WebCore::FrameLoader::requestFromDelegate(WebCore::ResourceRequest&, void*&, WebCore::ResourceError&)’:
../../../WebCore/loader/FrameLoader.cpp:3360: error: no matching function for call to ‘WebCore::FrameLoaderClient::dispatchWillSendRequest(WebCore::DocumentLoader*, void*&, WebCore::ResourceRequest&, int)’
../../../WebCore/loader/FrameLoaderClient.h:97: note: candidates are: virtual void WebCore::FrameLoaderClient::dispatchWillSendRequest(WebCore::DocumentLoader*, void*, WebCore::ResourceRequest&, const WebCore::ResourceResponse&)
make[1]: *** [tmp/FrameLoader.o] エラー 1
make[1]: ディレクトリ `/home/taken/src/WebKit/WebKitBuild/Release/WebCore' から 出ます
make: *** [sub-WebCore-make_default-ordered] エラー 2

自動ビルドシステムの BuildBot を見ていても Linux/Qt 版のビルドに失敗することはしばしばです。 the daily checkin to get the Qt build compiling again :) というのまでありました。Apple WebKit ゆえでしょうが、困ったものです。