74 lines
1.8 KiB
HTML
74 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
@import "resources/width-keyword-classes.css";
|
|
|
|
.container {
|
|
border: 5px solid grey;
|
|
width: 300px;
|
|
height: 120px;
|
|
margin-bottom: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.container > div:last-child {
|
|
border: 5px solid salmon;
|
|
padding: 5px;
|
|
width: 0px;
|
|
display: -webkit-flex;
|
|
-webkit-flex-wrap: wrap;
|
|
position: absolute;
|
|
}
|
|
|
|
.child {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 50px;
|
|
background-color: pink;
|
|
}
|
|
|
|
.float {
|
|
float: right;
|
|
width: 100px;
|
|
height: 50px;
|
|
border: 5px solid orange;
|
|
}
|
|
</style>
|
|
|
|
Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats.
|
|
|
|
<div class="container">
|
|
<div class="float">Float</div>
|
|
<div class="min-width-min-content" data-expected-width=120>
|
|
<div class="child">Child 1</div>
|
|
<div class="child">Child 2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="float">Float</div>
|
|
<div class="min-width-max-content" data-expected-width=220>
|
|
<div class="child">Child 1</div>
|
|
<div class="child">Child 2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="float">Float</div>
|
|
<div class="min-width-fit-content" data-expected-width=220>
|
|
<div class="child">Child 1</div>
|
|
<div class="child">Child 2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="float">Float</div>
|
|
<div class="min-width-fill-available" data-expected-width=300>
|
|
<div class="child">Child 1</div>
|
|
<div class="child">Child 2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<script>
|
|
checkLayout(".container");
|
|
</script> |