Blitz - WPT: aspect-ratio-percentage-height.html

wpt / css / css-sizing / aspect-ratio-percentage-height.html

/css/css-sizing/aspect-ratio-percentage-height.html

<!DOCTYPE html>
<link rel="match" href="aspect-ratio-percentage-height-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
.outer {
    background: green;
    width: 50px;
    aspect-ratio: 5 / 3;
    margin-bottom: 10px;
    font: 20px/1 Ahem;
}

.inner {
    width: 100%;
    height: 100%;
}
</style>
<p>Both boxes should be the same height (30px).</p>
<div class="outer"></div>
<div class="outer">
  <div class="inner"></div>
</div>

/css/css-sizing/aspect-ratio-percentage-height-ref.html

<!DOCTYPE html>
<style>
div {
    background: green;
    width: 50px;
    height: 30px;
    margin-bottom: 10px;
}
</style>
<p>Both boxes should be the same height (30px).</p>
<div></div>
<div></div>