Changeset 73494 in webkit


Ignore:
Timestamp:
Dec 8, 2010 12:43:36 AM (13 years ago)
Author:
commit-queue@webkit.org
Message:

2010-12-08 Dai Mikurube <​dmikurube@google.com>

Reviewed by Kent Tamura.

Implement "required" attribute for select tags
​https://bugs.webkit.org/show_bug.cgi?id=50380

Added tests for require attributes, valueMissing and vadility check for select elements.

  • fast/forms/ValidityState-valueMissing-001-expected.txt:
  • fast/forms/ValidityState-valueMissing-001.html:
  • fast/forms/ValidityState-valueMissing-002-expected.txt:
  • fast/forms/ValidityState-valueMissing-002.html:
  • fast/forms/ValidityState-valueMissing-003-expected.txt:
  • fast/forms/ValidityState-valueMissing-003.html:
  • fast/forms/checkValidity-002-expected.txt:
  • fast/forms/checkValidity-002.html:
  • fast/forms/required-attribute-001-expected.txt:
  • fast/forms/required-attribute-001.html:
  • fast/forms/required-attribute-002-expected.txt:
  • fast/forms/required-attribute-002.html:
  • fast/forms/resources/select-live-pseudo-selectors.js: Added. (makeInvalid): (appendOption): (backgroundOf):
  • fast/forms/script-tests/validationMessage.js:
  • fast/forms/select-live-pseudo-selectors-expected.txt: Added.
  • fast/forms/select-live-pseudo-selectors.html: Added.
  • fast/forms/validationMessage-expected.txt:
  • platform/mac/fast/objc/dom-html-select-live-pseudo-selectors.html: Added.
  • platform/mac/fast/objc/dom-html-select-live-pseudo-selectors-expected.txt: Added.

2010-12-08 Dai Mikurube <​dmikurube@google.com>

Reviewed by Kent Tamura.

Implement "required" attribute for select tags
​https://bugs.webkit.org/show_bug.cgi?id=50380

Test: fast/forms/select-live-pseudo-selectors.html

platform/mac/fast/objc/dom-html-select-live-pseudo-selectors.html

  • html/HTMLSelectElement.cpp: (WebCore::HTMLSelectElement::deselectItems): Added calling setNeedsValidityCheck() to enable validity check after changing. No tests for this change since this function is not exposed to JavaScript or any web interface. (WebCore::HTMLSelectElement::setSelectedIndex): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::setSelectedIndexByUser): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::valueMissing): Added valueMissing() to check if selecting an invalid or placeholder label option when a valid required attribute is specified. (WebCore::HTMLSelectElement::listBoxSelectItem): Added calling setNeedsValidityCheck(). No tests for this change since it is not called yet. Look at the bug 36177 and the changeset 56180. (WebCore::HTMLSelectElement::add): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::remove): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::restoreFormControlState): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::parseMappedAttribute): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::selectAll): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::reset): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::updateListBoxSelection): Added calling setNeedsValidityCheck(). Skipped adding tests for this change as too complicated.. (WebCore::HTMLSelectElement::setLength): Added calling setNeedsValidityCheck(). (WebCore::HTMLSelectElement::isRequiredFormControl): Check if required or not. (WebCore::HTMLSelectElement::hasPlaceholderLabelOption): Added.
  • html/HTMLSelectElement.h: (WebCore::HTMLSelectElement::isOptionalFormControl): Check if not required.
  • html/HTMLSelectElement.idl: Added a required attribute to select elements..
  • html/ValidityState.cpp: (WebCore::ValidityState::valueMissing): Added valueMissing check for select elements into the global checker, ValidityState::valueMissing().
