fune/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml
Daniel Holbert f73795cc3b Bug 1253354: Update flexbox reftests that deal with table parts in a flex container; now these elements will be blockified & will become flex items. r=mats
Specific changes:
 - flexbox-table-fixup-001a.xhtml previously tested that table parts would get wrapped in an anonymous table, which would form a single flex item. This patch changes it to instead test that each table-part forms its own flex item.
 - flexbox-table-fixup-001b.xhtml previously was a "belt and suspenders" afterthought to its "001a" counterpart. It verified that flex-item properties (like "flex") had no effect on table parts in a flex container. This patch removes this test (since it's no longer valid) and renames the "001a" test to simply "001" as a result.
 - flexbox-with-pseudo-elements-003.html previously tested that ::before/::after pseudo-elements with table-part display values would have their flex-item-related properties ignored (because they'd be wrapped in an anonymous table). This patch flips that expectation, because now these pseudo-elements will directly become flex items and these properties should be honored.

--HG--
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001a.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml
2016-03-03 17:15:22 -08:00

51 lines
1.2 KiB
HTML

<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- 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>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<style>
div.flexbox {
border: 1px dashed blue;
width: 200px;
display: flex;
justify-content: space-around;
}
.a {
background: lightgreen;
width: 48px;
}
.b {
background: yellow;
width: 48px;
}
.c {
background: pink;
width: 48px;
}
</style>
</head>
<body>
<!-- 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>
<div class="flexbox"
><div class="a">cell1</div><div class="b">t</div
></div>
<div class="flexbox"
><div></div
><div class="b">cell1</div
></div>
</body>
</html>