CSS1 テストスイート: 5.3.4 background-repeat

下記のテキストに適用されるスタイル宣言は、つぎのとおりです。

.one {background-image: url(oransqr.gif); background-repeat: repeat-y;}
.two {background-image: url(oransqr.gif); background-repeat: repeat-x;}
.three {background-image: url(oransqr.gif); background-repeat: no-repeat;}
.four {background-image: url(bg.gif); background-position: 50% 50%; background-repeat: repeat-y;}
.five {background-image: url(crosshair2.gif); background-position: 50% 50%;
       background-color: red;}
.six {background-image: url(crosshair2.gif); background-position: center top;
      background-color: red;}
.seven {background-image: url(crosshair2.gif); background-position: top left;
        background-color: red;}
.eight {background-image: url(crosshair2.gif); background-position: bottom right;
        background-color: red;}
.nine {background-image: url(crosshair2.gif); background-position: 50% 50%;
       background-color: red;}

この文には、"y" 方向にリピートされた橙色のストライプがあるはずで、これは左上隅から始まっています(background-position のデフォルトは '0% 0%' で、ここではそのプロパティが宣言されていないからです)。 これは、段落を長くするという目的のためだけに組み込まれた余分なテキストです。 ご理解いただきありがとうございます。

この文には、"x" 方向にリピートされた橙色のストライプがあるはずで、これは左上隅から始まっています (background-position のデフォルトは '0% 0%' で、ここではそのプロパティが宣言されていないからです)。 これは、段落を長くするという目的のためだけに組み込まれた余分なテキストです。 ご理解いただきありがとうございます。

この文には、背後に橙色の長方形が1個だけあるはずで、これは左上隅に置かれています (background-position のデフォルトは '0% 0%' で、ここではそのプロパティが宣言されていないからです)。 これは、段落を長くするという目的のためだけに組み込まれた余分なテキストです。 ご理解いただきありがとうございます。

この文には、元の画像が段落の中でちょうど中央寄せされていて、段落の中央を垂直的に駆け下りる緑色のハッチのようなストライプがあるはずです。 これは、repeat-y が、y軸上で両方向にタイル表示するよう指定しているからです。 このテストが有効なのは、ユーザエージェントが background-position をサポートしている場合だけですので注意してください(テスト 5.3.6 を見てください)。 適合性(またはその欠如)をもっとはっきりさせるため、余分なテキストで段落を満たしましょう。

この段落にはタイル表示された背景があるはずで、元の画像は段落の中できちんと中央寄せされているはずです。 これは、background-repeat が、元の画像の位置とは無関係に全方向にタイル表示するよう指定しているからです。 このテストが有効なのは、ユーザエージェントが background-position をサポートしている場合だけですので注意してください(テスト 5.3.6 を見てください)。 適合性(またはその欠如)をもっとはっきりさせるため、余分なテキストで段落を満たしましょう。 背景色が見える場合には画像が正しくタイル表示されていないのですが、背景色は存在しています。

この文には、上端中央で始まり完全にタイル表示されている背景があるはずです。 すなわち、背景の開始点は、段落の上端のちょうど真ん中のはずです。 適合性(またはその欠如)をもっとはっきりさせるため、余分なテキストで段落を満たしましょう。 背景色が見える場合には画像が正しくタイル表示されていないのですが、背景色は存在しています。

この文には、左上隅で始まり完全にタイル表示されている背景があるはずです。 適合性(またはその欠如)をもっとはっきりさせるため、余分なテキストで段落を満たしましょう。 背景色が見える場合には画像が正しくタイル表示されていないのですが、背景色は存在しています。

この文には、右下隅で始まり完全にタイル表示されている背景があるはずです。 言い換えると、画像の完全なインスタンスが右下隅に固定されているはずで、タイル表示された背景はそこから広がっているのです。 適合性(またはその欠如)をもっとはっきりさせるため、余分なテキストで段落を満たしましょう。 背景色が見える場合には画像が正しくタイル表示されていないのですが、背景色は存在しています。

この文には、真ん中で始まりすべての方向に敷き詰められた完全にタイル表示されている背景があるはずです。 すなわち、背景の開始点は段落のちょうど真ん中のはずです。 適合性(またはその欠如)をもっとはっきりさせるため、余分なテキストで段落を満たしましょう。 実は、これを完全にはっきりさせるためには、余分なテキストがたくさん必要となります。 こういうことになるのは、私は見出しかその他のCSSプロパティかの手段に訴えるのでなければテキストサイズを増やすことができないけれども、そのどちらもこの環境で使いたくないからです。 でもこれでテキストは充分なはずです。 背景色が見える場合には画像が正しくタイル表示されていないのですが、背景色は存在しています。