box-sizing-aspect-ratio-positioned.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-sizing/aspect-ratio/box-sizing-aspect-ratio-positioned.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>Test border-box behavior when a box has an aspect ratio and is positioned, checking the width dimension </title>

<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

* {

    box-sizing: border-box;

#box {

    position: absolute;

    background-color: green;

    top: 0;

    left: 0;

    border: 15px solid blue;

    height: 100px;

    aspect-ratio: 1;

</style>

<div id="box"></div>

<script>

test(() => {

    const el = document.getElementById("box");

    const rect = el.getBoundingClientRect();

    assert_equals(rect.width, 100, "The computed width of box must be exactly 100px");

    }, "The computed width of box is 100px");

</script>