diff options
Diffstat (limited to 'layout/style/test/test_media_queries_dynamic.html')
| -rw-r--r-- | layout/style/test/test_media_queries_dynamic.html | 213 |
1 files changed, 213 insertions, 0 deletions
diff --git a/layout/style/test/test_media_queries_dynamic.html b/layout/style/test/test_media_queries_dynamic.html new file mode 100644 index 000000000..6c9159186 --- /dev/null +++ b/layout/style/test/test_media_queries_dynamic.html @@ -0,0 +1,213 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=473400 +--> +<head> + <title>Test for Bug 473400</title> + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> +</head> +<body onload="run()"> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=473400">Mozilla Bug 473400</a> +<iframe id="subdoc" src="about:blank"></iframe> +<div id="content" style="display: none"> + +</div> +<pre id="test"> +<script class="testbody" type="application/javascript; version=1.7"> + +/** Test for Bug 473400 **/ + +SimpleTest.waitForExplicitFinish(); + +function run() { + var subdoc = document.getElementById("subdoc").contentDocument; + var subwin = document.getElementById("subdoc").contentWindow; + var style = subdoc.createElement("style"); + style.setAttribute("type", "text/css"); + subdoc.getElementsByTagName("head")[0].appendChild(style); + var sheet = style.sheet; + var iframe_style = document.getElementById("subdoc").style; + + // Create a style rule and an element now based on the given media + // query "q", and return the computed style that should be passed to + // query_applies to see if that query currently applies. + var n = 0; + function make_query(q) { + var i = ++n; + sheet.insertRule("@media " + q + " { #e" + i + " { text-decoration: underline; } }", sheet.cssRules.length); + var e = subdoc.createElement("div"); + e.id = "e" + i; + subdoc.body.appendChild(e); + var cs = subdoc.defaultView.getComputedStyle(e, ""); + cs._originalQueryText = q; + return cs; + } + function query_applies(cs) { + return cs.getPropertyValue("text-decoration") == "underline"; + } + + function should_apply(cs) { + ok(query_applies(cs), cs._originalQueryText + " should apply"); + } + + function should_not_apply(cs) { + ok(!query_applies(cs), cs._originalQueryText + " should not apply"); + } + + var content_div = document.getElementById("content"); + content_div.style.font = "initial"; + var em_size = + getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1]; + + let width_val = 317; // pick two not-too-round numbers + let height_val = 228; + iframe_style.width = width_val + "px"; + iframe_style.height = height_val + "px"; + var wh_queries = [ + make_query("all and (min-width: " + + (Math.ceil(width_val/em_size) + 1) + "em)"), + make_query("all and (min-width: " + + (Math.floor(width_val/em_size) - 1) + "em)"), + make_query("all and (max-width: " + + (Math.ceil(width_val/em_size) + 1) + "em)"), + make_query("all and (max-width: " + + (Math.floor(width_val/em_size) - 1) + "em)"), + make_query("all and (min-width: " + + (Math.ceil(width_val/(em_size*2)) + 1) + "em)"), + make_query("all and (min-width: " + + (Math.floor(width_val/(em_size*2)) - 1) + "em)"), + make_query("all and (max-width: " + + (Math.ceil(width_val/(em_size*2)) + 1) + "em)"), + make_query("all and (max-width: " + + (Math.floor(width_val/(em_size*2)) - 1) + "em)") + ]; + + is(wh_queries[0].fontSize, em_size + "px", "text zoom is 1.0"); + should_not_apply(wh_queries[0]); + should_apply(wh_queries[1]); + should_apply(wh_queries[2]); + should_not_apply(wh_queries[3]); + SpecialPowers.setTextZoom(subwin, 2.0); + isnot(wh_queries[0].fontSize, em_size + "px", "text zoom is not 1.0"); + should_not_apply(wh_queries[4]); + should_apply(wh_queries[5]); + should_apply(wh_queries[6]); + should_not_apply(wh_queries[7]); + SpecialPowers.setTextZoom(subwin, 1.0); + is(wh_queries[0].fontSize, em_size + "px", "text zoom is 1.0"); + is(subwin.innerHeight, 228, "full zoom is 1.0"); + should_not_apply(wh_queries[0]); + should_apply(wh_queries[1]); + should_apply(wh_queries[2]); + should_not_apply(wh_queries[3]); + SpecialPowers.setFullZoom(subwin, 2.0); + isnot(subwin.innerHeight, 228, "full zoom is not 1.0"); + should_not_apply(wh_queries[4]); + should_apply(wh_queries[5]); + should_apply(wh_queries[6]); + should_not_apply(wh_queries[7]); + SpecialPowers.setFullZoom(subwin, 1.0); + is(subwin.innerHeight, 228, "full zoom is 1.0"); + + + // Now test that certain things *don't* happen, i.e., that we're + // making the optimizations we expect. + subdoc.body.textContent = ""; + subdoc.body.appendChild(subdoc.createElement("div")); + for (var ruleIdx = sheet.cssRules.length; ruleIdx-- != 0; ) { + sheet.deleteRule(ruleIdx); + } + + var utils = SpecialPowers.getDOMWindowUtils(subwin); + var elementsRestyled, framesConstructed, framesReflowed; + function reset_change_counters() + { + elementsRestyled = utils.elementsRestyled; + framesConstructed = utils.framesConstructed; + framesReflowed = utils.framesReflowed; + } + + function flush_and_assert_change_counters(desc, expected) { + subdoc.body.offsetHeight; + + if (!("restyle" in expected) || + !("construct" in expected) || + !("reflow" in expected)) { + ok(false, "parameter missing expectation"); + return; + } + + var restyles = utils.elementsRestyled - elementsRestyled; + var constructs = utils.framesConstructed - framesConstructed; + var reflows = utils.framesReflowed - framesReflowed; + + (expected.restyle ? isnot : is)(restyles, 0, "restyle count: " + desc); + (expected.construct ? isnot : is)(constructs, 0, + "frame construct count: " + desc); + (expected.reflow ? isnot : is)(reflows, 0, "reflow count: " + desc); + + reset_change_counters(); + } + + subdoc.body.offsetHeight; + reset_change_counters(); + + iframe_style.width = "103px"; + flush_and_assert_change_counters("change width with no media queries", + { restyle: false, construct: false, reflow: true }); + + flush_and_assert_change_counters("no change", + { restyle: false, construct: false, reflow: false }); + + iframe_style.height = "123px"; + flush_and_assert_change_counters("change height with no media queries", + { restyle: false, construct: false, reflow: true }); + + sheet.insertRule("@media (min-width: 150px) { div { display:flex } }", 0); + flush_and_assert_change_counters("add non-matching media query", + // FIXME: We restyle here because + // nsIPresShell::RestyleForCSSRuleChanges posts a restyle, but it's + // probably avoidable if we wanted to avoid it. + { restyle: true, construct: false, reflow: false }); + + iframe_style.width = "177px"; + flush_and_assert_change_counters("resize width across media query with 'display'", + { restyle: true, construct: true, reflow: true }); + + iframe_style.width = "162px"; + flush_and_assert_change_counters("resize width without crossing media query", + { restyle: false, construct: false, reflow: true }); + + sheet.deleteRule(0); + flush_and_assert_change_counters("remove matching media query with 'display'", + { restyle: true, construct: true, reflow: true }); + + sheet.insertRule("@media (max-height: 150px) { div { display:flex } }", 0); + flush_and_assert_change_counters("add matching media query with 'display'", + { restyle: true, construct: true, reflow: true }); + + iframe_style.height = "111px"; + flush_and_assert_change_counters("resize height without crossing media query", + { restyle: false, construct: false, reflow: true }); + + iframe_style.height = "184px"; + flush_and_assert_change_counters("resize height across media query with 'display'", + { restyle: true, construct: true, reflow: true }); + + sheet.deleteRule(0); + flush_and_assert_change_counters("remove non-matching media query", + // FIXME: We restyle here because + // nsIPresShell::RestyleForCSSRuleChanges posts a restyle, but it's + // probably avoidable if we wanted to avoid it. + { restyle: true, construct: false, reflow: false }); + + SimpleTest.finish(); +} + +</script> +</pre> +</body> +</html> + |