CSS1 テストスイート: 4.1.4 浮遊要素

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

HR.minor {clear: both; width: 5%;}
HR.major {clear: both; width: 75%; margin: 1.5em;}
DIV {border: 5px solid purple; padding: 0; margin: 0.125em;}
P.left, P.right {width: 10em; padding: 1em; margin: 0;
   border: 1px solid lime; background-color: silver;}
IMG.left, IMG.right {margin: 0; border: 3px solid black;}
.left {float: left;}
.right {float: right;}

このテストページでは、それぞれのテストが浮遊段落について一度実行され、その後で浮遊画像についてもう一度実行されます。 段落を画像に置き換えること以外は、浮遊の方向を含め、テストの構造は全く同じものです。

これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の左右の内縁を越えないはずです。 これは、浮遊画像のボーダーが DIV の上ボーダーまたは左右ボーダーに重ならないはずだということです。

これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の左右の内縁を越えないはずです。 これは、浮遊画像のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、それらは互いに重ならないはずです。 最初の2つは隣り合うはずですし、3番目は次の「行」にあるはずです。

これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の左右の内縁を越えないはずです。 これは、浮遊画像のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、それらはどのようにしても互いに重ならないはずですし、また DIV テキストによって浮遊要素が上書きされないはずです。 さらに、浮遊画像は隣り合わないはずで、その代わりに1番目は左に浮遊させられ、2番目は1番目の下で右へ浮遊されられるはずです。

これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の上辺を越えないはずです。 これは、浮遊画像のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、左浮遊画像の上端は、右浮遊画像の上端よりも高くはないはずです。

これは DIV の中にあるテキストです。 * この DIV の中にある浮遊画像は、それに先立つインライン内容を包含する行ボックスより高く来ないはずです。 * これは、それぞれの浮遊物の上辺は、最大でも、ソース内でその浮遊画像が出現する直前の内容を包含するインライン要素の上縁と同じ高さにしかなれないという意味です。 これらの点を明確にマークするため、それぞれの浮遊画像の直前に星印が挿入されています。

これは DIV の中にあるテキストです。 * この DIV の中にある浮遊画像は、それに先立つインライン内容を包含する行ボックスより高く来ないはずです。 * これは、それぞれの浮遊物の上辺は、 * 最大でも、ソース内でその浮遊画像が出現する直前の内容を包含するインライン要素の上縁と同じ高さにしかなれないという意味です。 * これらの点を明確にマークするため、それぞれの浮遊画像の直前に星印が挿入されています。 ある行に浮遊画像のためのスペースがあれば、その画像は、上端が星印が現れる行ボックスの上端に揃うよう浮遊するはずです。 なければ、上端は、次の行ボックスの上端に揃うはずです。

これは * * DIV の中にあるテキストです。 CSS1の下では、左画像要素は DIVの左上隅に置かれるはずで、DIV の紫色のボーダーが、浮遊画像要素の緑色のボーダーと隣接するはずです。 同様に、右浮遊画像は DIVの右上隅に置かれるはずで、DIV の紫色のボーダーが、浮遊画像の緑色のボーダーと隣接するはずです。 DIV 要素のテキストは、この2つの浮遊画像の間や下を流れるはずです。 2つの星印キャラクタは、浮遊要素の挿入点をマークしています。 将来の仕様の下では、ソース文書内で浮遊要素に先立つテキストの直前にその浮遊要素が現れることを避けるため、浮遊要素の挿入点に続く行ボックスの上端と浮遊要素の上端が揃うことが認められるかもしれないと思われます。

TABLEテストコーナー

