OLD | NEW |
(Empty) | |
| 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: 3e
m"> |
| 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 pr
esentation 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 le
ft 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 ancest
ors. |
| 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> |
OLD | NEW |