style_attribute_html.html (1934B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Style attribute in HTML</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <script> 7 8 var div; 9 setup(function() { 10 var input = '<div style="color: red">Foo</div>'; 11 var doc = (new DOMParser()).parseFromString(input, 'text/html'); 12 div = doc.querySelector('div'); 13 }); 14 15 test(function() { 16 var style = div.style; 17 assert_equals(style.cssText, 'color: red;'); 18 assert_equals(style.color, 'red'); 19 assert_equals(div.getAttribute("style"), 'color: red', 20 'Value of style attribute should match the string value that was set'); 21 }, 'Parsing of initial style attribute'); 22 23 test(function() { 24 var style = div.style; 25 div.setAttribute('style', 'color:: invalid'); 26 assert_equals(style.cssText, ''); 27 assert_equals(style.color, ''); 28 assert_equals(div.getAttribute('style'), 'color:: invalid', 29 'Value of style attribute should match the string value that was set'); 30 }, 'Parsing of invalid style attribute'); 31 32 test(function() { 33 var style = div.style; 34 div.setAttribute('style', 'color: green'); 35 assert_equals(style.cssText, 'color: green;'); 36 assert_equals(style.color, 'green'); 37 assert_equals(div.getAttribute('style'), 'color: green', 38 'Value of style attribute should match the string value that was set'); 39 }, 'Parsing of style attribute'); 40 41 test(function() { 42 var style = div.style; 43 style.backgroundColor = 'blue'; 44 assert_equals(style.cssText, 'color: green; background-color: blue;', 45 'Should not drop the existing style'); 46 assert_equals(style.color, 'green', 47 'Should not drop the existing style'); 48 assert_equals(div.getAttribute('style'), 'color: green; background-color: blue;', 49 'Should update style attribute'); 50 }, 'Update style.backgroundColor'); 51 52 </script>