minerva/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html at 1d53ae1d6f7d460e411d0c3e9ba48f0e7b6160b9

ErisCyan / minerva
Find file
Newer
Older
minerva / Tests / LibWeb / Ref / scrollable-contains-boxes-with-hidden-overflow-1.html
minerva on 13 Jul 3 KB Initial commit
Raw Blame History
<!DOCTYPE html>
<link rel="match" href="reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html" />
<style>
    * {
        scrollbar-width: none;
    }
    html {
        background: white;
    }
    body {
        position: absolute;
        inset: 0px;
        display: flex;
        background: pink;
    }
    #outer {
        overflow-x: hidden;
        overflow-y: scroll;
        background: orange;
        margin-top: 100px;
    }
    #inner {
        height: 1000px;
        background: magenta;
    }
    .item {
        overflow: hidden;
        background: yellow;
    }
    .wrapper {
        box-sizing: border-box;
        border: 1px solid black;
        background: lime;
        height: 50px;
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style><body><div id="outer"><div id="inner">
<div class="item"><div class="wrapper">1</div></div>
<div class="item"><div class="wrapper">2</div></div>
<div class="item"><div class="wrapper">3</div></div>
<div class="item"><div class="wrapper">4</div></div>
<div class="item"><div class="wrapper">5</div></div>
<div class="item"><div class="wrapper">6</div></div>
<div class="item"><div class="wrapper">7</div></div>
<div class="item"><div class="wrapper">8</div></div>
<div class="item"><div class="wrapper">9</div></div>
<div class="item"><div class="wrapper">10</div></div>
<div class="item"><div class="wrapper">11</div></div>
<div class="item"><div class="wrapper">12</div></div>
<div class="item"><div class="wrapper">13</div></div>
<div class="item"><div class="wrapper">14</div></div>
<div class="item"><div class="wrapper">15</div></div>
<div class="item"><div class="wrapper">16</div></div>
<div class="item"><div class="wrapper">17</div></div>
<div class="item"><div class="wrapper">18</div></div>
<div class="item"><div class="wrapper">19</div></div>
<div class="item"><div class="wrapper">20</div></div>
<div class="item"><div class="wrapper">21</div></div>
<div class="item"><div class="wrapper">22</div></div>
<div class="item"><div class="wrapper">23</div></div>
<div class="item"><div class="wrapper">24</div></div>
<div class="item"><div class="wrapper">25</div></div>
<div class="item"><div class="wrapper">26</div></div>
<div class="item"><div class="wrapper">27</div></div>
<div class="item"><div class="wrapper">28</div></div>
<div class="item"><div class="wrapper">29</div></div>
<div class="item"><div class="wrapper">30</div></div>
<div class="item"><div class="wrapper">31</div></div>
<div class="item"><div class="wrapper">32</div></div>
<div class="item"><div class="wrapper">33</div></div>
<div class="item"><div class="wrapper">34</div></div>
<div class="item"><div class="wrapper">35</div></div>
<div class="item"><div class="wrapper">36</div></div>
<div class="item"><div class="wrapper">37</div></div>
<div class="item"><div class="wrapper">38</div></div>
<div class="item"><div class="wrapper">39</div></div>
<div class="item"><div class="wrapper">40</div></div>
<div class="item"><div class="wrapper">41</div></div>
<div class="item"><div class="wrapper">42</div></div>
<div class="item"><div class="wrapper">43</div></div>
<div class="item"><div class="wrapper">44</div></div>
<div class="item"><div class="wrapper">45</div></div>
<div class="item"><div class="wrapper">46</div></div>
<div class="item"><div class="wrapper">47</div></div>
<div class="item"><div class="wrapper">48</div></div>
<div class="item"><div class="wrapper">49</div></div>
<div class="item"><div class="wrapper">50</div></div>
<script>
    const scrollContainer = document.getElementById("outer");
    scrollContainer.scrollTop = 500;
</script>