Bug 1334403 - Some <caption> size tests for table flex items.
authorMats Palmgren <mats@mozilla.com>
Sun, 29 Jan 2017 04:02:59 +0100
changeset 331588 410a33e2a95e0b405f42323c27ba32a98e2161b4
parent 331587 ca810c416600d929c2775c4661686fc331b571b6
child 331589 31a6ffc60945f413e09c2bdbc964526cc003fcc9
push id31275
push userphilringnalda@gmail.com
push dateSun, 29 Jan 2017 17:02:37 +0000
treeherdermozilla-central@77af15f468e8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1334403
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1334403 - Some <caption> size tests for table flex items.
layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
layout/reftests/flexbox/flexbox-table-flex-items-1.html
layout/reftests/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Reference: caption size test for table flex items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+  <style type="text/css">
+* { vertical-align: top; }
+.flex {
+  display: inline-flex;
+  border: 3px solid grey;
+  height: 73px;
+  width: 110px;
+  align-items: start;  /* no support for stretch yet: bug 799725 */
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+  width: 32px;
+  height: 22px;
+}
+
+caption { border: 1px dashed blue; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"></caption><td><t></t></td></table><i></i></div>
+
+<script>
+let sizes = [
+  [ "30px", "16px" ],
+  [ "30px", "16px" ],
+  [ "30px", "16px" ],
+  [ "30px", "16px" ],
+  [ "27px", "16px" ],
+  [ "30px", "16px" ],
+  [ "22px", "16px" ],
+  [ "22px", "16px" ],
+];
+Array.prototype.slice.call(document.querySelectorAll('.flex > table > caption')).map((e) => {
+  let size = sizes[0];
+  e.style.width = size[0];
+  e.style.height = size[1];
+  sizes.shift();
+});
+</script>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-table-flex-items-1.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: caption size test for table flex items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal">
+  <link rel="match" href="flexbox-table-flex-items-1.html">
+  <style type="text/css">
+* { vertical-align: top; }
+.flex {
+  display: inline-flex;
+  border: 3px solid grey;
+  height: 73px;
+  width: 110px;
+  align-items: start;  /* no support for stretch yet: bug 799725 */
+}
+
+table {
+  border: 1px solid;
+  padding: 0;
+  margin: 0;
+  background: lightgrey;
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+caption { border: 1px dashed blue;}
+x { display:block; width:16px; height:16px; }
+t { display:block; width:30px; height:20px; }
+i:nth-of-type(1) { width:10px; height:20px; }
+i:nth-of-type(2) { width:20px; height:10px; }
+
+.hma10 { margin: 7px 3px 1px auto; }
+.hmaa  { margin: 7px auto 1px auto; }
+.vma10 { margin: auto 7px 3px 1px; }
+.vmaa  { margin: auto 7px auto 1px; }
+
+.vr { writing-mode: vertical-rl; }
+  </style>
+</head>
+<body>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption><x></x></caption><td><t></t></td></table></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption><x></x></caption><td><t></t></td></table><i></i></div>
+
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"><x></x></caption><td><t></t></td></table><i></i></div>
+<div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"><x></x></caption><td><t></t></td></table><i></i></div>
+
+<!-- for generating the result for the -ref file
+<script>
+let sizes = "let sizes = [\n";
+Array.prototype.slice.call(document.querySelectorAll('.flex > table > caption')).map((e) => {
+  let cs = window.getComputedStyle(e);
+  sizes += '  [ "' + cs.width +'", "' + cs.height + '" ],\n';
+});
+sizes += "];\n";
+console.log(sizes);
+</script>
+-->
+
+</body>
+</html>
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -108,8 +108,11 @@ fuzzy-if(skiaContent,1,5) == flexbox-res
 # Tests for flexbox styling on things that don't support it
 == flexbox-styling-on-svg-1.svg flexbox-styling-on-svg-1-ref.svg
 
 # Tests with widgets as flex items
 fuzzy-if(gtkWidget,1,66) == flexbox-widget-flex-items-1.html flexbox-widget-flex-items-1-ref.html
 fuzzy-if(gtkWidget,1,74) == flexbox-widget-flex-items-2.html flexbox-widget-flex-items-2-ref.html
 skip-if(gtkWidget) == flexbox-widget-flex-items-3.html flexbox-widget-flex-items-3-ref.html # bug 1260965
 fuzzy-if(gtkWidget,1,31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html
+
+# Tests for table flex items
+== flexbox-table-flex-items-1-ref.html flexbox-table-flex-items-1-ref.html