| 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 |