test_counter_style.html (3880B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test for css3-counter-style (Bug 966166)</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 8 <style type="text/css"> 9 #ol_test, #ol_ref { 10 display: inline-block; 11 list-style-position: inside; 12 } 13 #ol_test { list-style-type: test; } 14 #ol_ref { list-style-type: ref; } 15 #div_test, #div_ref { 16 display: inline-block; 17 counter-reset: a -1; 18 } 19 #div_test::before { content: counter(a, test); } 20 #div_ref::before { content: counter(a, ref); } 21 </style> 22 <style type="text/css" id="counter"> 23 </style> 24 </head> 25 <body> 26 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=966166">Mozilla Bug 966166</a> 27 <div id="display"></div> 28 <ol id="ol_test" start="-1"><li></li></ol><br> 29 <ol id="ol_ref" start="-1"><li></li></ol><br> 30 <div id="div_test"></div><br> 31 <div id="div_ref"></div><br> 32 <pre id="test"> 33 <script type="application/javascript"> 34 var gOlTest = document.getElementById("ol_test"), 35 gOlRef = document.getElementById("ol_ref"), 36 gDivTest = document.getElementById("div_test"), 37 gDivRef = document.getElementById("div_ref"), 38 gCounterSheet = document.getElementById("counter").sheet; 39 40 var testRule, refRule; 41 42 var basicStyle = "system: extends decimal; range: infinite infinite; "; 43 var info = [ 44 ["system", 45 "system: fixed -1; symbols: xxx;", 46 "system: fixed; symbols: xxx;"], 47 ["system", 48 "system: extends decimal;", 49 "system: extends cjk-ideographic;"], 50 ["negative", "", "negative: '((' '))';"], 51 ["negative", "", "negative: '---';"], 52 ["prefix", "", "prefix: '###';"], 53 ["suffix", "", "suffix: '###';"], 54 ["range", 55 "fallback: cjk-ideographic;", 56 "fallback: cjk-ideographic; range: 10 infinite;"], 57 ["pad", "", "pad: 10 '0';"], 58 ["fallback", 59 "range: 0 infinite;", 60 "range: 0 infinite; fallback: cjk-ideographic;"], 61 ["symbols", 62 "system: symbolic; symbols: '1';", 63 "system: symbolic; symbols: '111';"], 64 ["additiveSymbols", 65 "system: additive; additive-symbols: 1 '1';", 66 "system: additive; additive-symbols: 1 '111';"], 67 ]; 68 69 // force a reflow before test to eliminate bug 994418 70 gOlTest.getBoundingClientRect().width; 71 72 for (var i in info) { 73 var item = info[i]; 74 var desc = item[0], 75 testStyle = item[1], 76 refStyle = item[2]; 77 var isFix = (desc == "prefix" || desc == "suffix"); 78 79 while (gCounterSheet.cssRules.length > 0) { 80 gCounterSheet.deleteRule(0); 81 } 82 gCounterSheet.insertRule("@counter-style test { " + 83 basicStyle + testStyle + "}", 0); 84 gCounterSheet.insertRule("@counter-style ref { " + 85 basicStyle + refStyle + "}", 1); 86 testRule = gCounterSheet.cssRules[0]; 87 refRule = gCounterSheet.cssRules[1]; 88 89 var olTestWidth = gOlTest.getBoundingClientRect().width; 90 var olRefWidth = gOlRef.getBoundingClientRect().width; 91 ok(olTestWidth > 0, "test ol has width"); 92 ok(olRefWidth > 0, "ref ol has width"); 93 ok(olTestWidth != olRefWidth, 94 "OLs have different width " + 95 "for rule '" + testStyle + "' and '" + refStyle + "'"); 96 97 var divTestWidth = gDivTest.getBoundingClientRect().width; 98 var divRefWidth = gDivRef.getBoundingClientRect().width; 99 if (!isFix) { 100 ok(divTestWidth > 0, "test div has width"); 101 ok(divRefWidth > 0, "ref div has width"); 102 ok(divTestWidth != divRefWidth, 103 "DIVs have different width" + 104 "for rule '" + testStyle + "' and '" + refStyle + "'"); 105 } 106 107 ok(testRule[desc] != refRule[desc], 108 "rules have different values for desciptor '" + desc + "'"); 109 testRule[desc] = refRule[desc]; 110 111 var olNewWidth = gOlTest.getBoundingClientRect().width; 112 var divNewWidth = gDivTest.getBoundingClientRect().width; 113 is(olNewWidth, olRefWidth); 114 if (!isFix) { 115 is(divNewWidth, divRefWidth); 116 } 117 } 118 </script> 119 </pre> 120 </body> 121 </html>