text-combine-upright-parsing-digits-002.html (4843B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Writing Modes: parsing text-combine-upright with digits plus calc() computing to valid digits</title> 6 <link rel="author" title="Masataka Yakura" href="http://google.com/+MasatakaYakura"> 7 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#text-combine-upright"> 8 <link rel="help" href="http://www.w3.org/TR/css-values-3/#calc-notation"> 9 <meta name="assert" content="User Agents support text-combine-upright with values `digits calc(...)` if the expression inside `calc()` computes to a valid integer, which is either 2, 3, or 4."> 10 <meta name="flags" content="dom"> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 14 <style> 15 #valid_digits_calc_1_plus_1 { 16 text-combine-upright: digits calc(1 + 1); 17 } 18 19 #valid_digits_calc_1_plus_1_plus_1 { 20 text-combine-upright: digits calc(1 + 1 + 1); 21 } 22 23 #valid_digits_calc_2_plus_2 { 24 text-combine-upright: digits calc(2 + 2); 25 } 26 27 #valid_digits_calc_4_minus_2 { 28 text-combine-upright: digits calc(4 - 2); 29 } 30 31 #valid_digits_calc_6_minus_3 { 32 text-combine-upright: digits calc(6 - 3); 33 } 34 35 #valid_digits_calc_7_minus_1_minus_2 { 36 text-combine-upright: digits calc(7 - 1 - 2); 37 } 38 39 #valid_digits_calc_2_times_1 { 40 text-combine-upright: digits calc(2 * 1); 41 } 42 43 #valid_digits_calc_3_times_1 { 44 text-combine-upright: digits calc(3 * 1); 45 } 46 47 #valid_digits_calc_2_times_2_times_1 { 48 text-combine-upright: digits calc(2 * 2 * 1); 49 } 50 51 #valid_digits_calc_4_dividedby_2 { 52 text-combine-upright: digits calc(4 / 2); 53 } 54 55 #valid_digits_calc_4_dividedby_2 { 56 text-combine-upright: digits calc(6 / 2); 57 } 58 59 #valid_digits_calc_24_dividedby_3_dividedby_2 { 60 text-combine-upright: digits calc(24 / 3 / 2); 61 } 62 63 </style> 64 </head> 65 <body> 66 67 <div id="valid_digits_calc_1_plus_1"></div> 68 <div id="valid_digits_calc_1_plus_1_plus_1"></div> 69 <div id="valid_digits_calc_2_plus_2"></div> 70 <div id="valid_digits_calc_4_minus_2"></div> 71 <div id="valid_digits_calc_6_minus_3"></div> 72 <div id="valid_digits_calc_7_minus_1_minus_2"></div> 73 <div id="valid_digits_calc_2_times_1"></div> 74 <div id="valid_digits_calc_3_times_1"></div> 75 <div id="valid_digits_calc_2_times_2_times_1"></div> 76 <div id="valid_digits_calc_4_dividedby_2"></div> 77 <div id="valid_digits_calc_4_dividedby_2"></div> 78 <div id="valid_digits_calc_24_dividedby_3_dividedby_2"></div> 79 80 <div id="log"></div> 81 82 <script> 83 var getComputedValueFor = function (id) { 84 var element = document.getElementById(id); 85 return window.getComputedStyle(element).textCombineUpright; 86 }; 87 88 test(function () { 89 assert_equals(getComputedValueFor('valid_digits_calc_1_plus_1'), 'digits 2'); 90 }, 'Computed value for `text-combine-upright: digits calc(1 + 1)` is `digits 2`'); 91 92 test(function () { 93 assert_equals(getComputedValueFor('valid_digits_calc_1_plus_1_plus_1'), 'digits 3'); 94 }, 'Computed value for `text-combine-upright: digits calc(1 + 1 + 1)` is `digits 3`'); 95 96 test(function () { 97 assert_equals(getComputedValueFor('valid_digits_calc_2_plus_2'), 'digits 4'); 98 }, 'Computed value for `text-combine-upright: digits calc(2 + 2)` is `digits 4`'); 99 100 test(function () { 101 assert_equals(getComputedValueFor('valid_digits_calc_4_minus_2'), 'digits 2'); 102 }, 'Computed value for `text-combine-upright: digits calc(4 - 2)` is `digits 2`'); 103 104 test(function () { 105 assert_equals(getComputedValueFor('valid_digits_calc_6_minus_3'), 'digits 3'); 106 }, 'Computed value for `text-combine-upright: digits calc(6 - 3)` is `digits 3`'); 107 108 test(function () { 109 assert_equals(getComputedValueFor('valid_digits_calc_7_minus_1_minus_2'), 'digits 4'); 110 }, 'Computed value for `text-combine-upright: digits calc(7 - 1 - 2)` is `digits 4`'); 111 112 test(function () { 113 assert_equals(getComputedValueFor('valid_digits_calc_2_times_1'), 'digits 2'); 114 }, 'Computed value for `text-combine-upright: digits calc(2 * 1)` is `digits 2`'); 115 116 test(function () { 117 assert_equals(getComputedValueFor('valid_digits_calc_3_times_1'), 'digits 3'); 118 }, 'Computed value for `text-combine-upright: digits calc(3 * 1)` is `digits 3`'); 119 120 test(function () { 121 assert_equals(getComputedValueFor('valid_digits_calc_2_times_2_times_1'), 'digits 4'); 122 }, 'Computed value for `text-combine-upright: digits calc(2 * 2 * 1)` is `digits 4`'); 123 124 test(function () { 125 assert_equals(getComputedValueFor('valid_digits_calc_4_dividedby_2'), 'digits 2'); 126 }, 'Computed value for `text-combine-upright: digits calc(4 / 2)` is `digits 2`'); 127 128 test(function () { 129 assert_equals(getComputedValueFor('valid_digits_calc_4_dividedby_2'), 'digits 3'); 130 }, 'Computed value for `text-combine-upright: digits calc(6 / 2)` is `digits 3`'); 131 132 test(function () { 133 assert_equals(getComputedValueFor('valid_digits_calc_24_dividedby_3_dividedby_2'), 'digits 4'); 134 }, 'Computed value for `text-combine-upright: digits calc(24 / 3 / 2)` is `digits 4`'); 135 </script> 136 </body> 137 </html>