このテストページでは、それぞれのテストが浮遊段落について一度実行され、その後で浮遊画像についてもう一度実行されます。 段落を画像に置き換えること以外は、浮遊の方向を含め、テストの構造は全く同じものです。 これは左浮遊段落(ソースの中で1番目)です。 これは右浮遊段落(ソースの中で2番目)です。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊要素はこの DIV の左右の内縁を越えないはずです。 これは、浮遊要素のボーダーが DIV の上ボーダーまたは左右ボーダーに重ならないはずだということです。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の左右の内縁を越えないはずです。 これは、浮遊画像のボーダーが DIV の上ボーダーまたは左右ボーダーに重ならないはずだということです。 これは1番目の左浮遊段落です。 これは2番目の左浮遊段落です。 これは3番目の左浮遊段落です。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊要素はこの DIV の左右の内縁を越えないはずです。 これは、浮遊要素のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、それらは互いに重ならないはずです。 最初の2つは隣り合うはずですし、3番目は次の「行」にあるはずです。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の左右の内縁を越えないはずです。 これは、浮遊画像のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、それらは互いに重ならないはずです。 最初の2つは隣り合うはずですし、3番目は次の「行」にあるはずです。 これは左浮遊段落(ソースの中で1番目)です。 これは右浮遊段落(ソースの中で2番目)です。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊要素はこの DIV の左右の内縁を越えないはずです。 これは、浮遊要素のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、それらはどのようにしても互いに重ならないはずですし、また DIV テキストによって浮遊要素が上書きされないはずです。 さらに、浮遊要素は隣り合わないはずで、その代わりに1番目は左に浮遊させられ、2番目は1番目の下で右へ浮遊されられるはずです。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の左右の内縁を越えないはずです。 これは、浮遊画像のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、それらはどのようにしても互いに重ならないはずですし、また DIV テキストによって浮遊要素が上書きされないはずです。 さらに、浮遊画像は隣り合わないはずで、その代わりに1番目は左に浮遊させられ、2番目は1番目の下で右へ浮遊されられるはずです。 これは右浮遊段落(ソースの中で1番目)です。 これは左浮遊段落(ソースの中で2番目)です。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊要素はこの DIV の上辺を越えないはずです。 これは、浮遊要素のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、左浮遊ボックスの上端は、右浮遊ボックスの上端よりも高くはないはずです。 これは DIV の中にあるテキストです。 この DIV の中にある浮遊画像はこの DIV の上辺を越えないはずです。 これは、浮遊画像のボーダーが、どのようにしても DIV の上ボーダーまたは左右ボーダーに重ならないということです。 さらに、左浮遊画像の上端は、右浮遊画像の上端よりも高くはないはずです。 これは DIV の中にあるテキストです。 * これは左浮遊段落(ソースの中で1番目)です。 この DIV の中にある浮遊要素は、それに先立つインライン内容を包含する行ボックスより高く来ないはずです。 * これは右浮遊段落(ソースの中で2番目)です。 これは、それぞれの浮遊物の上辺は、最大でも、ソース内でその浮遊要素が出現する直前の内容を包含するインライン要素の上縁と同じ高さにしかなれないという意味です。 これらの点を明確にマークするため、それぞれの浮遊要素の直前に星印が挿入されています。 これは DIV の中にあるテキストです。 * この DIV の中にある浮遊画像は、それに先立つインライン内容を包含する行ボックスより高く来ないはずです。 * これは、それぞれの浮遊物の上辺は、最大でも、ソース内でその浮遊画像が出現する直前の内容を包含するインライン要素の上縁と同じ高さにしかなれないという意味です。 これらの点を明確にマークするため、それぞれの浮遊画像の直前に星印が挿入されています。 これは DIV の中にあるテキストです。 * これは左浮遊段落(ソースの中で1番目)です。 この DIV の中にある浮遊要素は、それに先立つインライン内容を包含する行ボックスより高く来ないはずです。 これは右浮遊段落(ソースの中で2番目)です。 これは、それぞれの浮遊物の上辺は、 * これは左浮遊段落(ソースの中で3番目)です。 最大でも、ソース内でその浮遊要素が出現する直前の内容を包含するインライン要素の上縁と同じ高さにしかなれないという意味です。 * これは左浮遊段落(ソースの中で4番目)です。 これらの点を明確にマークするため、それぞれの浮遊要素の直前に星印が挿入されています。 ある行に浮遊要素のためのスペースがあれば、その要素は、上端が星印が現れる行ボックスの上端に揃うよう浮遊するはずです。 なければ、上端は、次の行ボックスの上端に揃うはずです。 これは DIV の中にあるテキストです。 * この DIV の中にある浮遊画像は、それに先立つインライン内容を包含する行ボックスより高く来ないはずです。 * これは、それぞれの浮遊物の上辺は、 * 最大でも、ソース内でその浮遊画像が出現する直前の内容を包含するインライン要素の上縁と同じ高さにしかなれないという意味です。 * これらの点を明確にマークするため、それぞれの浮遊画像の直前に星印が挿入されています。 ある行に浮遊画像のためのスペースがあれば、その画像は、上端が星印が現れる行ボックスの上端に揃うよう浮遊するはずです。 なければ、上端は、次の行ボックスの上端に揃うはずです。 これは * これは左浮遊段落(ソースの中で1番目)です。 * これは右浮遊段落(ソースの中で2番目)です。 DIV の中にあるテキストです。 CSS1の下では、左浮遊要素は DIVの左上隅に置かれるはずで、DIV の紫色のボーダーが、浮遊要素の緑色のボーダーと隣接するはずです。 同様に、右浮遊要素は DIVの右上隅に置かれるはずで、DIV の紫色のボーダーが、浮遊要素の緑色のボーダーと隣接するはずです。 DIV 要素のテキストは、この2つの浮遊要素の間や下を流れるはずです。 2つの星印キャラクタは、浮遊要素の挿入点をマークしています。 将来の仕様の下では、ソース文書内で浮遊要素に先立つテキストの直前にその浮遊要素が現れることを避けるため、浮遊要素の挿入点に続く行ボックスの上端と浮遊要素の上端が揃うことが認められるかもしれないと思われます。 これは * * DIV の中にあるテキストです。 CSS1の下では、左画像要素は DIVの左上隅に置かれるはずで、DIV の紫色のボーダーが、浮遊画像要素の緑色のボーダーと隣接するはずです。 同様に、右浮遊画像は DIVの右上隅に置かれるはずで、DIV の紫色のボーダーが、浮遊画像の緑色のボーダーと隣接するはずです。 DIV 要素のテキストは、この2つの浮遊画像の間や下を流れるはずです。 2つの星印キャラクタは、浮遊要素の挿入点をマークしています。 将来の仕様の下では、ソース文書内で浮遊要素に先立つテキストの直前にその浮遊要素が現れることを避けるため、浮遊要素の挿入点に続く行ボックスの上端と浮遊要素の上端が揃うことが認められるかもしれないと思われます。