layout: Make percentages in top and bottom for relative positions

relative to height, not width.

Improves etsy.com.

Closes #13760.
This commit is contained in:
Patrick Walton 2016-10-13 22:50:27 -07:00
parent 0f4209644c
commit d5443ee450
14 changed files with 81 additions and 40 deletions

View file

@ -1,3 +0,0 @@
[bottom-103.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[bottom-104.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[bottom-113.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[position-relative-nested-001.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[relpos-calcs-007.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[top-103.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[top-104.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[top-113.htm]
type: reftest
expected: FAIL

View file

@ -1,3 +0,0 @@
[top-114.htm]
type: reftest
expected: FAIL

View file

@ -4668,6 +4668,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/relative_position_vertical_percentage_a.html": [
{
"path": "css/relative_position_vertical_percentage_a.html",
"references": [
[
"/_mozilla/css/relative_position_vertical_percentage_ref.html",
"=="
]
],
"url": "/_mozilla/css/relative_position_vertical_percentage_a.html"
}
],
"css/removeproperty.html": [
{
"path": "css/removeproperty.html",
@ -18474,6 +18486,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/relative_position_vertical_percentage_a.html": [
{
"path": "css/relative_position_vertical_percentage_a.html",
"references": [
[
"/_mozilla/css/relative_position_vertical_percentage_ref.html",
"=="
]
],
"url": "/_mozilla/css/relative_position_vertical_percentage_a.html"
}
],
"css/removeproperty.html": [
{
"path": "css/removeproperty.html",

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="relative_position_vertical_percentage_ref.html">
<style>
body, html {
margin: 0;
}
#a {
height: 200px;
width: 600px;
background: gold;
}
#b {
position: relative;
top: 50%;
}
</style>
<div id=a><div id=b>X

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
}
#a {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 600px;
background: gold;
}
#b {
position: absolute;
top: 100px;
left: 0px;
}
</style>
<div id=a></div><div id=b>X