calc-rounds-to-integer.html (4628B)
1 <!doctype html> 2 <title>Calc rounds to integer</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> 7 <link rel="help" href="https://drafts.csswg.org/css-values/#calc-range"> 8 <link rel="help" href="https://drafts.csswg.org/css-easing/#funcdef-step-easing-function-steps"> 9 <link rel="help" href="https://drafts.csswg.org/css-multicol-2/#column-span"> 10 <link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-reset"> 11 <link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-increment"> 12 <link rel="help" href="https://drafts.csswg.org/css-lists/#propdef-counter-set"> 13 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-feature-settings-prop"> 14 <link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template-rows"> 15 <link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-row"> 16 <link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars"> 17 <link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-lines"> 18 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-initial-letter"> 19 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#propdef-max-lines"> 20 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-order"> 21 <link rel="help" href="https://drafts.csswg.org/css-break-4/#propdef-orphans"> 22 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright"> 23 <link rel="help" href="https://drafts.csswg.org/css-break-4/#propdef-widows"> 24 <link rel="help" href="https://drafts.csswg.org/css2/#propdef-z-index"> 25 <!-- 26 Verifying that, per V&U, a calc() that results in a non-integer value 27 gets rounded to the nearest integer 28 when used in a place that requires <integer> specifically. 29 This tests both straight-up decimal-point values, 30 and scinot, which is defined to parse as <number-token>. 31 --> 32 <body> 33 34 <script> 35 36 runTests("animation-timing-function", "steps(xxx)"); 37 runTests("column-span"); 38 runTests("counter-increment", "foo xxx"); 39 runTests("counter-reset", "foo xxx"); 40 runTests("counter-set", "foo xxx"); 41 runTests("font-feature-settings", '"fooo" xxx'); 42 runTests("grid-row"); 43 runTests("grid-template-rows", "repeat(xxx, 10px)"); 44 runTests("hyphenate-limit-chars"); 45 runTests("hyphenate-limit-lines"); 46 runTests("initial-letter", "1.1 xxx"); 47 runTests("max-lines"); 48 runTests("order"); 49 runTests("orphans"); 50 runTests("text-combine-upright", "digits xxx"); 51 runTests("transition-timing-function", "steps(xxx)"); 52 runTests("widows"); 53 runTests("z-index"); 54 55 56 function runTests(prop, valPattern="xxx") { 57 const el = document.body; 58 59 // Don't spuriously fail bc the prop or val isn't supported. 60 if(!verifySupport(el, prop, valPattern)) return; 61 62 const validValues = [ 63 "10", 64 "calc(10)", 65 "calc(10.1)", 66 "calc(1e1)", 67 "calc(1.1e1)", 68 ]; 69 const invalidValues = [ 70 "1e1", 71 "1.1e1", 72 "10.1", 73 ]; 74 for(let testVal of validValues) { 75 testInt(el, prop, testVal, valPattern); 76 } 77 for(let testVal of invalidValues) { 78 testIntInvalid(el, prop, testVal, valPattern); 79 } 80 } 81 82 function verifySupport(el, prop, valPattern) { 83 let testVal = "10"; 84 if(valPattern !== undefined) { 85 testVal = valPattern.replace("xxx", testVal); 86 } 87 el.removeAttribute("style"); 88 const nullVal = getComputedStyle(el)[prop]; 89 el.style.setProperty(prop, testVal); 90 return getComputedStyle(el)[prop] != nullVal; 91 } 92 93 function testInt(el, prop, testVal, valPattern) { 94 // to avoid needing to specify serialization, 95 // just test whether it parses at all 96 if(valPattern !== undefined) { 97 testVal = valPattern.replace("xxx", testVal); 98 } 99 test(()=>{ 100 el.removeAttribute("style"); 101 const nullVal = getComputedStyle(el)[prop]; 102 el.style.setProperty(prop, testVal); 103 assert_not_equals(getComputedStyle(el)[prop], nullVal); 104 }, `${prop} should accept "${testVal}"`) 105 } 106 107 function testIntInvalid(el, prop, testVal, valPattern) { 108 // similarly, just verify it doesn't parse at all 109 if(valPattern !== undefined) { 110 testVal = valPattern.replace("xxx", testVal); 111 } 112 test(()=>{ 113 el.removeAttribute("style"); 114 const nullVal = getComputedStyle(el)[prop]; 115 el.style.setProperty(prop, testVal); 116 assert_equals(getComputedStyle(el)[prop], nullVal); 117 }, `${prop} should not accept "${testVal}"`) 118 } 119 120 </script>