summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-valuesandunits
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/css-valuesandunits
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/css-valuesandunits')
-rw-r--r--layout/reftests/css-valuesandunits/reftest-stylo.list19
-rw-r--r--layout/reftests/css-valuesandunits/reftest.list15
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-div-fontsize.html13
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-div-width-inner.html13
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-div-width-outer.html13
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-iframe-inside.html7
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-iframe.html6
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref-iframe-inside.html7
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref-iframe.html6
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref-resource.svg4
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref-root-fontsize.html7
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref-root-width.html12
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref.html13
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref.svg5
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-ref2-root-fontsize.html7
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-resource.svg6
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-root-fontsize.html7
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem-root-width.html12
-rw-r--r--layout/reftests/css-valuesandunits/unit-rem.svg5
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-iframe.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-iframe.html21
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref-iframe.html37
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto-ref.html15
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-auto.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-iframe.html22
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref-iframe.html36
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-ref.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-iframe.html18
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref-iframe.html28
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x-ref.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-x.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-iframe.html18
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref-iframe.html28
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y-ref.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll-y.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-overflow-scroll.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-ref-iframe.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-ref.html14
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-zoom-ref.html18
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw-zoom.html18
-rw-r--r--layout/reftests/css-valuesandunits/unit-vh-vw.html14
41 files changed, 590 insertions, 0 deletions
diff --git a/layout/reftests/css-valuesandunits/reftest-stylo.list b/layout/reftests/css-valuesandunits/reftest-stylo.list
new file mode 100644
index 000000000..2d1be233d
--- /dev/null
+++ b/layout/reftests/css-valuesandunits/reftest-stylo.list
@@ -0,0 +1,19 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== unit-rem-div-fontsize.html unit-rem-div-fontsize.html
+== unit-rem-div-width-inner.html unit-rem-div-width-inner.html
+== unit-rem-div-width-outer.html unit-rem-div-width-outer.html
+skip-if(B2G||Mulet) == unit-rem-iframe.html unit-rem-iframe.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== unit-rem-root-fontsize.html unit-rem-root-fontsize.html
+== unit-rem-root-fontsize.html unit-rem-root-fontsize.html
+== unit-rem-root-width.html unit-rem-root-width.html
+== unit-rem.svg unit-rem.svg
+skip == unit-vh-vw.html unit-vh-vw.html
+== unit-vh-vw-zoom.html unit-vh-vw-zoom.html
+== unit-vh-vw-overflow-auto.html unit-vh-vw-overflow-auto.html
+== unit-vh-vw-overflow-scroll.html unit-vh-vw-overflow-scroll.html
+skip == unit-vh-vw-overflow-scroll-x.html unit-vh-vw-overflow-scroll-x.html
+== unit-vh-vw-overflow-scroll-y.html unit-vh-vw-overflow-scroll-y.html
+skip == unit-vh-vw-overflow-auto.html unit-vh-vw-overflow-auto.html
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/css-valuesandunits/reftest.list b/layout/reftests/css-valuesandunits/reftest.list
new file mode 100644
index 000000000..5e251b004
--- /dev/null
+++ b/layout/reftests/css-valuesandunits/reftest.list
@@ -0,0 +1,15 @@
+== 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
+== 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
+== unit-vh-vw-overflow-auto.html unit-vh-vw-overflow-auto-ref.html
+== unit-vh-vw-overflow-scroll.html unit-vh-vw-overflow-scroll-ref.html
+== unit-vh-vw-overflow-scroll-x.html unit-vh-vw-overflow-scroll-x-ref.html
+== unit-vh-vw-overflow-scroll-y.html unit-vh-vw-overflow-scroll-y-ref.html
+skip-if(Android) != unit-vh-vw-overflow-auto.html unit-vh-vw-overflow-scroll.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 000000000..7f6ceedcf
--- /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 000000000..ab0948bd8
--- /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 000000000..6203e2662
--- /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 000000000..954fcf4e3
--- /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 000000000..a91350a2a
--- /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 000000000..57bd094f8
--- /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 000000000..7610ba3b5
--- /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 000000000..d58accb9d
--- /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 000000000..da2cb1e7b
--- /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 000000000..3cf785e58
--- /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 000000000..afcdb91ad
--- /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 000000000..18bea032f
--- /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 000000000..600ddcd59
--- /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 000000000..a7b751deb
--- /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 000000000..69f194322
--- /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 000000000..3e41edadb
--- /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 000000000..197e80d49
--- /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 000000000..437873782
--- /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 000000000..203b6efa9
--- /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 000000000..2803e712b
--- /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 000000000..5bbe4b17c
--- /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 000000000..1f68c3b1d
--- /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 000000000..6f9960f6e
--- /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 000000000..c06fc4476
--- /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 000000000..f63a89c9b
--- /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 000000000..10c9ff32e
--- /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 000000000..a8430fd54
--- /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 000000000..278ff74ed
--- /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 000000000..cde11499e
--- /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 000000000..e6d0fb863
--- /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 000000000..7243ccbf7
--- /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 000000000..06f0f142c
--- /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 000000000..a18155134
--- /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 000000000..11696a038
--- /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 000000000..3694b3f70
--- /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 000000000..5dc30fd0e
--- /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 000000000..c477c326c
--- /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 000000000..3272721ae
--- /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 000000000..59aea944c
--- /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>