View Javadoc
1   /*
2    * Copyright (c) 2002-2025 Gargoyle Software Inc.
3    *
4    * Licensed under the Apache License, Version 2.0 (the "License");
5    * you may not use this file except in compliance with the License.
6    * You may obtain a copy of the License at
7    * https://www.apache.org/licenses/LICENSE-2.0
8    *
9    * Unless required by applicable law or agreed to in writing, software
10   * distributed under the License is distributed on an "AS IS" BASIS,
11   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12   * See the License for the specific language governing permissions and
13   * limitations under the License.
14   */
15  package org.htmlunit.html;
16  
17  import org.htmlunit.WebDriverTestCase;
18  import org.htmlunit.junit.BrowserRunner;
19  import org.htmlunit.junit.annotation.Alerts;
20  import org.junit.Test;
21  import org.junit.runner.RunWith;
22  import org.openqa.selenium.By;
23  import org.openqa.selenium.WebDriver;
24  import org.openqa.selenium.WebElement;
25  import org.openqa.selenium.htmlunit.HtmlUnitDriver;
26  
27  /**
28   * Tests for {@link HtmlColorInput}.
29   *
30   * @author Ronald Brill
31   */
32  @RunWith(BrowserRunner.class)
33  public class HtmlColorInputTest extends WebDriverTestCase {
34  
35      /**
36       * @throws Exception if the test fails
37       */
38      @Test
39      @Alerts({"#000000--null", "#000000--null", "#000000--null"})
40      public void defaultValues() throws Exception {
41          final String html = DOCTYPE_HTML
42              + "<html><head>\n"
43              + "<script>\n"
44              + LOG_TITLE_FUNCTION
45              + "  function test() {\n"
46              + "    var input = document.getElementById('text1');\n"
47              + "    log(input.value + '-' + input.defaultValue + '-' + input.getAttribute('value'));\n"
48  
49              + "    try {\n"
50              + "      input = document.createElement('input');\n"
51              + "      input.type = 'color';\n"
52              + "      log(input.value + '-' + input.defaultValue + '-' + input.getAttribute('value'));\n"
53              + "    } catch(e)  { logEx(e); }\n"
54  
55              + "    var builder = document.createElement('div');\n"
56              + "    builder.innerHTML = '<input type=\"color\">';\n"
57              + "    input = builder.firstChild;\n"
58              + "    log(input.value + '-' + input.defaultValue + '-' + input.getAttribute('value'));\n"
59              + "  }\n"
60              + "</script>\n"
61              + "</head><body onload='test()'>\n"
62              + "<form>\n"
63              + "  <input type='color' id='text1'>\n"
64              + "</form>\n"
65              + "</body></html>";
66  
67          loadPageVerifyTitle2(html);
68      }
69  
70      /**
71       * @throws Exception if the test fails
72       */
73      @Test
74      @Alerts({"#000000--null", "#000000--null", "#000000--null"})
75      public void defaultValuesAfterClone() throws Exception {
76          final String html = DOCTYPE_HTML
77              + "<html><head>\n"
78              + "<script>\n"
79              + LOG_TITLE_FUNCTION
80              + "  function test() {\n"
81              + "    var input = document.getElementById('text1');\n"
82              + "    input = input.cloneNode(false);\n"
83              + "    log(input.value + '-' + input.defaultValue + '-' + input.getAttribute('value'));\n"
84  
85              + "    try {\n"
86              + "      input = document.createElement('input');\n"
87              + "      input.type = 'color';\n"
88              + "      input = input.cloneNode(false);\n"
89              + "      log(input.value + '-' + input.defaultValue + '-' + input.getAttribute('value'));\n"
90              + "    } catch(e)  { logEx(e); }\n"
91  
92              + "    var builder = document.createElement('div');\n"
93              + "    builder.innerHTML = '<input type=\"color\">';\n"
94              + "    input = builder.firstChild;\n"
95              + "    input = input.cloneNode(false);\n"
96              + "    log(input.value + '-' + input.defaultValue + '-' + input.getAttribute('value'));\n"
97              + "  }\n"
98              + "</script>\n"
99              + "</head><body onload='test()'>\n"
100             + "<form>\n"
101             + "  <input type='color' id='text1'>\n"
102             + "</form>\n"
103             + "</body></html>";
104 
105         loadPageVerifyTitle2(html);
106     }
107 
108     /**
109      * Verifies getVisibleText().
110      * @throws Exception if the test fails
111      */
112     @Test
113     @Alerts("")
114     public void getVisibleText() throws Exception {
115         final String htmlContent = DOCTYPE_HTML
116             + "<html>\n"
117             + "<head></head>\n"
118             + "<body>\n"
119             + "<form id='form1'>\n"
120             + "  <input type='color' name='tester' id='tester' value='#ff0000'>\n"
121             + "</form>\n"
122             + "</body></html>";
123 
124         final WebDriver driver = loadPage2(htmlContent);
125         final String text = driver.findElement(By.id("tester")).getText();
126         assertEquals(getExpectedAlerts()[0], text);
127 
128         if (driver instanceof HtmlUnitDriver) {
129             final HtmlPage page = (HtmlPage) getEnclosedPage();
130             assertEquals(getExpectedAlerts()[0], page.getBody().getVisibleText());
131         }
132     }
133 
134     /**
135      * Verifies clear().
136      * @throws Exception if the test fails
137      */
138     @Test
139     @Alerts({"#ff0000", "#000000"})
140     public void clearInput() throws Exception {
141         final String htmlContent = DOCTYPE_HTML
142                 + "<html>\n"
143                 + "<head></head>\n"
144                 + "<body>\n"
145                 + "<form id='form1'>\n"
146                 + "  <input type='color' name='tester' id='tester' value='#ff0000'>\n"
147                 + "</form>\n"
148                 + "</body></html>";
149 
150         final WebDriver driver = loadPage2(htmlContent);
151         final WebElement element = driver.findElement(By.id("tester"));
152 
153         element.clear();
154         assertEquals(getExpectedAlerts()[0], element.getDomAttribute("value"));
155         assertEquals(getExpectedAlerts()[1], element.getDomProperty("value"));
156     }
157 
158     /**
159      * @throws Exception if the test fails
160      */
161     @Test
162     @Alerts("--")
163     public void minMaxStep() throws Exception {
164         final String html = DOCTYPE_HTML
165             + "<html>\n"
166             + "<head>\n"
167             + "<script>\n"
168             + LOG_TITLE_FUNCTION
169             + "  function test() {\n"
170             + "    var input = document.getElementById('tester');\n"
171             + "    log(input.min + '-' + input.max + '-' + input.step);\n"
172             + "  }\n"
173             + "</script>\n"
174             + "</head>\n"
175             + "<body onload='test()'>\n"
176             + "<form>\n"
177             + "  <input type='color' id='tester'>\n"
178             + "</form>\n"
179             + "</body>\n"
180             + "</html>";
181 
182         loadPageVerifyTitle2(html);
183     }
184 
185     /**
186      * @throws Exception if an error occurs
187      */
188     @Test
189     @Alerts({"true", "false", "true", "false", "true"})
190     public void willValidate() throws Exception {
191         final String html = DOCTYPE_HTML
192                 + "<html><head>\n"
193                 + "  <script>\n"
194                 + LOG_TITLE_FUNCTION
195                 + "    function test() {\n"
196                 + "      log(document.getElementById('o1').willValidate);\n"
197                 + "      log(document.getElementById('o2').willValidate);\n"
198                 + "      log(document.getElementById('o3').willValidate);\n"
199                 + "      log(document.getElementById('o4').willValidate);\n"
200                 + "      log(document.getElementById('o5').willValidate);\n"
201                 + "    }\n"
202                 + "  </script>\n"
203                 + "</head>\n"
204                 + "<body onload='test()'>\n"
205                 + "  <form>\n"
206                 + "    <input type='color' id='o1'>\n"
207                 + "    <input type='color' id='o2' disabled>\n"
208                 + "    <input type='color' id='o3' hidden>\n"
209                 + "    <input type='color' id='o4' readonly>\n"
210                 + "    <input type='color' id='o5' style='display: none'>\n"
211                 + "  </form>\n"
212                 + "</body></html>";
213 
214         loadPageVerifyTitle2(html);
215     }
216 
217     /**
218      * @throws Exception if an error occurs
219      */
220     @Test
221     @Alerts({"true",
222              "false-false-false-false-false-false-false-false-false-true-false",
223              "true"})
224     public void validationEmpty() throws Exception {
225         validation("<input type='color' id='e1'>\n", "");
226     }
227 
228     /**
229      * @throws Exception if an error occurs
230      */
231     @Test
232     @Alerts({"false",
233              "false-true-false-false-false-false-false-false-false-false-false",
234              "true"})
235     public void validationCustomValidity() throws Exception {
236         validation("<input type='color' id='e1'>\n", "elem.setCustomValidity('Invalid');");
237     }
238 
239     /**
240      * @throws Exception if an error occurs
241      */
242     @Test
243     @Alerts({"false",
244              "false-true-false-false-false-false-false-false-false-false-false",
245              "true"})
246     public void validationBlankCustomValidity() throws Exception {
247         validation("<input type='color' id='e1'>\n", "elem.setCustomValidity(' ');\n");
248     }
249 
250     /**
251      * @throws Exception if an error occurs
252      */
253     @Test
254     @Alerts({"true",
255              "false-false-false-false-false-false-false-false-false-true-false",
256              "true"})
257     public void validationResetCustomValidity() throws Exception {
258         validation("<input type='color' id='e1'>\n",
259                 "elem.setCustomValidity('Invalid');elem.setCustomValidity('');");
260     }
261 
262     /**
263      * @throws Exception if an error occurs
264      */
265     @Test
266     @Alerts({"true",
267              "false-false-false-false-false-false-false-false-false-true-false",
268              "true"})
269     public void validationRequired() throws Exception {
270         validation("<input type='color' id='e1' required>\n", "");
271     }
272 
273     /**
274      * @throws Exception if an error occurs
275      */
276     @Test
277     @Alerts({"true",
278              "false-false-false-false-false-false-false-false-false-true-false",
279              "true"})
280     public void validationRequiredValueSet() throws Exception {
281         validation("<input type='color' id='e1' required>\n", "elem.value = '#c8c8c8';");
282     }
283 
284     private void validation(final String htmlPart, final String jsPart) throws Exception {
285         final String html = DOCTYPE_HTML
286                 + "<html><head>\n"
287                 + "  <script>\n"
288                 + LOG_TITLE_FUNCTION
289                 + "    function logValidityState(s) {\n"
290                 + "      log(s.badInput"
291                         + "+ '-' + s.customError"
292                         + "+ '-' + s.patternMismatch"
293                         + "+ '-' + s.rangeOverflow"
294                         + "+ '-' + s.rangeUnderflow"
295                         + "+ '-' + s.stepMismatch"
296                         + "+ '-' + s.tooLong"
297                         + "+ '-' + s.tooShort"
298                         + " + '-' + s.typeMismatch"
299                         + " + '-' + s.valid"
300                         + " + '-' + s.valueMissing);\n"
301                 + "    }\n"
302                 + "    function test() {\n"
303                 + "      var elem = document.getElementById('e1');\n"
304                 + jsPart
305                 + "      log(elem.checkValidity());\n"
306                 + "      logValidityState(elem.validity);\n"
307                 + "      log(elem.willValidate);\n"
308                 + "    }\n"
309                 + "  </script>\n"
310                 + "</head>\n"
311                 + "<body onload='test()'>\n"
312                 + "  <form>\n"
313                 + htmlPart
314                 + "  </form>\n"
315                 + "</body></html>";
316 
317         loadPageVerifyTitle2(html);
318     }
319 }