src/third_party/WebKit/LayoutTests/fast/plugins/plugin-placeholder-close.html

   1 <!DOCTYPE html>
   2
   3 <script src="../../resources/js-test.js"></script>
   4 <div id="description"></div>
   5 <div id="console"></div>
   6
   7 <object id="plugin1" type="application/x-fake-plugin"></object>
   8
   9 <object id="plugin2" type="application/x-fake-plugin"></object>
  10
  11 <div id="ancestor3" style="width: 400px; height: 300px">
  12     <div>
  13         <object id="plugin3" type="application/x-fake-plugin" width="400" height="300"></object>
  14     </div>
  15 </div>
  16
  17 <!--
  18     None of these ancestors should be hidden.
  19     ancestor4a is not explicitly sized.
  20     ancestor4b is explicitly sized, but only in one dimension.
  21     ancestor4c is explicitly sized, but not in the element's inline style.
  22     ancestor4d is explicitly sized to match, but not in pixels.
  23     ancestor4e is explicitly sized, but does not match the plugin's attributes.
  24 -->
  25 <style>
  26 #ancestor4c { width: 400px; height: 300px; }
  27 </style>
  28 <div id="ancestor4a">
  29     <div id="ancestor4b" style="width: 400px">
  30         <div id="ancestor4c">
  31             <div id="ancestor4d" style="font-size: 100px; width: 4em; height: 3em">
  32                 <div id="ancestor4e" style="width: 300px; height: 400px">
  33                     <object id="plugin4" type="application/x-fake-plugin" width="400" height="300"></object>
  34                 </div>
  35             </div>
  36         </div>
  37     </div>
  38 </div>
  39
  40 <!-- The plugin's size is 300x150, but it was not explicitly specified in the presentation attributes. -->
  41 <div id="ancestor5" style="width: 300px; height: 150px">
  42     <object id="plugin5" type="application/x-fake-plugin"></object>
  43 </div>
  44
  45 <div id="ancestor6" style="width: 400px; height: 300px">
  46     <object id="plugin6" type="application/x-fake-plugin" width="  400   px   " height="300px"></object>
  47 </div>
  48
  49 <script>
  50
  51 description("Checks that the plugin placeholder close button works as expected.");
  52
  53 // Non-closeable plugins should have no displayed close button.
  54 var plugin1 = document.getElementById("plugin1");
  55 internals.forcePluginPlaceholder(plugin1, { closeable: false });
  56 var closeButton1 = internals.youngestShadowRoot(plugin1).querySelector("#plugin-placeholder-close-button");
  57 shouldBe("closeButton1.style.display", "'none'");
  58
  59 // After a plugin is closed, it should have "display: none".
  60 var plugin2 = document.getElementById("plugin2");
  61 internals.forcePluginPlaceholder(plugin2, { closeable: true });
  62 var closeButton2 = internals.youngestShadowRoot(plugin2).querySelector("#plugin-placeholder-close-button");
  63 shouldNotBe("closeButton2.style.display", "'none'");
  64 closeButton2.click();
  65 shouldBe("plugin2.style.display", "'none'");
  66
  67 // If the plugin has an ancestor sized to match with inline style, the ancestor should also be hidden.
  68 var plugin3 = document.getElementById("plugin3");
  69 internals.forcePluginPlaceholder(plugin3, { closeable: true });
  70 var closeButton3 = internals.youngestShadowRoot(plugin3).querySelector("#plugin-placeholder-close-button");
  71 shouldNotBe("closeButton3.style.display", "'none'");
  72 closeButton3.click();
  73 var ancestor3 = document.getElementById("ancestor3");
  74 shouldBe("ancestor3.style.display", "'none'");
  75
  76 // If the plugin has ancestors that don't meet this heuristic, they should be left alone.
  77 var plugin4 = document.getElementById("plugin4");
  78 internals.forcePluginPlaceholder(plugin4, { closeable: true });
  79 var closeButton4 = internals.youngestShadowRoot(plugin4).querySelector("#plugin-placeholder-close-button");
  80 shouldNotBe("closeButton4.style.display", "'none'");
  81 closeButton4.click();
  82 shouldNotBe("document.getElementById('ancestor4a').style.display", "'none'");
  83 shouldNotBe("document.getElementById('ancestor4b').style.display", "'none'");
  84 shouldNotBe("document.getElementById('ancestor4c').style.display", "'none'");
  85 shouldNotBe("document.getElementById('ancestor4d').style.display", "'none'");
  86 shouldNotBe("document.getElementById('ancestor4e').style.display", "'none'");
  87
  88 // Plugins with no explicit (presentation attribute) size should not hide ancestors.
  89 var plugin5 = document.getElementById("plugin5");
  90 internals.forcePluginPlaceholder(plugin5, { closeable: true });
  91 var closeButton5 = internals.youngestShadowRoot(plugin5).querySelector("#plugin-placeholder-close-button");
  92 shouldNotBe("closeButton5.style.display", "'none'");
  93 closeButton5.click();
  94 shouldNotBe("document.getElementById('ancestor5').style.display", "'none'");
  95
  96 // This should work even if the presentation attribute has spacing and "px".
  97 var plugin6 = document.getElementById("plugin6");
  98 internals.forcePluginPlaceholder(plugin6, { closeable: true });
  99 var closeButton6 = internals.youngestShadowRoot(plugin6).querySelector("#plugin-placeholder-close-button");
 100 shouldNotBe("closeButton6.style.display", "'none'");
 101 closeButton6.click();
 102 shouldBe("document.getElementById('ancestor6').style.display", "'none'");
 103
 104 </script>