Bug 83533 - html5test.com: input type=color - Field validation fails
Summary: html5test.com: input type=color - Field validation fails
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Kent Tamura
URL: http://html5test.com/index.html
Keywords:
Depends on:
Blocks: html5test
  Show dependency treegraph
 
Reported: 2012-04-09 18:38 PDT by Kent Tamura
Modified: 2012-07-09 18:23 PDT (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Kent Tamura 2012-04-09 18:38:00 PDT
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.
Comment 1 Keishi Hattori 2012-04-09 19:06:44 PDT
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
Comment 2 Kent Tamura 2012-04-09 19:14:36 PDT
(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?
Comment 3 Keishi Hattori 2012-04-09 19:17:57 PDT
(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);
Comment 4 Keishi Hattori 2012-04-09 19:18:36 PDT
		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 };
		},
Comment 5 Kent Tamura 2012-04-09 19:19:30 PDT
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.
Comment 6 Kent Tamura 2012-04-09 20:01:16 PDT
I'll contact the author of html5test.com.
Comment 7 Kent Tamura 2012-04-09 20:41:09 PDT
I made a pull request: https://github.com/NielsLeenheer/html5test/pull/131
Comment 8 Kent Tamura 2012-07-09 18:23:46 PDT
Will be fixed in the next release of html5test; http://alpha.html5test.com/