summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_media_queries_dynamic.html
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/style/test/test_media_queries_dynamic.html
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/style/test/test_media_queries_dynamic.html')
-rw-r--r--layout/style/test/test_media_queries_dynamic.html213
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>
+
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 12:37:34 +0000