color-suggestion-picker-css-variable-validation.html

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-1000">
<script src='../../../resources/testharness.js'></script>
<script src='../../../resources/testharnessreport.js'></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src='../../../fast/forms/resources/picker-common.js'></script>

<input type='color' id='color' value='#ff0000' list='rainbow'>
<datalist id='rainbow'>
    <option>#ff0000</option>
    <option>#ffa500</option>
    <option>#ffff00</option>
    <option>#00ff00</option>
    <option>#0000ff</option>
    <option>#4b0082</option>
    <option>#ee82ee</option>
</datalist>
<script>
'use strict';

// The color suggestion picker JS code queries the values of certain CSS variables and expects them to be expressed in 'px' units.
// This test validates that those variables are actually declared with 'px' values (or '0').
let t = async_test('Color suggestion picker: Validate that length units in CSS variables end in \'px\'.');
t.step(() => {
  let colorControl = document.getElementById('color');
  openPicker(colorControl)
  .then(t.step_func_done(() => {
    internals.pagePopupWindow.focus();
    const popupDocument = internals.pagePopupWindow.document;
    const popupDocumentBody = popupDocument.body;
    const colorSwatchBorderWidth = internals.pagePopupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-border-width');
    const colorSwatchMargin = internals.pagePopupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-margin');
    const colorSwatchHeight = internals.pagePopupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-height');
    const colorSwatchPadding = internals.pagePopupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-padding');
    const colorSwatchWidth = internals.pagePopupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--color-swatch-width');
    assert_true(colorSwatchBorderWidth.trim() === '0' ||
        colorSwatchBorderWidth.endsWith('px'), 'Color swatch border width must be 0 or end in \'px\'');
    assert_true(colorSwatchMargin.trim() === '0' || colorSwatchMargin.endsWith('px'), 'Color swatch margin must be 0 or end in \'px\'');
    assert_true(colorSwatchHeight.trim() === '0' || colorSwatchHeight.endsWith('px'), 'Color swatch height must be 0 or end in \'px\'');
    assert_true(colorSwatchPadding.trim() === '0' || colorSwatchPadding.endsWith('px'), 'Color swatch padding must be 0 or end in \'px\'');
    assert_true(colorSwatchWidth.trim() === '0' || colorSwatchWidth.endsWith('px'), 'Color swatch width must be 0 or end in \'px\'');
    const scrollbarWidth = internals.pagePopupWindow.getComputedStyle(popupDocumentBody).getPropertyValue('--scrollbar-width');
    assert_true(scrollbarWidth.trim() === '0' || scrollbarWidth.endsWith('px'), 'Scrollbar width must be 0 or end in \'px\'');
  }));
});
</script>
chromium/third_party/blink/web_tests/fast/forms/color/color-suggestion-picker-css-variable-validation.html
