src/third_party/WebKit/LayoutTests/css3/calc/calc-errors.html

   1 <!DOCTYPE HTML>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <style>
   5 div {
   6     height: 100px;
   7     width: 100px;
   8     transform: matrix(1, 0, 0, 1, 0, 0);
   9     animation-delay: 100s;
  10 }
  11 </style>
  12
  13 <!-- just plain bad -->
  14 <div style="width: calc(;">unclosed calc</div>
  15 <div style="width: calc( flim;">unclosed calc with garbage</div>
  16 <div style="width: calc( flim );">garbage</div>
  17 <div style="width: calc( auto );">garbage</div>
  18
  19 <!-- unsupported units -->
  20 <div style="width: calc(10dpi);">dpi</div>
  21 <div style="width: calc(10dpi / 4);">dpi / number</div>
  22 <div style="width: calc(5dpi + 5dpi);">dpi + dpi</div>
  23 <div style="width: calc(42fr);">fr</div>
  24
  25 <!-- zero division -->
  26 <div style="width: calc(1ex / 0);">zero division</div>
  27
  28 <!-- mod, +, - require whitespaces around the operator -->
  29 <div style="width: calc(1 mod10 * 200px);">mod10 </div>
  30 <div style="width: calc(1mod 10 * 200px);">1mod</div>
  31 <div style="width: calc(70px+40px);">70px+40px no whitespace around + </div>
  32 <div style="width: calc(70px +40px);">70px +40px no whitespace on right of +</div>
  33 <div style="width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div>
  34 <div style="width: calc(70px+-40px);">70px+-40px no whitespace around + </div>
  35 <div style="width: calc(70px-40px);">70px-40px no whitespace around - </div>
  36 <div style="width: calc(70px -40px);">70px -40px no whitespace on right of -</div>
  37 <div style="width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div>
  38 <div style="width: calc(70px-+40px);">70px-+40px no whitespace around - </div>
  39
  40 <!-- too many nests should be rejected to avoid stack overflow -->
  41 <div style="width: calc(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((200px)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</div>
  42
  43 <!-- invalid formulas -->
  44 <div style="width: calc(200px*);">end with operator</div>
  45 <div style="width: calc(+ +200px);">start with operator</div>
  46 <div style="width: calc();">no expressions</div>
  47 <div style="width: calc(100px + + +100px);">too many pluses</div>
  48 <div style="width: calc(200px 200px);">no binary operator</div>
  49 <div style="width: calc(100px * * 2);">two binary operators</div>
  50 <div style="width: calc(100px @ 2);">invalid operator '@'</div>
  51 <div style="width: calc(1 flim 2);">invalid operator 'flim'</div>
  52 <div style="width: calc(100px @ 2);">invalid operator '@'</div>
  53 <div style="width: calc(1 flim 2);">invalid operator 'flim'</div>
  54 <div style="width: calc(1 flim (2));">invalid operator 'flim' with parens</div>
  55
  56 <!-- Single unitless non length value -->
  57 <div style="width: 100px; width: calc(200);">non length</div>
  58
  59 <!-- Wrong combinations -->
  60 <div style="width: calc(10 + 10px);">number + length</div>
  61 <div style="width: calc(10px + 10);">length + number</div>
  62 <div style="width: calc(10% + 100);">percent + number</div>
  63 <div style="width: calc(100 + 10%);">number + percent</div>
  64
  65 <div style="transform: rotate(calc(42deg + 10))">angle + number</div>
  66 <div style="transform: rotate(calc(10 + 42rad))">number + angle</div>
  67 <div style="transform: rotate(calc(42deg + 10px))">angle + length</div>
  68 <div style="transform: rotate(calc(10px + 42rad))">length + angle</div>
  69 <div style="transform: rotate(calc(42rad + 10%))">angle + percent</div>
  70 <div style="transform: rotate(calc(10% + 42rad))">percent + angle</div>
  71 <div style="transform: rotate(calc(42grad + 10ms))">angle + time</div>
  72 <div style="transform: rotate(calc(10s + 42grad))">time + angle</div>
  73 <div style="transform: rotate(calc(42turn + 10Hz))">angle + frequency</div>
  74 <div style="transform: rotate(calc(10kHz + 42turn))">frequency + angle</div>
  75
  76 <div style="animation-delay: rotate(calc(10ms + 10)">time + number</div>
  77 <div style="animation-delay: rotate(calc(10 + 10s))">number + time</div>
  78 <div style="animation-delay: rotate(calc(10ms + 10px)">time + length</div>
  79 <div style="animation-delay: rotate(calc(10px + 10s))">length + time</div>
  80 <div style="animation-delay: rotate(calc(10ms + 10%))">time + percent</div>
  81 <div style="animation-delay: rotate(calc(10% + 10s))">percent + time</div>
  82 <div style="animation-delay: rotate(calc(10ms + 10rad))">time + angle</div>
  83 <div style="animation-delay: rotate(calc(10deg + 10s))">angle + time</div>
  84 <div style="animation-delay: rotate(calc(10ms + 10Hz))">time + frequency</div>
  85 <div style="animation-delay: rotate(calc(10kHz + 10s))">frequency + time</div>
  86
  87
  88 <div style="width: calc(300px - 100);">length - number</div>
  89 <div style="width: calc(300 - 100px);">number - length</div>
  90 <div style="width: calc(100% - 10);">percent - number</div>
  91 <div style="width: calc(100 - 10%);">number - percent</div>
  92 <div style="transform: rotate(calc(42deg - 10))">angle - number</div>
  93 <div style="transform: rotate(calc(10 - 42rad))">number - angle</div>
  94 <div style="transform: rotate(calc(42deg - 10px))">angle - length</div>
  95 <div style="transform: rotate(calc(10px - 42rad))">length - angle</div>
  96 <div style="transform: rotate(calc(42rad - 10%))">angle - percent</div>
  97 <div style="transform: rotate(calc(10% - 42rad))">percent - angle</div>
  98 <div style="transform: rotate(calc(42grad - 10ms))">angle - time</div>
  99 <div style="transform: rotate(calc(10s - 42grad))">time - angle</div>
 100 <div style="transform: rotate(calc(42turn - 10Hz))">angle - frequency</div>
 101 <div style="transform: rotate(calc(10kHz - 42turn))">frequency - angle</div>
 102
 103 <div style="animation-delay: rotate(calc(10ms - 10)">time - number</div>
 104 <div style="animation-delay: rotate(calc(10 - 10s))">number - time</div>
 105 <div style="animation-delay: rotate(calc(10ms - 10px))">time - length</div>
 106 <div style="animation-delay: rotate(calc(10px - 10s))">length - time</div>
 107 <div style="animation-delay: rotate(calc(10ms - 10%))">time - percent</div>
 108 <div style="animation-delay: rotate(calc(10% - 10s))">percent - time</div>
 109 <div style="animation-delay: rotate(calc(10ms - 10turn))">time - angle</div>
 110 <div style="animation-delay: rotate(calc(10rad - 10s))">angle - time</div>
 111 <div style="animation-delay: rotate(calc(10ms - 10Hz))">time - frequency</div>
 112 <div style="animation-delay: rotate(calc(10kHz - 10s))">frequency - time</div>
 113
 114
 115 <div style="width: calc(10px * 100px);">length * length</div>
 116 <div style="width: calc(10px * 100%);">length * percent</div>
 117 <div style="width: calc(10% * 100px);">percent * length</div>
 118 <div style="width: calc(10% * 100%);">percent * percent</div>
 119
 120 <div style="transform: rotate(calc(42deg * 10px))">angle * length</div>
 121 <div style="transform: rotate(calc(10px * 42rad))">length * angle</div>
 122 <div style="transform: rotate(calc(42rad * 10%))">angle * percent</div>
 123 <div style="transform: rotate(calc(10% * 42rad))">percent * angle</div>
 124 <div style="transform: rotate(calc(42grad * 10ms))">angle * time</div>
 125 <div style="transform: rotate(calc(10s * 42grad))">time * angle</div>
 126 <div style="transform: rotate(calc(42turn * 10Hz))">angle * frequency</div>
 127 <div style="transform: rotate(calc(10kHz * 42turn))">frequency * angle</div>
 128
 129 <div style="animation-delay: rotate(calc(10ms * 10px))">time * length</div>
 130 <div style="animation-delay: rotate(calc(10px * 10s))">length * time</div>
 131 <div style="animation-delay: rotate(calc(10ms * 10%))">time * percent</div>
 132 <div style="animation-delay: rotate(calc(10% * 10s))">percent * time</div>
 133 <div style="animation-delay: rotate(calc(10ms * 10deg))">time * angle</div>
 134 <div style="animation-delay: rotate(calc(10turn * 10s))">angle * time</div>
 135 <div style="animation-delay: rotate(calc(10ms * 10Hz))">time * frequency</div>
 136 <div style="animation-delay: rotate(calc(10kHz * 10s))">frequency * time</div>
 137
 138
 139 <div style="width: calc(100 / 10px);">number / length</div>
 140 <div style="width: calc(100 / 10%);">number / percent</div>
 141 <div style="width: calc(100px / 10px);">length / length</div>
 142 <div style="width: calc(100px / 10%);">length / percent</div>
 143 <div style="width: calc(100% / 10px);">percent / length</div>
 144 <div style="width: calc(100% / 10%);">percent / percent</div>
 145
 146 <div style="transform: rotate(calc(10 / 42rad))">number / angle</div>
 147 <div style="transform: rotate(calc(42deg / 10px))">angle / length</div>
 148 <div style="transform: rotate(calc(10px / 42rad))">length / angle</div>
 149 <div style="transform: rotate(calc(42rad / 10%))">angle / percent</div>
 150 <div style="transform: rotate(calc(10% / 42rad))">percent / angle</div>
 151 <div style="transform: rotate(calc(42grad / 10ms))">angle / time</div>
 152 <div style="transform: rotate(calc(10s / 42grad))">time / angle</div>
 153 <div style="transform: rotate(calc(42turn / 10Hz))">angle / frequency</div>
 154 <div style="transform: rotate(calc(10kHz / 42turn))">frequency / angle</div>
 155
 156 <div style="animation-delay: rotate(calc(10 / 10s))">number / time</div>
 157 <div style="animation-delay: rotate(calc(10ms / 10px))">time / length</div>
 158 <div style="animation-delay: rotate(calc(10px / 10s))">length / time</div>
 159 <div style="animation-delay: rotate(calc(10ms / 10%))">time / percent</div>
 160 <div style="animation-delay: rotate(calc(10% / 10s))">percent / time</div>
 161 <div style="animation-delay: rotate(calc(10ms / 10grad))">time / angle</div>
 162 <div style="animation-delay: rotate(calc(10rad / 10s))">angle / time</div>
 163 <div style="animation-delay: rotate(calc(10ms / 10Hz))">time / frequency</div>
 164 <div style="animation-delay: rotate(calc(10kHz / 10s))">frequency / time</div>
 165
 166 <script>
 167
 168 test(function() {
 169     var divs = document.getElementsByTagName("div");
 170     for (var i = 0, element = divs[i]; i < divs.length; ++i) {
 171         assert_equals(getComputedStyle(element).getPropertyValue("width"), "100px");
 172         assert_equals(getComputedStyle(element).getPropertyValue("transform"), "matrix(1, 0, 0, 1, 0, 0)");
 173         assert_equals(getComputedStyle(element).getPropertyValue("animation-delay"), "100s");
 174     }
 175 }, "Tests invalid calc() expression handling.");
 176
 177 </script>