[CSS Regions] Convert existing pixel tests in ref tests

https://bugs.webkit.org/show_bug.cgi?id=120760

Patch by Mihai Maerean <mmaerean@adobe.com> on 2013-09-05
Reviewed by Antti Koivisto.

I have also removed text-align:justify from the tests because its not relevant to the tested functionality and
it makes creating the expected results very difficult because of the way fragmented text is rendered when
it's aligned justified.

* fast/regions/overflow-in-uniform-regions-dynamic-expected.html: Added.
* fast/regions/overflow-in-uniform-regions-dynamic.html:
* fast/regions/overflow-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-in-variable-width-regions.html:
* fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-moving-below-floats-in-variable-width-regions.html:
* fast/regions/overflow-not-moving-below-floats-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-not-moving-below-floats-in-variable-width-regions.html:
* fast/regions/overflow-rtl-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-rtl-in-variable-width-regions.html:
* fast/regions/overflow-size-change-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-size-change-in-variable-width-regions.html:
* platform/efl/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/efl/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/efl/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/efl/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/efl/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/efl/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/gtk/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/mac/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/mac/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.
* platform/qt-wk2/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/qt/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/qt/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/qt/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/qt/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/qt/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@155114 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent d971d446
2013-09-05 Mihai Maerean <mmaerean@adobe.com>
[CSS Regions] Convert existing pixel tests in ref tests
https://bugs.webkit.org/show_bug.cgi?id=120760
Reviewed by Antti Koivisto.
I have also removed text-align:justify from the tests because its not relevant to the tested functionality and
it makes creating the expected results very difficult because of the way fragmented text is rendered when
it's aligned justified.
* fast/regions/overflow-in-uniform-regions-dynamic-expected.html: Added.
* fast/regions/overflow-in-uniform-regions-dynamic.html:
* fast/regions/overflow-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-in-variable-width-regions.html:
* fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-moving-below-floats-in-variable-width-regions.html:
* fast/regions/overflow-not-moving-below-floats-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-not-moving-below-floats-in-variable-width-regions.html:
* fast/regions/overflow-rtl-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-rtl-in-variable-width-regions.html:
* fast/regions/overflow-size-change-in-variable-width-regions-expected.html: Added.
* fast/regions/overflow-size-change-in-variable-width-regions.html:
* platform/efl/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/efl/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/efl/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/efl/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/efl/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/efl/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/efl/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/gtk/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/gtk/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/gtk/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/mac/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/mac/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/mac/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/mac/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.
* platform/qt-wk2/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/qt-wk2/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-in-uniform-regions-dynamic-expected.png: Removed.
* platform/qt/fast/regions/overflow-in-uniform-regions-dynamic-expected.txt: Removed.
* platform/qt/fast/regions/overflow-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-in-variable-width-regions-expected.txt: Removed.
* platform/qt/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-moving-below-floats-in-variable-width-regions-expected.txt: Removed.
* platform/qt/fast/regions/overflow-rtl-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-rtl-in-variable-width-regions-expected.txt: Removed.
* platform/qt/fast/regions/overflow-size-change-in-variable-width-regions-expected.png: Removed.
* platform/qt/fast/regions/overflow-size-change-in-variable-width-regions-expected.txt: Removed.
2013-09-05 Brendan Long <b.long@cablelabs.com>
[GTK] media/track/in-band/ layout tests introduced in r154908 are failing
<!doctype html>
<html>
<head>
<style>
.content {
padding: 5px;
}
.first-box {
border: 1px solid blue;
padding:5px;
}
.second-box {
border: 1px solid green;
overflow:hidden;
}
#region1, #region2, #region3 {
border: 1px solid black;
}
#region1 {
width: 400px;
height: 150px;
overflow-y: hidden;
}
#region2 {
width: 400px;
height: 150px;
}
#region3 {
width: 400px;
height: 150px;
}
.float { width:30px; height:50px; background-color: lime }
.left { float: left }
.right { float: right }
</style>
</head>
<body>
<p>The first and last lines of text in the regions below should be clipped to the green box. The overflow
section sizes itself and clips differently in each region. The green box should be even with the lime floats at the top of the first region.</p>
<div id="container">
<div id="region1">
<div class="content">
<div class="first-box" style="border-bottom-width:0px;">
<div class="float left" id="float1"></div> <div class="float right" id="float2"></div>
<div class="second-box" style="border-bottom-width: 0px;">
<p>These lines will not spill out of the regions. These lines will not spill out of the regions.
These lines will not spill out of the regions. These lines will not spill out of the regions.</p>
<p style="text-align: justify;">These lines will not spill out of the regions.</p>
</div>
</div>
</div>
</div>
<div id="region2">
<div class="content" style="padding-top:0px;">
<div class="first-box" style="padding-top:0px;border-top-width:0px;">
<div class="second-box" style="padding-top:0px;border-top-width:0px;">
<p style="padding-top:0px;margin-top:0px;">These lines will not spill out of the regions. These lines will not spill out of the regions. These lines will not spill out of the regions. </p>
</div>
</div>
</div>
</div>
<div id="region3"></div>
</div>
<script>
document.body.offsetLeft;
document.getElementById('float1').style.width = '50px';
document.getElementById('float2').style.width = '50px';
</script>
</body>
</html>
\ No newline at end of file
......@@ -3,7 +3,6 @@
<style>
#content {
-webkit-flow-into: flow1;
text-align: justify;
padding: 5px;
}
......
<!doctype html>
<style>
.content {
padding: 5px;
}
#region2 .content { /*fragmented content only has padding-top in the 1st fragment container*/
padding-top: 0px;
}
.first-box {
border: 1px solid blue;
}
#region2 .first-box {
border-top-width: 0px;
}
.second-box {
margin:40px;
border: 1px solid green;
overflow:hidden;
}
#region2 .second-box {
margin-top: 0px;
border-top-width: 0px;
}
#region2 .second-box > p:first-child {
margin-top: 0px
}
#region1, #region2, #region3 {
border: 1px solid black;
}
#region1 {
width: 200px;
height: 100px;
overflow-y: hidden;
}
#region2 {
width: 300px;
height: 180px;
}
#region3 {
width: 120px;
height: 120px;
}
</style>
<body>
<p>The first and last lines of text in the regions below should be clipped to the green box. The overflow
section sizes itself independently in each region.</p>
<div id="container">
<div id="region1">
<div class="content">
<div class="first-box">
<div class="second-box">
<div style="width:500px">Clipped line of text that should not be visible.</div>
<p>These lines will</p>
</div>
</div>
</div>
</div>
<div id="region2">
<div class="content">
<div class="first-box">
<div class="second-box">
<p>not spill out of the regions. These lines will not spill out of the regions.
These lines will not spill out of the regions. </p>
<div style="width:500px">Clipped line of text that should not be visible.</div>
</div>
</div>
</div>
</div>
<div id="region3"></div>
</div>
......@@ -3,7 +3,6 @@
<style>
#content {
-webkit-flow-into: flow1;
text-align: justify;
padding: 5px;
}
......
<!doctype html>
<style>
.content {
padding: 5px;
}
.first-box {
border: 1px solid blue;
}
.second-box {
margin:auto;
border: 1px solid green;
width:75%;
overflow:hidden;
}
#region1, #region2, #region3 {
border: 1px solid black;
overflow:hidden;
}
#region1 {
width: 300px;
height: 100px;
}
#region2 {
width: 400px;
height: 180px;
}
#region3 {
width: 220px;
height: 120px;
}
.float { width:50px; height:50px; background-color: lime }
.left { float: left }
.right { float: right }
</style>
<body>
<p>The first and last lines of text in the regions below should be clipped to the green box. The overflow
section sizes itself and clips differently in each region. The green box should start below the lime floats.</p>
<div id="container">
<div id="region1">
<div class="content">
<div class="first-box">
<div class="float left"></div> <div class="float right"></div>
<div class="second-box">
<div style="width:500px;padding-bottom:25px">Clipped line of text that should not be visible.</div>
</div>
</div>
</div>
</div>
<div id="region2">
<div class="content" style="padding-top: 0px; padding-bottom: 0px">
<div class="first-box" style="border-top-width: 0px; border-bottom-width: 0px">
<div class="second-box" style="border-top-width: 0px; border-botttom-width: 0px; overflow-y: hidden">
<p style="margin-top: 0px">These lines will not spill out of the regions. These lines will not spill out of the regions.
These lines will not spill out of the regions. These lines will not spill out of the regions. </p>
<p>These lines will not spill out of the regions. These lines will not spill out of the regions.
These lines will not spill out of the regions. These lines will not spill out of the regions. <br/><br/></p>
</div>
</div>
</div>
</div>
<div id="region3">
<div class="content" style="padding-top: 0px">
<div class="first-box" style="border-top-width: 0px">
<div class="second-box" style="border-top-width: 0px">
<div style="width:500px">Clipped line of text that should not be visible.</div>
</div>
</div>
</div>
</div>
</div>
......@@ -3,7 +3,6 @@
<style>
#content {
-webkit-flow-into: flow1;
text-align: justify;
padding: 5px;
}
......
<!doctype html>
<style>
.content {
padding: 5px;
}
#region2 .content { /*fragmented content only has padding-top in the 1st fragment container*/
padding-top: 0px;
}
.first-box {
border: 1px solid blue;
}
#region2 .first-box {
border-top-width: 0px;
}
.second-box {
border: 1px solid green;
width:75%;
margin:auto;
overflow:hidden
}
#region2 .second-box {
margin-top: 0px;
border-top-width: 0px;
}
#region2 .second-box > p:first-child {
margin-top: 0px
}
#region1, #region2, #region3 {
border: 1px solid black;
overflow-y: hidden;
}
#region1 {
width: 300px;
height: 100px;
}
#region2 {
width: 400px;
height: 180px;
}
#region3 {
width: 220px;
height: 120px;
}
.float { width:30px; height:50px; background-color: lime }
.left { float: left }
.right { float: right }
</style>
<body>
<p>The first and last lines of text in the regions below should be clipped to the green box. The overflow
section sizes itself and clips differently in each region. The green box should be even with the lime floats at the top of the first region.</p>
<div id="container">
<div id="region1">
<div class="content">
<div class="first-box">
<div class="float left"></div> <div class="float right"></div>
<div class="second-box">
<div style="width:500px">Clipped line of text that should not be visible.</div>
<p>These lines will not spill out of the regions. These lines will not spill out of the regions.
These</p>
</div>
</div>
</div>
</div>
<div id="region2">
<div class="content">
<div class="first-box">
<div class="second-box">
<p>lines will not spill out of the regions. These lines will not spill out of the regions.</p>
<p>These lines will not spill out of the regions. These lines will not spill out of the regions.
These lines will not spill out of the regions. These lines will not spill out of the regions. </p>
<div style="width:500px">Clipped line of text that should not be visible.</div>
</div>
</div>
</div>
</div>
<div id="region3"></div>
</div>
......@@ -3,7 +3,6 @@
<style>
#content {
-webkit-flow-into: flow1;
text-align: justify;
padding: 5px;
}
......
<!doctype html>
<html style="direction:rtl">
<head>
<style>
.content {
padding: 5px;
}
#region2 .content { /*fragmented content only has padding-top in the 1st fragment container*/
padding-top: 0px;
}
.first-box {
border: 1px solid blue;
}
#region2 .first-box {
border-top-width: 0px;
}
.second-box {
margin:40px;
border: 1px solid green;
overflow:hidden;
direction:ltr
}
#region2 .second-box {
margin-top: 0px;
border-top-width: 0px;
}
#region2 .second-box > p:first-child {
margin-top: 0px
}
#region1, #region2, #region3 {
border: 1px solid black;
overflow-y: hidden;
}
#region1 {
width: 200px;
height: 100px;
}
#region2 {
width: 300px;
height: 180px;
}
#region3 {
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<p style="direction:ltr">The first and last lines of text in the regions below should be clipped to the green box. The overflow
section sizes itself independently in each region.</p>
<div id="container">
<div id="region1">
<div class="content">
<div class="first-box">
<div class="second-box">
<div style="width:500px">Clipped line of text that should not be visible.</div>
<p>These lines will</p>
</div>
</div>
</div>
</div>
<div id="region2">
<div class="content">
<div class="first-box">
<div class="second-box">
<p>not spill out of the regions. These lines will not spill out of the regions.
These lines will not spill out of the regions. </p>
<div style="width:500px">Clipped line of text that should not be visible.</div>
</div>
</div>
</div>
</div>
<div id="region3"></div>
</div>
......@@ -4,7 +4,6 @@
<style>
#content {
-webkit-flow-into: flow1;
text-align: justify;
padding: 5px;
}
......
<!doctype html>
<style>
.content {
padding: 5px;
}
#region2 .content, #region3 .content { /*fragmented content only has padding-top in the 1st fragment container*/
padding-top: 0px;
}
.first-box {
border: 1px solid blue;
}
#region2 .first-box, #region3 .first-box {
border-top-width: 0px;
}
.second-box {
margin: auto;
border: 1px solid green;
overflow:hidden;
width:75%;
padding-bottom:20px;
}
#region2 .second-box, #region3 .second-box {
margin-top: 0px;
border-top-width: 0px;
}
#region2 .second-box > p:first-child, #region3 .second-box > p:first-child {
margin-top: 0px
}
#region1, #region2, #region3 {
border: 1px solid black;
overflow-y: hidden;
}
#region1 {
width: 200px;
height: 100px;