Location:
trunk
Files:
5 added
20 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r73493 r73494  
     12010-12-08  Dai Mikurube  <dmikurube@google.com>
     2
     3        Reviewed by Kent Tamura.
     4
     5        Implement "required" attribute for select tags
     6        https://bugs.webkit.org/show_bug.cgi?id=50380
     7
     8        Added tests for require attributes, valueMissing and vadility check for select elements.
     9
     10        * fast/forms/ValidityState-valueMissing-001-expected.txt:
     11        * fast/forms/ValidityState-valueMissing-001.html:
     12        * fast/forms/ValidityState-valueMissing-002-expected.txt:
     13        * fast/forms/ValidityState-valueMissing-002.html:
     14        * fast/forms/ValidityState-valueMissing-003-expected.txt:
     15        * fast/forms/ValidityState-valueMissing-003.html:
     16        * fast/forms/checkValidity-002-expected.txt:
     17        * fast/forms/checkValidity-002.html:
     18        * fast/forms/required-attribute-001-expected.txt:
     19        * fast/forms/required-attribute-001.html:
     20        * fast/forms/required-attribute-002-expected.txt:
     21        * fast/forms/required-attribute-002.html:
     22        * fast/forms/resources/select-live-pseudo-selectors.js: Added.
     23        (makeInvalid):
     24        (appendOption):
     25        (backgroundOf):
     26        * fast/forms/script-tests/validationMessage.js:
     27        * fast/forms/select-live-pseudo-selectors-expected.txt: Added.
     28        * fast/forms/select-live-pseudo-selectors.html: Added.
     29        * fast/forms/validationMessage-expected.txt:
     30        * platform/mac/fast/objc/dom-html-select-live-pseudo-selectors.html: Added.
     31        * platform/mac/fast/objc/dom-html-select-live-pseudo-selectors-expected.txt: Added.
     32
    1332010-12-08  Yuta Kitamura  <yutak@chromium.org>
    234

  • trunk/LayoutTests/fast/forms/ValidityState-valueMissing-001-expected.txt

    r46062 r73494  
    1 There are two form control elements below, both required and blank: validity.valueMissing should be true in both cases.
     1This test checks validity.valueMissing with blank values, blank options selected, or nothing selected.
    22
    3  
    4 SUCCESS
     3On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
     4
     5
     6PASS valueMissingFor("input") is true
     7PASS valueMissingFor("textarea") is true
     8PASS valueMissingFor("select-no-option") is true
     9PASS valueMissingFor("select-placeholder-selected") is true
     10PASS valueMissingFor("select-without-placeholder") is false
     11PASS valueMissingFor("select-placeholder-selected-size2") is false
     12PASS valueMissingFor("select-without-placeholder-size2") is false
     13PASS valueMissingFor("select-none-selected-multiple") is true
     14PASS valueMissingFor("select-fake-placeholder-selected-multiple") is false
     15PASS valueMissingFor("select-without-fake-placeholder-multiple") is false
     16PASS valueMissingFor("select-none-selected-size2-multiple") is true
     17PASS valueMissingFor("select-fake-placeholder-selected-size2-multiple") is false
     18PASS valueMissingFor("select-without-fake-placeholder-size2-multiple") is false
     19PASS valueMissingFor("select-optgroup") is false
     20PASS valueMissingFor("select-disabled-option") is false
     21PASS successfullyParsed is true
     22
     23TEST COMPLETE
     24             

  • trunk/LayoutTests/fast/forms/ValidityState-valueMissing-001.html

    r46062 r73494  
     1<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    12<html>
    23<head>
    34<title>required and basic valueMissing</title>
     5<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
     6<script src="../../fast/js/resources/js-test-pre.js"></script>
     7</head>
     8<body>
     9<p id="description"></p>
     10<div id="console"></div>
     11<input id="input" name="victim" required/>
     12<textarea id="textarea" name="victim" required></textarea>
     13<select id="select-no-option" name="victim" required>
     14</select>
     15<select id="select-placeholder-selected" name="victim" required>
     16  <option value="" selected />
     17  <option value="X">X</option>
     18</select>
     19<select id="select-without-placeholder" name="victim" required>
     20  <option value="X">X</option>
     21  <option value="" selected />
     22</select>
     23<select id="select-placeholder-selected-size2" name="victim" size="2" required>
     24  <option value="" selected />
     25  <option value="X">X</option>
     26</select>
     27<select id="select-without-placeholder-size2" name="victim" size="2" required>
     28  <option value="X">X</option>
     29  <option value="" selected />
     30</select>
     31<select id="select-none-selected-multiple" name="victim" multiple required>
     32  <option value="" />
     33  <option value="X">X</option>
     34</select>
     35<select id="select-fake-placeholder-selected-multiple" name="victim" multiple required>
     36  <option value="" selected />
     37  <option value="X">X</option>
     38</select>
     39<select id="select-without-fake-placeholder-multiple" name="victim" multiple required>
     40  <option value="X">X</option>
     41  <option value="" selected />
     42</select>
     43<select id="select-none-selected-size2-multiple" name="victim" multiple size="2" required>
     44  <option value="" />
     45  <option value="X">X</option>
     46</select>
     47<select id="select-fake-placeholder-selected-size2-multiple" name="victim" multiple size="2" required>
     48  <option value="" selected />
     49  <option value="X">X</option>
     50</select>
     51<select id="select-without-fake-placeholder-size2-multiple" name="victim" multiple size="2" required>
     52  <option value="X">X</option>
     53  <option value="" selected />
     54</select>
     55<select id="select-optgroup" name="victim" required>
     56  <optgroup label="1">
     57    <option value="" selected />
     58  </optgroup>
     59  <option value="X">X</option>
     60</select>
     61<select id="select-disabled-option" name="victim" required>
     62  <option value="" disabled selected />
     63  <option value="X">X</option>
     64</select>
    465<script language="JavaScript" type="text/javascript">
    5     function log(message) {
    6         document.getElementById("console").innerHTML += "<li>"+message+"</li>";
     66    function valueMissingFor(id) {
     67        return document.getElementById(id).validity.valueMissing;
    768    }
    869
    9     function test() {
    10         if (window.layoutTestController)
    11             layoutTestController.dumpAsText();
     70    description("This test checks validity.valueMissing with blank values, blank options selected, or nothing selected.");
    1271
    13         v = document.getElementsByName("victim");
     72    v = document.getElementsByName("victim");
    1473
    15         log((v[0].validity.valueMissing && v[1].validity.valueMissing) ? "SUCCESS" : "FAILURE");
    16     }
     74    shouldBeTrue('valueMissingFor("input")');
     75    shouldBeTrue('valueMissingFor("textarea")');
     76    shouldBeTrue('valueMissingFor("select-no-option")');
     77    shouldBeTrue('valueMissingFor("select-placeholder-selected")');
     78    shouldBeFalse('valueMissingFor("select-without-placeholder")');
     79    shouldBeFalse('valueMissingFor("select-placeholder-selected-size2")');
     80    shouldBeFalse('valueMissingFor("select-without-placeholder-size2")');
     81    shouldBeTrue('valueMissingFor("select-none-selected-multiple")');
     82    shouldBeFalse('valueMissingFor("select-fake-placeholder-selected-multiple")');
     83    shouldBeFalse('valueMissingFor("select-without-fake-placeholder-multiple")');
     84    shouldBeTrue('valueMissingFor("select-none-selected-size2-multiple")');
     85    shouldBeFalse('valueMissingFor("select-fake-placeholder-selected-size2-multiple")');
     86    shouldBeFalse('valueMissingFor("select-without-fake-placeholder-size2-multiple")');
     87    shouldBeFalse('valueMissingFor("select-optgroup")');
     88    shouldBeFalse('valueMissingFor("select-disabled-option")');
     89
     90    var successfullyParsed = true;
    1791</script>
    18 </head>
    19 <body onload="test()">
    20 <p>There are two form control elements below, both required and blank:
    21 validity.valueMissing should be true in both cases.</p>
    22 <input name="victim" required/>
    23 <textarea name="victim" required></textarea>
    24 <hr>
    25 <ol id="console"></ol>
     92<script src="../../fast/js/resources/js-test-post.js"></script>
    2693</body>
    2794</html>

  • trunk/LayoutTests/fast/forms/ValidityState-valueMissing-002-expected.txt

    r46062 r73494  
    1 There are two form control elements below, both required and with some value: validity.valueMissing should be false in both cases.
     1This test checks validity.valueMissing with some values or options with some values selected.
    22
    3  
    4 SUCCESS
     3On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
     4
     5
     6PASS valueMissingFor("input") is false
     7PASS valueMissingFor("textarea") is false
     8PASS valueMissingFor("select-with-placeholder") is false
     9PASS valueMissingFor("select-without-placeholder") is false
     10PASS valueMissingFor("select-with-fake-placeholder-size2") is false
     11PASS valueMissingFor("select-without-fake-placeholder-size2") is false
     12PASS valueMissingFor("select-with-fake-placeholder-multiple") is false
     13PASS valueMissingFor("select-without-fake-placeholder-multiple") is false
     14PASS valueMissingFor("select-with-fake-placeholder-size2-multiple") is false
     15PASS valueMissingFor("select-without-fake-placeholder-size2-multiple") is false
     16PASS successfullyParsed is true
     17
     18TEST COMPLETE
     19         

  • trunk/LayoutTests/fast/forms/ValidityState-valueMissing-002.html

    r46062 r73494  
     1<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    12<html>
    23<head>
    34<title>required and basic valueMissing 2</title>
     5<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
     6<script src="../../fast/js/resources/js-test-pre.js"></script>
     7</head>
     8<body>
     9<p id="description"></p>
     10<div id="console"></div>
     11<input id="input" name="victim" value="something" required/>
     12<textarea id="textarea" name="victim" required>something</textarea>
     13<select id="select-with-placeholder" name="victim" required>
     14  <option value="" />
     15  <option value="X" selected>X</option>
     16</select>
     17<select id="select-without-placeholder" name="victim" required>
     18  <option value="X" selected>X</option>
     19  <option value="" />
     20</select>
     21<select id="select-with-fake-placeholder-size2" name="victim" size="2" required>
     22  <option value="" />
     23  <option value="X" selected>X</option>
     24</select>
     25<select id="select-without-fake-placeholder-size2" name="victim" size="2" required>
     26  <option value="X" selected>X</option>
     27  <option value="" />
     28</select>
     29<select id="select-with-fake-placeholder-multiple" name="victim" multiple required>
     30  <option value="" />
     31  <option value="X" selected>X</option>
     32</select>
     33<select id="select-without-fake-placeholder-multiple" name="victim" multiple required>
     34  <option value="X" selected>X</option>
     35  <option value="" />
     36</select>
     37<select id="select-with-fake-placeholder-size2-multiple" name="victim" multiple size="2" required>
     38  <option value="" />
     39  <option value="X" selected>X</option>
     40</select>
     41<select id="select-without-fake-placeholder-size2-multiple" name="victim" multiple size="2" required>
     42  <option value="X" selected>X</option>
     43  <option value="" />
     44</select>
    445<script language="JavaScript" type="text/javascript">
    5     function log(message) {
    6         document.getElementById("console").innerHTML += "<li>"+message+"</li>";
     46    function valueMissingFor(id) {
     47        return document.getElementById(id).validity.valueMissing;
    748    }
    849
    9     function test() {
    10         if (window.layoutTestController)
    11             layoutTestController.dumpAsText();
     50    description("This test checks validity.valueMissing with some values or options with some values selected.");
    1251
    13         v = document.getElementsByName("victim");
     52    v = document.getElementsByName("victim");
    1453
    15         log((!v[0].validity.valueMissing && !v[1].validity.valueMissing) ? "SUCCESS" : "FAILURE");
    16     }
     54    shouldBeFalse('valueMissingFor("input")');
     55    shouldBeFalse('valueMissingFor("textarea")');
     56    shouldBeFalse('valueMissingFor("select-with-placeholder")');
     57    shouldBeFalse('valueMissingFor("select-without-placeholder")');
     58    shouldBeFalse('valueMissingFor("select-with-fake-placeholder-size2")');
     59    shouldBeFalse('valueMissingFor("select-without-fake-placeholder-size2")');
     60    shouldBeFalse('valueMissingFor("select-with-fake-placeholder-multiple")');
     61    shouldBeFalse('valueMissingFor("select-without-fake-placeholder-multiple")');
     62    shouldBeFalse('valueMissingFor("select-with-fake-placeholder-size2-multiple")');
     63    shouldBeFalse('valueMissingFor("select-without-fake-placeholder-size2-multiple")');
     64
     65    var successfullyParsed = true;
    1766</script>
    18 </head>
    19 <body onload="test()">
    20 <p>There are two form control elements below, both required and with some value:
    21 validity.valueMissing should be false in both cases.</p>
    22 <input name="victim" value="something" required/>
    23 <textarea name="victim" required>something</textarea>
    24 <hr>
    25 <ol id="console"></ol>
     67<script src="../../fast/js/resources/js-test-post.js"></script>
    2668</body>
    2769</html>

  • trunk/LayoutTests/fast/forms/ValidityState-valueMissing-003-expected.txt

    r46062 r73494  
    1 There are two disabled form control elements below, both required and with some value: validity.valueMissing should be false in both cases.
     1This test checks validity.valueMissing of disabled form controls with blank values, blank options selected, or nothing selected.
    22
    3  
    4 SUCCESS
     3On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
     4
     5
     6PASS valueMissingFor("input") is false
     7PASS valueMissingFor("textarea") is false
     8PASS valueMissingFor("select-no-option") is false
     9PASS valueMissingFor("select-placeholder-selected") is false
     10PASS valueMissingFor("select-without-placeholder") is false
     11PASS valueMissingFor("select-placeholder-selected-size2") is false
     12PASS valueMissingFor("select-without-placeholder-size2") is false
     13PASS valueMissingFor("select-none-selected-multiple") is false
     14PASS valueMissingFor("select-fake-placeholder-selected-multiple") is false
     15PASS valueMissingFor("select-without-fake-placeholder-multiple") is false
     16PASS valueMissingFor("select-none-selected-size2-multiple") is false
     17PASS valueMissingFor("select-fake-placeholder-selected-size2-multiple") is false
     18PASS valueMissingFor("select-without-fake-placeholder-size2-multiple") is false
     19PASS successfullyParsed is true
     20
     21TEST COMPLETE
     22           

  • trunk/LayoutTests/fast/forms/ValidityState-valueMissing-003.html

    r46062 r73494  
     1<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    12<html>
    23<head>
    34<title>required and valueMissing on disabled elements</title>
     5<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
     6<script src="../../fast/js/resources/js-test-pre.js"></script>
     7</head>
     8<body>
     9<p id="description"></p>
     10<div id="console"></div>
     11<input id="input" name="victim" disabled required />
     12<textarea id="textarea" name="victim" disabled required></textarea>
     13<select id="select-no-option" name="victim" disabled required>
     14</select>
     15<select id="select-placeholder-selected" name="victim" disabled required>
     16  <option value="" selected />
     17  <option value="X">X</option>
     18</select>
     19<select id="select-without-placeholder" name="victim" disabled required>
     20  <option value="X">X</option>
     21  <option value="" selected />
     22</select>
     23<select id="select-placeholder-selected-size2" name="victim" size="2" disabled required>
     24  <option value="" selected />
     25  <option value="X">X</option>
     26</select>
     27<select id="select-without-placeholder-size2" name="victim" size="2" disabled required>
     28  <option value="X">X</option>
     29  <option value="" selected />
     30</select>
     31<select id="select-none-selected-multiple" name="victim" multiple disabled required>
     32  <option value="" />
     33  <option value="X">X</option>
     34</select>
     35<select id="select-fake-placeholder-selected-multiple" name="victim" multiple disabled required>
     36  <option value="" selected />
     37  <option value="X">X</option>
     38</select>
     39<select id="select-without-fake-placeholder-multiple" name="victim" multiple disabled required>
     40  <option value="X">X</option>
     41  <option value="" selected />
     42</select>
     43<select id="select-none-selected-size2-multiple" name="victim" multiple size="2" disabled required>
     44  <option value="" />
     45  <option value="X">X</option>
     46</select>
     47<select id="select-fake-placeholder-selected-size2-multiple" name="victim" multiple size="2" disabled required>
     48  <option value="" selected />
     49  <option value="X">X</option>
     50</select>
     51<select id="select-without-fake-placeholder-size2-multiple" name="victim" multiple size="2" disabled required>
     52  <option value="X">X</option>
     53  <option value="" selected />
     54</select>
    455<script language="JavaScript" type="text/javascript">
    5     function log(message) {
    6         document.getElementById("console").innerHTML += "<li>"+message+"</li>";
     56    function valueMissingFor(id) {
     57        return document.getElementById(id).validity.valueMissing;
    758    }
    859
    9     function test() {
    10         if (window.layoutTestController)
    11             layoutTestController.dumpAsText();
     60    description("This test checks validity.valueMissing of disabled form controls with blank values, blank options selected, or nothing selected.");
    1261
    13         v = document.getElementsByName("victim");
     62    v = document.getElementsByName("victim");
    1463
    15         log((!v[0].validity.valueMissing && !v[1].validity.valueMissing) ? "SUCCESS" : "FAILURE");
    16     }
     64    shouldBeFalse('valueMissingFor("input")');
     65    shouldBeFalse('valueMissingFor("textarea")');
     66    shouldBeFalse('valueMissingFor("select-no-option")');
     67    shouldBeFalse('valueMissingFor("select-placeholder-selected")');
     68    shouldBeFalse('valueMissingFor("select-without-placeholder")');
     69    shouldBeFalse('valueMissingFor("select-placeholder-selected-size2")');
     70    shouldBeFalse('valueMissingFor("select-without-placeholder-size2")');
     71    shouldBeFalse('valueMissingFor("select-none-selected-multiple")');
     72    shouldBeFalse('valueMissingFor("select-fake-placeholder-selected-multiple")');
     73    shouldBeFalse('valueMissingFor("select-without-fake-placeholder-multiple")');
     74    shouldBeFalse('valueMissingFor("select-none-selected-size2-multiple")');
     75    shouldBeFalse('valueMissingFor("select-fake-placeholder-selected-size2-multiple")');
     76    shouldBeFalse('valueMissingFor("select-without-fake-placeholder-size2-multiple")');
     77
     78    var successfullyParsed = true;
    1779</script>
    18 </head>
    19 <body onload="test()">
    20 <p>There are two disabled form control elements below, both required and with some value:
    21 validity.valueMissing should be false in both cases.</p>
    22 <input name="victim" disabled required />
    23 <textarea name="victim" disabled required></textarea>
    24 <hr>
    25 <ol id="console"></ol>
     80<script src="../../fast/js/resources/js-test-post.js"></script>
    2681</body>
    2782</html>

  • trunk/LayoutTests/fast/forms/checkValidity-002-expected.txt

    r47649 r73494  
    1 This test checks if checkValidity() returns correctly a false (meaning error) result on invalid elements.
     1This test checks if checkValidity() returns correctly a false (meaning error) result on invalid elements, and returns a true result on a blank but valid elements. Blank but non-placeholder label options are valid.
    22
    33On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    44
    55
    6  
    7 PASS v[i].checkValidity() is false
    8 PASS v[i].checkValidity() is false
    9 PASS v[i].checkValidity() is false
     6   
     7PASS checkValidityFor("input-empty") is false
     8PASS checkValidityFor("input-pattern-mismatch") is false
     9PASS checkValidityFor("textarea") is false
     10PASS checkValidityFor("select-placeholder") is false
     11PASS checkValidityFor("select-non-placeholder") is true
    1012PASS successfullyParsed is true
    1113

  • trunk/LayoutTests/fast/forms/checkValidity-002.html

    r47649 r73494  
    88<p id="description"></p>
    99<form method="get">
    10 <input name="victim" type="text" required/>
    11 <input name="victim" type="text" pattern="Lorem ipsum" value="Loremipsum"/>
    12 <textarea name="victim" required></textarea>
     10<input id="input-empty" name="victim" type="text" required/>
     11<input id="input-pattern-mismatch" name="victim" type="text" pattern="Lorem ipsum" value="Loremipsum"/>
     12<textarea id="textarea" name="victim" required></textarea>
     13<select id="select-placeholder" name="victim" required>
     14  <option value="" selected />
     15  <option value="X">X</option>
     16</select>
     17<select id="select-non-placeholder" name="victim" required>
     18  <option value="X">X</option>
     19  <option value="" selected />
     20</select>
    1321</form>
    1422<div id="console"></div>
    1523<script>
    16 description("This test checks if checkValidity() returns correctly a false (meaning error) result on invalid elements.");
     24    function checkValidityFor(id) {
     25        return document.getElementById(id).checkValidity();
     26    }
    1727
    18 v = document.getElementsByName("victim");
    19 for (i = 0; i < v.length; i++)
    20     shouldBe("v[i].checkValidity()", "false");
     28    description("This test checks if checkValidity() returns correctly a false (meaning error) result on invalid elements, and returns a true result on a blank but valid elements. Blank but non-placeholder label options are valid.");
    2129
    22 var successfullyParsed = true;
     30    shouldBeFalse('checkValidityFor("input-empty")');
     31    shouldBeFalse('checkValidityFor("input-pattern-mismatch")');
     32    shouldBeFalse('checkValidityFor("textarea")');
     33    shouldBeFalse('checkValidityFor("select-placeholder")');
     34    shouldBeTrue('checkValidityFor("select-non-placeholder")');
     35
     36    var successfullyParsed = true;
    2337</script>
    2438<script src="../js/resources/js-test-post.js"></script>

  • trunk/LayoutTests/fast/forms/required-attribute-001-expected.txt

    r46062 r73494  
    1 There are two form control elements below, both required.
     1There are three form control elements below, all required.
    22
    3  
    4 SUCCESS
     3On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
     4
     5
     6PASS requiredFor("input") is true
     7PASS requiredFor("textarea") is true
     8PASS requiredFor("select") is true
     9PASS successfullyParsed is true
     10
     11TEST COMPLETE
     12 

  • trunk/LayoutTests/fast/forms/required-attribute-001.html

    r46062 r73494  
     1<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    12<html>
    23<head>
    34<title>required attribute presence test</title>
     5<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
     6<script src="../../fast/js/resources/js-test-pre.js"></script>
     7</head>
     8<body>
     9<p id="description"></p>
     10<div id="console"></div>
     11<input id="input" name="victim" required />
     12<textarea id="textarea" name="victim" required></textarea>
     13<select id="select" name="victim" required>
     14  <option value="" selected />
     15  <option value="X">X</option>
     16</select>
    417<script language="JavaScript" type="text/javascript">
    5     function log(message) {
    6         document.getElementById("console").innerHTML += "<li>"+message+"</li>";
     18    function requiredFor(id) {
     19        return document.getElementById(id).required;
    720    }
    821
    9     function test() {
    10         if (window.layoutTestController)
    11             layoutTestController.dumpAsText();
     22    description("There are three form control elements below, all required.");
    1223
    13         v = document.getElementsByName("victim");
     24    v = document.getElementsByName("victim");
    1425
    15         log((v[0].required && v[1].required) ? "SUCCESS" : "FAILURE");
    16     }
     26    shouldBeTrue('requiredFor("input")');
     27    shouldBeTrue('requiredFor("textarea")');
     28    shouldBeTrue('requiredFor("select")');
     29
     30    var successfullyParsed = true;
    1731</script>
    18 </head>
    19 <body onload="test()">
    20 <p>There are two form control elements below, both required.</p>
    21 <input name="victim" required />
    22 <textarea name="victim" required></textarea>
    23 <hr>
    24 <ol id="console"></ol>
     32<script src="../../fast/js/resources/js-test-post.js"></script>
    2533</body>
    2634</html>

  • trunk/LayoutTests/fast/forms/required-attribute-002-expected.txt

    r46062 r73494  
    1 There are two form control elements below, both optional. They're set as required via required DOM attribute.
     1There are three form control elements below, all optional. They're set as required via required DOM attribute.
    22
    3  
    4 SUCCESS
     3On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
     4
     5
     6Before set:
     7PASS requiredFor("input") is false
     8PASS requiredFor("textarea") is false
     9PASS requiredFor("select") is false
     10
     11After set:
     12PASS requiredFor("input") is true
     13PASS requiredFor("textarea") is true
     14PASS requiredFor("select") is true
     15
     16PASS successfullyParsed is true
     17
     18TEST COMPLETE
     19 

  • trunk/LayoutTests/fast/forms/required-attribute-002.html

    r46062 r73494  
     1<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
    12<html>
    23<head>
    34<title>required attribute JS set</title>
     5<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
     6<script src="../../fast/js/resources/js-test-pre.js"></script>
     7</head>
     8<body>
     9<p id="description"></p>
     10<div id="console"></div>
     11<input id="input" name="victim" />
     12<textarea id="textarea" name="victim"></textarea>
     13<select id="select" name="victim">
     14  <option value="" selected />
     15  <option value="X">X</option>
     16</select>
    417<script language="JavaScript" type="text/javascript">
    5     function log(message) {
    6         document.getElementById("console").innerHTML += "<li>"+message+"</li>";
     18    function requiredFor(id) {
     19        return document.getElementById(id).required;
    720    }
    821
    9     function test() {
    10         if (window.layoutTestController)
    11             layoutTestController.dumpAsText();
     22    description("There are three form control elements below, all optional. They're set as required via required DOM attribute.");
    1223
    13         v = document.getElementsByName("victim");
     24    v = document.getElementsByName("victim");
    1425
    15         if (v[0].required == false && v[1].required == false) {
    16             v[0].required = true;
    17             v[1].required = true;
    18             log ((v[0].required && v[1].required) ? "SUCCESS" : "FAILURE");
    19         }
    20         else
    21             log("FAILURE");
    22     }
     26    debug("Before set:");
     27    shouldBeFalse('requiredFor("input")');
     28    shouldBeFalse('requiredFor("textarea")');
     29    shouldBeFalse('requiredFor("select")');
     30    debug("");
     31
     32    v[0].required = true;
     33    v[1].required = true;
     34    v[2].required = true;
     35
     36    debug("After set:");
     37    shouldBeTrue('requiredFor("input")');
     38    shouldBeTrue('requiredFor("textarea")');
     39    shouldBeTrue('requiredFor("select")');
     40    debug("");
     41
     42    var successfullyParsed = true;
    2343</script>
    24 </head>
    25 <body onload="test()">
    26 <p>There are two form control elements below, both optional. They're set as required via required DOM attribute.</p>
    27 <input name="victim" />
    28 <textarea name="victim"></textarea>
    29 <hr>
    30 <ol id="console"></ol>
     44<script src="../../fast/js/resources/js-test-post.js"></script>
    3145</body>
    3246</html>

  • trunk/LayoutTests/fast/forms/script-tests/validationMessage.js

    r56242 r73494  
    2424form.appendChild(requiredTextArea);
    2525shouldBe("requiredTextArea.validationMessage", "'value missing'");
     26
     27// A required select with an empty value
     28var requiredSelect = document.createElement("select");
     29requiredSelect.name = "requiredSelect";
     30requiredSelect.required = true;
     31form.appendChild(requiredSelect);
     32shouldBe("requiredSelect.validationMessage", "'value missing'");
    2633
    2734// A type=email input for the "type mismatch" flag

  • trunk/LayoutTests/fast/forms/validationMessage-expected.txt

    r56242 r73494  
    77PASS requiredInput.validationMessage is 'value missing'
    88PASS requiredTextArea.validationMessage is 'value missing'
     9PASS requiredSelect.validationMessage is 'value missing'
    910PASS emailInput.validationMessage is 'type mismatch'
    1011PASS but.validationMessage is ''

  • trunk/WebCore/ChangeLog

    r73492 r73494  
     12010-12-08  Dai Mikurube  <dmikurube@google.com>
     2
     3        Reviewed by Kent Tamura.
     4
     5        Implement "required" attribute for select tags
     6        https://bugs.webkit.org/show_bug.cgi?id=50380
     7
     8        Test: fast/forms/select-live-pseudo-selectors.html
     9              platform/mac/fast/objc/dom-html-select-live-pseudo-selectors.html
     10
     11        * html/HTMLSelectElement.cpp:
     12        (WebCore::HTMLSelectElement::deselectItems): Added calling setNeedsValidityCheck() to enable validity check after changing. No tests for this change since this function is not exposed to JavaScript or any web interface.
     13        (WebCore::HTMLSelectElement::setSelectedIndex): Added calling setNeedsValidityCheck().
     14        (WebCore::HTMLSelectElement::setSelectedIndexByUser): Added calling setNeedsValidityCheck().
     15        (WebCore::HTMLSelectElement::valueMissing): Added valueMissing() to check if selecting an invalid or placeholder label option when a valid required attribute is specified.
     16        (WebCore::HTMLSelectElement::listBoxSelectItem): Added calling setNeedsValidityCheck(). No tests for this change since it is not called yet. Look at the bug 36177 and the changeset 56180.
     17        (WebCore::HTMLSelectElement::add): Added calling setNeedsValidityCheck().
     18        (WebCore::HTMLSelectElement::remove): Added calling setNeedsValidityCheck().
     19        (WebCore::HTMLSelectElement::restoreFormControlState): Added calling setNeedsValidityCheck().
     20        (WebCore::HTMLSelectElement::parseMappedAttribute): Added calling setNeedsValidityCheck().
     21        (WebCore::HTMLSelectElement::selectAll): Added calling setNeedsValidityCheck().
     22        (WebCore::HTMLSelectElement::reset): Added calling setNeedsValidityCheck().
     23        (WebCore::HTMLSelectElement::updateListBoxSelection): Added calling setNeedsValidityCheck(). Skipped adding tests for this change as too complicated..
     24        (WebCore::HTMLSelectElement::setLength): Added calling setNeedsValidityCheck().
     25        (WebCore::HTMLSelectElement::isRequiredFormControl): Check if required or not.
     26        (WebCore::HTMLSelectElement::hasPlaceholderLabelOption): Added.
     27        * html/HTMLSelectElement.h:
     28        (WebCore::HTMLSelectElement::isOptionalFormControl): Check if not required.
     29        * html/HTMLSelectElement.idl: Added a required attribute to select elements..
     30        * html/ValidityState.cpp:
     31        (WebCore::ValidityState::valueMissing): Added valueMissing check for select elements into the global checker, ValidityState::valueMissing().
     32
    1332010-12-08  Renata Hodovan  <reni@webkit.org>
    234

  • trunk/WebCore/html/HTMLSelectElement.cpp

    r66929 r73494  
    7979{
    8080    SelectElement::deselectItems(m_data, this, excludeElement);
     81    setNeedsValidityCheck();
    8182}
    8283
    … …  
    8485{
    8586    SelectElement::setSelectedIndex(m_data, this, optionIndex, deselect, false, false);
     87    setNeedsValidityCheck();
    8688}
    8789
    … …  
    9294    if (!m_data.usesMenuList()) {
    9395        updateSelectedState(m_data, this, optionIndex, allowMultipleSelection, false);
     96        setNeedsValidityCheck();
    9497        if (fireOnChangeNow)
    9598            listBoxOnChange();
    … …  
    105108   
    106109    SelectElement::setSelectedIndex(m_data, this, optionIndex, deselect, fireOnChangeNow, true);
     110    setNeedsValidityCheck();
     111}
     112
     113bool HTMLSelectElement::hasPlaceholderLabelOption() const
     114{
     115    // The select element has no placeholder label option if it has an attribute "multiple" specified or a display size of non-1.
     116    //
     117    // The condition "size() > 1" is actually not compliant with the HTML5 spec as of Dec 3, 2010. "size() != 1" is correct.
     118    // Using "size() > 1" here because size() may be 0 in WebKit.
     119    // See the discussion at https://bugs.webkit.org/show_bug.cgi?id=43887
     120    //
     121    // "0 size()" happens when an attribute "size" is absent or an invalid size attribute is specified.
     122    // In this case, the display size should be assumed as the default.
     123    // The default display size is 1 for non-multiple select elements, and 4 for multiple select elements.
     124    //
     125    // Finally, if size() == 0 and non-multiple, the display size can be assumed as 1.
     126    if (multiple() || size() > 1)
     127        return false;
     128
     129    int listIndex = optionToListIndex(0);
     130    ASSERT(listIndex >= 0);
     131    if (listIndex < 0)
     132        return false;
     133    HTMLOptionElement* option = static_cast<HTMLOptionElement*>(listItems()[listIndex]);
     134    return !option->disabled() && !listIndex && option->value().isEmpty();
     135}
     136
     137bool HTMLSelectElement::valueMissing() const
     138{
     139    if (!isRequiredFormControl())
     140        return false;
     141
     142    int firstSelectionIndex = selectedIndex();
     143
     144    // If a non-placeholer label option is selected (firstSelectionIndex > 0), it's not value-missing.
     145    return firstSelectionIndex < 0 || (!firstSelectionIndex && hasPlaceholderLabelOption());
    107146}
    108147
    … …  
    113152    else {
    114153        updateSelectedState(m_data, this, listIndex, allowMultiplySelections, shift);
     154        setNeedsValidityCheck();
    115155        if (fireOnChangeNow)
    116156            listBoxOnChange();
    … …  
    145185
    146186    insertBefore(element, before, ec);
     187    setNeedsValidityCheck();
    147188}
    148189
    … …  
    157198    ExceptionCode ec;
    158199    item->parentNode()->removeChild(item, ec);
     200    setNeedsValidityCheck();
    159201}
    160202
    … …  
    196238{
    197239    SelectElement::restoreFormControlState(m_data, this, state);
     240    setNeedsValidityCheck();
    198241}
    199242
    … …  
    216259
    217260        m_data.setSize(size);
     261        setNeedsValidityCheck();
    218262        if ((oldUsesMenuList != m_data.usesMenuList() || (!oldUsesMenuList && m_data.size() != oldSize)) && attached()) {
    219263            detach();
    … …  
    221265            setRecalcListItems();
    222266        }
    223     } else if (attr->name() == multipleAttr)
     267    } else if (attr->name() == multipleAttr) {
    224268        SelectElement::parseMultipleAttribute(m_data, this, attr);
    225     else if (attr->name() == accesskeyAttr) {
     269        setNeedsValidityCheck();
     270    } else if (attr->name() == accesskeyAttr) {
    226271        // FIXME: ignore for the moment
    227272    } else if (attr->name() == alignAttr) {
    … …  
    256301{
    257302    SelectElement::selectAll(m_data, this);
     303    setNeedsValidityCheck();
    258304}
    259305
    … …  
    316362{
    317363    SelectElement::reset(m_data, this);
     364    setNeedsValidityCheck();
    318365}
    319366
    … …  
    351398{
    352399    SelectElement::updateListBoxSelection(m_data, this, deselectOtherOptions);
     400    setNeedsValidityCheck();
    353401}
    354402
    … …  
    459507        }
    460508    }
     509    setNeedsValidityCheck();
    461510}
    462511
    … …  
    472521}
    473522
     523bool HTMLSelectElement::isRequiredFormControl() const
     524{
     525    return required();
     526}
     527
    474528} // namespace

  • trunk/WebCore/html/HTMLSelectElement.h

    r66929 r73494  
    4343    virtual void setSelectedIndex(int index, bool deselect = true);
    4444    virtual void setSelectedIndexByUser(int index, bool deselect = true, bool fireOnChangeNow = false, bool allowMultipleSelection = false);
     45
     46    // For ValidityState
     47    bool valueMissing() const;
    4548
    4649    unsigned length() const;
    … …  
    135138    virtual void insertedIntoTree(bool);
    136139
    137     virtual bool isOptionalFormControl() const { return true; }
     140    virtual bool isOptionalFormControl() const { return !isRequiredFormControl(); }
     141    virtual bool isRequiredFormControl() const;
     142
     143    bool hasPlaceholderLabelOption() const;
    138144
    139145    SelectElementData m_data;

  • trunk/WebCore/html/HTMLSelectElement.idl

    r61959 r73494  
    5050        attribute boolean multiple;
    5151        attribute [ConvertNullToNullString] DOMString name;
     52        attribute [Reflect] boolean required;
    5253        attribute long size;
    5354       

  • trunk/WebCore/html/ValidityState.cpp

    r73430 r73494  
    2727#include "HTMLInputElement.h"
    2828#include "HTMLNames.h"
     29#include "HTMLSelectElement.h"
    2930#include "HTMLTextAreaElement.h"
    3031#include "HTMLTreeBuilder.h"
    … …  
    106107{
    107108    HTMLElement* element = toHTMLElement(m_control);
     109    if (!element->willValidate())
     110        return false;
     111
    108112    if (element->hasTagName(inputTag)) {
    109113        HTMLInputElement* input = static_cast<HTMLInputElement*>(element);
    … …  
    113117        HTMLTextAreaElement* textArea = static_cast<HTMLTextAreaElement*>(element);
    114118        return textArea->valueMissing(textArea->value());
     119    }
     120    if (element->hasTagName(selectTag)) {
     121        HTMLSelectElement* select = static_cast<HTMLSelectElement*>(element);
     122        return select->valueMissing();
    115123    }
    116124    return false;
Note: See TracChangeset for help on using the changeset viewer.