mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-02-22 18:32:00 +00:00
Bug 1234941 part 3: Add reftests for "-webkit-box" rendering, with -webkit-box-orient:vertical. r=heycam
--HG-- rename : layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html => layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html rename : layout/reftests/webkit-box/webkit-box-align-horiz-1b.html => layout/reftests/webkit-box/webkit-box-align-vert-1.html rename : layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html => layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html rename : layout/reftests/webkit-box/webkit-box-pack-horiz-1b.html => layout/reftests/webkit-box/webkit-box-pack-vert-1.html
This commit is contained in:
Daniel Holbert
parent
e05e30fc6c
commit
0dec51ea2c
@ -5,7 +5,9 @@ default-preferences pref(layout.css.prefixes.webkit,true)
|
||||
# Tests for "-webkit-box-align" (cross-axis alignment):
|
||||
== webkit-box-align-horiz-1a.html webkit-box-align-horiz-1-ref.html
|
||||
== webkit-box-align-horiz-1b.html webkit-box-align-horiz-1-ref.html
|
||||
== webkit-box-align-vert-1.html webkit-box-align-vert-1-ref.html
|
||||
|
||||
# Tests for "-webkit-box-pack" (main-axis alignment):
|
||||
== webkit-box-pack-horiz-1a.html webkit-box-pack-horiz-1-ref.html
|
||||
== webkit-box-pack-horiz-1b.html webkit-box-pack-horiz-1-ref.html
|
||||
== webkit-box-pack-vert-1.html webkit-box-pack-vert-1-ref.html
|
||||
|
||||
173
layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html
Normal file
173
layout/reftests/webkit-box/webkit-box-align-vert-1-ref.html
Normal file
@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Reference
|
||||
</title>
|
||||
<style>
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid black;
|
||||
margin: 5px 20px;
|
||||
float: left; /* For testing in "rows" */
|
||||
font: 10px serif;
|
||||
}
|
||||
.box > *:nth-child(1) {
|
||||
background: turquoise;
|
||||
/* auto width */
|
||||
height: 1em;
|
||||
}
|
||||
.box > *:nth-child(2) {
|
||||
background: salmon;
|
||||
font-size: 50%;
|
||||
width: 2em;
|
||||
/* auto height */
|
||||
}
|
||||
|
||||
.bastart { align-items: flex-start; }
|
||||
.bacenter { align-items: center; }
|
||||
.baend { align-items: flex-end; }
|
||||
.babaseline { align-items: baseline; }
|
||||
.bastretch { align-items: stretch; }
|
||||
br { clear: both; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIRST ROW: Default -webkit-box-align -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- SECOND ROW: -webkit-box-align: start -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bastart">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bastart" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bastart" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bastart" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- THIRD ROW: -webkit-box-align: center -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bacenter">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bacenter" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bacenter" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bacenter" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FOURTH ROW: -webkit-box-align: end -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box baend">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box baend" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box baend" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box baend" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FIFTH ROW: -webkit-box-align: baseline -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box babaseline">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box babaseline" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box babaseline" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box babaseline" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
<!-- SIXTH ROW: -webkit-box-align: stretch -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bastretch">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bastretch" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bastretch" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bastretch" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
174
layout/reftests/webkit-box/webkit-box-align-vert-1.html
Normal file
174
layout/reftests/webkit-box/webkit-box-align-vert-1.html
Normal file
@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: vertically-oriented "display: -webkit-box" container,
|
||||
with all the various -webkit-box-align values.
|
||||
</title>
|
||||
<style>
|
||||
.box {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
border: 1px solid black;
|
||||
margin: 5px 20px;
|
||||
float: left; /* For testing in "rows" */
|
||||
font: 10px serif;
|
||||
}
|
||||
.box > *:nth-child(1) {
|
||||
background: turquoise;
|
||||
/* auto width */
|
||||
height: 1em;
|
||||
}
|
||||
.box > *:nth-child(2) {
|
||||
background: salmon;
|
||||
font-size: 50%;
|
||||
width: 2em;
|
||||
/* auto height */
|
||||
}
|
||||
|
||||
.bastart { -webkit-box-align: start; }
|
||||
.bacenter { -webkit-box-align: center; }
|
||||
.baend { -webkit-box-align: end; }
|
||||
.babaseline { -webkit-box-align: baseline; }
|
||||
.bastretch { -webkit-box-align: stretch; }
|
||||
br { clear: both; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIRST ROW: Default -webkit-box-align -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- SECOND ROW: -webkit-box-align: start -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bastart">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bastart" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bastart" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bastart" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- THIRD ROW: -webkit-box-align: center -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bacenter">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bacenter" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bacenter" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bacenter" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FOURTH ROW: -webkit-box-align: end -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box baend">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box baend" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box baend" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box baend" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FIFTH ROW: -webkit-box-align: baseline -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box babaseline">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box babaseline" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box babaseline" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box babaseline" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
<!-- SIXTH ROW: -webkit-box-align: stretch -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bastretch">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bastretch" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bastretch" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bastretch" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
152
layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html
Normal file
152
layout/reftests/webkit-box/webkit-box-pack-vert-1-ref.html
Normal file
@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Reference
|
||||
</title>
|
||||
<style>
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid black;
|
||||
margin: 5px 20px;
|
||||
float: left; /* For testing in "rows" */
|
||||
font: 10px serif;
|
||||
}
|
||||
.box > *:nth-child(1) {
|
||||
background: turquoise;
|
||||
/* auto width */
|
||||
height: 1em;
|
||||
}
|
||||
.box > *:nth-child(2) {
|
||||
background: salmon;
|
||||
font-size: 50%;
|
||||
width: 2em;
|
||||
/* auto height */
|
||||
}
|
||||
|
||||
.bpstart { justify-content: flex-start; }
|
||||
.bpcenter { justify-content: center; }
|
||||
.bpend { justify-content: flex-end; }
|
||||
.bpjustify { justify-content: justify;
|
||||
display:none; /* XXXdholbert Disabling until bug 1231682 is fixed */ }
|
||||
br { clear: both; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIRST ROW: Default -webkit-box-pack -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- SECOND ROW: -webkit-box-pack: start -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpstart">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpstart" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpstart" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpstart" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- THIRD ROW: -webkit-box-pack: center -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpcenter">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpcenter" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpcenter" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpcenter" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FOURTH ROW: -webkit-box-pack: end -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpend">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpend" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpend" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpend" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FIFTH ROW: -webkit-box-pack: justify -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpjustify">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpjustify" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpjustify" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpjustify" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
153
layout/reftests/webkit-box/webkit-box-pack-vert-1.html
Normal file
153
layout/reftests/webkit-box/webkit-box-pack-vert-1.html
Normal file
@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: vertically-oriented "display: -webkit-box" container,
|
||||
with all the various -webkit-box-pack values.
|
||||
</title>
|
||||
<style>
|
||||
.box {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
border: 1px solid black;
|
||||
margin: 5px 20px;
|
||||
float: left; /* For testing in "rows" */
|
||||
font: 10px serif;
|
||||
}
|
||||
.box > *:nth-child(1) {
|
||||
background: turquoise;
|
||||
/* auto width */
|
||||
height: 1em;
|
||||
}
|
||||
.box > *:nth-child(2) {
|
||||
background: salmon;
|
||||
font-size: 50%;
|
||||
width: 2em;
|
||||
/* auto height */
|
||||
}
|
||||
|
||||
.bpstart { -webkit-box-pack: start; }
|
||||
.bpcenter { -webkit-box-pack: center; }
|
||||
.bpend { -webkit-box-pack: end; }
|
||||
.bpjustify { -webkit-box-pack: justify;
|
||||
display:none; /* XXXdholbert Disabling until bug 1231682 is fixed */ }
|
||||
br { clear: both; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- FIRST ROW: Default -webkit-box-pack -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- SECOND ROW: -webkit-box-pack: start -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpstart">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpstart" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpstart" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpstart" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- THIRD ROW: -webkit-box-pack: center -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpcenter">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpcenter" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpcenter" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpcenter" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FOURTH ROW: -webkit-box-pack: end -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpend">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpend" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpend" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpend" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- FIFTH ROW: -webkit-box-pack: justify -->
|
||||
<!-- intrinsically sized -->
|
||||
<div class="box bpjustify">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra width -->
|
||||
<div class="box bpjustify" style="width: 36px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height -->
|
||||
<div class="box bpjustify" style="height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
|
||||
<!-- explicit size, extra height and width -->
|
||||
<div class="box bpjustify" style="width: 36px; height: 40px">
|
||||
<div>a</div><div>b</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user