mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 05:39:41 +02:00
a1b638d149
MozReview-Commit-ID: DfvN9mAFYhI --HG-- rename : testing/web-platform/tests/conformance-checkers/html-svg/animate-elem-77-t-novalid.html => testing/web-platform/tests/conformance-checkers/html-svg/animate-elem-77-t-isvalid.html rename : testing/web-platform/tests/conformance-checkers/html-svg/linking-a-10-f-novalid.html => testing/web-platform/tests/conformance-checkers/html-svg/linking-a-10-f-isvalid.html rename : testing/web-platform/tests/conformance-checkers/html/elements/picture/srcset-microsyntax-leading-dot-x-novalid.html => testing/web-platform/tests/conformance-checkers/html/elements/picture/srcset-microsyntax-leading-dot-x-valid.html rename : testing/web-platform/tests/content-security-policy/_unapproved/script-nonces-hidden.html.headers => testing/web-platform/tests/content-security-policy/nonce-hiding/script-nonces-hidden.tentative.html.headers rename : testing/web-platform/tests/content-security-policy/_unapproved/svgscript-nonces-hidden.html.headers => testing/web-platform/tests/content-security-policy/nonce-hiding/svgscript-nonces-hidden.tentative.html.headers rename : testing/web-platform/tests/html/semantics/interactive-elements/context-menus/contextmenu-event-manual.htm => testing/web-platform/tests/html/webappapis/scripting/events/contextmenu-event-manual.htm
68 lines
1.8 KiB
HTML
68 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Test (Overflow): body with overflow:hidden</title>
|
|
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
|
|
<link rel="help" href="https://www.w3.org/TR/CSS2/visufx.html#overflow">
|
|
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow">
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#propdef-overflow">
|
|
<meta name="flags" content="interact">
|
|
<meta name="assert" content="position:fixed layer should not be able to cause scrolling of body styled as overflow:hidden">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
body {
|
|
/* what we're testing */
|
|
overflow: hidden;
|
|
}
|
|
h1 {
|
|
/* bottom of #overlay-inner */
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.margin-0 {
|
|
/* remove extra space */
|
|
margin: 0;
|
|
}
|
|
.tall {
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
#bad {
|
|
background-color: red;
|
|
}
|
|
#overlay {
|
|
overflow: auto;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
#overlay-inner {
|
|
position: relative;/* needed for the h1 */
|
|
width: 60%;/* leave room for #bad to be visible */
|
|
height: 150vh;/* force scroll */
|
|
/* make this visually distinct */
|
|
background-color: blue;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="margin-0">
|
|
<div id="overlay">
|
|
<div id="overlay-inner">
|
|
<ol class="margin-0">
|
|
<li>Scroll the blue square downward until you see the word "BOTTOM".</li>
|
|
<li>End your scrolling action/gesture. (e.g. Remove your finger from the touchscreen.)</li>
|
|
<li>Attempt to scroll the blue square further downward.</li>
|
|
<li>If you see any red, then the test result is FAILED. Otherwise, it is PASSED.</li>
|
|
</ol>
|
|
<h1 class="margin-0">BOTTOM</h1>
|
|
</div>
|
|
</div>
|
|
<div class="tall"></div>
|
|
<div id="bad" class="tall"></div>
|
|
</body>
|
|
</html>
|