test_media_queries_dynamic.html (7529B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=473400 5 --> 6 <head> 7 <title>Test for Bug 473400</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 </head> 11 <body onload="run()"> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=473400">Mozilla Bug 473400</a> 13 <iframe id="subdoc" src="about:blank"></iframe> 14 <div id="content" style="display: none"> 15 16 </div> 17 <pre id="test"> 18 <script class="testbody" type="application/javascript"> 19 20 /** Test for Bug 473400 */ 21 22 SimpleTest.waitForExplicitFinish(); 23 24 function run() { 25 var subdoc = document.getElementById("subdoc").contentDocument; 26 var subwin = document.getElementById("subdoc").contentWindow; 27 var style = subdoc.createElement("style"); 28 style.setAttribute("type", "text/css"); 29 subdoc.getElementsByTagName("head")[0].appendChild(style); 30 var sheet = style.sheet; 31 var iframe_style = document.getElementById("subdoc").style; 32 33 // Create a style rule and an element now based on the given media 34 // query "q", and return the computed style that should be passed to 35 // query_applies to see if that query currently applies. 36 var n = 0; 37 function make_query(q) { 38 var i = ++n; 39 sheet.insertRule("@media " + q + " { #e" + i + " { text-decoration: underline; } }", sheet.cssRules.length); 40 var e = subdoc.createElement("div"); 41 e.id = "e" + i; 42 subdoc.body.appendChild(e); 43 var cs = subdoc.defaultView.getComputedStyle(e); 44 cs._originalQueryText = q; 45 return cs; 46 } 47 function query_applies(cs) { 48 return cs.getPropertyValue("text-decoration-line") == "underline"; 49 } 50 51 function should_apply(cs) { 52 ok(query_applies(cs), cs._originalQueryText + " should apply"); 53 } 54 55 function should_not_apply(cs) { 56 ok(!query_applies(cs), cs._originalQueryText + " should not apply"); 57 } 58 59 var content_div = document.getElementById("content"); 60 content_div.style.font = "initial"; 61 var em_size = 62 getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1]; 63 64 let width_val = 317; // pick two not-too-round numbers 65 let height_val = 228; 66 iframe_style.width = width_val + "px"; 67 iframe_style.height = height_val + "px"; 68 var wh_queries = [ 69 make_query("all and (min-width: " + 70 (Math.ceil(width_val/em_size) + 1) + "em)"), 71 make_query("all and (min-width: " + 72 (Math.floor(width_val/em_size) - 1) + "em)"), 73 make_query("all and (max-width: " + 74 (Math.ceil(width_val/em_size) + 1) + "em)"), 75 make_query("all and (max-width: " + 76 (Math.floor(width_val/em_size) - 1) + "em)"), 77 make_query("all and (min-width: " + 78 (Math.ceil(width_val/(em_size*2)) + 1) + "em)"), 79 make_query("all and (min-width: " + 80 (Math.floor(width_val/(em_size*2)) - 1) + "em)"), 81 make_query("all and (max-width: " + 82 (Math.ceil(width_val/(em_size*2)) + 1) + "em)"), 83 make_query("all and (max-width: " + 84 (Math.floor(width_val/(em_size*2)) - 1) + "em)") 85 ]; 86 87 is(wh_queries[0].fontSize, em_size + "px", "text zoom is 1.0"); 88 should_not_apply(wh_queries[0]); 89 should_apply(wh_queries[1]); 90 should_apply(wh_queries[2]); 91 should_not_apply(wh_queries[3]); 92 SpecialPowers.setTextZoom(subwin, 2.0); 93 isnot(wh_queries[0].fontSize, em_size + "px", "text zoom is not 1.0"); 94 should_not_apply(wh_queries[4]); 95 should_apply(wh_queries[5]); 96 should_apply(wh_queries[6]); 97 should_not_apply(wh_queries[7]); 98 SpecialPowers.setTextZoom(subwin, 1.0); 99 is(wh_queries[0].fontSize, em_size + "px", "text zoom is 1.0"); 100 is(subwin.innerHeight, 228, "full zoom is 1.0"); 101 should_not_apply(wh_queries[0]); 102 should_apply(wh_queries[1]); 103 should_apply(wh_queries[2]); 104 should_not_apply(wh_queries[3]); 105 SpecialPowers.setFullZoom(subwin, 2.0); 106 isnot(subwin.innerHeight, 228, "full zoom is not 1.0"); 107 should_not_apply(wh_queries[4]); 108 should_apply(wh_queries[5]); 109 should_apply(wh_queries[6]); 110 should_not_apply(wh_queries[7]); 111 SpecialPowers.setFullZoom(subwin, 1.0); 112 is(subwin.innerHeight, 228, "full zoom is 1.0"); 113 114 115 // Now test that certain things *don't* happen, i.e., that we're 116 // making the optimizations we expect. 117 subdoc.body.textContent = ""; 118 subdoc.body.appendChild(subdoc.createElement("div")); 119 for (var ruleIdx = sheet.cssRules.length; ruleIdx-- != 0; ) { 120 sheet.deleteRule(ruleIdx); 121 } 122 123 var utils = SpecialPowers.getDOMWindowUtils(subwin); 124 var restyleGeneration, framesConstructed, framesReflowed; 125 function reset_change_counters() 126 { 127 restyleGeneration = utils.restyleGeneration; 128 framesConstructed = utils.framesConstructed; 129 framesReflowed = utils.framesReflowed; 130 } 131 132 function flush_and_assert_change_counters(desc, expected) { 133 subdoc.body.offsetHeight; 134 135 if (!("restyle" in expected) || 136 !("construct" in expected) || 137 !("reflow" in expected)) { 138 ok(false, "parameter missing expectation"); 139 return; 140 } 141 142 var didRestyle = utils.restyleGeneration != restyleGeneration; 143 var constructs = utils.framesConstructed - framesConstructed; 144 var reflows = utils.framesReflowed - framesReflowed; 145 146 (expected.restyle ? isnot : is)(didRestyle, false, "restyle: " + desc); 147 (expected.construct ? isnot : is)(constructs, 0, 148 "frame construct count: " + desc); 149 (expected.reflow ? isnot : is)(reflows, 0, "reflow count: " + desc); 150 151 reset_change_counters(); 152 } 153 154 subdoc.body.offsetHeight; 155 reset_change_counters(); 156 157 iframe_style.width = "103px"; 158 flush_and_assert_change_counters("change width with no media queries", 159 { restyle: false, construct: false, reflow: true }); 160 161 flush_and_assert_change_counters("no change", 162 { restyle: false, construct: false, reflow: false }); 163 164 iframe_style.height = "123px"; 165 flush_and_assert_change_counters("change height with no media queries", 166 { restyle: false, construct: false, reflow: true }); 167 168 sheet.insertRule("@media (min-width: 150px) { div { display:flex } }", 0); 169 flush_and_assert_change_counters("add non-matching media query", 170 { restyle: false, construct: false, reflow: false }); 171 172 iframe_style.width = "177px"; 173 flush_and_assert_change_counters("resize width across media query with 'display'", 174 { restyle: true, construct: true, reflow: true }); 175 176 iframe_style.width = "162px"; 177 flush_and_assert_change_counters("resize width without crossing media query", 178 { restyle: false, construct: false, reflow: true }); 179 180 sheet.deleteRule(0); 181 flush_and_assert_change_counters("remove matching media query with 'display'", 182 { restyle: true, construct: true, reflow: true }); 183 184 sheet.insertRule("@media (max-height: 150px) { div { display:flex } }", 0); 185 flush_and_assert_change_counters("add matching media query with 'display'", 186 { restyle: true, construct: true, reflow: true }); 187 188 iframe_style.height = "111px"; 189 flush_and_assert_change_counters("resize height without crossing media query", 190 { restyle: false, construct: false, reflow: true }); 191 192 iframe_style.height = "184px"; 193 flush_and_assert_change_counters("resize height across media query with 'display'", 194 { restyle: true, construct: true, reflow: true }); 195 196 sheet.deleteRule(0); 197 flush_and_assert_change_counters("remove non-matching media query", 198 { restyle: false, construct: false, reflow: false }); 199 200 SimpleTest.finish(); 201 } 202 203 </script> 204 </pre> 205 </body> 206 </html>