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/html | |
| 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/html')
23 files changed, 419 insertions, 156 deletions
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm index d88228519f1..05dc67af614 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm @@ -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 id="refs-column"> @@ -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.htm">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.htm">flexbox-table-fixup-001a</a></td> + <a href="flexbox-table-fixup-001.htm">flexbox-table-fixup-001</a></td> <td><a href="reference/flexbox-table-fixup-001-ref.htm">=</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.htm">flexbox-table-fixup-001b</a></td> - <td><a href="reference/flexbox-table-fixup-001-ref.htm">=</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/html/chapter-9.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm index cefdf343979..3b7f6ecf69e 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm @@ -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 id="refs-column"> @@ -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.htm">flex-aspect-ratio-img-column-001</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-row-001</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-column-002</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-column-003</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-row-002</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-row-003</a></strong></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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/html/css-flexbox-column-reverse-wrap-reverse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap-reverse.htm index 9a2f834ced2..24c1e7c41fc 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap-reverse.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap-reverse.htm @@ -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/html/css-flexbox-column-reverse-wrap.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap.htm index 160c94d313a..9c2815f90e9 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap.htm @@ -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/html/css-flexbox-column-reverse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm index 4a59313016a..2c1cbe5f43d 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm @@ -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/html/css-flexbox-column-wrap-reverse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap-reverse.htm index 45069188142..9bcdc91e830 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap-reverse.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap-reverse.htm @@ -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/html/css-flexbox-column-wrap.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap.htm index 014b4279edc..bf7fe66d3f8 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap.htm @@ -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/html/css-flexbox-column.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column.htm index f1e3353b7c3..27df3e49787 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column.htm @@ -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/html/flex-aspect-ratio-img-column-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-column-001.htm new file mode 100644 index 00000000000..c8076d2b50d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-column-001.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html><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.htm" 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/html/flex-aspect-ratio-img-column-002.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-column-002.htm new file mode 100644 index 00000000000..b5422282b5c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-column-002.htm @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html><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.htm" 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/html/flex-aspect-ratio-img-column-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-column-003.htm new file mode 100644 index 00000000000..2c8cec157f0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-column-003.htm @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html><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.htm" 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/html/flex-aspect-ratio-img-row-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-row-001.htm new file mode 100644 index 00000000000..a481e4c10ff --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-row-001.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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.htm" 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/html/flex-aspect-ratio-img-row-002.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-row-002.htm new file mode 100644 index 00000000000..5ab342bdda3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-row-002.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html><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.htm" 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/html/flex-aspect-ratio-img-row-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-row-003.htm new file mode 100644 index 00000000000..134fa89f80e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-aspect-ratio-img-row-003.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html><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.htm" 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/html/flexbox-table-fixup-001a.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-table-fixup-001.htm index 8bc0d0f07a0..99782a527f1 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-table-fixup-001a.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-table-fixup-001.htm @@ -3,13 +3,14 @@ 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> <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> <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.htm"> @@ -21,12 +22,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 { @@ -46,16 +45,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></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><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/html/flexbox-table-fixup-001b.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-table-fixup-001b.htm deleted file mode 100644 index 5a12805439f..00000000000 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-table-fixup-001b.htm +++ /dev/null @@ -1,69 +0,0 @@ -<!DOCTYPE html> -<!-- - 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> - <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> - <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.htm"> - <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></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/html/flexbox-with-pseudo-elements-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-with-pseudo-elements-003.htm index 22479c3a8b2..dcc6f0234e7 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-with-pseudo-elements-003.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-with-pseudo-elements-003.htm @@ -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><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><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/html/reference/css-flexbox-column-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm index adbc1426a62..4c62e2adeb0 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm @@ -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/html/reference/flexbox-table-fixup-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-table-fixup-001-ref.htm index e9ba478711b..e6f34209cd0 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-table-fixup-001-ref.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-table-fixup-001-ref.htm @@ -2,22 +2,17 @@ <!-- 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> +--><!-- Reference case for ensuring table-fixup does not happen to adjacent + table parts directly inside of a flex container. --><html> <head> <title>CSS Reftest Reference</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> <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 { @@ -37,14 +32,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><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/html/reference/flexbox-with-pseudo-elements-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-003-ref.htm index 3e7bbaa5f99..2eb3494e69f 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-003-ref.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-003-ref.htm @@ -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/html/reftest-toc.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm index 4befb51b36f..030807532f9 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm @@ -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.htm">flex-aspect-ratio-img-column-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-column-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-column-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-row-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-row-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-aspect-ratio-img-row-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flexbox-table-fixup-001a</a></td> - <td><a href="reference/flexbox-table-fixup-001-ref.htm">=</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.htm">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.htm">flexbox-table-fixup-001</a></td> <td><a href="reference/flexbox-table-fixup-001-ref.htm">=</a> </td> <td rowspan="1"></td> </tr> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list index d864c2a8e9a..d83308d4362 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list @@ -60,6 +60,12 @@ flex-002.htm == reference/justify-content-001-ref.htm flex-003.htm == reference/justify-content-001-ref.htm flex-004.htm == reference/justify-content-001-ref.htm flex-align-items-center.htm == reference/flex-align-items-center-ref.htm +flex-aspect-ratio-img-column-001.htm == reference/ref-filled-green-100px-square.htm +flex-aspect-ratio-img-column-002.htm == reference/ref-filled-green-100px-square.htm +flex-aspect-ratio-img-column-003.htm == reference/ref-filled-green-100px-square.htm +flex-aspect-ratio-img-row-001.htm == reference/ref-filled-green-100px-square.htm +flex-aspect-ratio-img-row-002.htm == reference/ref-filled-green-100px-square.htm +flex-aspect-ratio-img-row-003.htm == reference/ref-filled-green-100px-square.htm flex-basis-001.htm == reference/ref-filled-green-100px-square.htm flex-basis-002.htm == reference/ref-filled-green-100px-square.htm flex-basis-003.htm == reference/ref-filled-green-100px-square.htm @@ -261,8 +267,7 @@ flexbox-sizing-horiz-001.htm == reference/flexbox-sizing-horiz-001-ref.htm flexbox-sizing-horiz-002.htm == reference/flexbox-sizing-horiz-002-ref.htm flexbox-sizing-vert-001.htm == reference/flexbox-sizing-vert-001-ref.htm flexbox-sizing-vert-002.htm == reference/flexbox-sizing-vert-002-ref.htm -flexbox-table-fixup-001a.htm == reference/flexbox-table-fixup-001-ref.htm -flexbox-table-fixup-001b.htm == reference/flexbox-table-fixup-001-ref.htm +flexbox-table-fixup-001.htm == reference/flexbox-table-fixup-001-ref.htm flexbox-whitespace-handling-001a.htm == reference/flexbox-whitespace-handling-001-ref.htm flexbox-whitespace-handling-001b.htm == reference/flexbox-whitespace-handling-001-ref.htm flexbox-whitespace-handling-002.htm == reference/flexbox-whitespace-handling-002-ref.htm diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm index 2920427d381..af1a70abaa4 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm @@ -37,7 +37,7 @@ <tbody id="s4"> <tr><th><a href="chapter-4.htm">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.htm">Chapter 5 - @@ -62,7 +62,7 @@ <tbody id="s9"> <tr><th><a href="chapter-9.htm">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.htm">Chapter 10 - |