| Index: third_party/WebKit/LayoutTests/typedcssom/inlinestyle/calcLength.html
|
| diff --git a/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/calcLength.html b/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/calcLength.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..df4a34f99cff690df3e72d1f84dc3906da992336
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/typedcssom/inlinestyle/calcLength.html
|
| @@ -0,0 +1,101 @@
|
| +<!DOCTYPE html>
|
| +<script src='../../resources/testharness.js'></script>
|
| +<script src='../../resources/testharnessreport.js'></script>
|
| +
|
| +<div id='testElement'></div>
|
| +
|
| +<script>
|
| +
|
| +var units = [
|
| + 'px',
|
| + 'percent',
|
| + 'em',
|
| + 'ex',
|
| + 'ch',
|
| + 'rem',
|
| + 'vw',
|
| + 'vh',
|
| + 'vmin',
|
| + 'vmax',
|
| + 'cm',
|
| + 'mm',
|
| + 'in',
|
| + 'pc',
|
| + 'pt'
|
| +];
|
| +
|
| +function assertCalcLengthEquals(calcLength, calcDict) {
|
| + for (var i = 0; i < units.length; i++) {
|
| + var unit = units[i];
|
| + if (calcDict[unit] !== undefined) {
|
| + assert_equals(calcLength[unit], calcDict[unit], 'Mismatch for unit ' + unit + ': ');
|
| + } else {
|
| + assert_equals(calcLength[unit], null, 'Expected null for unit ' + unit + ': ');
|
| + }
|
| + }
|
| +}
|
| +
|
| +test(function() {
|
| + testElement.style.width = 'calc(1.2px - 2.3% + 4.5em - 6.7ex + 8.9ch - 10rem + 1.1vw - 1.2vh + 1.3vmin - 1.4vmax + 1.56cm - 1.7mm + 1.8in - 1.9pc + 2.1pt)';
|
| +
|
| + var result = testElement.styleMap.get('width');
|
| + assert_true(result instanceof CSSCalcLength);
|
| + assert_equals(result.px, 1.2);
|
| + assert_equals(result.percent, -2.3);
|
| + assert_equals(result.em, 4.5);
|
| + assert_equals(result.ex, -6.7);
|
| + assert_equals(result.ch, 8.9);
|
| + assert_equals(result.rem, -10);
|
| + assert_equals(result.vw, 1.1);
|
| + assert_equals(result.vh, -1.2);
|
| + assert_equals(result.vmin, 1.3);
|
| + assert_equals(result.vmax, -1.4);
|
| + assert_equals(result.cm, 1.56);
|
| + assert_equals(result.mm, -1.7);
|
| + assert_equals(result.in, 1.8);
|
| + assert_equals(result.pc, -1.9);
|
| + assert_equals(result.pt, 2.1);
|
| +}, 'Getting with fully populated simple calc works');
|
| +
|
| +test(function() {
|
| + testElement.style.width = 'calc(3 * (5px - 2%) - (5vmin + 1mm) / 2)';
|
| +
|
| + var result = testElement.styleMap.get('width');
|
| + assert_true(result instanceof CSSCalcLength);
|
| + assertCalcLengthEquals(result, {px: 15, percent: -6, vmin: -2.5, mm: -0.5});
|
| +}, 'Getting when calc contains multiplication and division works');
|
| +
|
| +test(function() {
|
| + testElement.style.width = 'calc(10px)';
|
| +
|
| + var result = testElement.styleMap.get('width');
|
| + assert_true(result instanceof CSSCalcLength);
|
| + assertCalcLengthEquals(result, {px: 10});
|
| +}, 'Getting with only px works');
|
| +
|
| +test(function() {
|
| + testElement.style.width = 'calc(10%)';
|
| +
|
| + var result = testElement.styleMap.get('width');
|
| + assert_true(result instanceof CSSCalcLength);
|
| + assertCalcLengthEquals(result, {percent: 10});
|
| +}, 'Getting with only % works');
|
| +
|
| +test(function() {
|
| + testElement.style.width = 'calc(6px + 10%)';
|
| +
|
| + var result = testElement.styleMap.get('width');
|
| + assert_true(result instanceof CSSCalcLength);
|
| + assertCalcLengthEquals(result, {px:6, percent: 10});
|
| +}, 'Getting with a px and % works');
|
| +
|
| +test(function() {
|
| + testElement.styleMap.set('width', new CSSCalcLength({vmin: 5, px: 10}));
|
| +
|
| + assert_equals(testElement.style.width, 'calc(10px + 5vmin)');
|
| + var result = testElement.styleMap.get('width');
|
| + assert_true(result instanceof CSSCalcLength);
|
| + assertCalcLengthEquals(result, {px: 10, vmin: 5});
|
| +}, 'Setting round trips');
|
| +
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 2371673002:
[CSS Typed OM] Implement support for CSSValue -> CSSCalcLength (Closed)
