7

カスタム CSS パーサーを作成していて、それを使用してアプリケーション (HTML ではなく) のグラフィック要素をスタイル設定したいと考えています。セレクターの優先順位や「カスケード」などに関して、これが通常の CSS の動作に準拠していることを確認したいと思います。

このプロジェクトに使用できる包括的な CSS テスト スイートはありますか?

私の CSS は通常の構文機能 (「タグ」名、ID、クラス、疑似クラスに一致するなど) のほとんどを備えており、多くの書式設定オプションを HTML の CSS と共有しますが、「ドキュメント」の種類に応じて異なるオプションも備えています。スタイリングしています。

実装をチェックする CSS テスト スイートを探していましたが、W3C テスト スイートのように、主にドキュメントの視覚的表現に関係するものしか見つかりませんでした。機械可読または適応しやすく、レイアウト エンジンではなく CSS エンジンを使用するものを探しています。(疑似テスト仕様) のようなもの:

Stylesheet
    blah.blub { color: red; }
    .blub { color: blue; }

+ Document
    <blah class="blub" />

=> Expected result:
    <blah class="blub" style="color: red" />

また

assert selector "#blub" matches element "moo#blub"
assert selector "blah#blub" does not match element "moo#blub"
...

また、HTML と同じものを実装した場合に備えて、 CSS ショートハンド ( linevsなど)の動作もテストしたいと思います。line-color例えば

line: 1px solid blue;
line-color: red;

「1pxの実線の赤」の線になります。何か案は？

4

2 に答える 2

1

PhantomJSなどのヘッドレスWebブラウザーを使用してから、jQueryなどのCSSエンジンを備えたJSライブラリーを使用するのはどうでしょうか。

そうすれば、CSSを記述してから、HTMLを記述し、jQueryの.css（）関数を使用してそれらのHTML要素のスタイルを確認できますか？

また、PhantomJSはページのスクリーンショットを撮ることができると思います。これは、視覚的な健全性チェックに役立ちます。

于 2013-02-22T21:56:22.777 に答える
1

CSS でのみ機能する CSS セレクター テスト スイートがあるとは思えません。CSS はコンパニオン テクノロジとして開発されているため (他の場所で使用できないとは言いませんが、一般的ではありません)、テスト スイートはその関係に焦点を当て、通常はこのようなブラウザーで実行されます。

CSS セレクターの汎用テスト スイートは、構文チェッカーにすぎません。スタイルが何かに適用されない限り、CSS パーサーが正しく機能したかどうかを確認することはできませんよね?

しかし、上記のスイートは、さまざまな CSS3 セレクター (まだ CSS3 の一部であるため古いバージョンも含む) に対して約 500 のテストを提供し、少なくともそれを実装の仕様として使用できるはずです。

外部ライブラリを使用して HTML を処理する場合、CSS パーサーをプラグインし、既存の HTML/CSS スイートを使用してパーサー エンジンをテストできます。しかし、これは仕事が多すぎるのでしょうか？そうでない場合は、Chromium を見て、その設計が完全な CSS パーサーをプラグインできるほど十分にモジュール化されているかどうかを確認してください。

于 2013-02-22T21:45:56.153 に答える