style-attribute-selector.html (5629B)
1 <!doctype html> 2 <title>CSS Selectors Test: Tests the style attribute used in an attribute selector</title> 3 <link rel="help" href="https://drafts.csswg.org/selectors/#attribute-selectors"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #container { font-size: 16px; color: black; } 8 .test[style] { color: green } 9 .test[style=""] { font-size: 100px } 10 .test[style*="text-decoration"] { background-color: lime } 11 .test[style] + #sibling { color: green; } 12 .test[style*="text-decoration"] + #sibling { background-color: lime; } 13 </style> 14 <div id="container"> 15 <div id="t1" class="test" style></div> 16 <div id="t2" class="test" style=""></div> 17 <div id="t3" class="test" style="text-decoration:underline"></div> 18 <div id="t4" class="test"></div> 19 <div id="sibling"></div> 20 </div> 21 <script> 22 const no_match_bgcolor = "rgba(0, 0, 0, 0)"; 23 const no_match_color = "rgb(0, 0, 0)"; 24 const no_match_font_size = "16px"; 25 const match_bgcolor = "rgb(0, 255, 0)"; 26 const match_color = "rgb(0, 128, 0)"; 27 const match_font_size = "100px"; 28 29 test(() => { 30 assert_equals(getComputedStyle(t1).backgroundColor, no_match_bgcolor); 31 assert_equals(getComputedStyle(t1).color, match_color); 32 assert_equals(getComputedStyle(t1).fontSize, match_font_size); 33 }, "Match style attribute with no value"); 34 35 test(() => { 36 assert_equals(getComputedStyle(t2).backgroundColor, no_match_bgcolor); 37 assert_equals(getComputedStyle(t2).color, match_color); 38 assert_equals(getComputedStyle(t2).fontSize, match_font_size); 39 }, "Match style attribute with empty value"); 40 41 test(() => { 42 assert_equals(getComputedStyle(t3).backgroundColor, match_bgcolor); 43 assert_equals(getComputedStyle(t3).color, match_color); 44 assert_equals(getComputedStyle(t3).fontSize, no_match_font_size); 45 }, "Match style attribute with background value"); 46 47 test(() => { 48 assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor); 49 assert_equals(getComputedStyle(t4).color, no_match_color); 50 assert_equals(getComputedStyle(t4).fontSize, no_match_font_size); 51 assert_equals(getComputedStyle(sibling).color, no_match_color); 52 }, "Initially no style attribute to match"); 53 54 function reset_style(element) { 55 element.removeAttribute("style"); 56 element.offsetTop; 57 } 58 59 function set_style(element) { 60 element.setAttribute("style", "text-decoration: underline"); 61 element.offsetTop; 62 } 63 64 test(() => { 65 reset_style(t4); 66 t4.setAttribute("style", "text-decoration: underline"); 67 assert_equals(getComputedStyle(t4).backgroundColor, match_bgcolor); 68 assert_equals(getComputedStyle(t4).color, match_color); 69 assert_equals(getComputedStyle(t4).fontSize, no_match_font_size); 70 assert_equals(getComputedStyle(sibling).color, match_color); 71 }, "Dynamically change style with Element.setAttribute"); 72 73 test(() => { 74 reset_style(t4); 75 t4.style = "text-decoration: underline"; 76 assert_equals(getComputedStyle(t4).backgroundColor, match_bgcolor); 77 assert_equals(getComputedStyle(t4).color, match_color); 78 assert_equals(getComputedStyle(t4).fontSize, no_match_font_size); 79 assert_equals(getComputedStyle(sibling).color, match_color); 80 }, "Dynamically change style with Element.style"); 81 82 test(() => { 83 reset_style(t4); 84 t4.style.textDecoration = "underline"; 85 assert_equals(getComputedStyle(t4).backgroundColor, match_bgcolor); 86 assert_equals(getComputedStyle(t4).color, match_color); 87 assert_equals(getComputedStyle(t4).fontSize, no_match_font_size); 88 assert_equals(getComputedStyle(sibling).color, match_color); 89 }, "Dynamically change style with Element.style.property"); 90 91 test(() => { 92 set_style(t4); 93 t4.removeAttribute("style"); 94 assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor); 95 assert_equals(getComputedStyle(t4).color, no_match_color); 96 assert_equals(getComputedStyle(t4).fontSize, no_match_font_size); 97 assert_equals(getComputedStyle(sibling).color, no_match_color); 98 assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor); 99 }, "Dynamically remove style with Element.removeAttribute"); 100 101 test(() => { 102 set_style(t4); 103 t4.style = ""; 104 assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor); 105 assert_equals(getComputedStyle(t4).color, match_color); 106 assert_equals(getComputedStyle(t4).fontSize, match_font_size); 107 assert_equals(getComputedStyle(sibling).color, match_color); 108 assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor); 109 }, "Dynamically remove style with Element.style"); 110 111 test(() => { 112 set_style(t4); 113 t4.style.textDecoration = ""; 114 assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor); 115 assert_equals(getComputedStyle(t4).color, match_color); 116 assert_equals(getComputedStyle(t4).fontSize, match_font_size); 117 assert_equals(getComputedStyle(sibling).color, match_color); 118 assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor); 119 }, "Dynamically remove style with Element.style.property"); 120 121 test(() => { 122 set_style(t4); 123 t4.style.removeProperty("text-decoration"); 124 assert_equals(getComputedStyle(t4).backgroundColor, no_match_bgcolor); 125 assert_equals(getComputedStyle(t4).color, match_color); 126 assert_equals(getComputedStyle(t4).fontSize, match_font_size); 127 assert_equals(getComputedStyle(sibling).color, match_color); 128 assert_equals(getComputedStyle(sibling).backgroundColor, no_match_bgcolor); 129 }, "Dynamically remove style with Element.style.removeProperty"); 130 </script>