| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 span { | |
| 6 background-color: #eef; | |
| 7 border: solid; | |
| 8 color: #fee; | |
| 9 display: boxed-inline; | |
| 10 font-size: 24px; | |
| 11 margin: 2px; | |
| 12 outline-color: #f00; | |
| 13 padding-left: 5px; | |
| 14 text-align: start; | |
| 15 text-decoration: underline; | |
| 16 } | |
| 17 input[type="file"] { | |
| 18 text-align: end; | |
| 19 } | |
| 20 </style> | |
| 21 </head> | |
| 22 <body> | |
| 23 <div id="apply-author-style"></div> | |
| 24 <div id="no-apply-author-style"></div> | |
| 25 <div id="with-inline-style-declaration"></div> | |
| 26 <div id="try-to-override-important"></div> | |
| 27 <div id="change-apply-author-style-from-true-to-false"></div> | |
| 28 <div id="change-apply-author-style-from-false-to-true"></div> | |
| 29 | |
| 30 <script> | |
| 31 function shouldBe(a, b) | |
| 32 { | |
| 33 if (a != b) { | |
| 34 throw "failure:" + a + ": should be " + b; | |
| 35 } | |
| 36 } | |
| 37 | |
| 38 function shouldNotBe(a, b) | |
| 39 { | |
| 40 if (a == b) { | |
| 41 throw "failure:" + a + ": should not be " + b; | |
| 42 } | |
| 43 } | |
| 44 | |
| 45 function assertTrue(id, actual) { | |
| 46 if (!actual) { | |
| 47 throw "failure:" + id + ": assertTrue failed"; | |
| 48 } | |
| 49 } | |
| 50 | |
| 51 function assertFalse(id, actual) { | |
| 52 if (actual) { | |
| 53 throw "failure:" + id + ": assertFalse failed"; | |
| 54 } | |
| 55 } | |
| 56 | |
| 57 function renderApplyAuthorStyleCase() { | |
| 58 var div = document.createElement('div'); | |
| 59 document.getElementById('apply-author-style').appendChild(div); | |
| 60 | |
| 61 var shadowRoot = div.createShadowRoot(); | |
| 62 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
| 63 shadowRoot.applyAuthorStyles = true; | |
| 64 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
| 65 shadowRoot.innerHTML = '<span></span>'; | |
| 66 } | |
| 67 | |
| 68 function renderNoApplyAuthorStyleCase() { | |
| 69 var div = document.createElement('div'); | |
| 70 document.getElementById('no-apply-author-style').appendChild(div); | |
| 71 | |
| 72 var shadowRoot = div.createShadowRoot(); | |
| 73 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
| 74 shadowRoot.applyAuthorStyles = false; | |
| 75 assertFalse('applyAuthorStyles should be false', shadowRoot.applyAuthorStyle
s); | |
| 76 shadowRoot.innerHTML = '<span></span>'; | |
| 77 } | |
| 78 | |
| 79 function renderApplyAuthorStyleWithInlineStyleDeclarationCase() { | |
| 80 var div = document.createElement('div'); | |
| 81 document.getElementById('with-inline-style-declaration').appendChild(div); | |
| 82 | |
| 83 var shadowRoot = div.createShadowRoot(); | |
| 84 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
| 85 shadowRoot.applyAuthorStyles = true; | |
| 86 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
| 87 shadowRoot.innerHTML = '<span style="border:none; color:#daa; font-size:18px
; text-decoration:none"></span>'; | |
| 88 } | |
| 89 | |
| 90 function renderApplyAuthorStyleWithOverridingImportantPropertyCase() { | |
| 91 var div = document.createElement('div'); | |
| 92 document.getElementById('try-to-override-important').appendChild(div); | |
| 93 | |
| 94 var shadowRoot = div.createShadowRoot(); | |
| 95 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
| 96 shadowRoot.applyAuthorStyles = true; | |
| 97 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
| 98 shadowRoot.innerHTML = '<input type="file" />'; | |
| 99 } | |
| 100 | |
| 101 function testChangingApplyAuthorStyleFromTrueToFalse() { | |
| 102 var div = document.createElement('div'); | |
| 103 document.getElementById('change-apply-author-style-from-true-to-false').appe
ndChild(div); | |
| 104 | |
| 105 var shadowRoot = div.createShadowRoot(); | |
| 106 assertFalse('default applyAuthorStyles', shadowRoot.applyAuthorStyles); | |
| 107 shadowRoot.applyAuthorStyles = true; | |
| 108 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
| 109 shadowRoot.innerHTML = '<div><span id="test1"></span></div>'; | |
| 110 div.offsetLeft; | |
| 111 var target = shadowRoot.getElementById('test1'); | |
| 112 shouldBe(window.getComputedStyle(target).getPropertyValue('font-size'), "24p
x"); | |
| 113 shouldBe(window.getComputedStyle(target).getPropertyValue('text-decoration')
, "underline"); | |
| 114 | |
| 115 shadowRoot.applyAuthorStyles = false; | |
| 116 assertFalse('applyAuthorStyles should be false', shadowRoot.applyAuthorStyle
s); | |
| 117 div.offsetLeft; | |
| 118 shouldNotBe(window.getComputedStyle(target).getPropertyValue('font-size'), "
24px"); | |
| 119 shouldNotBe(window.getComputedStyle(target).getPropertyValue('text-decoratio
n'), "underline"); | |
| 120 } | |
| 121 | |
| 122 function testChangingApplyAuthorStyleFromFalseToTrue() { | |
| 123 var div = document.createElement('div'); | |
| 124 document.getElementById('change-apply-author-style-from-false-to-true').appe
ndChild(div); | |
| 125 | |
| 126 var shadowRoot = div.createShadowRoot(); | |
| 127 shadowRoot.applyAuthorStyles = false; | |
| 128 assertFalse('applyAuthorStyles should be false', shadowRoot.applyAuthorStyle
s); | |
| 129 shadowRoot.innerHTML = '<div><span id="test2"></span></div>'; | |
| 130 div.offsetLeft; | |
| 131 var target = shadowRoot.getElementById('test2'); | |
| 132 shouldNotBe(window.getComputedStyle(target).getPropertyValue('font-size'), "
24px"); | |
| 133 shouldNotBe(window.getComputedStyle(target).getPropertyValue('text-decoratio
n'), "underline"); | |
| 134 | |
| 135 shadowRoot.applyAuthorStyles = true; | |
| 136 assertTrue('applyAuthorStyles should be true', shadowRoot.applyAuthorStyles)
; | |
| 137 div.offsetLeft; | |
| 138 shouldBe(window.getComputedStyle(target).getPropertyValue('font-size'), "24p
x"); | |
| 139 shouldBe(window.getComputedStyle(target).getPropertyValue('text-decoration')
, "underline"); | |
| 140 } | |
| 141 | |
| 142 renderApplyAuthorStyleCase(); | |
| 143 // Looks: regression. | |
| 144 // renderNoApplyAuthorStyleCase(); | |
| 145 renderApplyAuthorStyleWithInlineStyleDeclarationCase(); | |
| 146 renderApplyAuthorStyleWithOverridingImportantPropertyCase(); | |
| 147 testChangingApplyAuthorStyleFromTrueToFalse(); | |
| 148 testChangingApplyAuthorStyleFromFalseToTrue(); | |
| 149 </script> | |
| 150 </body> | |
| 151 </html> | |
| OLD | NEW |