diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/css-valuesandunits | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/css-valuesandunits')
42 files changed, 678 insertions, 0 deletions
diff --git a/layout/reftests/css-valuesandunits/ch-width-1-ref.html b/layout/reftests/css-valuesandunits/ch-width-1-ref.html new file mode 100644 index 0000000000..588234be72 --- /dev/null +++ b/layout/reftests/css-valuesandunits/ch-width-1-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<style> +body { + font-family: courier new, courier, monospace; + line-height: 1; +} +div { + width: 120px; + float: left; +} +span { + display: inline-block; + height: 1em; + background: lightgreen; +} +</style> +<p>No red should appear at the tips of the rectangles:</p> +<script> +for (var i = 10; i <= 16; i++) { + var div = document.createElement("div"); + div.style.fontSize = i + "px"; + document.body.appendChild(div); + for (var j = 1; j <= 10; j++) { + // green span containing the specified number of chars + var b = document.createElement("span"); + b.className = "b"; + b.textContent = "\xA0".repeat(j); + div.appendChild(b); + div.appendChild(document.createElement("br")); + div.appendChild(document.createElement("br")); + } + for (var j = 1; j <= 10; j++) { + var b = document.createElement("span"); + b.className = "b"; + b.textContent = "\xA0".repeat(j); + div.appendChild(b); + div.appendChild(document.createElement("br")); + div.appendChild(document.createElement("br")); + } +} +</script> diff --git a/layout/reftests/css-valuesandunits/ch-width-1.html b/layout/reftests/css-valuesandunits/ch-width-1.html new file mode 100644 index 0000000000..92cd7bdcf6 --- /dev/null +++ b/layout/reftests/css-valuesandunits/ch-width-1.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<style> +body { + font-family: courier new, courier, monospace; + line-height: 1; +} +div { + width: 120px; + float: left; +} +span { + display: inline-block; + height: 1em; +} +span.a { + background: red; +} +span.b { + position: relative; + top: -1em; + height: 1em; + background: lightgreen; +} +</style> +<p>No red should appear at the tips of the rectangles:</p> +<script> +for (var i = 10; i <= 16; i++) { + var div = document.createElement("div"); + div.style.fontSize = i + "px"; + document.body.appendChild(div); + for (var j = 1; j <= 10; j++) { + // create a red span with width specified in 'ch' units + var a = document.createElement("span"); + a.className = "a"; + a.style.width = j + "ch"; + a.textContent = "\xA0"; + div.appendChild(a); + div.appendChild(document.createElement("br")); + // overlay it with a green span containing the equivalent number of chars + var b = document.createElement("span"); + b.className = "b"; + b.textContent = "\xA0".repeat(j); + div.appendChild(b); + div.appendChild(document.createElement("br")); + } + for (var j = 1; j <= 10; j++) { + // create a red span containing a specific number of chars + var a = document.createElement("span"); + a.className = "a"; + a.textContent = "\xA0".repeat(j); + div.appendChild(a); + div.appendChild(document.createElement("br")); + // overlay it with a green span with width specified in 'ch' units + var b = document.createElement("span"); + b.className = "b"; + b.style.width = j + "ch"; + b.textContent = "\xA0"; + div.appendChild(b); + div.appendChild(document.createElement("br")); + } +} +</script> diff --git a/layout/reftests/css-valuesandunits/reftest.list b/layout/reftests/css-valuesandunits/reftest.list new file mode 100644 index 0000000000..ce6a4e0623 --- /dev/null +++ b/layout/reftests/css-valuesandunits/reftest.list @@ -0,0 +1,19 @@ +skip-if(ThreadSanitizer) == unit-rem-div-fontsize.html unit-rem-ref.html +== unit-rem-div-width-inner.html unit-rem-ref.html +== unit-rem-div-width-outer.html unit-rem-ref.html +fuzzy-if(winWidget,0-27,0-4) == unit-rem-iframe.html unit-rem-ref-iframe.html +== unit-rem-root-fontsize.html unit-rem-ref-root-fontsize.html +== unit-rem-root-fontsize.html unit-rem-ref2-root-fontsize.html +== unit-rem-root-width.html unit-rem-ref-root-width.html +== unit-rem.svg unit-rem-ref.svg +== unit-vh-vw.html unit-vh-vw-ref.html +== unit-vh-vw-zoom.html unit-vh-vw-zoom-ref.html +fuzzy(0-1,0-4) fuzzy-if(winWidget,0-4,0-51) fuzzy-if(gtkWidget,0-1,0-29) fuzzy-if(cocoaWidget,0-1,0-29) == unit-vh-vw-overflow-auto.html unit-vh-vw-overflow-auto-ref.html # fuzzy due to anti-aliasing pixels in scrollbar redendering + +# These tests should probably be removed, see bug 1393603. +fails-if(!Android) == unit-vh-vw-overflow-scroll.html unit-vh-vw-overflow-scroll-ref.html +fails-if(!Android) == unit-vh-vw-overflow-scroll-x.html unit-vh-vw-overflow-scroll-x-ref.html +fails-if(!Android) == unit-vh-vw-overflow-scroll-y.html unit-vh-vw-overflow-scroll-y-ref.html +fuzzy-if(winWidget,0-4,0-51) fuzzy-if(gtkWidget,0-1,0-12) fuzzy-if(cocoaWidget,0-1,0-29) == unit-vh-vw-overflow-auto.html unit-vh-vw-overflow-scroll.html + +== ch-width-1.html ch-width-1-ref.html diff --git a/layout/reftests/css-valuesandunits/unit-rem-div-fontsize.html b/layout/reftests/css-valuesandunits/unit-rem-div-fontsize.html new file mode 100644 index 0000000000..7f6ceedcf9 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-div-fontsize.html @@ -0,0 +1,13 @@ +<style> +:root { font-size: 20px } +body { font-size: 25px } +div { + font-size: 1.5rem; + width: 300px; +} +#a { + border-bottom: 1px solid #f00; +} +</style> + +<body>Level 1<div id=a>Level 2<div id=b>Level 3</div></div></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-div-width-inner.html b/layout/reftests/css-valuesandunits/unit-rem-div-width-inner.html new file mode 100644 index 0000000000..ab0948bd8f --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-div-width-inner.html @@ -0,0 +1,13 @@ +<style> +:root { font-size: 20px } +body { font-size: 25px } +div { + font-size: 30px; + width: 15rem; +} +#b { + border-bottom: 1px solid #f00; +} +</style> + +<body>Level 1<div id=a>Level 2<div id=b>Level 3</div></div></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-div-width-outer.html b/layout/reftests/css-valuesandunits/unit-rem-div-width-outer.html new file mode 100644 index 0000000000..6203e26628 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-div-width-outer.html @@ -0,0 +1,13 @@ +<style> +:root { font-size: 20px } +body { font-size: 25px } +div { + font-size: 30px; + width: 15rem; +} +#a { + border-bottom: 1px solid #f00; +} +</style> + +<body>Level 1<div id=a>Level 2<div id=b>Level 3</div></div></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-iframe-inside.html b/layout/reftests/css-valuesandunits/unit-rem-iframe-inside.html new file mode 100644 index 0000000000..954fcf4e32 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-iframe-inside.html @@ -0,0 +1,7 @@ +<style> +:root { font-size: 20px } +body { font-size: 25px } +div { font-size: 1.5rem } +</style> + +<body><div>Inside</div></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-iframe.html b/layout/reftests/css-valuesandunits/unit-rem-iframe.html new file mode 100644 index 0000000000..a91350a2a1 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-iframe.html @@ -0,0 +1,6 @@ +<style> +:root { font-size: 10px } +body { font-size: 12px } +</style> + +<body>Outside<iframe src=unit-rem-iframe-inside.html></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref-iframe-inside.html b/layout/reftests/css-valuesandunits/unit-rem-ref-iframe-inside.html new file mode 100644 index 0000000000..57bd094f84 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref-iframe-inside.html @@ -0,0 +1,7 @@ +<style> +:root { font-size: 20px } +body { font-size: 25px } +div { font-size: 30px } +</style> + +<body><div>Inside</div></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref-iframe.html b/layout/reftests/css-valuesandunits/unit-rem-ref-iframe.html new file mode 100644 index 0000000000..7610ba3b52 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref-iframe.html @@ -0,0 +1,6 @@ +<style> +:root { font-size: 10px } +body { font-size: 12px } +</style> + +<body>Outside<iframe src=unit-rem-ref-iframe-inside.html></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref-resource.svg b/layout/reftests/css-valuesandunits/unit-rem-ref-resource.svg new file mode 100644 index 0000000000..d58accb9d0 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref-resource.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + style="font-size: 30px"> + <rect id="rect" fill="green" width="200px" height="50px" /> +</svg> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref-root-fontsize.html b/layout/reftests/css-valuesandunits/unit-rem-ref-root-fontsize.html new file mode 100644 index 0000000000..da2cb1e7b1 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref-root-fontsize.html @@ -0,0 +1,7 @@ +<style> +:root { + font-size: 1.5em; +} +</style> + +<body>Hello</body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref-root-width.html b/layout/reftests/css-valuesandunits/unit-rem-ref-root-width.html new file mode 100644 index 0000000000..3cf785e587 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref-root-width.html @@ -0,0 +1,12 @@ +<style> +:root { + font-size: 30px; + width: 300px; + border-bottom: 1px solid #f00; +} +body { + font-size: 25px; +} +</style> + +<body>Level 1</body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref.html b/layout/reftests/css-valuesandunits/unit-rem-ref.html new file mode 100644 index 0000000000..afcdb91ad6 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref.html @@ -0,0 +1,13 @@ +<style> +:root { font-size: 20px } +body { font-size: 25px } +div { + font-size: 30px; + width: 300px; +} +#a { + border-bottom: 1px solid #f00; +} +</style> + +<body>Level 1<div id=a>Level 2<div id=b>Level 3</div></div></body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref.svg b/layout/reftests/css-valuesandunits/unit-rem-ref.svg new file mode 100644 index 0000000000..18bea032f4 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 20px"> + <use xlink:href="unit-rem-ref-resource.svg#rect" /> +</svg> diff --git a/layout/reftests/css-valuesandunits/unit-rem-ref2-root-fontsize.html b/layout/reftests/css-valuesandunits/unit-rem-ref2-root-fontsize.html new file mode 100644 index 0000000000..600ddcd595 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-ref2-root-fontsize.html @@ -0,0 +1,7 @@ +<style> +body { + font-size: 1.5em; +} +</style> + +<body>Hello</body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-resource.svg b/layout/reftests/css-valuesandunits/unit-rem-resource.svg new file mode 100644 index 0000000000..a7b751deb0 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-resource.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + style="font-size: 30px"> + <!-- We don't support 'rem' in the width attribute because that's nsSVGLength + code, so we use indirection through 'em' and 'font-size'. --> + <rect id="rect" fill="green" style="font-size: 2rem" width="5em" height="50px" /> +</svg> diff --git a/layout/reftests/css-valuesandunits/unit-rem-root-fontsize.html b/layout/reftests/css-valuesandunits/unit-rem-root-fontsize.html new file mode 100644 index 0000000000..69f1943221 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-root-fontsize.html @@ -0,0 +1,7 @@ +<style> +:root { + font-size: 1.5rem; +} +</style> + +<body>Hello</body> diff --git a/layout/reftests/css-valuesandunits/unit-rem-root-width.html b/layout/reftests/css-valuesandunits/unit-rem-root-width.html new file mode 100644 index 0000000000..3e41edadb7 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem-root-width.html @@ -0,0 +1,12 @@ +<style> +:root { + font-size: 30px; + width: 10rem; + border-bottom: 1px solid #f00; +} +body { + font-size: 25px; +} +</style> + +<body>Level 1</body> diff --git a/layout/reftests/css-valuesandunits/unit-rem.svg b/layout/reftests/css-valuesandunits/unit-rem.svg new file mode 100644 index 0000000000..197e80d490 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-rem.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 20px"> + <use xlink:href="unit-rem-resource.svg#rect" /> +</svg> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-iframe.html new file mode 100644 index 0000000000..437873782e --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-iframe.html @@ -0,0 +1,14 @@ +<style> + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div style="width: 50vw"></div> + <div style="height: 25vh"></div> + <div style="width: 35vmin"></div> + <div style="height: 25vmax"></div> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-iframe.html new file mode 100644 index 0000000000..203b6efa95 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-iframe.html @@ -0,0 +1,21 @@ +<style> + body { overflow: auto } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div style="width: 50vw"></div> + <div style="height: 25vh"></div> + <div style="width: 35vmin"></div> + <div style="height: 25vmax"></div> + + <!-- + Deliberately make the scrollbars appear to ensure that with 'overflow: auto' + viewport units are calculated as if the scrollbars are _not_ there. + --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref-iframe.html new file mode 100644 index 0000000000..2803e712b5 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref-iframe.html @@ -0,0 +1,37 @@ +<style> + body { overflow: hidden } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div id="a"></div> + <div id="b"></div> + <div id="c"></div> + <div id="d"></div> + + <!-- + Deliberately make the scrollbars appear to ensure that with 'overflow: auto' + viewport units are calculated as if the scrollbars are _not_ there. + --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> + +<script> + // client{Width, Height} consist of the area _inside_ the scrollbars, so we need + // to calculate these units with 'overflow: hidden' set to ensure that there are + // no scrollbars. This reflects the fact that with 'overflow: auto' set, viewport + // units are sized without taking the scrollbars into account. + var vw = 0.01 * document.body.clientWidth; + var vh = 0.01 * document.body.clientHeight; + var vmin = Math.min(vw, vh); + var vmax = Math.max(vw, vh); + document.body.style.overflow = "auto"; + document.getElementById('a').style.width = (50 * vw) + "px"; + document.getElementById('b').style.height = (25 * vh) + "px"; + document.getElementById('c').style.width = (35 * vmin) + "px"; + document.getElementById('d').style.height = (25 * vmax) + "px"; +</script> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref.html new file mode 100644 index 0000000000..5bbe4b17c0 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref.html @@ -0,0 +1,15 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-auto-ref-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-auto-ref-iframe.html"></iframe> +</body> + diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto.html new file mode 100644 index 0000000000..1f68c3b1d9 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-auto-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-auto-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-iframe.html new file mode 100644 index 0000000000..6f9960f6e5 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-iframe.html @@ -0,0 +1,22 @@ +<style> + body { overflow: scroll } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div style="width: 50vw"></div> + <div style="height: 25vh"></div> + <div style="width: 35vmin"></div> + <div style="height: 25vmax"></div> + + <!-- + Ensure that the scroller positioned the same way as it would be in the + 'overflow: auto' case. We'll have scrollbars either way, but we don't + want the '!=' reftest to spuriously succeed because of the scrollers. + --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref-iframe.html new file mode 100644 index 0000000000..c06fc4476f --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref-iframe.html @@ -0,0 +1,36 @@ +<style> + body { overflow: scroll } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div id="a"></div> + <div id="b"></div> + <div id="c"></div> + <div id="d"></div> + + <!-- + Ensure that the scroller positioned the same way as it would be in the + 'overflow: auto' case. We'll have scrollbars either way, but we don't + want the '!=' reftest to spuriously succeed because of the scrollers. + --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> + +<script> + // client{Width, Height} consist of the area _inside_ the scrollbars, so these + // manually calculated units reflect the fact that with 'overflow: scroll' set, + // viewport units are sized taking the scrollbars into account. + var vw = 0.01 * document.body.clientWidth; + var vh = 0.01 * document.body.clientHeight; + var vmin = Math.min(vw, vh); + var vmax = Math.max(vw, vh); + document.getElementById('a').style.width = (50 * vw) + "px"; + document.getElementById('b').style.height = (25 * vh) + "px"; + document.getElementById('c').style.width = (35 * vmin) + "px"; + document.getElementById('d').style.height = (25 * vmax) + "px"; +</script> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref.html new file mode 100644 index 0000000000..f63a89c9b2 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-scroll-ref-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-scroll-ref-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-iframe.html new file mode 100644 index 0000000000..10c9ff32ec --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-iframe.html @@ -0,0 +1,18 @@ +<style> + body { overflow-x: scroll } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div style="width: 50vw"></div> + <div style="height: 25vh"></div> + <div style="width: 35vmin"></div> + <div style="height: 25vmax"></div> + + <!-- Deliberately make scrollbars appear. --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref-iframe.html new file mode 100644 index 0000000000..a8430fd545 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref-iframe.html @@ -0,0 +1,28 @@ +<style> + body { overflow-x: scroll } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div style="width: 50px"></div> <!-- Unaffected by scrollbars. --> + <div id="b"></div> + <div style="width: 35px"></div> <!-- Unaffected by scrollbars. --> + <div id="d"></div> + + <!-- Deliberately make scrollbars appear. --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> + +<script> + // client{Width, Height} consist of the area _inside_ the scrollbars, so these + // manually calculated units reflect the fact that with 'overflow: scroll' set, + // viewport units are sized taking the scrollbars into account. Since we're + // only dealing with 'overflow-x' here, only the height units are affected. + var vh = 0.01 * document.body.clientHeight; + document.getElementById('b').style.height = (25 * vh) + "px"; + document.getElementById('d').style.height = (25 * vh) + "px"; +</script> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref.html new file mode 100644 index 0000000000..278ff74ed0 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-scroll-x-ref-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-scroll-x-ref-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x.html new file mode 100644 index 0000000000..cde11499e9 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-scroll-x-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-scroll-x-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-iframe.html new file mode 100644 index 0000000000..e6d0fb863a --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-iframe.html @@ -0,0 +1,18 @@ +<style> + body { overflow-y: scroll } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div style="width: 50vw"></div> + <div style="height: 25vh"></div> + <div style="width: 35vmin"></div> + <div style="height: 25vmax"></div> + + <!-- Deliberately make scrollbars appear. --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref-iframe.html new file mode 100644 index 0000000000..7243ccbf7e --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref-iframe.html @@ -0,0 +1,28 @@ +<style> + body { overflow-y: scroll } + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div id="a"></div> + <div style="height: 50px"></div> <!-- Unaffected by scrollbars. --> + <div id="c"></div> + <div style="height: 50px"></div> <!-- Unaffected by scrollbars. --> + + <!-- Deliberately make scrollbars appear. --> + <div style="width: 500px; height: 500px; background-color: black"> +</body> + +<script> + // client{Width, Height} consist of the area _inside_ the scrollbars, so these + // manually calculated units reflect the fact that with 'overflow: scroll' set, + // viewport units are sized taking the scrollbars into account. Since we're + // only dealing with 'overflow-y' here, only the width units are affected. + var vw = 0.01 * document.body.clientWidth; + document.getElementById('a').style.width = (50 * vw) + "px"; + document.getElementById('c').style.width = (35 * vw) + "px"; +</script> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref.html new file mode 100644 index 0000000000..06f0f142c0 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-scroll-y-ref-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-scroll-y-ref-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y.html new file mode 100644 index 0000000000..a181551346 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-scroll-y-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-scroll-y-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll.html b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll.html new file mode 100644 index 0000000000..11696a0389 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-overflow-scroll-iframe.html"></iframe> + <iframe src="unit-vh-vw-overflow-scroll-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-ref-iframe.html b/layout/reftests/css-valuesandunits/unit-vh-vw-ref-iframe.html new file mode 100644 index 0000000000..3694b3f701 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-ref-iframe.html @@ -0,0 +1,14 @@ +<style> + div { + width: 10px; + height: 10px; + background-color: #d64203; + } +</style> + +<body> + <div style="width: 50px"></div> + <div style="height: 50px"></div> + <div style="width: 35px"></div> + <div style="height: 50px"></div> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-ref.html b/layout/reftests/css-valuesandunits/unit-vh-vw-ref.html new file mode 100644 index 0000000000..5dc30fd0e4 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-ref.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-ref-iframe.html"></iframe> + <iframe src="unit-vh-vw-ref-iframe.html"></iframe> +</body> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-zoom-ref.html b/layout/reftests/css-valuesandunits/unit-vh-vw-zoom-ref.html new file mode 100644 index 0000000000..c477c326c3 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-zoom-ref.html @@ -0,0 +1,18 @@ +<html reftest-zoom="2"> + +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-ref-iframe.html"></iframe> + <iframe src="unit-vh-vw-ref-iframe.html"></iframe> +</body> + +</html> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw-zoom.html b/layout/reftests/css-valuesandunits/unit-vh-vw-zoom.html new file mode 100644 index 0000000000..3272721ae2 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw-zoom.html @@ -0,0 +1,18 @@ +<html reftest-zoom="2"> + +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-iframe.html"></iframe> + <iframe src="unit-vh-vw-iframe.html"></iframe> +</body> + +</html> diff --git a/layout/reftests/css-valuesandunits/unit-vh-vw.html b/layout/reftests/css-valuesandunits/unit-vh-vw.html new file mode 100644 index 0000000000..59aea944c0 --- /dev/null +++ b/layout/reftests/css-valuesandunits/unit-vh-vw.html @@ -0,0 +1,14 @@ +<style> + body { background-color: black } + iframe { + width: 100px; + height: 200px; + margin: 0px; + border: 0px; + } +</style> + +<body> + <iframe src="unit-vh-vw-iframe.html"></iframe> + <iframe src="unit-vh-vw-iframe.html"></iframe> +</body> |
