khronosschoty
/
palemoon-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
							<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=625289
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 625289</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style>
  :root,
  #e1, #e2 > div,
  #b1::before, #b2 > div::before,
  #a1::after, #a2 > div::after {
    margin-left: 0;
  }
  :root.t,
  #e1.t, #e2.t > div,
  #b1.t::before, #b2.t > div::before,
  #a1.t::after, #a2.t > div::after {
    transition: margin-left linear 1s;
  }
  #b1::before, #b2 > div::before,
  #a1::after, #a2 > div::after {
    content: "x";
    display: block;
  }
  :root.m,
  #e1.m, #e2.m > div,
  #b1.m::before, #b2.m > div::before,
  #a1.m::after, #a2.m > div::after {
    margin-left: 100px;
  }
  .o { overflow: hidden }
  .n { display: none }

  #fline { color: blue; font-size: 20px; width: 800px; }
  #fline::first-line { color: yellow }
  #fline.narrow { width: 50px }
  #fline i { transition: color linear 1s }

  #flexboxtest #flex { display: flex; flex-direction: column }
  #flexboxtest #flextransition { color: blue; transition: color 5s linear }

  #flexboxtest #flexkid[newstyle] { resize: both }
  #flexboxtest #flextransition[newstyle] { color: yellow }
  </style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=625289">Mozilla Bug 625289</a>
<div id="container"></div>
<div id="fline">
  This text has an <i>i element</i> in it.
</div>
<div id="flexboxtest">
  <div id="flex">
    hello
    <span id="flexkid">this appears</span>
    hello
    <div id="flextransition">color transition</div>
  </div>
</div>
<pre id="test">
<script>
"use strict";

function advance_clock(milliseconds) {
  SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
}

var container = document.getElementById("container");

function make_elements(idName, child) {
  var e = document.createElement("div");
  e.setAttribute("id", idName);
  if (child) {
    e.appendChild(document.createElement("div"));
  }
  container.appendChild(e);
  return e;
}

function assert_margin_at_quarter(element, pseudo, passes)
{
  var desc;
  var useParent = false;
  if (element == document.documentElement) {
    desc = "root element";
  } else if (element.id) {
    desc = "element " + element.id;
  } else {
    desc = "child of element " + element.parentNode.id;
    useParent = true;
  }
  var classes = (useParent ? element.parentNode : element).getAttribute("class");
  if (classes) {
    desc += " (classes: " + classes + ")";
  }
  if (pseudo) {
    desc += " " + pseudo + " pseudo-element";
  }
  (passes ? is : todo_is)(getComputedStyle(element, pseudo).marginLeft, "25px",
                          "margin of " + desc);
}

function do_test(test)
{
  var expected_props = [ "element", "test_child", "pseudo", "passes",
                         "dynamic_change_transition", "start_from_none" ];
  for (var propidx in expected_props) {
    if (! expected_props[propidx] in test) {
      ok(false, "expected " + expected_props[propidx] + " on test object");
    }
  }

  var e;
  if (typeof(test.element) == "string") {
    e = make_elements(test.element, test.test_child);
  } else {
    if (test.test_child) {
      ok(false, "test_child unexpected");
    }
    e = test.element;
  }

  var target = test.test_child ? e.firstChild : e;

  if (!test.dynamic_change_transition) {
    e.classList.add("t");
  }
  if (test.start_from_none) {
    e.classList.add("n");
  }

  advance_clock(100);
  e.classList.add("m");
  e.classList.add("o");
  if (test.dynamic_change_transition) {
    e.classList.add("t");
  }
  if (test.start_from_none) {
    e.classList.remove("n");
  }
  advance_clock(0);
  advance_clock(250);
  assert_margin_at_quarter(target, test.pseudo, test.passes);
  if (typeof(test.element) == "string") {
    e.remove();
  } else {
    target.style.transition = "";
    target.removeAttribute("class");
  }
}

advance_clock(0);

