144 lines
3.2 KiB
HTML
144 lines
3.2 KiB
HTML
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
div.box {
|
|
display: -moz-box;
|
|
display: -webkit-box;
|
|
display: box;
|
|
}
|
|
|
|
div.outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
-moz-box-align: top;
|
|
-webkit-box-align: top;
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
|
|
div.vertical {
|
|
-moz-box-orient: vertical;
|
|
-webkit-box-orient: vertical;
|
|
box-orient: vertical;
|
|
}
|
|
|
|
div.horizontal {
|
|
-moz-box-orient: horizontal;
|
|
-webkit-box-orient: horizontal;
|
|
box-orient: horizontal;
|
|
}
|
|
|
|
div.verticalMiddle {
|
|
width: 100px;
|
|
height: 90px;
|
|
background-color: black;
|
|
}
|
|
|
|
div.expandVerticalBottom {
|
|
width: 10px;
|
|
height: 5px;
|
|
background-color: black;
|
|
-moz-box-flex: 1;
|
|
-webkit-box-flex: 1;
|
|
box-flex: 1;
|
|
border-left: 60px solid olive;
|
|
border-top: 2px solid blue;
|
|
padding-right: 30px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
div.shrinkVerticalBottom {
|
|
width: 10px;
|
|
height: 20px;
|
|
background-color: black;
|
|
-moz-box-flex: 1;
|
|
-webkit-box-flex: 1;
|
|
box-flex: 1;
|
|
border-left: 60px solid olive;
|
|
border-top: 2px solid blue;
|
|
padding-right: 30px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
div.horizontalMiddle {
|
|
width: 90px;
|
|
height: 100px;
|
|
background-color: black;
|
|
}
|
|
|
|
div.expandHorizontalRight {
|
|
width: 5px;
|
|
height: 10px;
|
|
background-color: black;
|
|
-moz-box-flex: 1;
|
|
-webkit-box-flex: 1;
|
|
box-flex: 1;
|
|
border-left: 2px solid olive;
|
|
border-top: 60px solid blue;
|
|
padding-right: 2px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
div.shrinkHorizontalRight {
|
|
width: 20px;
|
|
height: 10px;
|
|
background-color: black;
|
|
-moz-box-flex: 1;
|
|
-webkit-box-flex: 1;
|
|
box-flex: 1;
|
|
border-left: 2px solid olive;
|
|
border-top: 60px solid blue;
|
|
padding-right: 2px;
|
|
padding-bottom: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box vertical outer" id="expandVertical">
|
|
<div class="verticalMiddle"></div>
|
|
<div class="expandVerticalBottom"></div>
|
|
</div>
|
|
<div class="box vertical outer" id="shrinkVertical">
|
|
<div class="verticalMiddle"></div>
|
|
<div class="shrinkVerticalBottom"></div>
|
|
</div>
|
|
<div class="box horizontal outer" id="expandHorizontal">
|
|
<div class="horizontalMiddle"></div>
|
|
<div class="expandHorizontalRight"></div>
|
|
</div>
|
|
<div class="box horizontal outer" id="shrinkHorizontal">
|
|
<div class="horizontalMiddle"></div>
|
|
<div class="shrinkHorizontalRight"></div>
|
|
</div>
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
<script>
|
|
description("Check if box-flex specified flexboxes expand or shrink correctly. If you see any scrollbars, then the test has failed.");
|
|
|
|
var element = null;
|
|
|
|
debug("vertically expanding");
|
|
element = document.getElementById("expandVertical");
|
|
shouldBe("element.scrollHeight", "100");
|
|
shouldBe("element.scrollWidth", "100");
|
|
|
|
debug("vertically shrinking");
|
|
element = document.getElementById("shrinkVertical");
|
|
shouldBe("element.scrollHeight", "100");
|
|
shouldBe("element.scrollWidth", "100");
|
|
|
|
debug("horizontally expanding");
|
|
element = document.getElementById("expandHorizontal");
|
|
shouldBe("element.scrollHeight", "100");
|
|
shouldBe("element.scrollWidth", "100");
|
|
|
|
debug("horizontally shrinking");
|
|
element = document.getElementById("shrinkHorizontal");
|
|
shouldBe("element.scrollHeight", "100");
|
|
shouldBe("element.scrollWidth", "100");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|