makotom/20190108-test.html

## 20190108-test.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Intra-page jump</title>

<style>
    body {
        position: absolute;
        height: 1000vh;
    }

    p#bottom {
        position: absolute;
        bottom: 0;
    }

    div#box {
        position: absolute;
        width: 90vw;
        height: 50vh;
        background-color: rgba(0, 0, 0, 0.2);
        overflow: auto;
    }

    p#boxButtom {
        position: absolute;
        top: 1000vh;
    }
</style>

<main>
    <h1>Navigation within a box is not reproduced by back/next functionality in UA</h1>

    <h2>Repro</h2>
    <ol>
        <li>Navigate to <code>#boxButtom</code> (using the hyperlink with a label <q>Go to the other end</q>, located at the top of the gray box)</li>
        <li>Navigate to <code>#boxTop</code> (using the hyperlink with a label <q>Go <em>back</em> to the other end</q> located at the bottom of the gray box)</li>
        <li>Going back to the previous page with a functionality provided by UA (i.e. "Back" button in your browser)</li>
    </ol>

    <h2>Expected result</h2>
    <p>The text <q>At the bottom of the box</q> should be made visible through the scrolling mechanism of the UA.</p>

    <h2>Actual result</h2>
    <p>The text <q>At the bottom of the box</q> is not visible.</p>

    <h2>Comparison</h2>
    <p>The following procedure works as expected, and <q>The bottom</q> is visible.</p>
    <ol>
        <li>Navigate to <code>#buttom</code> (using the hyperlink located below)</li>
        <li>Navigate to <code>#top</code> (using the hyperlink located at the bottom of this page)</li>
        <li>Going back to the previous page with a functionality provided by UA (i.e. "Back" button in your browser)</li>
    </ol>
</main>

<hr>

<p id="top">On the top.</p>
<p><a href="#bottom">To the page bottom</a>.</p>

<div id="box">
    <p id="boxTop">At the top of the box. <a href="#boxButtom">Go to the other end</a>.</p>
    <p id="boxButtom">At the bottom of the box. <a href="#boxTop">Go <em>back</em> to the other end</a>.</p>
</div>

<p id="bottom">The bottom. <a href="#top">To the top</a>.</p>
	<!doctype html>
	<html lang="en">
	<meta charset="UTF-8">
	<title>Intra-page jump</title>

	<style>
	body {
	position: absolute;
	height: 1000vh;
	}

	p#bottom {
	position: absolute;
	bottom: 0;
	}

	div#box {
	position: absolute;
	width: 90vw;
	height: 50vh;
	background-color: rgba(0, 0, 0, 0.2);
	overflow: auto;
	}

	p#boxButtom {
	position: absolute;
	top: 1000vh;
	}
	</style>

	<main>
	<h1>Navigation within a box is not reproduced by back/next functionality in UA</h1>

	<h2>Repro</h2>
	<ol>
	<li>Navigate to <code>#boxButtom</code> (using the hyperlink with a label <q>Go to the other end</q>, located at the top of the gray box)</li>
	<li>Navigate to <code>#boxTop</code> (using the hyperlink with a label <q>Go <em>back</em> to the other end</q> located at the bottom of the gray box)</li>
	<li>Going back to the previous page with a functionality provided by UA (i.e. "Back" button in your browser)</li>
	</ol>

	<h2>Expected result</h2>
	<p>The text <q>At the bottom of the box</q> should be made visible through the scrolling mechanism of the UA.</p>

	<h2>Actual result</h2>
	<p>The text <q>At the bottom of the box</q> is not visible.</p>

	<h2>Comparison</h2>
	<p>The following procedure works as expected, and <q>The bottom</q> is visible.</p>
	<ol>
	<li>Navigate to <code>#buttom</code> (using the hyperlink located below)</li>
	<li>Navigate to <code>#top</code> (using the hyperlink located at the bottom of this page)</li>
	<li>Going back to the previous page with a functionality provided by UA (i.e. "Back" button in your browser)</li>
	</ol>
	</main>

	<hr>

	<p id="top">On the top.</p>
	<p><a href="#bottom">To the page bottom</a>.</p>

	<div id="box">
	<p id="boxTop">At the top of the box. <a href="#boxButtom">Go to the other end</a>.</p>
	<p id="boxButtom">At the bottom of the box. <a href="#boxTop">Go <em>back</em> to the other end</a>.</p>
	</div>

	<p id="bottom">The bottom. <a href="#top">To the top</a>.</p>