Quelle test_transitions_and_reframes.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/style/test/test_transitions_and_reframes.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>Test for Bug 625289</title>
  <script 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>

Messung V0.5

¤ Dauer der Verarbeitung: 0.27 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.