| <!doctype html> |
| <meta charset="utf-8"> |
| <title>CSSPositionValue normalization tests</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#positionvalue-normalization"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../resources/testhelper.js"></script> |
| <body> |
| <script> |
| 'use strict'; |
| |
| const gSingleTestCases = [ |
| { cssText: 'left', x: CSS.percent(0), y: CSS.percent(50) }, |
| { cssText: 'right', x: CSS.percent(100), y: CSS.percent(50) }, |
| { cssText: 'center', x: CSS.percent(50), y: CSS.percent(50) }, |
| { cssText: 'top', x: CSS.percent(50), y: CSS.percent(0) }, |
| { cssText: 'bottom', x: CSS.percent(50), y: CSS.percent(100) }, |
| { cssText: '3.14px', x: CSS.px(3.14), y: CSS.percent(50) }, |
| { cssText: '25%', x: CSS.percent(25), y: CSS.percent(50) }, |
| ]; |
| |
| const gXTestCases = [ |
| { cssText: 'left', x: CSS.percent(0), type: 'ident' }, |
| { cssText: 'center', x: CSS.percent(50), type: 'ident' }, |
| { cssText: 'right', x: CSS.percent(100), type: 'ident' }, |
| { cssText: '3.14px', x: CSS.px(3.14), type: 'length' }, |
| { cssText: '10%', x: CSS.percent(10), type: 'length' }, |
| { cssText: 'calc(1px + 1em)', x: new CSSMathSum(CSS.px(1), CSS.em(1)), type: 'length' }, |
| { cssText: 'left 3.14px', x: CSS.px(3.14), type: 'offset' }, |
| { cssText: 'right 3.14px', x: CSS.percent(100).sub(CSS.px(3.14)), type: 'offset' }, |
| ]; |
| |
| const gYTestCases = [ |
| { cssText: 'top', y: CSS.percent(0), type: 'ident' }, |
| { cssText: 'center', y: CSS.percent(50), type: 'ident' }, |
| { cssText: 'bottom', y: CSS.percent(100), type: 'ident' }, |
| { cssText: '3.14px', y: CSS.px(3.14), type: 'length' }, |
| { cssText: '10%', y: CSS.percent(10), type: 'length' }, |
| { cssText: 'calc(1px + 1em)', y: new CSSMathSum(CSS.px(1), CSS.em(1)), type: 'length' }, |
| { cssText: 'top 3.14px', y: CSS.px(3.14), type: 'offset' }, |
| { cssText: 'bottom 3.14px', y: CSS.percent(100).sub(CSS.px(3.14)), type: 'offset' }, |
| ]; |
| |
| for (const {cssText, x, y} of gSingleTestCases) { |
| test(t => { |
| const styleMap = createInlineStyleMap(t, 'object-position: ' + cssText); |
| assert_style_value_equals(styleMap.get('object-position'), new CSSPositionValue(x, y)); |
| }, 'CSS <position> value "' + cssText + '" normalizes to CSSPositionValue'); |
| } |
| |
| for (const {cssText: xCssText, x, type: xType} of gXTestCases) { |
| for (const {cssText: yCssText, y, type: yType} of gYTestCases) { |
| const cssText = xCssText + ' ' + yCssText; |
| |
| // Can't have position values with 3 parts |
| if ((xType === 'offset') !== (yType === 'offset')) |
| continue; |
| |
| test(t => { |
| const styleMap = createInlineStyleMap(t, 'object-position: ' + cssText); |
| assert_style_value_equals(styleMap.get('object-position'), new CSSPositionValue(x, y)); |
| }, 'CSS <position> value "' + cssText + '" normalizes to CSSPositionValue'); |
| } |
| } |
| |
| </script> |
