Bug 1396057: Fix evaluation of rem inside media queries. r?xidorn
Also fix the tests so that they would've caught this.
MozReview-Commit-ID: ByaR4ZA995l
--- a/servo/components/style/values/specified/length.rs
+++ b/servo/components/style/values/specified/length.rs
@@ -190,17 +190,17 @@ impl FontRelativeLength {
}
FontRelativeLength::Rem(length) => {
// https://drafts.csswg.org/css-values/#rem:
//
// When specified on the font-size property of the root
// element, the rem units refer to the property’s initial
// value.
//
- let reference_size = if context.is_root_element {
+ let reference_size = if context.is_root_element || context.in_media_query {
reference_font_size
} else {
context.device().root_font_size()
};
(reference_size, length)
}
}
}
--- a/testing/web-platform/tests/css/mediaqueries-3/mq-calc-002.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/mq-calc-002.html
@@ -14,16 +14,24 @@
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: calc(1em)){
div { background-color: green; }
}
- </style>
+ </style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: calc(1em)){
+ div { background-color: green; }
+ }
+ </style>
</body>
</html>
--- a/testing/web-platform/tests/css/mediaqueries-3/mq-calc-003.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/mq-calc-003.html
@@ -14,16 +14,24 @@
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: calc(1ex)){
div { background-color: green; }
}
- </style>
+ </style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: calc(1ex)){
+ div { background-color: green; }
+ }
+ </style>
</body>
</html>
--- a/testing/web-platform/tests/css/mediaqueries-3/mq-calc-004.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/mq-calc-004.html
@@ -11,19 +11,24 @@
<style>
:root { font-size: 30000px; }
p { font-size: 16px; }
div {
width: 100px;
height: 100px;
background-color: red;
}
- @media (min-width: calc(1ch)){
- div { background-color: green; }
- }
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: calc(1ch)){
+ div { background-color: green; }
+ }
+ </style>
</body>
</html>
--- a/testing/web-platform/tests/css/mediaqueries-3/mq-calc-005.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/mq-calc-005.html
@@ -11,19 +11,24 @@
<style>
:root { font-size: 30000px; }
p { font-size: 16px; }
div {
width: 100px;
height: 100px;
background-color: red;
}
- @media (min-width: calc(1rem)){
- div { background-color: green; }
- }
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: calc(1rem)){
+ div { background-color: green; }
+ }
+ </style>
</body>
</html>
--- a/testing/web-platform/tests/css/mediaqueries-3/relative-units-001.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/relative-units-001.html
@@ -11,22 +11,27 @@
<meta name="assert" content="Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
-@media (min-width: 1rem) {
- body {
- background: green;
- }
-}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: 1rem) {
+ body {
+ background: green;
+ }
+ }
+ </style>
</body>
</html>
--- a/testing/web-platform/tests/css/mediaqueries-3/relative-units-002.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/relative-units-002.html
@@ -11,22 +11,27 @@
<meta name="assert" content="Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
-@media (min-width: 1em) {
- body {
- background: green;
- }
-}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: 1em) {
+ body {
+ background: green;
+ }
+ }
+ </style>
</body>
</html>
--- a/testing/web-platform/tests/css/mediaqueries-3/relative-units-003.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/relative-units-003.html
@@ -11,22 +11,27 @@
<meta name="assert" content="Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
-@media (min-width: 1ex) {
- body {
- background: green;
- }
-}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: 1ex) {
+ body {
+ background: green;
+ }
+ }
+ </style>
</body>
</html>
--- a/testing/web-platform/tests/css/mediaqueries-3/relative-units-004.html
+++ b/testing/web-platform/tests/css/mediaqueries-3/relative-units-004.html
@@ -11,22 +11,27 @@
<meta name="assert" content="Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
-@media (min-width: 1ch) {
- body {
- background: green;
- }
-}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
+ <script>
+ document.body.offsetTop;
+ </script>
+ <style>
+ @media (min-width: 1ch) {
+ body {
+ background: green;
+ }
+ }
+ </style>
</body>
</html>