layout/style/test/test_hover_on_part.html

   1 <!doctype html>
   2 <title>Shadow parts are invalidated correctly when only a pseudo-class state to the right of the part matches</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <script src="/tests/SimpleTest/EventUtils.js"></script>
   5 <style>
   6   div {
   7     width: 100px;
   8     height: 100px;
   9   }
  10   #host::part(p) {
  11     background-color: red;
  12   }
  13   #host::part(p):hover {
  14     background-color: lime;
  15   }
  16 </style>
  17 <div id="host"></div>
  18 <div id="random-element-to-force-change"></div>
  19 <script>
  20 SimpleTest.waitForExplicitFinish();
  21
  22 let host = document.getElementById("host");
  23 host.attachShadow({ mode: "open" }).innerHTML = `
  24   <style>
  25     div {
  26       width: 100px;
  27       height: 100px;
  28     }
  29   </style>
  30   <div part=p></div>
  31 `;
  32
  33 let part = host.shadowRoot.querySelector("div");
  34 let other = document.getElementById("random-element-to-force-change");
  35
  36 SimpleTest.waitForFocus(function() {
  37   synthesizeMouseAtCenter(other, {type: "mousemove"});
  38   is(
  39     getComputedStyle(part).backgroundColor,
  40     "rgb(255, 0, 0)",
  41     "Part is red"
  42   );
  43
  44   synthesizeMouseAtCenter(part, {type: "mousemove"});
  45   is(
  46     getComputedStyle(part).backgroundColor,
  47     "rgb(0, 255, 0)",
  48     "Part is lime"
  49   );
  50   SimpleTest.finish();
  51 });
  52 </script>