diff options
| author | bors-servo <lbergstrom+bors@mozilla.com> | 2016-04-07 18:41:24 +0530 |
|---|---|---|
| committer | bors-servo <lbergstrom+bors@mozilla.com> | 2016-04-07 18:41:24 +0530 |
| commit | a333f0fdd0c15a893e43a09e5ba43c173f847ae2 (patch) | |
| tree | 5768ceecc8a1861fb74343773d1fb6c50db45f67 /tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print | |
| parent | 5cf89fea48fb1fc58fd665384cbaa2060decff31 (diff) | |
| parent | 7deaeea707fdc42e2c3b1ebe9c5116b47529de80 (diff) | |
| download | servo-a333f0fdd0c15a893e43a09e5ba43c173f847ae2.tar.gz servo-a333f0fdd0c15a893e43a09e5ba43c173f847ae2.zip | |
Auto merge of #10455 - servo:css-20160407, r=Ms2ger
Update CSS tests to revision aac1cd51245c0c469325988a0446985a2f1e476c
<!-- Reviewable:start -->
This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/10455)
<!-- Reviewable:end -->
Diffstat (limited to 'tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print')
23 files changed, 420 insertions, 165 deletions
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht index a54c7840794..563a03b7463 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1> - <h2>Flex Items (72 tests)</h2> + <h2>Flex Items (71 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -31,7 +31,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s4">+</a> <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4 Flex Items</a></th></tr> - <!-- 24 tests --> + <!-- 23 tests --> <tr id="flex-flexitem-childmargin-4" class=""> <td> <a href="flex-flexitem-childmargin.xht">flex-flexitem-childmargin</a></td> @@ -62,20 +62,12 @@ <td>Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering </td> </tr> - <tr id="flexbox-table-fixup-001a-4" class=""> + <tr id="flexbox-table-fixup-001-4" class=""> <td> - <a href="flexbox-table-fixup-001a.xht">flexbox-table-fixup-001a</a></td> + <a href="flexbox-table-fixup-001.xht">flexbox-table-fixup-001</a></td> <td><a href="reference/flexbox-table-fixup-001-ref.xht">=</a> </td> <td></td> - <td>Testing that table cells in a flex container get an anonymous table wrapper that forms the flex item - </td> - </tr> - <tr id="flexbox-table-fixup-001b-4" class=""> - <td> - <a href="flexbox-table-fixup-001b.xht">flexbox-table-fixup-001b</a></td> - <td><a href="reference/flexbox-table-fixup-001-ref.xht">=</a> </td> - <td></td> - <td>Testing that the 'flex' shorthand has no effect on table cells in a flex container, since they aren't flex items + <td>Testing that table cells in a flex container get blockified and each form their own flex item </td> </tr> <tr id="flexbox-whitespace-handling-001a-4" class=""> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht index 054abb13b4a..d441ea2784e 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1> - <h2>Flex Layout Algorithm (62 tests)</h2> + <h2>Flex Layout Algorithm (68 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -517,7 +517,23 @@ <!-- 0 tests --> </tbody> <tbody id="s9.2.#hypothetical-main-size"> - <!-- 0 tests --> + <!-- 2 tests --> + <tr id="flex-aspect-ratio-img-column-001-9.2.#hypothetical-main-size" class="primary"> + <td><strong> + <a href="flex-aspect-ratio-img-column-001.xht">flex-aspect-ratio-img-column-001</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td></td> + <td>Aspect ratio handling of images + </td> + </tr> + <tr id="flex-aspect-ratio-img-row-001-9.2.#hypothetical-main-size" class="primary"> + <td><strong> + <a href="flex-aspect-ratio-img-row-001.xht">flex-aspect-ratio-img-row-001</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td></td> + <td>Aspect ratio handling of images + </td> + </tr> </tbody> <tbody id="s9.3"> <tr><th colspan="4" scope="rowgroup"> @@ -613,7 +629,51 @@ <!-- 0 tests --> </tbody> <tbody id="s9.4.#algo-cross-item"> - <!-- 0 tests --> + <!-- 4 tests --> + <tr id="flex-aspect-ratio-img-column-002-9.4.#algo-cross-item" class="primary"> + <td><strong> + <a href="flex-aspect-ratio-img-column-002.xht">flex-aspect-ratio-img-column-002</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td></td> + <td>Aspect ratio handling of images + <ul class="assert"> + <li>Test that we compute the correct aspect-ratio based cross size when a height is specified</li> + </ul> + </td> + </tr> + <tr id="flex-aspect-ratio-img-column-003-9.4.#algo-cross-item" class="primary"> + <td><strong> + <a href="flex-aspect-ratio-img-column-003.xht">flex-aspect-ratio-img-column-003</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td></td> + <td>Aspect ratio handling of images + <ul class="assert"> + <li>Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified</li> + </ul> + </td> + </tr> + <tr id="flex-aspect-ratio-img-row-002-9.4.#algo-cross-item" class="primary"> + <td><strong> + <a href="flex-aspect-ratio-img-row-002.xht">flex-aspect-ratio-img-row-002</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td></td> + <td>Aspect ratio handling of images + <ul class="assert"> + <li>Test that we compute the correct aspect-ratio based cross size when a width is specified</li> + </ul> + </td> + </tr> + <tr id="flex-aspect-ratio-img-row-003-9.4.#algo-cross-item" class="primary"> + <td><strong> + <a href="flex-aspect-ratio-img-row-003.xht">flex-aspect-ratio-img-row-003</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td></td> + <td>Aspect ratio handling of images + <ul class="assert"> + <li>Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified</li> + </ul> + </td> + </tr> </tbody> <tbody id="s9.4.#algo-cross-line"> <!-- 0 tests --> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap-reverse.xht index 89f04eacbc4..6c2e8503b46 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap-reverse.xht @@ -31,19 +31,19 @@ <body> <p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p> <div class="container"> - <div class="item">ｉ</div> + <div class="item">ｕ</div> <div class="item">９</div> <div class="item">ｆ</div> <div class="item">６</div> <div class="item">ｃ</div> <div class="item">３</div> - <div class="item">ｈ</div> + <div class="item">ｔ</div> <div class="item">８</div> <div class="item">ｅ</div> <div class="item">５</div> <div class="item">ｂ</div> <div class="item">２</div> - <div class="item">ｇ</div> + <div class="item">ｓ</div> <div class="item">７</div> <div class="item">ｄ</div> <div class="item">４</div> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap.xht index ae756f965fe..e84765f96e5 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap.xht @@ -31,19 +31,19 @@ <body> <p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p> <div class="container"> - <div class="item">ｇ</div> + <div class="item">ｓ</div> <div class="item">７</div> <div class="item">ｄ</div> <div class="item">４</div> <div class="item">ａ</div> <div class="item">１</div> - <div class="item">ｈ</div> + <div class="item">ｔ</div> <div class="item">８</div> <div class="item">ｅ</div> <div class="item">５</div> <div class="item">ｂ</div> <div class="item">２</div> - <div class="item">ｉ</div> + <div class="item">ｕ</div> <div class="item">９</div> <div class="item">ｆ</div> <div class="item">６</div> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse.xht index 9d7ec41b8d9..c744de241f6 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse.xht @@ -28,7 +28,7 @@ <body> <p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p> <div class="container"> - <div class="item">ｇｈｉ</div> + <div class="item">ｓｔｕ</div> <div class="item">７８９</div> <div class="item">ｄｅｆ</div> <div class="item">４５６</div> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap-reverse.xht index 0afe2787f5e..a0ddabdbba9 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap-reverse.xht @@ -36,19 +36,19 @@ <div class="item">６</div> <div class="item">ｆ</div> <div class="item">９</div> - <div class="item">ｉ</div> + <div class="item">ｕ</div> <div class="item">２</div> <div class="item">ｂ</div> <div class="item">５</div> <div class="item">ｅ</div> <div class="item">８</div> - <div class="item">ｈ</div> + <div class="item">ｔ</div> <div class="item">１</div> <div class="item">ａ</div> <div class="item">４</div> <div class="item">ｄ</div> <div class="item">７</div> - <div class="item">ｇ</div> + <div class="item">ｓ</div> </div> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap.xht index aeaebe31fc0..20b6da6fdd2 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap.xht @@ -36,19 +36,19 @@ <div class="item">４</div> <div class="item">ｄ</div> <div class="item">７</div> - <div class="item">ｇ</div> + <div class="item">ｓ</div> <div class="item">２</div> <div class="item">ｂ</div> <div class="item">５</div> <div class="item">ｅ</div> <div class="item">８</div> - <div class="item">ｈ</div> + <div class="item">ｔ</div> <div class="item">３</div> <div class="item">ｃ</div> <div class="item">６</div> <div class="item">ｆ</div> <div class="item">９</div> - <div class="item">ｉ</div> + <div class="item">ｕ</div> </div> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column.xht index 032fba3e598..20a7ed7ccff 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column.xht @@ -33,7 +33,7 @@ <div class="item">４５６</div> <div class="item">ｄｅｆ</div> <div class="item">７８９</div> - <div class="item">ｇｈｉ</div> + <div class="item">ｓｔｕ</div> </div> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-001.xht new file mode 100644 index 00000000000..2f761c2fac7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-001.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link href="http://www.google.com/" rel="author" title="Google Inc." /> + <link href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" rel="help" /> + <link href="reference/ref-filled-green-100px-square.xht" rel="match" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + height: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/200x200-green.png" id="test-flex-item-overlapping-green" /> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-002.xht new file mode 100644 index 00000000000..6e120f4b772 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-002.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link href="http://www.google.com/" rel="author" title="Google Inc." /> + <link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help" /> + <link href="reference/ref-filled-green-100px-square.xht" rel="match" /> + <meta content="Test that we compute the correct aspect-ratio based cross size when a height is specified" name="assert" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + height: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + height: 100px; + align-self: flex-start; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/200x200-green.png" id="test-flex-item-overlapping-green" /> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-003.xht new file mode 100644 index 00000000000..fc9790011f4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-column-003.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link href="http://www.google.com/" rel="author" title="Google Inc." /> + <link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help" /> + <link href="reference/ref-filled-green-100px-square.xht" rel="match" /> + <meta content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" name="assert" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + flex-direction: column; + height: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + flex-basis: 100px; + align-self: flex-start; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/200x200-green.png" id="test-flex-item-overlapping-green" /> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-001.xht new file mode 100644 index 00000000000..7fb7e068bb6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-001.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link href="http://www.google.com/" rel="author" title="Google Inc." /> + <link href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" rel="help" /> + <link href="reference/ref-filled-green-100px-square.xht" rel="match" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + height: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/200x200-green.png" id="test-flex-item-overlapping-green" /> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-002.xht new file mode 100644 index 00000000000..a5e7bd4576d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-002.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link href="http://www.google.com/" rel="author" title="Google Inc." /> + <link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help" /> + <link href="reference/ref-filled-green-100px-square.xht" rel="match" /> + <meta content="Test that we compute the correct aspect-ratio based cross size when a width is specified" name="assert" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/200x200-green.png" id="test-flex-item-overlapping-green" /> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-003.xht new file mode 100644 index 00000000000..77f9557600c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-aspect-ratio-img-row-003.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: Aspect ratio handling of images</title> + <link href="http://www.google.com/" rel="author" title="Google Inc." /> + <link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help" /> + <link href="reference/ref-filled-green-100px-square.xht" rel="match" /> + <meta content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" name="assert" /> + <style type="text/css"> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-flex { + display: flex; + width: 10px; + } + + img { + min-width: 0; + min-height: 0; + flex: none; + flex-basis: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="reference-overlapped-red"></div> + <div id="constrained-flex"> + <img src="support/200x200-green.png" id="test-flex-item-overlapping-green" /> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-table-fixup-001a.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-table-fixup-001.xht index 90fa082c34e..f1e4b240f38 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-table-fixup-001a.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-table-fixup-001.xht @@ -2,19 +2,20 @@ Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --><!-- - Testcase with table parts inside of a flex container, triggering - table-fixup. We use justify-content:space-between to stick packing + Testcase with table parts inside of a flex container, which should *not* + trigger table-fixup. We use justify-content:space-between to stick packing space between flex items, so that we can verify that e.g. a contiguous - run of <td>s will end up in the same flex item (wrapped in a table). + run of <td>s will each be blockified & form its own flex item (instead of + being aggregated into a single table & single flex item). --><html xmlns="http://www.w3.org/1999/xhtml"> <head> - <title>CSS Test: Testing that table cells in a flex container get an anonymous table wrapper that forms the flex item</title> + <title>CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item</title> <style type="text/css"> @page { font: italic 8pt sans-serif; color: gray; margin: 7%; counter-increment: page; @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } - @top-right { content: "Test flexbox-table-fixup-001a"; } + @top-right { content: "Test flexbox-table-fixup-001"; } @bottom-right { content: counter(page); } } </style> @@ -29,12 +30,10 @@ justify-content: space-around; } - <!-- NOTE: table-fixup pads each td element by 1px on each side. We - override that for top & bottom, for simplicity. So the td makes us - generate a box that's 2px wider than its contents. --> td { - padding-top: 0px; - padding-bottom: 0px; + /* Remove any default padding for td elements, so we can compare them + easily against blocks in the reference case. */ + padding: 0px; } .a { @@ -54,16 +53,16 @@ </style> </head> <body> - <!-- Just 2 adjacent table cells (they end up in the same table) --> + <!-- The adjacent table-parts in each example below should *not* be + grouped into the same flex item. --> + <!-- 2 adjacent table cells --> <div class="flexbox"><td class="a">cell1</td><td class="b">cell2</td></div> - <!-- Table cell followed by tbody (they end up in the same table) --> + <!-- Table cell followed by tbody --> <div class="flexbox"><td class="a">cell1</td><tbody class="b">t</tbody></div> - <!-- Empty table cell (ends up occupying 2px of width), followed by div, - followed by nonempty table cell. (3 flex items). --> - <!-- Note: We use "space-between" (instead of "space-around") here because - it makes the math cleaner. (100px split 2 ways instead of 3 ways.) --> - <div class="flexbox" style="justify-content: space-between"><td/><div class="c">div</div><td class="b">cell1</td></div> + <!-- Empty table cell (ends up occupying 2px of width), followed by + nonempty table cell.--> + <div class="flexbox"><td/><td class="b">cell1</td></div> </body> </html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-table-fixup-001b.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-table-fixup-001b.xht deleted file mode 100644 index c832ec7260e..00000000000 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-table-fixup-001b.xht +++ /dev/null @@ -1,77 +0,0 @@ -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---><!-- - Testcase with table parts inside of a flex container, triggering - table-fixup. We use justify-content:space-between to stick packing - space between flex items, so that we can verify that e.g. a contiguous - run of <td>s will end up in the same flex item (wrapped in a table). - - In this variant of the test, we also assign 'flex' values to the - table parts - these values should have no effect, since these children - don't themselves form flex items. The flex property _is_ honored on - the <div class="c">, though, because _its_ box _is_ a direct child of a - flexbox, so it _is_ a flex item. ---><html xmlns="http://www.w3.org/1999/xhtml"> - <head> - <title>CSS Test: Testing that the 'flex' shorthand has no effect on table cells in a flex container, since they aren't flex items</title> - <style type="text/css"> - @page { font: italic 8pt sans-serif; color: gray; - margin: 7%; - counter-increment: page; - @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } - @top-right { content: "Test flexbox-table-fixup-001b"; } - @bottom-right { content: counter(page); } - } -</style> - <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> - <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/> - <link rel="match" href="reference/flexbox-table-fixup-001-ref.xht"/> - <style> - div.flexbox { - border: 1px dashed blue; - width: 200px; - display: flex; - justify-content: space-around; - } - - <!-- NOTE: table-fixup pads each td element by 1px on each side. We - override that for top & bottom, for simplicity. So the td makes us - generate a box that's 2px wider than its contents. --> - td { - padding-top: 0px; - padding-bottom: 0px; - } - - .a { - background: lightgreen; - width: 48px; - flex: 5 3 100px; - } - - .b { - background: yellow; - width: 48px; - flex: 1 2 3px; - } - - .c { - background: pink; - flex: 0 0 48px; - } - </style> - </head> - <body> - <!-- Just 2 adjacent table cells (they end up in the same table) --> - <div class="flexbox"><td class="a">cell1</td><td class="b">cell2</td></div> - - <!-- Table cell followed by tbody (they end up in the same table) --> - <div class="flexbox"><td class="a">cell1</td><tbody class="b">t</tbody></div> - - <!-- Empty table cell (ends up occupying 2px of width), followed by div, - followed by nonempty table cell. (3 flex items). --> - <!-- Note: We use "space-between" (instead of "space-around") here because - it makes the math cleaner. (100px split 2 ways instead of 3 ways.) --> - <div class="flexbox" style="justify-content: space-between"><td/><div class="c">div</div><td class="b">cell1</td></div> - </body> -</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-with-pseudo-elements-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-with-pseudo-elements-003.xht index 3f1f97cc7c9..f4622cad58e 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-with-pseudo-elements-003.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-with-pseudo-elements-003.xht @@ -6,10 +6,9 @@ flex container, specifically when they've got display:table-row or table-cell. - Note that we *don't* treat the table row or cell frames themselves as flex - items, because they get wrapped in an anonymous table box, and *that* is - the flex item. So, "align-self" and "order" have no effect on the - row/cell. --><html xmlns="http://www.w3.org/1999/xhtml"><head> + The table-row / table-cell 'display' values should be blockified, and the + pseudo-elements should be treated as flex items. (They should not get + wrapped in an anonymous table box.) --><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item</title> <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> <link href="http://www.w3.org/TR/css-flexbox-1/#flex-items" rel="help" /> @@ -29,15 +28,19 @@ display: table-row; content: 'b'; background: yellow; - align-self: center; /* should have no effect */ - order: 1; /* should have no effect */ + /* If these "align-self" & "order" properties impact the rendering (as + they should), that verifies we're being treated as a flex item. */ + align-self: center; + order: 1; } div.withAfter::after { display: table-cell; content: 'a'; background: lightblue; - align-self: center; /* should have no effect */ - order: -1; /* should have no effect */ + /* If these "align-self" & "order" properties impact the rendering (as + they should), that verifies we're being treated as a flex item. */ + align-self: center; + order: -1; } </style> </head> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht index 3ac0639340b..45c6e583630 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht @@ -25,7 +25,7 @@ <div class="item">４５６</div> <div class="item">ｄｅｆ</div> <div class="item">７８９</div> - <div class="item">ｇｈｉ</div> + <div class="item">ｓｔｕ</div> </div> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-table-fixup-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-table-fixup-001-ref.xht index a03b166f39f..dad93f57af7 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-table-fixup-001-ref.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-table-fixup-001-ref.xht @@ -1,8 +1,8 @@ <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ ---><!-- Reference case for table-fixup on table parts inside of a - flex container. --><html xmlns="http://www.w3.org/1999/xhtml"> +--><!-- Reference case for ensuring table-fixup does not happen to adjacent + table parts directly inside of a flex container. --><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Reftest Reference</title> <style type="text/css"> @@ -18,14 +18,9 @@ <style> div.flexbox { border: 1px dashed blue; - } - - <!-- NOTE: table-fixup pads each td element by 1px on each side. We - override that for top & bottom, for simplicity. So the td makes us - generate a box that's 2px wider than its contents. --> - td { - padding-top: 0px; - padding-bottom: 0px; + width: 200px; + display: flex; + justify-content: space-around; } .a { @@ -45,14 +40,11 @@ </style> </head> <body> - <!-- Just 2 adjacent table cells (they end up in the same table) --> - <div class="flexbox" style="padding-left: 50px; width: 150px"><td class="a">cell1</td><td class="b">cell2</td></div> + <!-- In each example here, we simply use blocks instead of table parts --> + <div class="flexbox"><div class="a">cell1</div><div class="b">cell2</div></div> - <!-- Table cell followed by tbody (they end up in the same table) --> - <div class="flexbox" style="padding-left: 75px; width: 125px"><td class="a">cell1</td><tbody class="b">t</tbody></div> + <div class="flexbox"><div class="a">cell1</div><div class="b">t</div></div> - <!-- Empty table cell (ends up occupying 2px of width), followed by div, - followed by nonempty table cell. (3 flex items). --> - <div class="flexbox" style="padding-left: 52px; width: 148px"><div style="display: inline-block;" class="c">div</div><div style="display: inline-table; margin-left: 50px"><td class="b">cell1</td></div></div> + <div class="flexbox"><div/><div class="b">cell1</div></div> </body> </html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-003-ref.xht index 364f554c3c8..69df8dd4ebc 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-003-ref.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-003-ref.xht @@ -23,10 +23,14 @@ .fakeBefore { content: 'b'; background: yellow; + align-self: center; + order: 1; } .fakeAfter { content: 'a'; background: lightblue; + align-self: center; + order: -1; } </style> </head> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht index bd797e69228..1719d74d30d 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht @@ -512,6 +512,54 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="flex-aspect-ratio-img-column-001" class=""> + <tr> + <td rowspan="1" title="Aspect ratio handling of images"> + <a href="flex-aspect-ratio-img-column-001.xht">flex-aspect-ratio-img-column-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="flex-aspect-ratio-img-column-002" class=""> + <tr> + <td rowspan="1" title="Aspect ratio handling of images"> + <a href="flex-aspect-ratio-img-column-002.xht">flex-aspect-ratio-img-column-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="flex-aspect-ratio-img-column-003" class=""> + <tr> + <td rowspan="1" title="Aspect ratio handling of images"> + <a href="flex-aspect-ratio-img-column-003.xht">flex-aspect-ratio-img-column-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="flex-aspect-ratio-img-row-001" class=""> + <tr> + <td rowspan="1" title="Aspect ratio handling of images"> + <a href="flex-aspect-ratio-img-row-001.xht">flex-aspect-ratio-img-row-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="flex-aspect-ratio-img-row-002" class=""> + <tr> + <td rowspan="1" title="Aspect ratio handling of images"> + <a href="flex-aspect-ratio-img-row-002.xht">flex-aspect-ratio-img-row-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> + <tbody id="flex-aspect-ratio-img-row-003" class=""> + <tr> + <td rowspan="1" title="Aspect ratio handling of images"> + <a href="flex-aspect-ratio-img-row-003.xht">flex-aspect-ratio-img-row-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> <tbody id="flex-basis-001" class=""> <tr> <td rowspan="1" title="flex-basis - positive number"> @@ -2120,18 +2168,10 @@ <td rowspan="1"></td> </tr> </tbody> - <tbody id="flexbox-table-fixup-001a" class=""> - <tr> - <td rowspan="1" title="Testing that table cells in a flex container get an anonymous table wrapper that forms the flex item"> - <a href="flexbox-table-fixup-001a.xht">flexbox-table-fixup-001a</a></td> - <td><a href="reference/flexbox-table-fixup-001-ref.xht">=</a> </td> - <td rowspan="1"></td> - </tr> - </tbody> - <tbody id="flexbox-table-fixup-001b" class=""> + <tbody id="flexbox-table-fixup-001" class=""> <tr> - <td rowspan="1" title="Testing that the 'flex' shorthand has no effect on table cells in a flex container, since they aren't flex items"> - <a href="flexbox-table-fixup-001b.xht">flexbox-table-fixup-001b</a></td> + <td rowspan="1" title="Testing that table cells in a flex container get blockified and each form their own flex item"> + <a href="flexbox-table-fixup-001.xht">flexbox-table-fixup-001</a></td> <td><a href="reference/flexbox-table-fixup-001-ref.xht">=</a> </td> <td rowspan="1"></td> </tr> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list index f922a5de004..51deb4f4cf7 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list @@ -60,6 +60,12 @@ flex-002.xht == reference/justify-content-001-ref.xht flex-003.xht == reference/justify-content-001-ref.xht flex-004.xht == reference/justify-content-001-ref.xht flex-align-items-center.xht == reference/flex-align-items-center-ref.xht +flex-aspect-ratio-img-column-001.xht == reference/ref-filled-green-100px-square.xht +flex-aspect-ratio-img-column-002.xht == reference/ref-filled-green-100px-square.xht +flex-aspect-ratio-img-column-003.xht == reference/ref-filled-green-100px-square.xht +flex-aspect-ratio-img-row-001.xht == reference/ref-filled-green-100px-square.xht +flex-aspect-ratio-img-row-002.xht == reference/ref-filled-green-100px-square.xht +flex-aspect-ratio-img-row-003.xht == reference/ref-filled-green-100px-square.xht flex-basis-001.xht == reference/ref-filled-green-100px-square.xht flex-basis-002.xht == reference/ref-filled-green-100px-square.xht flex-basis-003.xht == reference/ref-filled-green-100px-square.xht @@ -261,8 +267,7 @@ flexbox-sizing-horiz-001.xht == reference/flexbox-sizing-horiz-001-ref.xht flexbox-sizing-horiz-002.xht == reference/flexbox-sizing-horiz-002-ref.xht flexbox-sizing-vert-001.xht == reference/flexbox-sizing-vert-001-ref.xht flexbox-sizing-vert-002.xht == reference/flexbox-sizing-vert-002-ref.xht -flexbox-table-fixup-001a.xht == reference/flexbox-table-fixup-001-ref.xht -flexbox-table-fixup-001b.xht == reference/flexbox-table-fixup-001-ref.xht +flexbox-table-fixup-001.xht == reference/flexbox-table-fixup-001-ref.xht flexbox-whitespace-handling-001a.xht == reference/flexbox-whitespace-handling-001-ref.xht flexbox-whitespace-handling-001b.xht == reference/flexbox-whitespace-handling-001-ref.xht flexbox-whitespace-handling-002.xht == reference/flexbox-whitespace-handling-002-ref.xht diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht index 134ef8abb41..0569a941892 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht @@ -37,7 +37,7 @@ <tbody id="s4"> <tr><th><a href="chapter-4.xht">Chapter 4 - Flex Items</a></th> - <td>(72 Tests)</td></tr> + <td>(71 Tests)</td></tr> </tbody> <tbody id="s5"> <tr><th><a href="chapter-5.xht">Chapter 5 - @@ -62,7 +62,7 @@ <tbody id="s9"> <tr><th><a href="chapter-9.xht">Chapter 9 - Flex Layout Algorithm</a></th> - <td>(62 Tests)</td></tr> + <td>(68 Tests)</td></tr> </tbody> <tbody id="s10"> <tr><th><a href="chapter-10.xht">Chapter 10 - |