Index: third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-table-fixup-001b.xhtml |
diff --git a/third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-table-fixup-001b.xhtml b/third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-table-fixup-001b.xhtml |
new file mode 100644 |
index 0000000000000000000000000000000000000000..ed82d5a9bd5eeaa61e818fe11a64fc41bed9aeec |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-table-fixup-001b.xhtml |
@@ -0,0 +1,74 @@ |
+<?xml version="1.0" encoding="UTF-8"?> |
+<!-- |
+ 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> |
+ <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="flexbox-table-fixup-001-ref.xhtml"/> |
+ <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> |