diff options
Diffstat (limited to 'layout/reftests/meta-viewport')
60 files changed, 1406 insertions, 0 deletions
diff --git a/layout/reftests/meta-viewport/async-scroll-to-no-content-area-ref.html b/layout/reftests/meta-viewport/async-scroll-to-no-content-area-ref.html new file mode 100644 index 0000000000..ec10e60079 --- /dev/null +++ b/layout/reftests/meta-viewport/async-scroll-to-no-content-area-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<style> +html { + background-color: green; +} +#fixed { + width: 100px; + height: 100px; + background-color: red; + position: fixed; + bottom: 0px; + right: 0px; +} +</style> +<div id="fixed"></div> diff --git a/layout/reftests/meta-viewport/async-scroll-to-no-content-area.html b/layout/reftests/meta-viewport/async-scroll-to-no-content-area.html new file mode 100644 index 0000000000..1a05bc7bd6 --- /dev/null +++ b/layout/reftests/meta-viewport/async-scroll-to-no-content-area.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html reftest-displayport-w="3200" reftest-displayport-h="4000" + reftest-async-scroll + reftest-async-scroll-x="2400" + reftest-async-scroll-y="3000"> +<!-- + This content size will be (400%, 400%) (i.e. (3200px, 4000px) in reftest) + because of 'minimum-scale=0.25', but is rendered 1.0x scale initially so that + there is room to scroll to (0px, 3000px). + --> +<meta name="viewport" content="width=device-width,minimum-scale=0.25,initial-scale=1"> +<style> +html { + background-color: green; +} +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; /* avoid drawing scrollbars */ +} +#quadruple-width { + background-color: red; + width: 400%; + height: 100%; + position: absolute; +} +#fixed { + width: 100px; + height: 100px; + background-color: red; + position: fixed; + bottom: 0px; + right: 0px; +} +</style> +<div id="quadruple-width"></div> +<div id="fixed"></div> +</html> diff --git a/layout/reftests/meta-viewport/box-shadow.html b/layout/reftests/meta-viewport/box-shadow.html new file mode 100644 index 0000000000..31927a0e0a --- /dev/null +++ b/layout/reftests/meta-viewport/box-shadow.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + min-width: 1600px; /* this value should be double of viewport width */ + min-height: 3000px; + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; + box-shadow: 100px 0 red; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/clamped-by-default-minimum-scale.html b/layout/reftests/meta-viewport/clamped-by-default-minimum-scale.html new file mode 100644 index 0000000000..0dbb3d61d4 --- /dev/null +++ b/layout/reftests/meta-viewport/clamped-by-default-minimum-scale.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + /* + * This value should be greater than reftest viewport width 800px * (1 / 0.25). + * 0.25 is the initial scale value used in the reference. + */ + min-width: 4000px; + /* + * This value should be greater than reftest viewport height + * 1000x * (1 / 0.25) to make the initial scale auto-calculation happen. + */ + min-height: 8000px; + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/desktop-mode-ref.html b/layout/reftests/meta-viewport/desktop-mode-ref.html new file mode 100644 index 0000000000..de63a80ed5 --- /dev/null +++ b/layout/reftests/meta-viewport/desktop-mode-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width"> +<style> +html { + height: 100%; + width: 100%; +} +body { + height: 2000px; + width: 200%; + margin: 0px; + padding: 0px; +} +div { + width: 20px; + height: 100%; + top: 0px; + background-color: green; +} +</style> +<div style="right: 0px; position: fixed;"></div> +<div style="right: 25px; position: absolute;"></div> +</html> diff --git a/layout/reftests/meta-viewport/desktop-mode.html b/layout/reftests/meta-viewport/desktop-mode.html new file mode 100644 index 0000000000..9351f242a8 --- /dev/null +++ b/layout/reftests/meta-viewport/desktop-mode.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +html { + height: 100%; + width: 100%; +} +body { + height: 2000px; + width: 200%; + margin: 0px; + padding: 0px; +} +div { + width: 20px; + height: 100%; + top: 0px; + background-color: green; +} +</style> +<div style="right: 0px; position: fixed;"></div> +<div style="right: 25px; position: absolute;"></div> +<script> +let win = SpecialPowers.wrap(window); +SpecialPowers.spawnChrome([win.browsingContext.id], id => { + BrowsingContext.get(id).forceDesktopViewport = true; +}).then(() => { + document.documentElement.classList.remove('reftest-wait'); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/device-height-for-width.html b/layout/reftests/meta-viewport/device-height-for-width.html new file mode 100644 index 0000000000..000adc763e --- /dev/null +++ b/layout/reftests/meta-viewport/device-height-for-width.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-height"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/device-height-with-dynamic-toolbar-ref.html b/layout/reftests/meta-viewport/device-height-with-dynamic-toolbar-ref.html new file mode 100644 index 0000000000..7d42b3896c --- /dev/null +++ b/layout/reftests/meta-viewport/device-height-with-dynamic-toolbar-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<style> +html { + scrollbar-width: none; +} +body { + margin: 0px; + padding: 0px; +} +div { + width: 100vw; + height: 50vh; +} +</style> +<div style="background-color: green;"></div> +<div style="background-color: blue;"></div> diff --git a/layout/reftests/meta-viewport/device-height-with-dynamic-toolbar.html b/layout/reftests/meta-viewport/device-height-with-dynamic-toolbar.html new file mode 100644 index 0000000000..ca4d500236 --- /dev/null +++ b/layout/reftests/meta-viewport/device-height-with-dynamic-toolbar.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta name="viewport" content="width=1600, height=device-height"> +<style> +html { + scrollbar-width: none; +} +body { + margin: 0px; + padding: 0px; +} +div { + width: 100vw; +} +</style> +<div style="height: 100vh; background-color: green;"></div> +<div style="height: 500vh; background-color: blue;"></div> diff --git a/layout/reftests/meta-viewport/dynamic-grow-width-and-height.html b/layout/reftests/meta-viewport/dynamic-grow-width-and-height.html new file mode 100644 index 0000000000..a9b98e86cc --- /dev/null +++ b/layout/reftests/meta-viewport/dynamic-grow-width-and-height.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + `reftest-snapshot-all` is necessary to take the screenshot for whole canvas + when zoom level is changed. + This is the same as what we do in the case where reftest-async-zoom is + specified. + --> +<html class="reftest-wait reftest-snapshot-all"> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow-x: hidden; + scrollbar-width: none; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div id="green" style="background: green; width: 100%; height: 100%;"></div> +<div style="background: blue; width: 100%; height: 100%;"></div> +<script> +document.addEventListener('MozReftestInvalidate', () => { + green.style.width = '200%'; + requestAnimationFrame(() => { + // At this moment we don't scale down the contents due to bug 1508177. + + green.style.height = '200%'; + requestAnimationFrame(() => { + // Growing height should make the overflow-x:hidden area visible. + document.documentElement.classList.remove('reftest-wait'); + }); + }); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/dynamic-grow-width.html b/layout/reftests/meta-viewport/dynamic-grow-width.html new file mode 100644 index 0000000000..84084c2e52 --- /dev/null +++ b/layout/reftests/meta-viewport/dynamic-grow-width.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow-x: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + height: 100%; + position: absolute; +} +</style> +<div id="green" style="background: green; width: 100%;"></div> +<div style="background: blue; width: 100%;"></div> +<script> +document.addEventListener('MozReftestInvalidate', () => { + // Grow width to generate overflow-x:hidden area but the content height is + // 100vh so that we don't scale down the contents (bug 1508177). + green.style.width = '200%'; + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/horizontal-overflow-hidden-region-ref.html b/layout/reftests/meta-viewport/horizontal-overflow-hidden-region-ref.html new file mode 100644 index 0000000000..758aafcb7e --- /dev/null +++ b/layout/reftests/meta-viewport/horizontal-overflow-hidden-region-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + height: 50%; + position: absolute; +} +</style> +<div style="background: green; width: 100%;"></div> +<div style="background: blue; width: 50%;"></div> diff --git a/layout/reftests/meta-viewport/horizontal-overflow-hidden-region.html b/layout/reftests/meta-viewport/horizontal-overflow-hidden-region.html new file mode 100644 index 0000000000..79b3232954 --- /dev/null +++ b/layout/reftests/meta-viewport/horizontal-overflow-hidden-region.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow-x: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + height: 100%; + position: absolute; +} +</style> +<div style="background: red; width: 300%;"></div> +<div style="background: green; width: 200%;"></div> +<div style="background: blue; width: 100%;"></div> diff --git a/layout/reftests/meta-viewport/initial-scale-0.html b/layout/reftests/meta-viewport/initial-scale-0.html new file mode 100644 index 0000000000..f29f8ce1a4 --- /dev/null +++ b/layout/reftests/meta-viewport/initial-scale-0.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta name="viewport" content="initial-scale=0,width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + min-width: 1600px; /* this value should be greater than viewport width */ + min-height: 3000px; + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/initial-scale-0_25-ref.html b/layout/reftests/meta-viewport/initial-scale-0_25-ref.html new file mode 100644 index 0000000000..9d6048ac12 --- /dev/null +++ b/layout/reftests/meta-viewport/initial-scale-0_25-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta name="viewport" content="initial-scale=0.25,width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +#container { + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/initial-scale-0_5-ref.html b/layout/reftests/meta-viewport/initial-scale-0_5-ref.html new file mode 100644 index 0000000000..e2385dc57b --- /dev/null +++ b/layout/reftests/meta-viewport/initial-scale-0_5-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta name="viewport" content="initial-scale=0.5,width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +#container { + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/initial-scale-1.html b/layout/reftests/meta-viewport/initial-scale-1.html new file mode 100644 index 0000000000..dbba24bab9 --- /dev/null +++ b/layout/reftests/meta-viewport/initial-scale-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta name="viewport" content="initial-scale=1,width=device-width,minimum-scale=1"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +#container { + min-width: 1600px; /* this value should be double of viewport width */ + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/initial-scale-10-ref.html b/layout/reftests/meta-viewport/initial-scale-10-ref.html new file mode 100644 index 0000000000..72d15d459d --- /dev/null +++ b/layout/reftests/meta-viewport/initial-scale-10-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta name="viewport" content="initial-scale=10,width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 10px; + height: 10px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/initial-scale-100.html b/layout/reftests/meta-viewport/initial-scale-100.html new file mode 100644 index 0000000000..2e1096c59d --- /dev/null +++ b/layout/reftests/meta-viewport/initial-scale-100.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta name="viewport" content="initial-scale=100,width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 10px; + height: 10px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/invalid-content.html b/layout/reftests/meta-viewport/invalid-content.html new file mode 100644 index 0000000000..f5a317b21f --- /dev/null +++ b/layout/reftests/meta-viewport/invalid-content.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta name="viewport" content="1200"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + width: 980px; + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/invalid-width-ref.html b/layout/reftests/meta-viewport/invalid-width-ref.html new file mode 100644 index 0000000000..9d87dcd174 --- /dev/null +++ b/layout/reftests/meta-viewport/invalid-width-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/invalid-width.html b/layout/reftests/meta-viewport/invalid-width.html new file mode 100644 index 0000000000..115d62105a --- /dev/null +++ b/layout/reftests/meta-viewport/invalid-width.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=devicewidth"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/min-scale-aspect-ratio.html b/layout/reftests/meta-viewport/min-scale-aspect-ratio.html new file mode 100644 index 0000000000..3cbdb60ce6 --- /dev/null +++ b/layout/reftests/meta-viewport/min-scale-aspect-ratio.html @@ -0,0 +1,41 @@ +<html class="reftest-wait"> +<meta name="viewport" content="width=device-width minimum-scale=0.25 initial-scale=1.0"> +<style> + html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; + } + div { + position: absolute; + } + .B { + width: 200%; + height: 400%; + background: white; + } + .C { + width: 200%; + height: 200%; + background: green; + } +</style> +<div class="B"></div> +<div class="C"></div> +<script> +document.addEventListener('MozReftestInvalidate', () => { + // The page here is twice the width of the ICB, and four times the height. + // We want the layout viewport to be expanded to be twice the width and + // height of the ICB (to maintain aspect ratio), rather than four times the + // height. + // To test this, scroll to the end of the layout scroll range. + // If the layout viewport is expanded too much, we have no layout scroll + // range, so nothing will happen, and a green area will remain in view. + // If the layout viewport is expanded to the desired size, a white area + // will be scrolled into view, matching the reference page. + window.scrollTo(window.scrollMaxX, window.scrollMaxY); + document.documentElement.classList.remove('reftest-wait'); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/minimum-scale.html b/layout/reftests/meta-viewport/minimum-scale.html new file mode 100644 index 0000000000..52dd0f01c0 --- /dev/null +++ b/layout/reftests/meta-viewport/minimum-scale.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta name="viewport" content="minimum-scale=1,width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +#container { + min-width: 1600px; /* this value should be greater than viewport width */ + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/negative-initial-and-maximum-scale.html b/layout/reftests/meta-viewport/negative-initial-and-maximum-scale.html new file mode 100644 index 0000000000..45e5de5b11 --- /dev/null +++ b/layout/reftests/meta-viewport/negative-initial-and-maximum-scale.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta name="viewport" content="initial-scale=-1,maximum-scale=-1,width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + min-width: 1600px; /* this value should be double of viewport width */ + min-height: 3000px; + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/no-scalable-with-minimum-scale-ref.html b/layout/reftests/meta-viewport/no-scalable-with-minimum-scale-ref.html new file mode 100644 index 0000000000..f5490d939b --- /dev/null +++ b/layout/reftests/meta-viewport/no-scalable-with-minimum-scale-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> + html { + overflow: hidden; + } + body { + margin: 0; + } + div { + position: absolute; + } +</style> +<div style="background: red; width: 300%; height: 300%"></div> +<div style="background: green; width: 200%; height: 200%"></div> +<div style="background: blue; width: 100%; height: 100%"></div> diff --git a/layout/reftests/meta-viewport/no-scalable-with-minimum-scale.html b/layout/reftests/meta-viewport/no-scalable-with-minimum-scale.html new file mode 100644 index 0000000000..f3d51e1e3b --- /dev/null +++ b/layout/reftests/meta-viewport/no-scalable-with-minimum-scale.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,minimum-scale=0.5,user-scalable=no"> +<style> + html { + overflow: hidden; + } + body { + margin: 0; + } + div { + position: absolute; + } +</style> +<div style="background: red; width: 300%; height: 300%"></div> +<div style="background: green; width: 200%; height: 200%"></div> +<div style="background: blue; width: 100%; height: 100%"></div> diff --git a/layout/reftests/meta-viewport/no-viewport.html b/layout/reftests/meta-viewport/no-viewport.html new file mode 100644 index 0000000000..a4f3cda67f --- /dev/null +++ b/layout/reftests/meta-viewport/no-viewport.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + min-width: 1600px; /* this value should be double of viewport width */ + min-height: 3000px; + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/no-zoom-ref.html b/layout/reftests/meta-viewport/no-zoom-ref.html new file mode 100644 index 0000000000..1086c60dd9 --- /dev/null +++ b/layout/reftests/meta-viewport/no-zoom-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html reftest-async-zoom="1"> +<meta name="viewport" content="initial-scale=1,width=device-width,minimum-scale=1"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +#container { + min-width: 1600px; /* this value should be greater than viewport width */ + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> +</html> diff --git a/layout/reftests/meta-viewport/not-able-to-scrollTo.html b/layout/reftests/meta-viewport/not-able-to-scrollTo.html new file mode 100644 index 0000000000..dc536491d9 --- /dev/null +++ b/layout/reftests/meta-viewport/not-able-to-scrollTo.html @@ -0,0 +1,39 @@ +<html class="reftest-wait"> +<meta name="viewport" content="width=device-width minimum-scale=0.5 initial-scale=1.0"> +<style> + html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; + } + div { + position: absolute; + } + .B { + width: 200%; + height: 200%; + background: green; + } + .C { + width: 100%; + height: 100%; + background: white; + } +</style> +<div class="B"></div> +<div class="C"></div> +<script> +document.addEventListener('MozReftestInvalidate', () => { + // The page here is twice as large as the ICB. + // If the layout viewport is sized to the ICB, we have a layout + // scroll range equal to the ICB size, and the scrollTo() call + // below will bring a green area into view. + // If the layout viewport is expanded to the whole page, we + // have an empty layout scroll range, and the scrollTo() call + // below will have no effect. + window.scrollTo(window.scrollMaxX, window.scrollMaxY); + document.documentElement.classList.remove('reftest-wait'); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/overflow-hidden-region-dynamic-width-change.html b/layout/reftests/meta-viewport/overflow-hidden-region-dynamic-width-change.html new file mode 100644 index 0000000000..7d1e7cb6b4 --- /dev/null +++ b/layout/reftests/meta-viewport/overflow-hidden-region-dynamic-width-change.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + `reftest-snapshot-all` is necessary to take the screenshot for whole canvas + when zoom level is changed. + This is the same as what we do in the case where reftest-async-zoom is + specified. + --> +<html class="reftest-wait reftest-snapshot-all"> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div id="red" style="background: red; width: 100%; height: 300%;"></div> +<div id="green" style="background: green; width: 100%; height: 200%;"></div> +<div style="background: blue; width: 100%; height: 100%;"></div> +<script> +document.addEventListener('MozReftestInvalidate', () => { + green.style.width = '200%'; + red.style.width = '300%'; + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/overflow-hidden-region-with-negative-left-positioned-element.html b/layout/reftests/meta-viewport/overflow-hidden-region-with-negative-left-positioned-element.html new file mode 100644 index 0000000000..aa7d9c6902 --- /dev/null +++ b/layout/reftests/meta-viewport/overflow-hidden-region-with-negative-left-positioned-element.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.25"> +<style> +html { + overflow: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<!-- + Even if minimum-scale=0.25 is specified, the widest element in this content is + below div element whose *real* width is 200% because of `margin-left: -500%`, + so this content should be scaled to 0.5x. + --> +<div style="background: green; width: 700%; height: 500%; margin-left: -500%;"></div> +<div style="background: blue; width: 100%; height: 100%;"></div> diff --git a/layout/reftests/meta-viewport/overflow-hidden-region.html b/layout/reftests/meta-viewport/overflow-hidden-region.html new file mode 100644 index 0000000000..d9c61cc21c --- /dev/null +++ b/layout/reftests/meta-viewport/overflow-hidden-region.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div style="background: red; width: 300%; height: 300%;"></div> +<div style="background: green; width: 200%; height: 200%;"></div> +<div style="background: blue; width: 100%; height: 100%;"></div> diff --git a/layout/reftests/meta-viewport/overflow-region-ref.html b/layout/reftests/meta-viewport/overflow-region-ref.html new file mode 100644 index 0000000000..899bc55907 --- /dev/null +++ b/layout/reftests/meta-viewport/overflow-region-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div style="background: green; width: 100%; height: 100%;"></div> +<div style="background: blue; width: 50%; height: 50%;"></div> diff --git a/layout/reftests/meta-viewport/overflow-region.html b/layout/reftests/meta-viewport/overflow-region.html new file mode 100644 index 0000000000..f18ac61822 --- /dev/null +++ b/layout/reftests/meta-viewport/overflow-region.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +div { + position: absolute; +} +</style> +<div style="background: red; width: 300%; height: 300%;"></div> +<div style="background: green; width: 200%; height: 200%;"></div> +<div style="background: blue; width: 100%; height: 100%"></div> diff --git a/layout/reftests/meta-viewport/position-fixed-on-half-height-content-ref.html b/layout/reftests/meta-viewport/position-fixed-on-half-height-content-ref.html new file mode 100644 index 0000000000..6c24e1fc9d --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-on-half-height-content-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +#fixed { + width: 100px; + height: 100px; + background-color: green; + position: fixed; + bottom: 0px; + right: 0px; +} +</style> +<div id="fixed"></div> diff --git a/layout/reftests/meta-viewport/position-fixed-on-half-height-content.html b/layout/reftests/meta-viewport/position-fixed-on-half-height-content.html new file mode 100644 index 0000000000..a962e56ad2 --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-on-half-height-content.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 50%; +} +#fixed { + width: 100px; + height: 100px; + background-color: green; + position: fixed; + bottom: 0px; + right: 0px; +} +</style> +<div id="fixed"></div> diff --git a/layout/reftests/meta-viewport/position-fixed-on-landscape-content.html b/layout/reftests/meta-viewport/position-fixed-on-landscape-content.html new file mode 100644 index 0000000000..6f34d7b728 --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-on-landscape-content.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; /* avoid drawing scrollbars */ +} +#twice-width { + width: 200%; + height: 100%; + position: absolute; +} +#fixed { + width: 200px; + height: 200px; + background-color: green; + position: fixed; + bottom: 0px; + right: 0px; +} +</style> +<div id="twice-width"></div> +<div id="fixed"></div> diff --git a/layout/reftests/meta-viewport/position-fixed-on-minimum-scale-size-ref.html b/layout/reftests/meta-viewport/position-fixed-on-minimum-scale-size-ref.html new file mode 100644 index 0000000000..0d2cddeff1 --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-on-minimum-scale-size-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html reftest-async-scroll + reftest-async-scroll-x="800" + reftest-async-scroll-y="0" + reftest-displayport-w="1600" + reftest-displayport-h="2000" + reftest-displayport-x="0" + reftest-displayport-y="0"> +<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> +<style> + html,body { + margin: 0; + width: 1600px; + height: 2000px; + } +</style> +<div style="position: relative; width: 100%; height: 100%;"> + <div style="position: absolute; top: 0; right: 0; width: 100px; height: 100px; background-color: green"></div> +</div> +</html> diff --git a/layout/reftests/meta-viewport/position-fixed-on-minimum-scale-size.html b/layout/reftests/meta-viewport/position-fixed-on-minimum-scale-size.html new file mode 100644 index 0000000000..48f167a9cc --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-on-minimum-scale-size.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html reftest-async-scroll + reftest-async-scroll-x="800" + reftest-async-scroll-y="0" + reftest-displayport-w="1600" + reftest-displayport-h="2000" + reftest-displayport-x="0" + reftest-displayport-y="0"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<style> + html,body { + margin: 0; + width: 800px; + height: 1000px; + } +</style> +<div style="position:fixed; top: 0; right: 0; width: 100px; height: 100px; background-color: green"></div> +<div style="width: 1600px; height: 2000px;"></div> +</html> diff --git a/layout/reftests/meta-viewport/position-fixed-on-square-content-ref.html b/layout/reftests/meta-viewport/position-fixed-on-square-content-ref.html new file mode 100644 index 0000000000..2432508186 --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-on-square-content-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; /* avoid drawing scrollbars */ +} +#square { + width: 100vw; + height: 100vw; + position: absolute; + background-color: green; +} +#fixed { + width: 200px; + height: 200px; + background-color: green; + position: fixed; + bottom: 0px; + right: 0px; +} +</style> +<div id="square"></div> +<div id="fixed"></div> diff --git a/layout/reftests/meta-viewport/position-fixed-on-square-content.html b/layout/reftests/meta-viewport/position-fixed-on-square-content.html new file mode 100644 index 0000000000..956cbb72c3 --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-on-square-content.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=400, height=400"> +<!-- + width=400 is half of reftest canvas width so that this content should be + scaled by 2x. + --> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; /* avoid drawing scrollbars */ +} +#square { + width: 100%; + height: 100%; + position: absolute; + background-color: green; +} +#fixed { + width: 100px; + height: 100px; + background-color: green; + position: fixed; + bottom: 0px; + right: 0px; +} +</style> +<div id="square"></div> +<div id="fixed"></div> diff --git a/layout/reftests/meta-viewport/position-fixed-out-of-view.html b/layout/reftests/meta-viewport/position-fixed-out-of-view.html new file mode 100644 index 0000000000..02d889d0c8 --- /dev/null +++ b/layout/reftests/meta-viewport/position-fixed-out-of-view.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<style> + html,body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; + } +</style> +<!-- + this green box should be attached at the right edge of the layout viewport so + it should not be visible in the initial viewport position(0,0). +--> +<div style="position:fixed; top:0; right: 0; width:100px; height: 100px; background-color: green"></div> +<div style="width: 200%; height: 200%;"></div> diff --git a/layout/reftests/meta-viewport/reftest.list b/layout/reftests/meta-viewport/reftest.list new file mode 100644 index 0000000000..7c174074ec --- /dev/null +++ b/layout/reftests/meta-viewport/reftest.list @@ -0,0 +1,43 @@ +defaults pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,true) + +# These tests assume that viewport width in reftest is 800px. +== box-shadow.html initial-scale-0_5-ref.html +== initial-scale-0.html initial-scale-0_25-ref.html +== initial-scale-100.html initial-scale-10-ref.html +== no-viewport.html initial-scale-0_5-ref.html +== viewport-width.html initial-scale-0_5-ref.html +== initial-scale-1.html no-zoom-ref.html +== minimum-scale.html no-zoom-ref.html +== invalid-width.html invalid-width-ref.html +== invalid-content.html width-980-ref.html +== removal.html width-980-ref.html +== device-height-for-width.html invalid-width-ref.html +== negative-initial-and-maximum-scale.html initial-scale-0_5-ref.html +== no-scalable-with-minimum-scale.html no-scalable-with-minimum-scale-ref.html +== clamped-by-default-minimum-scale.html initial-scale-0_25-ref.html +== position-fixed-on-half-height-content.html position-fixed-on-half-height-content-ref.html +== position-fixed-on-landscape-content.html position-fixed-on-half-height-content-ref.html +== position-fixed-on-square-content.html position-fixed-on-square-content-ref.html +== async-scroll-to-no-content-area.html async-scroll-to-no-content-area-ref.html # bug 1571623 to track down the failure on WebRender +== resolution-change-on-landscape-content.html resolution-change-on-landscape-content-ref.html +== scrollbars-in-half-height-content.html scrollbars-in-half-height-content-ref.html +== scrollbars-in-landscape-content.html scrollbars-in-landscape-content-ref.html + +skip-if(!Android) == position-fixed-on-minimum-scale-size.html position-fixed-on-minimum-scale-size-ref.html +== position-fixed-out-of-view.html about:blank + +== overflow-region.html overflow-region-ref.html +== overflow-hidden-region.html overflow-region-ref.html +pref(ui.useOverlayScrollbars,1) == overflow-hidden-region-with-negative-left-positioned-element.html overflow-region-ref.html +== horizontal-overflow-hidden-region.html horizontal-overflow-hidden-region-ref.html +== vertical-overflow-hidden-region.html about:blank +== scroll-to-unreachable-area.html scroll-to-unreachable-area-ref.html +== wrapped-text-at-icb.html wrapped-text-at-icb-ref.html +== overflow-hidden-region-dynamic-width-change.html overflow-region-ref.html +== remove-overflow-hidden-region.html remove-overflow-hidden-region-ref.html +== dynamic-grow-width.html horizontal-overflow-hidden-region-ref.html +== dynamic-grow-width-and-height.html overflow-region-ref.html +== not-able-to-scrollTo.html about:blank +== min-scale-aspect-ratio.html about:blank +pref(layout.dynamic-toolbar-max-height,100) == device-height-with-dynamic-toolbar.html device-height-with-dynamic-toolbar-ref.html +== desktop-mode.html desktop-mode-ref.html diff --git a/layout/reftests/meta-viewport/removal.html b/layout/reftests/meta-viewport/removal.html new file mode 100644 index 0000000000..80cff8077b --- /dev/null +++ b/layout/reftests/meta-viewport/removal.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<!-- This should still have an effect after removal --> +<meta name="viewport" content="width=980"> +<script>document.querySelector('meta + meta').remove()</script> +<style> +#box { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="box"></div> diff --git a/layout/reftests/meta-viewport/remove-overflow-hidden-region-ref.html b/layout/reftests/meta-viewport/remove-overflow-hidden-region-ref.html new file mode 100644 index 0000000000..12c5cfacc7 --- /dev/null +++ b/layout/reftests/meta-viewport/remove-overflow-hidden-region-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<style> +html { + overflow: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div style="background: blue; width: 100%; height: 100%;"></div> +</html> diff --git a/layout/reftests/meta-viewport/remove-overflow-hidden-region.html b/layout/reftests/meta-viewport/remove-overflow-hidden-region.html new file mode 100644 index 0000000000..af10fd625c --- /dev/null +++ b/layout/reftests/meta-viewport/remove-overflow-hidden-region.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div id="green" style="background: green; width: 200%; height: 200%;"></div> +<div style="background: blue; width: 100%; height: 100%; height: 100%;"></div> +<script> +document.addEventListener('MozReftestInvalidate', () => { + green.style.width = '100%'; + document.documentElement.classList.remove('reftest-wait'); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/resolution-change-on-landscape-content-ref.html b/layout/reftests/meta-viewport/resolution-change-on-landscape-content-ref.html new file mode 100644 index 0000000000..d2058d48ee --- /dev/null +++ b/layout/reftests/meta-viewport/resolution-change-on-landscape-content-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<style> +html { + background-color: green; +} +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; /* avoid drawing scrollbars */ +} +#quarter-height { + background-color: red; + width: 100%; + height: 25%; + position: absolute; +} +</style> +<div id="quarter-height"></div> diff --git a/layout/reftests/meta-viewport/resolution-change-on-landscape-content.html b/layout/reftests/meta-viewport/resolution-change-on-landscape-content.html new file mode 100644 index 0000000000..6343be70ed --- /dev/null +++ b/layout/reftests/meta-viewport/resolution-change-on-landscape-content.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + This test case is initially scaled to 1.x by initial-scale=1 in the meta + viewport tag below, then scaled down to 0.25x by reftest-resolution="0.25" + --> +<html reftest-resolution="0.25"> +<meta name="viewport" content="width=device-width,minimum-scale=0.25,initial-scale=1"> +<style> +html { + background-color: green; +} +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; /* avoid drawing scrollbars */ +} +#quadruple-width { + background-color: red; + width: 400%; + height: 100%; + position: absolute; +} +</style> +<div id="quadruple-width"></div> +</html> diff --git a/layout/reftests/meta-viewport/scroll-to-unreachable-area-ref.html b/layout/reftests/meta-viewport/scroll-to-unreachable-area-ref.html new file mode 100644 index 0000000000..8c840a06d8 --- /dev/null +++ b/layout/reftests/meta-viewport/scroll-to-unreachable-area-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div style="background: red; width: 100%; height: 100%;"></div> +<div style="background: green; width: 50%; height: 50%;"></div> diff --git a/layout/reftests/meta-viewport/scroll-to-unreachable-area.html b/layout/reftests/meta-viewport/scroll-to-unreachable-area.html new file mode 100644 index 0000000000..e0f6016208 --- /dev/null +++ b/layout/reftests/meta-viewport/scroll-to-unreachable-area.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +</style> +<div style="background: red; width: 300%; height: 300%;"></div> +<div id="green" style="background: green; width: 200%; height: 200%;"></div> +<div style="background: blue; width: 100%; height: 100%;"></div> +<script> +document.addEventListener('MozReftestInvalidate', () => { + const rect = green.getBoundingClientRect(); + window.scrollTo(rect.right, rect.bottom); + document.documentElement.classList.remove('reftest-wait'); +}); +</script> +</html> diff --git a/layout/reftests/meta-viewport/scrollbars-in-half-height-content-ref.html b/layout/reftests/meta-viewport/scrollbars-in-half-height-content-ref.html new file mode 100644 index 0000000000..ea84b80fab --- /dev/null +++ b/layout/reftests/meta-viewport/scrollbars-in-half-height-content-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=2"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + background: green; + position: absolute; + width: 100%; + height: 50%; +} +</style> +<div></div> diff --git a/layout/reftests/meta-viewport/scrollbars-in-half-height-content.html b/layout/reftests/meta-viewport/scrollbars-in-half-height-content.html new file mode 100644 index 0000000000..b119361d0e --- /dev/null +++ b/layout/reftests/meta-viewport/scrollbars-in-half-height-content.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width,initial-scale=2"> +<!-- + This content height is 50% of the window height but it's scaled by 2x so that + there should be scrollbars. + --> +<style> +html, body { + margin: 0; + width: 100%; + height: 50%; +} +div { + background: green; + position: absolute; + width: 100%; + height: 50%; +} +</style> +<div></div> diff --git a/layout/reftests/meta-viewport/scrollbars-in-landscape-content-ref.html b/layout/reftests/meta-viewport/scrollbars-in-landscape-content-ref.html new file mode 100644 index 0000000000..d517884fb2 --- /dev/null +++ b/layout/reftests/meta-viewport/scrollbars-in-landscape-content-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; + width: 200%; + height: 200%; +} +</style> +<div></div> diff --git a/layout/reftests/meta-viewport/scrollbars-in-landscape-content.html b/layout/reftests/meta-viewport/scrollbars-in-landscape-content.html new file mode 100644 index 0000000000..64dc6f725e --- /dev/null +++ b/layout/reftests/meta-viewport/scrollbars-in-landscape-content.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.5, initial-scale=1"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; +} +#twice-width { + position: absolute; + width: 200%; + height: 100%; +} +</style> +<div id="twice-width"></div> diff --git a/layout/reftests/meta-viewport/vertical-overflow-hidden-region.html b/layout/reftests/meta-viewport/vertical-overflow-hidden-region.html new file mode 100644 index 0000000000..90de29c2e5 --- /dev/null +++ b/layout/reftests/meta-viewport/vertical-overflow-hidden-region.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow-y: hidden; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + width: 100%; + position: absolute; +} +</style> +<div style="background: red; height: 300%;"></div> +<div style="background: green; height: 200%;"></div> +<div style="background: white; height: 100%;"></div> diff --git a/layout/reftests/meta-viewport/viewport-width.html b/layout/reftests/meta-viewport/viewport-width.html new file mode 100644 index 0000000000..a07c81cb59 --- /dev/null +++ b/layout/reftests/meta-viewport/viewport-width.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + min-width: 1600px; /* this value should be double of viewport width */ + min-height: 3000px; + position: relative; +} +#inner { + position: absolute; + top: 0; + right: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/width-980-ref.html b/layout/reftests/meta-viewport/width-980-ref.html new file mode 100644 index 0000000000..3fdba75e79 --- /dev/null +++ b/layout/reftests/meta-viewport/width-980-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + scrollbar-width: none; +} +#container { + width: 980px; + position: relative; +} +#inner { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; +} +</style> +<div id="container"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/meta-viewport/wrapped-text-at-icb-ref.html b/layout/reftests/meta-viewport/wrapped-text-at-icb-ref.html new file mode 100644 index 0000000000..e4b8787f83 --- /dev/null +++ b/layout/reftests/meta-viewport/wrapped-text-at-icb-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=0.5"> +<style> +html, body { + margin: 0; + width: 100%; + height: 100%; + font-size: 20px; + scrollbar-width: none; +} +p { + line-height: 1rem; + width: 50%; +} +</style> +<p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +</p> diff --git a/layout/reftests/meta-viewport/wrapped-text-at-icb.html b/layout/reftests/meta-viewport/wrapped-text-at-icb.html new file mode 100644 index 0000000000..44b5857fbe --- /dev/null +++ b/layout/reftests/meta-viewport/wrapped-text-at-icb.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, minimum-scale=0.5"> +<style> +html { + overflow: hidden; + font-size: 20px; +} +html, body { + margin: 0; + width: 100%; + height: 100%; +} +div { + position: absolute; +} +p { + line-height: 1rem; +} +</style> +</head><body><p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +</p> +<div style="width: 200%; height: 200%;"></div> |