test_bug74880.html (4392B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=74880 5 --> 6 <head> 7 <title>Test for Bug 74880</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 <style type="text/css"> 11 12 /* so that computed values for other border properties work right */ 13 #display { border-style: solid; } 14 15 </style> 16 </head> 17 <body> 18 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=74880">Mozilla Bug 74880</a> 19 <div style="margin: 1px 2px 3px 4px; border-width: 5px 6px 7px 8px; border-style: dotted dashed solid double; border-color: blue fuchsia green orange; padding: 9px 10px 11px 12px"> 20 <p id="display"></p> 21 </div> 22 <div id="content" style="display: none"> 23 24 </div> 25 <pre id="test"> 26 <script class="testbody" type="text/javascript"> 27 28 /** Test for Bug 74880 */ 29 30 var gProps = [ 31 [ "margin-left", "margin-right", "margin-inline-start", "margin-inline-end" ], 32 [ "padding-left", "padding-right", "padding-inline-start", "padding-inline-end" ], 33 [ "border-left-color", "border-right-color", "border-inline-start-color", "border-inline-end-color" ], 34 [ "border-left-style", "border-right-style", "border-inline-start-style", "border-inline-end-style" ], 35 [ "border-left-width", "border-right-width", "border-inline-start-width", "border-inline-end-width" ], 36 ]; 37 38 var gLengthValues = [ "inherit", "initial", "2px", "1em", "unset" ]; 39 var gColorValues = [ "inherit", "initial", "currentColor", "green", "unset" ]; 40 var gStyleValues = [ "inherit", "initial", "double", "dashed", "unset" ]; 41 42 function values_for(set) { 43 var values; 44 if (set[0].match(/style$/)) 45 values = gStyleValues; 46 else if (set[0].match(/color$/)) 47 values = gColorValues; 48 else 49 values = gLengthValues; 50 return values; 51 } 52 53 var e = document.getElementById("display"); 54 var s = e.style; 55 var c = window.getComputedStyle(e); 56 57 for (var set of gProps) { 58 var values = values_for(set); 59 for (var val of values) { 60 function check(dir, plogical, pvisual) { 61 var v0 = c.getPropertyValue(pvisual); 62 s.setProperty("direction", dir, ""); 63 s.setProperty(pvisual, val, ""); 64 var v1 = c.getPropertyValue(pvisual); 65 if (val != "initial" && val != "unset" && val != "currentColor") 66 isnot(v1, v0, "setProperty set the property " + pvisual + ": " + val); 67 s.removeProperty(pvisual); 68 is(c.getPropertyValue(pvisual), v0, "removeProperty worked for " + pvisual); 69 s.setProperty(plogical, val, "") 70 var v2 = c.getPropertyValue(pvisual); 71 is(v2, v1, "the logical property " + plogical + ": " + val + " showed up in the right place"); 72 s.removeProperty(plogical); 73 is(c.getPropertyValue(pvisual), v0, "removeProperty worked for " + plogical); 74 75 s.removeProperty("direction"); 76 } 77 78 check("ltr", set[2], set[0]); 79 check("ltr", set[3], set[1]); 80 check("rtl", set[2], set[1]); 81 check("rtl", set[3], set[0]); 82 } 83 84 function check_cascading(dir, plogical, pvisual) { 85 var dirstr = "direction: " + dir + ";"; 86 e.setAttribute("style", dirstr + pvisual + ":" + values[2]); 87 var v2 = c.getPropertyValue(pvisual); 88 e.setAttribute("style", dirstr + pvisual + ":" + values[3]); 89 var v3 = c.getPropertyValue(pvisual); 90 isnot(v2, v3, "values should produce different computed values"); 91 92 var desc = ["cascading for", pvisual, "and", plogical, "with direction", dir].join(" "); 93 e.setAttribute("style", dirstr + pvisual + ":" + values[3] + ";" + 94 plogical + ":" + values[2]); 95 is(c.getPropertyValue(pvisual), v2, desc); 96 e.setAttribute("style", dirstr + plogical + ":" + values[3] + ";" + 97 pvisual + ":" + values[2]); 98 is(c.getPropertyValue(pvisual), v2, desc); 99 e.setAttribute("style", dirstr + pvisual + ":" + values[2] + ";" + 100 plogical + ":" + values[3]); 101 is(c.getPropertyValue(pvisual), v3, desc); 102 e.setAttribute("style", dirstr + plogical + ":" + values[2] + ";" + 103 pvisual + ":" + values[3]); 104 is(c.getPropertyValue(pvisual), v3, desc); 105 e.removeAttribute("style"); 106 } 107 108 check_cascading("ltr", set[2], set[0]); 109 check_cascading("ltr", set[3], set[1]); 110 check_cascading("rtl", set[2], set[1]); 111 check_cascading("rtl", set[3], set[0]); 112 } 113 114 115 </script> 116 </pre> 117 </body> 118 </html>