Index: LayoutTests/fast/frames/seamless/media-query-basing-rem-unit.html |
diff --git a/LayoutTests/fast/frames/seamless/media-query-basing-rem-unit.html b/LayoutTests/fast/frames/seamless/media-query-basing-rem-unit.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..a8648043b68f61a8592298c31fad7732f99a7541 |
--- /dev/null |
+++ b/LayoutTests/fast/frames/seamless/media-query-basing-rem-unit.html |
@@ -0,0 +1,39 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<script src="../../js/resources/js-test-pre.js"></script> |
+<script> |
+jsTestIsAsync = true; |
+</script> |
+<style> |
+div { margin: 5px 0; font-size: 16px; background: rgba(255,255,255,.5); } |
+#one { width: 50rem; } |
+#two { width: calc(50 * 16px); } |
+#three { width: 0px; } |
+ |
+html { font-size: 8px; } |
+body { font-size: 16px; margin: 0; background: green; } |
+@media (min-width: 50rem) and (max-width: 799px) { body { background: red; } } |
+</style> |
+</head> |
+<body> |
+<pre id='console'></pre> |
+<div>Resize the window to be larger than #1, but smaller than #2. If the screen turns red, the browser is basing 'rem' units in MQs on style data, which is a spec violation. (It should be equal to the initial font size, same as the 'em' unit, to avoid circularity issues.)</div> |
+<div style="width: 700px; height: 600px"> |
+<iframe id="iframe" seamless src="resources/css-cascade-child.html"></iframe> |
+</div> |
+<script> |
+description('Test for issue 258200:CSS Media Queries are basing "rem" unit on style data.'); |
+ |
+window.onload = function() { |
+ window.iframe = document.getElementById("iframe"); |
+ shouldBeTrue("iframe.seamless"); |
+ shouldBe('window.getComputedStyle(iframe.contentDocument.body).backgroundColor', '"rgb(0, 128, 0)"'); |
+ window.resizeTo(700, 600); |
+ shouldBe('window.getComputedStyle(iframe.contentDocument.body).backgroundColor', '"rgb(0, 128, 0)"'); |
+ finishJSTest(); |
+} |
+</script> |
+</body> |
+<script src="../../js/resources/js-test-post.js"></script> |
+</html> |