@revoloo/cypress6/packages/driver/cypress/fixtures/dimensions.html

Cypress.io end to end testing tool

<div id="square" style="height: 20px; width: 20px; background-color: red;"></div>

<div style="margin: 5px 0;"></div>

<div id="square-padding" style="height: 20px; width: 20px; background-color: red; padding:
5px 10px"></div>

<div style="margin: 5px 0;"></div>

<div id="square-border" style="height: 20px; width: 20px; background-color: red; border: 2px solid black"></div>

<div style="margin: 5px 0;"></div>

<div id="square-margin" style="height: 20px; width: 20px; background-color: red; margin: 8px 6px;"></div>

<div id="square-margin-border-padding" style="height: 20px; width: 20px; background-color: red; margin: 8px 6px; padding: 10px; border: 2px solid black;"></div>

<div id="square-negative-margin-padding" style="height: 10px; width: 10px; background-color: blue; margin: -2px; padding: -5px;">
</div>

<div id="rect-rotated" style="height: 20px; width: 40px; background-color: pink; transform: rotate(90deg); padding: 5px;"></div>