Skip to content

GitLab

T
tangled
Commit f328195f authored by rego@igalia.com's avatar rego@igalia.com
Browse files
Options

Make css-properties-position-relative-as-parent-fixed.html a ref-test 

Convert fast/css/css-properties-position-relative-as-parent-fixed.html
in a ref-test test avoiding the need to rebaseline the expected results
if we do any modification.

BUG=31286,425991
TEST=fast/css/css-properties-position-relative-as-parent-fixed.html

Review URL: https://codereview.chromium.org/669143002

git-svn-id: svn://svn.chromium.org/blink/trunk@185219 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 81f4da8f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 351 additions and 986 deletions
third_party/WebKit/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed-expected.html 0 → 100644
View file @ f328195f
<!DOCTYPE html>
<html>
<head>
<style>
h5 {
margin: 0;
}
.container {
position: relative;
left: 150px;
font-size: 0.8em;
}
.main {
width: 400px;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.green {
background-color: lime;
}
.blue {
background-color: cyan;
}
.grey {
background-color: silver;
}
.rtl {
direction: rtl;
}
.inline {
display: inline-block;
position: relative;
}
</style>
</head>
<body>
<h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left'.</h3>
<p>If fixed position inline element does not have left and/or right position then it should render as normal flow.</p>
<h5>Case 1: fixed text box (blue) should be just after relative text box (green).</h5>
<div class="container">
<div class="main relative green" style="left: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 2: fixed text box (blue) should be just before relative text box (green).</h5>
<div class="container">
<div class="main relative green rtl" style="left: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 3: fixed text box (blue) should be just after relative text box (green).</h5>
<div class="container">
<div class="main relative green" style="right: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 4: fixed text box (blue) should be just before relative text box (green).</h5>
<div class="container">
<div class="main relative green rtl" style="right: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 5: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="left: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 6: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="left: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 7: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="left: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 8: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="left: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 9: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="right: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 10: fixed text box (blue) should be after relative text box (grey) in some distance and before other relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="right: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 11: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="right: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 12: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="right: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed.html
View file @ f328195f
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style>
h5 {
margin: 0;
}
.container {
position: relative;
left: 150px;
font-size: 0.8em;
}
.main {
width: 400px;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.green {
background-color: lime;
}
.blue {
background-color: cyan;
}
.grey {
background-color: silver;
}
.rtl {
direction: rtl;
}
</style>
</head> </head>
<body style="position:fixed; left:150px;"> <body>
<h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left'.</h3> <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left'.</h3>
<h4>If fixed position inline element does not have left and/or right position then it should render as normal flow.</h4> <p>If fixed position inline element does not have left and/or right position then it should render as normal flow.</p>
<h5> <h5>Case 1: fixed text box (blue) should be just after relative text box (green).</h5>
Case 1 : fixed text box should be just after relative text box. <div class="container">
<br/> <div class="main relative green" style="left: 100px;">
relative
<div style="position:relative; left:100px; background:green; width:400px;"> <span class="fixed blue">
relative fixed
<span style="position:fixed; background:red;"> </span>
fixed </div>
</span> </div>
</span>
</div> <h5>Case 2: fixed text box (blue) should be just before relative text box (green).</h5>
<div class="container">
Case 2 : fixed text box should be just before relative text box. <div class="main relative green rtl" style="left: 100px;">
<br/> relative
<span class="fixed blue">
<div style="position:relative; left:100px; background:green; direction:rtl; width:400px;"> fixed
relative </span>
<span style="position:fixed; background:red;"> </div>
fixed </div>
</span>
</span> <h5>Case 3: fixed text box (blue) should be just after relative text box (green).</h5>
</div> <div class="container">
<div class="main relative green" style="right: 100px;">
Case 3 : fixed text box should be just after relative text box. relative
<br/> <span class="fixed blue">
fixed
<div style="position:relative; right:100px; background:green; width:400px;"> </span>
relative </div>
<span style="position:fixed; background:red;"> </div>
fixed
</span> <h5>Case 4: fixed text box (blue) should be just before relative text box (green).</h5>
</span> <div class="container">
</div> <div class="main relative green rtl" style="right: 100px;">
relative
Case 4 : fixed text box should be just before relative text box. <span class="fixed blue">
<br/> fixed
</span>
<div style="position:relative; right:100px; background:green; direction:rtl; width:400px;"> </div>
relative </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 5: fixed text box (blue) should be just after relative2 text box (green).</h5>
</span> <div class="container">
</span> <div class="main relative grey" style="left: 100px;">
</div> relative
<span class="relative green" style="left: 100px;">
Case 5 : fixed text box should be just after relative2 text box. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; left:100px; background:gray; width:400px;"> </span>
relative </span>
<span style="position:relative; left:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 6: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
</span> <div class="container">
</span> <div class="main relative grey rtl" style="left: 100px;">
</div> relative
<span class="relative green" style="left: 100px;">
Case 6 : fixed text box should be after relative text box in some distance and before relative2 in some distance. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; left:100px; background:gray; direction:rtl; width:400px;"> </span>
relative </span>
<span style="position:relative; left:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 7: fixed text box (blue) should be just after relative2 text box (green).</h5>
</span> <div class="container">
</span> <div class="main relative grey" style="left: 100px;">
</div> relative
<span class="relative green" style="right: 100px;">
Case 7 : fixed text box should be just after relative2 text box. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; left:100px; background:gray; width:400px;"> </span>
relative </span>
<span style="position:relative; right:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 8: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
</span> <div class="container">
</span> <div class="main relative grey rtl" style="left: 100px;">
</div> relative
<span class="relative green" style="right: 100px;">
Case 8 : fixed text box should be before relative2 text box in some distance. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; left:100px; background:gray; direction:rtl; width:400px;"> </span>
relative </span>
<span style="position:relative; right:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 9: fixed text box (blue) should be just after relative2 text box (green).</h5>
</span> <div class="container">
</span> <div class="main relative grey" style="right: 100px;">
</div> relative
<span class="relative green" style="left: 100px;">
Case 9 : fixed text box should be just after relative2 text box. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; right:100px; background:gray; width:400px;"> </span>
relative </span>
<span style="position:relative; left:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 10: fixed text box (blue) should be after relative text box (grey) in some distance and before other relative2 text box (green) in some distance.</h5>
</span> <div class="container">
</span> <div class="main relative grey rtl" style="right: 100px;">
</div> relative
<span class="relative green" style="left: 100px;">
Case 10 : fixed text box should be after relative text box in some distance and before relative2 in some distance. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; right:100px; background:gray; direction:rtl; width:400px;"> </span>
relative </span>
<span style="position:relative; left:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 11: fixed text box (blue) should be just after relative2 text box (green).</h5>
</span> <div class="container">
</span> <div class="main relative grey" style="right: 100px;">
</div> relative
<span class="relative green" style="right: 100px;">
Case 11 : fixed text box should be just after relative2 text box. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; right:100px; background:gray; width:400px;"> </span>
relative </span>
<span style="position:relative; right:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed <h5>Case 12: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
</span> <div class="container">
</span> <div class="main relative grey rtl" style="right: 100px;">
</div> relative
<span class="relative green" style="right: 100px;">
Case 12 : fixed text box should be before relative2 text box in some distance. relative2
<br/> <span class="fixed blue">
fixed
<div style="position:relative; right:100px; background:gray; direction:rtl; width:400px;"> </span>
relative </span>
<span style="position:relative; right:100px; background:green;"> </div>
relative2 </div>
<span style="position:fixed; background:red;">
fixed </body>
</span> </html>
</span>
</div>
</h5>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment