зеркало из https://github.com/mozilla/gecko-dev.git
Add tests for dynamic resizing of things that depend on width of container. b=163504, 28811
This commit is contained in:
dbaron%dbaron.org
Родитель
50f142d1af
Коммит
09e17d7ae9
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
div { height: 3%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><img src="mozilla-banner.gif" width="100" style="height: 50%"></div>
|
||||
<div><img src="mozilla-banner.gif" width="2" style="min-height: 50%"></div>
|
||||
<div><img src="mozilla-banner.gif" width="100" style="max-height: 50%"></div>
|
||||
|
||||
<div><span style="position:relative; top: 30%">text</span></div>
|
||||
<div><span style="position:relative; bottom: 30%">text</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
iframe { width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe style="height: 750px" src="163504-1-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
iframe { width: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.height = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="height: 1000px" id="toresize" src="163504-1-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
iframe { width: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.height = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="height: 500px" id="toresize" src="163504-1-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
div { height: 3%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><span><img src="mozilla-banner.gif" width="100" style="height: 50%"></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" width="2" style="min-height: 50%"></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" width="100" style="max-height: 50%"></span></div>
|
||||
|
||||
<div><span><span style="position:relative; top: 30%">text</span></span></div>
|
||||
<div><span><span style="position:relative; bottom: 30%">text</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
iframe { width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe style="height: 750px" src="163504-2-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
iframe { width: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.height = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="height: 1000px" id="toresize" src="163504-2-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block height</title>
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; }
|
||||
iframe { width: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.height = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="height: 500px" id="toresize" src="163504-2-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><span style="margin-right: 10%">text</span></div>
|
||||
<div><span style="margin-left: 10%">text</span></div>
|
||||
<div><img src="mozilla-banner.gif" height="10" style="margin-top: 2%"></div>
|
||||
<div><img src="mozilla-banner.gif" height="10" style="margin-right: 10%"></div>
|
||||
<div><img src="mozilla-banner.gif" height="10" style="margin-bottom: 2%"></div>
|
||||
<div><img src="mozilla-banner.gif" height="10" style="margin-left: 10%"></div>
|
||||
|
||||
<div><span style="background:yellow; padding-top: 2%">text</span></div>
|
||||
<div><span style="background:yellow; padding-right: 10%">text</span></div>
|
||||
<div><span style="background:yellow; padding-bottom: 2%">text</span></div>
|
||||
<div><span style="background:yellow; padding-left: 10%">text</span></div>
|
||||
|
||||
<div><img src="mozilla-banner.gif" height="10" style="width: 10%"></div>
|
||||
<div><img src="mozilla-banner.gif" height="2" style="min-width: 50%"></div>
|
||||
<div><img src="mozilla-banner.gif" height="10" style="max-width: 1%"></div>
|
||||
|
||||
<div><span style="display:inline-block">This is an inline-block that contains enough text that its shrink-wrap width will be based on the available size in its container. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span></div>
|
||||
<div><button>This is a button that contains enough text that its shrink-wrap width will be based on the available size in its container. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</button></div>
|
||||
<div><fieldset>This is a fieldset that contains enough text that its shrink-wrap width will be based on the available size in its container. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</fieldset></div>
|
||||
|
||||
<div><span style="position:relative; right: 3%">text in a span</span></div>
|
||||
<div><span style="position:relative; left: 3%">text in a span</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
html, body, iframe { height: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe style="width: 750px" src="28811-1-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
html, body, iframe { height: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.width = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="width: 1000px" id="toresize" src="28811-1-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
html, body, iframe { height: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.width = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="width: 500px" id="toresize" src="28811-1-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div><span><span style="margin-right: 10%">text</span></span></div>
|
||||
<div><span><span style="margin-left: 10%">text</span></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" height="10" style="margin-top: 2%"></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" height="10" style="margin-right: 10%"></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" height="10" style="margin-bottom: 2%"></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" height="10" style="margin-left: 10%"></span></div>
|
||||
|
||||
<div><span><span style="background:yellow; padding-top: 2%">text</span></span></div>
|
||||
<div><span><span style="background:yellow; padding-right: 10%">text</span></span></div>
|
||||
<div><span><span style="background:yellow; padding-bottom: 2%">text</span></span></div>
|
||||
<div><span><span style="background:yellow; padding-left: 10%">text</span></span></div>
|
||||
|
||||
<div><span><img src="mozilla-banner.gif" height="10" style="width: 10%"></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" height="2" style="min-width: 50%"></span></div>
|
||||
<div><span><img src="mozilla-banner.gif" height="10" style="max-width: 1%"></span></div>
|
||||
|
||||
<div><span><span style="display:inline-block">This is an inline-block that contains enough text that its shrink-wrap width will be based on the available size in its container. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span></span></div>
|
||||
<div><span><button>This is a button that contains enough text that its shrink-wrap width will be based on the available size in its container. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</button></span></div>
|
||||
<div><span><fieldset>This is a fieldset that contains enough text that its shrink-wrap width will be based on the available size in its container. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</fieldset></span></div>
|
||||
|
||||
<div><span><span style="position:relative; right: 3%">text in a span</span></span></div>
|
||||
<div><span><span style="position:relative; left: 3%">text in a span</span></span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
html, body, iframe { height: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe style="width: 750px" src="28811-2-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
html, body, iframe { height: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.width = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="width: 1000px" id="toresize" src="28811-2-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testcase for resizing elements that depend on containing block width</title>
|
||||
<style type="text/css">
|
||||
html, body, iframe { height: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript">
|
||||
|
||||
function run() {
|
||||
document.getElementById("toresize").style.width = "750px";
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
<iframe style="width: 500px" id="toresize" src="28811-2-inner.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -33,7 +33,15 @@
|
|||
== bugs/18217-zorder-3.html bugs/18217-zorder-ref-inline.html
|
||||
== bugs/18217-zorder-4.html bugs/18217-zorder-ref-inline.html
|
||||
== bugs/18217-zorder-5.html bugs/18217-zorder-ref-inline.html
|
||||
== bugs/28811-1a.html bugs/28811-1-ref.html
|
||||
== bugs/28811-1b.html bugs/28811-1-ref.html
|
||||
== bugs/28811-2a.html bugs/28811-2-ref.html
|
||||
== bugs/28811-2b.html bugs/28811-2-ref.html
|
||||
== bugs/142233-1.html bugs/142233-1-ref.html
|
||||
== bugs/163504-1a.html bugs/163504-1-ref.html
|
||||
== bugs/163504-1b.html bugs/163504-1-ref.html
|
||||
== bugs/163504-2a.html bugs/163504-2-ref.html
|
||||
== bugs/163504-2b.html bugs/163504-2-ref.html
|
||||
== bugs/328829-1.xhtml bugs/328829-1-ref.xhtml
|
||||
== bugs/328829-2.xhtml bugs/328829-2-ref.xhtml
|
||||
== bugs/339289-1.html bugs/339289-1-ref.html
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче