Bug 83533 – html5test.com: input type=color - Field validation fails

• Component: Forms
• Status: RESOLVED FIXED

[Kent Tamura]

It fails with Google Chrome 20.0.1096.1 OSX and Windows.
I don't know why it fails.  We need to investigate what is tested.

[Keishi Hattori]

Hmm. Opera 11(Mac) failed too.

It seems to be testing element.validity.valid

//engine.js

validation = true;
				
element.field.value = "foo";
validation &= !element.field.validity.valid

element.field.value = '#000000';
validation &= element.field.validity.valid

[Kent Tamura]

(In reply to comment #1)
> validation = true;
> 
> element.field.value = "foo";
> validation &= !element.field.validity.valid
> 
> element.field.value = '#000000';
> validation &= element.field.validity.valid

Does the 'element' have the required attribute?

[Keishi Hattori]

(In reply to comment #2)
> Does the 'element' have the required attribute?

No. Here is the whole section

/* input type=color */
			
var group = this.section.getGroup({
  id:		'color'
});
			
var element = this.createInput('color');
									
element.field.value = "foobar";					
var sanitization = element.field.value != 'foobar';

var validation = false;
if ('validity' in element.field) {
  validation = true;
				
  element.field.value = "foo";
  validation &= !element.field.validity.valid

  element.field.value = '#000000';
  validation &= element.field.validity.valid
}
			
group.setItem({
  id:			'element',
  passed:		element.field.type == 'color',
  value: 		2
});
			
group.setItem({
  id:			'ui',
  passed:		baseline.field != getRenderedStyle(element.field) || baseline.wrapper != getRenderedStyle(element.wrapper),
  value: 		2
});
				
group.setItem({
  id:			'sanitization',
  passed:		sanitization,
  required:	true
});
				
group.setItem({
  id:			'validation',
  passed:		validation,
  required:	true
});

this.removeInput(element);

[Keishi Hattori]

		createInput: function(type) {
			var wrapper = document.createElement('div');
			document.body.appendChild(wrapper)

			var field = document.createElement('input');
			wrapper.appendChild(field);
			
			try {
				field.setAttribute('type', type);
			} catch(e) {
			}
			
			/* Make sure our field is position absolutely for CSS style comparison */
			wrapper.style.position = 'absolute';
			wrapper.style.display = 'inline-block';
			wrapper.style.top = '0px';
			wrapper.style.left = '0px';
			
			return { field: field, wrapper: wrapper };
		},

[Kent Tamura]

Oh, I remember the color type doesn't support the required attribute, and "foo" should be sanitized to "#000000".  It seems the test is incorrect.

[Kent Tamura]

I'll contact the author of html5test.com.

[Kent Tamura]

I made a pull request: https://github.com/NielsLeenheer/html5test/pull/131

[Kent Tamura]

Will be fixed in the next release of html5test; http://alpha.html5test.com/