mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1234941 part 1: Add reftests for "-webkit-box" rendering, with -webkit-box-orient unset. r=heycam
This commit is contained in:
Daniel Holbert
parent
7b0e0164c2
commit
4e2b59b51e
@ -370,6 +370,9 @@ skip-if(Android) include ../xul/reftest/reftest.list
|
||||
# xul grid (no XUL theme on Android)
|
||||
skip-if(Android) include ../xul/grid/reftests/reftest.list
|
||||
|
||||
# -webkit-box & associated properties (mapped to modern flexbox)
|
||||
include webkit-box/reftest.list
|
||||
|
||||
# -webkit-gradient expressions
|
||||
include webkit-gradient/reftest.list
|
||||
|
||||
|
||||
9
layout/reftests/webkit-box/reftest.list
Normal file
9
layout/reftests/webkit-box/reftest.list
Normal file
@ -0,0 +1,9 @@
|
||||
# This directory contains tests for "display: -webkit-box" and associated
|
||||
# CSS properties. These tests require webkit prefix support to be enabled.
|
||||
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
|
||||
|
||||
# Tests for "-webkit-box-pack" (main-axis alignment):
|
||||
== webkit-box-pack-horiz-1a.html webkit-box-pack-horiz-1-ref.html
|
||||
172
layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html
Normal file
172
layout/reftests/webkit-box/webkit-box-align-horiz-1-ref.html
Normal file
@ -0,0 +1,172 @@
|
||||
<!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;
|
||||
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>
|
||||
173
layout/reftests/webkit-box/webkit-box-align-horiz-1a.html
Normal file
173
layout/reftests/webkit-box/webkit-box-align-horiz-1a.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 Test: horizontally-oriented "display: -webkit-box" container,
|
||||
with all the various -webkit-box-align values.
|
||||
</title>
|
||||
<style>
|
||||
.box {
|
||||
display: -webkit-box;
|
||||
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>
|
||||
151
layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html
Normal file
151
layout/reftests/webkit-box/webkit-box-pack-horiz-1-ref.html
Normal file
@ -0,0 +1,151 @@
|
||||
<!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;
|
||||
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>
|
||||
152
layout/reftests/webkit-box/webkit-box-pack-horiz-1a.html
Normal file
152
layout/reftests/webkit-box/webkit-box-pack-horiz-1a.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 Test: horizontally-oriented "display: -webkit-box" container,
|
||||
with all the various -webkit-box-pack values.
|
||||
</title>
|
||||
<style>
|
||||
.box {
|
||||
display: -webkit-box;
|
||||
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…
Reference in New Issue
Block a user