<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
	<iframe src="content.html" frameborder="1"
		style="width: 100%; height: 500px;"
		width="100%" height="500">
	</iframe>
</body>
</html>
// Code goes here

/* Styles go here */

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style>
        .green-block {
            width: 20px;
            height: 20px;
            background-color: green;
        }
        .red-block {
            width: 20px;
            height: 20px;
            background-color: red;
        }
        
        body, html {
          height: 100%;
          overflow: scroll;
        }
    </style>
    <script>
        function focusEl(event, selector){
            event.preventDefault();
            document.querySelector(selector).focus();
        }
    </script>
</head>
<body>
    <div class="green-block" tabindex="0"></div>

    <p>Scroll down and press the "Focus Green" or "Focus Red" button.</p>
    
    <h2>"Focus Green"</h2>
    <p><b>Expected:</b> should set focus on '.green-block' and scroll to the top of the page.</p>
    <p><b>Actual:</b> sets focus but does not scroll page.</p>
    
    <h2>"Focus Red"</h2>
    <p><b>Expected:</b> should set focus on '.red-block' and not scroll page (because element is already on-screen).</p>
    <p><b>Actual:</b> sets focus and scrolls down to the bottom of the host page.</p>
    
    <hr/>
    
    <p>1 Filler content to force some visible scrolling 1</p>
    <p>2 Filler content to force some visible scrolling 2</p>
    <p>3 Filler content to force some visible scrolling 3</p>
    <p>4 Filler content to force some visible scrolling 4</p>
    <p>5 Filler content to force some visible scrolling 5</p>
    <p>6 Filler content to force some visible scrolling 6</p>
    <p>7 Filler content to force some visible scrolling 7</p>
    <p>8 Filler content to force some visible scrolling 8</p>
    <p>9 Filler content to force some visible scrolling 9</p>
    <p>10 Filler content to force some visible scrolling 10</p>
    <p>11 Filler content to force some visible scrolling 11</p>
    <p>12 Filler content to force some visible scrolling 12</p>
    <p>13 Filler content to force some visible scrolling 13</p>
    <p>14 Filler content to force some visible scrolling 14</p>
    <p>15 Filler content to force some visible scrolling 15</p>
    <p>16 Filler content to force some visible scrolling 16</p>
    <p>17 Filler content to force some visible scrolling 17</p>
    <p>18 Filler content to force some visible scrolling 18</p>
    <p>19 Filler content to force some visible scrolling 19</p>
    
    <div class="red-block" tabindex="0"></div>
    
    <div>
        <button onclick="focusEl(event, '.green-block');">Focus Green</button>
        <button onclick="focusEl(event, '.red-block');">Focus Red</button>
    </div>
    
    <p>20 Filler content to force some visible scrolling 20</p>
    <p>21 Filler content to force some visible scrolling 21</p>
    <p>22 Filler content to force some visible scrolling 22</p>
    <p>23 Filler content to force some visible scrolling 23</p>
    <p>24 Filler content to force some visible scrolling 24</p>
    <p>25 Filler content to force some visible scrolling 25</p>
    <p>26 Filler content to force some visible scrolling 26</p>
    <p>27 Filler content to force some visible scrolling 27</p>
    <p>28 Filler content to force some visible scrolling 28</p>
    <p>29 Filler content to force some visible scrolling 29</p>
    <p>30 Filler content to force some visible scrolling 30</p>
    <p>31 Filler content to force some visible scrolling 30</p>
    <p>32 Filler content to force some visible scrolling 30</p>
    <p>33 Filler content to force some visible scrolling 30</p>
    <p>34 Filler content to force some visible scrolling 30</p>
    <p>35 Filler content to force some visible scrolling 30</p>
    <p>Bottom of iframe</p>
    
</body>
</html>