summaryrefslogtreecommitdiffstats
path: root/layout/reftests/table-overflow
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/table-overflow')
-rw-r--r--layout/reftests/table-overflow/bug785684-x-ref.html109
-rw-r--r--layout/reftests/table-overflow/bug785684-x.html85
-rw-r--r--layout/reftests/table-overflow/bug785684-y-ref.html109
-rw-r--r--layout/reftests/table-overflow/bug785684-y.html85
-rw-r--r--layout/reftests/table-overflow/reftest.list6
-rw-r--r--layout/reftests/table-overflow/table-caption-scroll-ref.html49
-rw-r--r--layout/reftests/table-overflow/table-caption-scroll.html49
-rw-r--r--layout/reftests/table-overflow/table-cell-block-overflow-ref.html43
-rw-r--r--layout/reftests/table-overflow/table-cell-block-overflow.html42
9 files changed, 577 insertions, 0 deletions
diff --git a/layout/reftests/table-overflow/bug785684-x-ref.html b/layout/reftests/table-overflow/bug785684-x-ref.html
new file mode 100644
index 0000000000..f54122f124
--- /dev/null
+++ b/layout/reftests/table-overflow/bug785684-x-ref.html
@@ -0,0 +1,109 @@
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style type="text/css">
+ .outer {
+ display:table;
+ height:20px;
+ width:300px;
+ max-width:300px;
+ }
+
+ .inner {
+ background-color: silver;
+ display:table-cell;
+ height:20px;
+ min-height:20px;
+ width:150px;
+ max-width:150px;
+ padding: 4px;
+ }
+ .inner.clipped {
+ padding: 0;
+ }
+ .inner.clipped > .clip {
+ padding: 4px;
+ }
+ .clip {
+ overflow:hidden;
+ width: 300px;
+ height: 20px;
+ box-sizing: border-box;
+ }
+ </style>
+</head>
+<body>
+<h2>Testing CSS overflow on display:table-cell</h2>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow-x: scroll">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow-x: clip">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow: hidden">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow: scroll">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow: clip">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<h2>Testing CSS overflow on display:table</h2>
+<div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="clip"><div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div></div>
+<div class="clip"><div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div></div>
+<div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="clip"><div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div></div>
+</body></html>
diff --git a/layout/reftests/table-overflow/bug785684-x.html b/layout/reftests/table-overflow/bug785684-x.html
new file mode 100644
index 0000000000..947c65034d
--- /dev/null
+++ b/layout/reftests/table-overflow/bug785684-x.html
@@ -0,0 +1,85 @@
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style type="text/css">
+ .outer {
+ display:table;
+ height:20px;
+ width:300px;
+ max-width:300px;
+ }
+
+ .inner {
+ background-color: silver;
+ display:table-cell;
+ height:20px;
+ min-height:20px;
+ width:150px;
+ max-width:150px;
+ padding: 4px;
+ }
+ </style>
+</head>
+<body>
+<h2>Testing CSS overflow on display:table-cell</h2>
+<div class="outer">
+ <div class="inner" style="overflow-x:hidden;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow-x:scroll;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow-x:clip;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow:hidden;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow:scroll;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow:clip;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<h2>Testing CSS overflow on display:table</h2>
+<div class="outer" style="overflow-x:hidden;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow-x:scroll;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow-x:clip;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow:hidden;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow:scroll;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow:clip;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+</body></html>
diff --git a/layout/reftests/table-overflow/bug785684-y-ref.html b/layout/reftests/table-overflow/bug785684-y-ref.html
new file mode 100644
index 0000000000..5033b56e04
--- /dev/null
+++ b/layout/reftests/table-overflow/bug785684-y-ref.html
@@ -0,0 +1,109 @@
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style type="text/css">
+ .outer {
+ display:table;
+ height:20px;
+ width:300px;
+ max-width:300px;
+ }
+
+ .inner {
+ background-color: silver;
+ display:table-cell;
+ height:20px;
+ min-height:20px;
+ width:150px;
+ max-width:150px;
+ padding: 4px;
+ }
+ .inner.clipped {
+ padding: 0;
+ }
+ .inner.clipped > .clip {
+ padding: 4px;
+ }
+ .clip {
+ overflow:hidden;
+ width: 300px;
+ height: 20px;
+ box-sizing: border-box;
+ }
+ </style>
+</head>
+<body>
+<h2>Testing CSS overflow on display:table-cell</h2>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow-x: auto; overflow-y: hidden">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow-x: auto; overflow-y: scroll">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow-y: clip">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow: hidden">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow: scroll">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<div class="outer">
+ <div class="inner clipped">
+ <div class="clip" style="overflow: clip">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+ </div>
+</div>
+<h2>Testing CSS overflow on display:table</h2>
+<div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="clip"><div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div></div>
+<div class="clip"><div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div></div>
+<div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="clip"><div class="outer">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div></div>
+</body></html>
diff --git a/layout/reftests/table-overflow/bug785684-y.html b/layout/reftests/table-overflow/bug785684-y.html
new file mode 100644
index 0000000000..340fcf7f8e
--- /dev/null
+++ b/layout/reftests/table-overflow/bug785684-y.html
@@ -0,0 +1,85 @@
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style type="text/css">
+ .outer {
+ display:table;
+ height:20px;
+ width:300px;
+ max-width:300px;
+ }
+
+ .inner {
+ background-color: silver;
+ display:table-cell;
+ height:20px;
+ min-height:20px;
+ width:150px;
+ max-width:150px;
+ padding: 4px;
+ }
+ </style>
+</head>
+<body>
+<h2>Testing CSS overflow on display:table-cell</h2>
+<div class="outer">
+ <div class="inner" style="overflow-y:hidden;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow-y:scroll;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow-y:clip;">
+ <img width="296px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow:hidden;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow:scroll;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer">
+ <div class="inner" style="overflow:clip;">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<h2>Testing CSS overflow on display:table</h2>
+<div class="outer" style="overflow-y:hidden;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow-y:scroll;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow-y:clip;">
+ <div class="inner">
+ <img width="296px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow:hidden;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow:scroll;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<div class="outer" style="overflow:clip;">
+ <div class="inner">
+ <img width="400px" height="10px" src="data:image/gif;base64,R0lGODlhAQABAIABAAD/AP///ywAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+</body></html>
diff --git a/layout/reftests/table-overflow/reftest.list b/layout/reftests/table-overflow/reftest.list
new file mode 100644
index 0000000000..7b11d4f5f7
--- /dev/null
+++ b/layout/reftests/table-overflow/reftest.list
@@ -0,0 +1,6 @@
+defaults pref(layout.tables.scrollable-cells,true)
+
+skip-if(ThreadSanitizer) == bug785684-x.html bug785684-x-ref.html
+== bug785684-y.html bug785684-y-ref.html
+== table-caption-scroll.html table-caption-scroll-ref.html
+== table-cell-block-overflow.html table-cell-block-overflow-ref.html
diff --git a/layout/reftests/table-overflow/table-caption-scroll-ref.html b/layout/reftests/table-overflow/table-caption-scroll-ref.html
new file mode 100644
index 0000000000..5c024f8d2b
--- /dev/null
+++ b/layout/reftests/table-overflow/table-caption-scroll-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testing table captions with overflow:auto/scroll/hidden</title>
+ <style type="text/css">
+
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+.caption { overflow:auto; border:1px solid; height:100px; }
+.s { overflow:scroll; }
+.h { overflow:hidden; }
+ </style>
+</head>
+<body>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption><div class="caption">0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
+<tr><td>TTTTTTTTTT</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption><div class="caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
+<tr><td>T</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption><div class="s caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
+<tr><td>T</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption><div class="s caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
+<tr><td>TTTTTTTTTT</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption><div class="h caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
+<tr><td>T</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption><div class="h caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
+<tr><td>TTTTTTTTTT</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-overflow/table-caption-scroll.html b/layout/reftests/table-overflow/table-caption-scroll.html
new file mode 100644
index 0000000000..70c5c0f566
--- /dev/null
+++ b/layout/reftests/table-overflow/table-caption-scroll.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testing table captions with overflow:auto/scroll/hidden</title>
+ <style type="text/css">
+
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+caption { border:1px solid; overflow:auto; height:100px; }
+.s { overflow:scroll; }
+.h { overflow:hidden; }
+ </style>
+</head>
+<body>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
+<tr><td>TTTTTTTTTT</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption>00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
+<tr><td>T</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption class="s">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
+<tr><td>T</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption class="s">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
+<tr><td>TTTTTTTTTT</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption class="h">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
+<tr><td>T</td></tr>
+</table>
+
+<table border="0" cellspacing="0" cellpadding="0">
+<caption class="h">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
+<tr><td>TTTTTTTTTT</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/table-overflow/table-cell-block-overflow-ref.html b/layout/reftests/table-overflow/table-cell-block-overflow-ref.html
new file mode 100644
index 0000000000..9d9ecdfc79
--- /dev/null
+++ b/layout/reftests/table-overflow/table-cell-block-overflow-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <style>
+ .content {
+ padding: 20px;
+ height: 100%;
+ width: 20px;
+ height: 54px;
+ background: purple;
+ }
+ .fake-td {
+ float: left;
+ border: 20px solid teal;
+ height: 54px;
+ width: 60px;
+ padding: 1px;
+ margin: 1px;
+ }
+ .fake-table-tr {
+ padding: 1px;
+ }
+ </style>
+</head>
+ <body>
+ <div class="fake-table-tr">
+ <div class="fake-td">
+ <div class="content"></div>
+ </div>
+ <div class="fake-td">
+ <div class="content"></div>
+ </div>
+ <div class="fake-td">
+ <div class="content"></div>
+ </div>
+ <div class="fake-td">
+ <div class="content"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/table-overflow/table-cell-block-overflow.html b/layout/reftests/table-overflow/table-cell-block-overflow.html
new file mode 100644
index 0000000000..27236217c6
--- /dev/null
+++ b/layout/reftests/table-overflow/table-cell-block-overflow.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test table-cell content overflowing in the block direction for each
+ vertical-align value</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ td {
+ border: 20px solid teal;
+ height: 100%;
+ }
+ table {
+ height: 100px;
+ }
+ .content {
+ padding: 20px;
+ height: 100%;
+ width: 20px;
+ background: purple;
+ }
+ </style>
+</head>
+ <body>
+ <table>
+ <tr>
+ <td style="vertical-align: middle">
+ <div class="content"></div>
+ </td>
+ <td style="vertical-align: baseline">
+ <div class="content"></div>
+ </td>
+ <td style="vertical-align: bottom">
+ <div class="content"></div>
+ </td>
+ <td style="vertical-align: top">
+ <div class="content"></div>
+ </td>
+ </tr>
+ </table>
+ </body>
+</html>