Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/forms/color/color-picker-manual-color-change-invalid-values.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='#AD4883'>
<script>
'use strict';

let t = async_test('Color picker: Manually entering an invalid value should not change the selected color.');
t.step(() => {
  let colorControl = document.getElementById('color');
  openPicker(colorControl)
  .then(t.step_func_done(() => {
    internals.pagePopupWindow.focus();
    const popupDocument = internals.pagePopupWindow.document;
    const gValueContainer = popupDocument.getElementById('gValueContainer');
    assert_equals(gValueContainer.value, '72');
    const gValueContainerRect = gValueContainer.getBoundingClientRect();
    eventSender.mouseMoveTo(gValueContainerRect.left + 1, gValueContainerRect.top);
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.keyDown('ArrowLeft');
    eventSender.keyDown('3');
    assert_equals(gValueContainer.value, '372');
    eventSender.keyDown('Tab');
    assert_equals(gValueContainer.value, '72', 'Invalid value should be reset when the value container is blurred.');

    const formatToggler = popupDocument.querySelector('format-toggler');
    formatToggler.click();
    const sValueContainer = popupDocument.getElementById('sValueContainer');
    assert_equals(sValueContainer.value, '41%');
    const sValueContainerRect = sValueContainer.getBoundingClientRect();
    eventSender.mouseMoveTo(sValueContainerRect.right - 1, sValueContainerRect.top + (sValueContainerRect.height / 2));
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.keyDown('ArrowRight');
    eventSender.keyDown('Backspace');
    assert_equals(sValueContainer.value, '41');
    eventSender.keyDown('Tab');
    assert_equals(sValueContainer.value, '41%', 'Invalid value should be reset when the value container is blurred.');

    formatToggler.click();
    const hexValueContainer = popupDocument.getElementById('hexValueContainer');
    assert_equals(hexValueContainer.value, '#ad4883');
    const hexValueContainerRect = hexValueContainer.getBoundingClientRect();
    eventSender.mouseMoveTo(hexValueContainerRect.right - 1, hexValueContainerRect.top + (hexValueContainerRect.height / 2));
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.keyDown('ArrowRight');
    const hexValueContainerLength = hexValueContainer.value.length;
    for (let i = 0; i < hexValueContainerLength; i++) {
      eventSender.keyDown('Backspace');
    }
    assert_equals(hexValueContainer.value, '');
    eventSender.keyDown('Tab');
    assert_equals(hexValueContainer.value, '#00000a', 'Invalid value should be reset when the value container is blurred.');
  }));
});
</script>