Ziele Untersuchung
mit Columbo Integrität von
Datenbanken Interaktion und
Portierbarkeit Ergonomie der
Schnittstellen

Angebot Produkte Projekt Beratung

Mittel Analytik Modellierung Sprachen Algebra Logik Hardware Denken Kreativität

Zusammenhänge Gesellschaft Wirtschaft Branche Firma


products/Sources/formale Sprachen/C/Firefox/layout/style/test/ (Browser von der Mozilla Stiftung Version 136.0.1^©) Datei vom 10.2.2025 mit Größe 9 kB

Quelle test_pseudoelement_state.html

Sprache: HTML

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

<!DOCTYPE html>
<title>Test for Bug 922669</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">

<iframe srcdoc="<!DOCTYPE html><style></style><div></div>"></iframe>

<script>
var gIsAndroid = navigator.appVersion.includes("Android");

var gTests = [
  // Interact with the ::-moz-progress-bar.
  { markup:                 '<progress value="75" max="100"></progress>',
    pseudoelement:          '::-moz-progress-bar',
    common_style:           'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
    hover_test_style:       'progress::-moz-progress-bar:hover { background: green; }',
    hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
    active_test_style:      'progress::-moz-progress-bar:active { background: lime; }',
    active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },

  // Interact with the part of the <progress> not covered by the ::-moz-progress-bar.
  { markup:                 '<progress value="25" max="100"></progress>',
    pseudoelement:          '::-moz-progress-bar',
    common_style:           'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
    hover_test_style:       'progress::-moz-progress-bar { background: green; } progress::-moz-progress-bar:hover { background: red; }',
    hover_reference_style:  'progress::-moz-progress-bar { background: green; }',
    active_test_style:      'progress::-moz-progress-bar { background: lime; } progress::-moz-progress-bar:active { background: red; }',
    active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },

  // Interact with the ::-moz-range-thumb.
  { markup:                 '<input type="range" value="50" min="0" max="100">',
    pseudoelement:          '::-moz-range-thumb',
    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
    hover_test_style:       'input::-moz-range-thumb:hover { background: green; }',
    hover_reference_style:  'input::-moz-range-thumb { background: green; }',
    active_test_style:      'input::-moz-range-thumb:active { background: lime; }',
    active_reference_style: 'input::-moz-range-thumb { background: lime; }' },

  // Interact with the part of the <input type="range"> not covered by the ::-moz-range-thumb.
  { markup:                 '<input type="range" value="25" min="0" max="100">',
    pseudoelement:          '::-moz-range-thumb',
    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
    hover_test_style:       'input::-moz-range-thumb { background: green; } input::-moz-range-thumb:hover { background: red; }',
    hover_reference_style:  'input::-moz-range-thumb { background: green; }',
    active_test_style:      'input::-moz-range-thumb { background: lime; } input::-moz-range-thumb:active { background: red; }',
    active_reference_style: 'input::-moz-range-thumb { background: lime; }' },

  // Interact with the ::-moz-meter-bar.
  { markup:                 '<meter value="75" min="0" max="100"></meter>',
    pseudoelement:          '::-moz-meter-bar',
    common_style:           'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
    hover_test_style:       'meter::-moz-meter-bar:hover { background: green; }',
    hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
    active_test_style:      'meter::-moz-meter-bar:active { background: lime; }',
    active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },

  // Interact with the part of the <meter> not covered by the ::-moz-meter-bar.
  { markup:                 '<meter value="25" min="0" max="100"></meter>',
    pseudoelement:          '::-moz-meter-bar',
    common_style:           'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
    hover_test_style:       'meter::-moz-meter-bar { background: green; } meter::-moz-meter-bar:hover { background: red; }',
    hover_reference_style:  'meter::-moz-meter-bar { background: green; }',
    active_test_style:      'meter::-moz-meter-bar { background: lime; } meter::-moz-meter-bar:active { background: red; }',
    active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },

  // Do the same as the "Interact with the ::-moz-range-thumb" subtest above,
  // but with selectors that include descendant operators.
  { markup:                 '<input type="range" value="50" min="0" max="100">',
    pseudoelement:          '::-moz-range-thumb',
    common_style:           'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
    hover_test_style:       'body input::-moz-range-thumb:hover { background: green; }',
    hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
    active_test_style:      'body input::-moz-range-thumb:active { background: lime; }',
    active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },

  // Do the same as above, but using :is instead.
  { markup:                 '<input type="range" value="50" min="0" max="100">',
    pseudoelement:          '::-moz-range-thumb',
    common_style:           'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
    hover_test_style:       'body input::-moz-range-thumb:is(:hover) { background: green; }',
    hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
    active_test_style:      'body input::-moz-range-thumb:is(:active) { background: lime; }',
    active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },

  // Do the same as above, but using :not instead.
  { markup:                 '<input type="range" value="50" min="0" max="100">',
    pseudoelement:          '::-moz-range-thumb',
    common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: green } input::-moz-range-thumb:not(:hover) { background: black; }',
    hover_test_style:       '',
    hover_reference_style:  'input::-moz-range-thumb { background: green !important; }',
    active_test_style:      'input::-moz-range-thumb:active { background: lime !important; }',
    active_reference_style: 'input::-moz-range-thumb { background: lime !important; }' },

  // ::placeholder can't be tested, since the UA style sheet sets it to
  // be pointer-events:none.
];

