[FIX] web_editor: fix border width options on zoomed browser

When the browser is zoomed, the value of the `border-width` CSS
properties obtained through `getComputedStyle` are impacted by the
zoom. Because of this, entering a "10px" border in a Chrome zoomed at
125% turns it into "9.6px" when leaving the input field.

This commit neutralizes the zoom effect by rounding the value up.
The rounding operation was empirically determined by observing values,
see table below.

When zoomed out this does not always work: e.g. at 50% zoom, a value
of 11px becomes 10px. But zooming out is an unxpected use case, that
situation is therefore not handled by this fix.

Observed values of the border-width property:
Set value => `getComputedStyle`
```
Value  Chrome 125%  Firefox 120%
  1px        0.8px     0.83333px
  2px        1.6px     1.66667px
  3px        2.4px     2.50000px
  4px        4.0px     3.33333px
  5px        4.8px     5.00000px
  6px        5.6px     5.83333px
  7px        6.4px     6.66667px
  8px        8.0px     7.50000px
  9px        8.8px     8.33333px
 10px        9.6px    10.00000px
 11px       10.4px    10.83333px
 12px       12.0px    11.66667px
```

Steps to reproduce:
- Drop a "Text - Image" block.
- Select the text column.
- Zoom with ctrl+mouse wheel or ctrl-plus.
- Set a 10px border.
- Leave input field.

=> Border option field displayed a different size.

task-3172235

closes odoo/odoo#125107

X-original-commit: 6398b0c75b9e14b7cecb1526fe5a950101d534ad
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -3857,6 +3857,7 @@ const SnippetOptionWidget = Widget.extend({
                 }
 
                 const cssProps = weUtils.CSS_SHORTHANDS[params.cssProperty] || [params.cssProperty];
+                const borderWidthCssProps = weUtils.CSS_SHORTHANDS['border-width'];
                 const cssValues = cssProps.map(cssProp => {
                     let value = styles.getPropertyValue(cssProp).trim();
                     if (cssProp === 'box-shadow') {
@@ -3866,6 +3867,11 @@ const SnippetOptionWidget = Widget.extend({
                         values = values.join(' ').replace(color, '').trim();
                         value = `${color} ${values}${inset ? ' inset' : ''}`;
                     }
+                    if (borderWidthCssProps.includes(cssProp) && value.endsWith('px')) {
+                        // Rounding value up avoids zoom-in issues.
+                        // Zoom-out issues are not an expected use case.
+                        value = `${Math.ceil(parseFloat(value))}px`;
+                    }
                     return value;
                 });
                 if (cssValues.length === 4 && weUtils.areCssValuesEqual(cssValues[3], cssValues[1], params.cssProperty, this.$target)) {