2009-01-17 00:32:08 +03:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<!--
|
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=473400
|
|
|
|
|
-->
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test for Bug 473400</title>
|
2019-04-16 06:50:44 +03:00
|
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
2009-01-17 00:32:08 +03:00
|
|
|
<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">
|
2018-01-09 19:00:49 +03:00
|
|
|
<script class="testbody" type="application/javascript">
|
2009-01-17 00:32:08 +03:00
|
|
|
|
|
|
|
|
/** 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) {
|
2019-09-11 00:52:26 +03:00
|
|
|
return cs.getPropertyValue("text-decoration-line") == "underline";
|
2009-01-17 00:32:08 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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");
|
2012-10-30 19:57:36 +04:00
|
|
|
content_div.style.font = "initial";
|
2009-01-17 00:32:08 +03:00
|
|
|
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]);
|
2011-04-22 07:17:31 +04:00
|
|
|
SpecialPowers.setTextZoom(subwin, 2.0);
|
2009-01-17 00:32:08 +03:00
|
|
|
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]);
|
2011-04-22 07:17:31 +04:00
|
|
|
SpecialPowers.setTextZoom(subwin, 1.0);
|
2009-01-17 00:32:08 +03:00
|
|
|
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]);
|
2011-04-22 07:17:31 +04:00
|
|
|
SpecialPowers.setFullZoom(subwin, 2.0);
|
2009-01-17 00:32:08 +03:00
|
|
|
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]);
|
2011-04-22 07:17:31 +04:00
|
|
|
SpecialPowers.setFullZoom(subwin, 1.0);
|
2009-01-17 00:32:08 +03:00
|
|
|
is(subwin.innerHeight, 228, "full zoom is 1.0");
|
|
|
|
|
|
2016-05-09 21:26:35 +03:00
|
|
|
|
|
|
|
|
// 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);
|
2017-05-30 01:43:15 +03:00
|
|
|
var restyleGeneration, framesConstructed, framesReflowed;
|
2016-05-09 21:26:35 +03:00
|
|
|
function reset_change_counters()
|
|
|
|
|
{
|
2017-05-30 01:43:15 +03:00
|
|
|
restyleGeneration = utils.restyleGeneration;
|
2016-05-09 21:26:35 +03:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2017-05-30 01:43:15 +03:00
|
|
|
var didRestyle = utils.restyleGeneration != restyleGeneration;
|
2016-05-09 21:26:35 +03:00
|
|
|
var constructs = utils.framesConstructed - framesConstructed;
|
|
|
|
|
var reflows = utils.framesReflowed - framesReflowed;
|
|
|
|
|
|
2017-05-30 01:43:15 +03:00
|
|
|
(expected.restyle ? isnot : is)(didRestyle, false, "restyle: " + desc);
|
2016-05-09 21:26:35 +03:00
|
|
|
(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",
|
2020-08-10 21:00:44 +03:00
|
|
|
{ restyle: false, construct: false, reflow: false });
|
2016-05-09 21:26:35 +03:00
|
|
|
|
|
|
|
|
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",
|
2020-08-10 21:00:44 +03:00
|
|
|
{ restyle: false, construct: false, reflow: false });
|
2016-05-09 21:26:35 +03:00
|
|
|
|
2009-01-17 00:32:08 +03:00
|
|
|
SimpleTest.finish();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
