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