var tests = [
  { element:"e1", test_child:false, pseudo:"", passes:true,
    dynamic_change_transition:false, start_from_none:false },
  { element:"e2", test_child:true, pseudo:"", passes:true,
    dynamic_change_transition:false, start_from_none:false },
  { element:"b1", test_child:false, pseudo:"::before", passes:true,
    dynamic_change_transition:false, start_from_none:false },
  { element:"b2", test_child:true, pseudo:"::before", passes:true,
    dynamic_change_transition:false, start_from_none:false },
  { element:"a1", test_child:false, pseudo:"::after", passes:true,
    dynamic_change_transition:false, start_from_none:false },
  { element:"a2", test_child:true, pseudo:"::after", passes:true,
    dynamic_change_transition:false, start_from_none:false },
  { element:document.documentElement, test_child:false, pseudo:"", passes:true,
    dynamic_change_transition:false, start_from_none:false },
  // Recheck with a dynamic change in transition
  { element:"e1", test_child:false, pseudo:"", passes:true,
    dynamic_change_transition:true, start_from_none:false },
  { element:"e2", test_child:true, pseudo:"", passes:true,
    dynamic_change_transition:true, start_from_none:false },
  { element:"b1", test_child:false, pseudo:"::before", passes:true,
    dynamic_change_transition:true, start_from_none:false },
  { element:"b2", test_child:true, pseudo:"::before", passes:true,
    dynamic_change_transition:true, start_from_none:false },
  { element:"a1", test_child:false, pseudo:"::after", passes:true,
    dynamic_change_transition:true, start_from_none:false },
  { element:"a2", test_child:true, pseudo:"::after", passes:true,
    dynamic_change_transition:true, start_from_none:false },
  { element:document.documentElement, test_child:false, pseudo:"", passes:true,
    dynamic_change_transition:true, start_from_none:false },
  // Recheck starting from display:none.  Note that these tests all fail,
  // although we could get *some* of them to pass by calling
  // RestyleManager::TryInitiatingTransition from
  // ElementRestyler::RestyleUndisplayedChildren.
  { element:"e1", test_child:false, pseudo:"", passes:false,
    dynamic_change_transition:false, start_from_none:true },
  { element:"e2", test_child:true, pseudo:"", passes:false,
    dynamic_change_transition:false, start_from_none:true },
  { element:"b1", test_child:false, pseudo:"::before", passes:false,
    dynamic_change_transition:false, start_from_none:true },
  { element:"b2", test_child:true, pseudo:"::before", passes:false,
    dynamic_change_transition:false, start_from_none:true },
  { element:"a1", test_child:false, pseudo:"::after", passes:false,
    dynamic_change_transition:false, start_from_none:true },
  { element:"a2", test_child:true, pseudo:"::after", passes:false,
    dynamic_change_transition:false, start_from_none:true },
  { element:document.documentElement, test_child:false, pseudo:"", passes:false,
    dynamic_change_transition:false, start_from_none:true },
  // Recheck with a dynamic change in transition and starting from display:none
  { element:"e1", test_child:false, pseudo:"", passes:false,
    dynamic_change_transition:true, start_from_none:true },
  { element:"e2", test_child:true, pseudo:"", passes:false,
    dynamic_change_transition:true, start_from_none:true },
  { element:"b1", test_child:false, pseudo:"::before", passes:false,
    dynamic_change_transition:true, start_from_none:true },
  { element:"b2", test_child:true, pseudo:"::before", passes:false,
    dynamic_change_transition:true, start_from_none:true },
  { element:"a1", test_child:false, pseudo:"::after", passes:false,
    dynamic_change_transition:true, start_from_none:true },
  { element:"a2", test_child:true, pseudo:"::after", passes:false,
    dynamic_change_transition:true, start_from_none:true },
  { element:document.documentElement, test_child:false, pseudo:"", passes:false,
    dynamic_change_transition:true, start_from_none:true },
];

for (var testidx in tests) {
  do_test(tests[testidx]);
}

var fline = document.getElementById("fline");
var fline_i_cs = getComputedStyle(fline.firstElementChild, "");
// Note that the color in the ::first-line is never used in the test
// since we avoid reporting ::first-line data in getComputedStyle.
// However, if we were to start a transition (incorrectly), that would
// show up in getComputedStyle.
var COLOR_IN_LATER_LINES = "rgb(0, 0, 255)";

function do_firstline_test(test) {
  if (test.widening) {
    fline.classList.add("narrow");
    is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color");
  } else {
    is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color");
  }

  if (test.widening) {
    fline.classList.remove("narrow");
  } else {
    fline.classList.add("narrow");
  }

  if (test.set_overflow) {
    fline.classList.add("o");
  }

  advance_clock(100);

  if (test.widening) {
    is (fline_i_cs.color, COLOR_IN_LATER_LINES,
        "::first-line changes don't trigger transitions");
  } else {
    is (fline_i_cs.color, COLOR_IN_LATER_LINES,
        "::first-line changes don't trigger transitions");
  }

  fline.removeAttribute("class");
}

var firstline_tests = [
  { widening: true, set_overflow: false },
  { widening: false, set_overflow: false },
  { widening: true, set_overflow: true },
  { widening: false, set_overflow: true },
];

for (var firstline_test_idx in firstline_tests) {
  do_firstline_test(firstline_tests[firstline_test_idx]);
}

function do_flexbox_reframe_test()
{
  var flextransition = document.getElementById("flextransition");
  var cs = getComputedStyle(flextransition, "");
  cs.backgroundColor;
  flextransition.setAttribute("newstyle", "");
  document.getElementById("flexkid").setAttribute("newstyle", "");
  is(cs.color, "rgb(0, 0, 255)",
     "color at start of wrapped flexbox transition");
  advance_clock(1000);
  is(cs.color, "rgb(51, 51, 204)",
     "color one second in to wrapped flexbox transition");
}

do_flexbox_reframe_test();

SpecialPowers.DOMWindowUtils.restoreNormalRefresh();

</script>
</pre>
</body>
</html>