LayoutTests/fast/forms/search/search-appearance-basic.html - Issue 100823012: Show delete button in input[type=search] only if the field is editable and focused/hovered.

Side by Side Diff: LayoutTests/fast/forms/search/search-appearance-basic.html

Issue 100823012: Show delete button in input[type=search] only if the field is editable and focused/hovered. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 7 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <body>	2 <body>

3 <style>	3 <style>

4 input {	4 input {

5 margin: 4px;	5 margin: 4px;

6 }	6 }

7	7

8 .inputtext {	8 .inputtext {

9 border: 1px solid #bdc7d8;	9 border: 1px solid #bdc7d8;

10 font-family: "lucida grande", tahoma, verdana, arial, sans-serif;	10 font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

11 font-size: 11px;	11 font-size: 11px;

12 padding: 3px;	12 padding: 3px;

13 }	13 }

14 .inputsearch {	14 .inputsearch {

15 background:white url(../resources/green.jpg) no-repeat 3px 4px;	15 background:white url(../resources/green.jpg) no-repeat 3px 4px;

16 padding-left:17px;	16 padding-left:17px;

17 }	17 }

18 </style>	18 </style>

19 </style>	19 </style>

20	20

21 <!-- no style for reference -->	21 <!-- no style for reference -->

22 <input type="search" value="foo"> <br>	22 <input type="search" value="foo"> <input type="search" value="foo" id="hovered"> <br>

	23

	24 <input type="search" readonly value="foo">

	25 <input type="search" disabled value="foo"> <br>

23	26

24 <!-- border -->	27 <!-- border -->

25 <input type="search" value="foo" style="border: 3px solid lime;">	28 <input type="search" value="foo" style="border: 3px solid lime;">

26 <input type="search" value="foo" style="border-radius: 6px;"> <br>	29 <input type="search" value="foo" style="border-radius: 6px;"> <br>

27 <div style="background-color: #888888; width: 163px; height: 45px; background-po sition: 100% 0;">	30 <div style="background-color: #888888; width: 163px; height: 45px; background-po sition: 100% 0;">

28 <input type="search" value="default text" style="margin-top: 9px; margin-left: 11px; border-radius: 9px; width: 133px; background-color: #00FF00;">	31 <input type="search" value="default text" style="margin-top: 9px; margin-left: 11px; border-radius: 9px; width: 133px; background-color: #00FF00;">

29 </div>	32 </div>

30	33

31 <!-- background -->	34 <!-- background -->

32 <input type="search" value="foo" style="background: linear-gradient(to bottom, # dea 0%,#9c7 44%,#494 100%);"> <br>	35 <input type="search" value="foo" style="background: linear-gradient(to bottom, # dea 0%,#9c7 44%,#494 100%);"> <br>

33	36

34 <!-- shadow -->	37 <!-- shadow -->

35 <input type="search" value="foo" style="box-shadow: 4px 4px 10px rgba(255,0,0,0. 5), inset 4px 4px 4px rgba(0,255,0,0.5);"> <br>	38 <input type="search" value="foo" style="box-shadow: 4px 4px 10px rgba(255,0,0,0. 5), inset 4px 4px 4px rgba(0,255,0,0.5);"> <br>

36	39

37 <!-- font-size -->	40 <!-- font-size -->

38 <input type="search" value="foo" style="font-size: 16px;">	41 <input type="search" value="foo" style="font-size: 16px;">

39 <input type="search" value="foo" style="font-size: 20px;">	42 <input type="search" value="foo" style="font-size: 20px;">

40 <input type="search" value="foo" style="font-size: 24px;"> <br>	43 <input type="search" value="foo" style="font-size: 24px;"> <br>

41	44

42 <!-- zoom -->	45 <!-- zoom -->

43 <input type="search" value="foo" style="zoom: 1.5;">	46 <input type="search" value="foo" style="zoom: 1.5;">

44 <input type="search" value="foo" style="zoom: 2;"> <br>	47 <input type="search" value="foo" style="zoom: 2;"> <br>

45 <input type="search" results="0" value="foo" style="zoom: 1.5;">	48 <input type="search" results="0" value="foo" style="zoom: 1.5;">

46 <input type="search" results="0" value="foo" style="zoom: 2;"> <br>	49 <input type="search" results="0" value="foo" style="zoom: 2;"> <br>

47	50

48 <!-- various style -->	51 <!-- various style -->

49 <input type="search" class="inputtext inputsearch" title="Search for Events" pla ceholder="Search for Events" id="q_dashboard" name="q" value="" results="10" />	52 <input type="search" class="inputtext inputsearch" title="Search for Events" pla ceholder="Search for Events" id="q_dashboard" name="q" value="" results="10" />

	53

	54 <script>

	55 var input = document.getElementById('hovered');

	56 if (window.eventSender)

	57 eventSender.mouseMoveTo(input.offsetLeft + input.offsetWidth / 2, input.offs etTop + input.offsetHeight / 2);

	58 document.querySelector('input[readonly]').focus();

	59 </script>

50 </body>	60 </body>

OLD	NEW

« no previous file with comments | « LayoutTests/fast/forms/search-cancel-button-style-sharing.html ('k') | Source/core/css/html.css » ('j') | Source/core/css/html.css » ('J')