@revoloo/cypress6
Version:
Cypress.io end to end testing tool
78 lines (65 loc) • 2.56 kB
HTML
<html>
<head>
<title>DOM Fixture</title>
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<div id="dom">
<style>
#nonscroll-becomes-scrollable {
height: 100px;
width: 100px;
overflow: hidden;
}
body, h5 {
margin: 0;
}
</style>
<button>button</button>
<button>button</button>
<div id="scroll-into-view-win-horizontal">
<div style="position: absolute; left: 1500px; top: 0px;">scroll into view horizontal</div>
</div>
<div id="scroll-into-view-win-vertical">
<div style="position: absolute; left: 200px; top: 1500px;">scroll into view vertical</div>
</div>
<div id="scroll-into-view-win-both">
<div style="position: absolute; left: 1500px; top: 1500px;">scroll into view both</div>
</div>
<div id="scroll-into-view-horizontal" style="height: 100px; width: 100px; overflow: auto;">
<div style="width: 500px; position: relative;">
Horizontal Scroll
<h5 style="position: absolute; top: 0px; left: 300px">horiz here</h5>
</div>
</div>
<div id="scroll-into-view-vertical" style="height: 100px; width: 100px; overflow: auto;">
<div style="height: 500px; position: relative;">
Vertical Scroll
<h5 style="position: absolute; top: 300px; left: 0">vert here</h5>
</div>
</div>
<div id="scroll-into-view-both" style="height: 100px; width: 100px; overflow: auto;">
<div style="width: 500px; height: 500px; position: relative;">
Both Scroll
<h5 style="position: absolute; top: 300px; left: 300px">both here</h5>
</div>
</div>
<div id="scroll-to-vertical" style="height: 100px; width: 100px; overflow: auto;">
<div style="height: 500px;">Vertical Scroll</div>
</div>
<div id="scroll-to-horizontal" style="height: 100px; width: 100px; overflow: auto;">
<div style="width: 500px;">Horizontal Scroll</div>
</div>
<div id="scroll-to-both" style="height: 100px; width: 100px; overflow: auto;">
<div style="width: 500px; height: 500px">Both Scroll</div>
</div>
<div id="nonscroll-becomes-scrollable">
<div style="height: 1000px; width: 1000px">
Becomes Scrollable
<h5 style="position: absolute; top: 300px; left: 300px">here</h5>
</div>
</div>
</div>
</body>
</html>