function countPixelDifferences(aCanvas1, aCanvas2) {
  var ctx1 = aCanvas1.getContext("2d");
  var ctx2 = aCanvas2.getContext("2d");
  var data1 = ctx1.getImageData(0, 0, aCanvas1.width, aCanvas1.height);
  var data2 = ctx2.getImageData(0, 0, aCanvas2.width, aCanvas2.height);
  var n = 0;
  for (var i = 0; i < data1.width * data2.height * 4; i += 4) {
    if (data1.data[i] != data2.data[i] ||
        data1.data[i + 1] != data2.data[i + 1] ||
        data1.data[i + 2] != data2.data[i + 2] ||
        data1.data[i + 3] != data2.data[i + 3]) {
      n++;
    }
  }
  return n;
}

function runTests() {
  var iframe = document.querySelector("iframe");
  var style = iframe.contentDocument.querySelector("style");
  var div = iframe.contentDocument.querySelector("div");
  var canvas1, canvas2;

  function runTestPart1(aIndex) {
    var test = gTests[aIndex];
    div.innerHTML = test.markup;
    style.textContent = test.common_style;
    is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 0, 0)", "subtest #" + aIndex + ", computed style");
    style.textContent += test.hover_test_style;
    synthesizeMouseAtCenter(div.lastChild, { type: 'mouseover' }, iframe.contentWindow);
  }

  function runTestPart2(aIndex) {
    var test = gTests[aIndex];
    canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
    style.textContent = test.common_style + test.hover_reference_style;
  }

  function runTestPart3(aIndex) {
    var test = gTests[aIndex];
    canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
    ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "hover subtest #" + aIndex + ", canvas sizes equal");
    is(countPixelDifferences(canvas1, canvas2), 0, "hover subtest #" + aIndex + ", number of different pixels");
    is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 128, 0)", "hover subtest #" + aIndex + ", computed style");

    if (!gIsAndroid) {
      style.textContent = test.common_style + test.active_test_style;
      synthesizeMouseAtCenter(div.lastChild, { type: 'mousedown' }, iframe.contentWindow);
    }
  }

  function runTestPart4(aIndex) {
    if (!gIsAndroid) {
      var test = gTests[aIndex];
      canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
      synthesizeMouseAtCenter(div.lastChild, { type: 'mouseup' }, iframe.contentWindow);
      style.textContent = test.common_style + test.active_reference_style;
    }
  }

  function runTestPart5(aIndex) {
    if (!gIsAndroid) {
      var test = gTests[aIndex];
      canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
      ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "active subtest #" + aIndex + ", canvas sizes equal");
      is(countPixelDifferences(canvas1, canvas2), 0, "active subtest #" + aIndex + ", number of different pixels");
      is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 255, 0)", "active subtest #" + aIndex + ", computed style");
    }
  }

  for (var i = 0; i < gTests.length; i++) {
    setTimeout(runTestPart1, 0, i);
    setTimeout(runTestPart2, 0, i);
    setTimeout(runTestPart3, 0, i);
    setTimeout(runTestPart4, 0, i);
    setTimeout(runTestPart5, 0, i);
  }
  setTimeout(function() { SimpleTest.finish(); }, 0);
}

SimpleTest.waitForExplicitFinish();
window.addEventListener("load", async function() {
  await SpecialPowers.contentTransformsReceived(window);
  runTests();
});
</script>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.12 Sekunden (vorverarbeitet am 2026-04-28) ¤

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.