LayoutTests/dialog/top-layer-stacking-expected.html - Issue 23060031: Set <dialog> width and height to 'fit-content'.

Side by Side Diff: LayoutTests/dialog/top-layer-stacking-expected.html

Issue 23060031: Set <dialog> width and height to 'fit-content'. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: give dialog height auto for dialog-autoheight test Created 7 years, 3 months 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

« no previous file with comments | « LayoutTests/dialog/top-layer-stacking-dynamic-expected.html ('k') | LayoutTests/fast/dom/HTMLDialogElement/non-anchored-dialog-positioning.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

2 <html>	2 <html>

	3 <head>

	4 <link rel="stylesheet" href="resources/dialog.css">

	5 </head>

3 <style>	6 <style>

4 .box {	7 .box {

5 height: 150px;	8 height: 150px;

6 width: 150px;	9 width: 150px;

7 }	10 }

8 .container {	11 .container {

9 -webkit-perspective: 500px;	12 -webkit-perspective: 500px;

10 border: 1px solid black;	13 border: 1px solid black;

11 background-color: magenta;	14 background-color: magenta;

12 }	15 }

13 .transformed {	16 .transformed {

14 -webkit-transform: rotateY(45deg);	17 -webkit-transform: rotateY(45deg);

15 background-color: cyan;	18 background-color: cyan;

16 }	19 }

17 .pseudodialog {

18 position: absolute;

19 left: 0; right: 0;

20 margin: auto;

21 border: solid;

22 padding: 1em;

23 background: white;

24 color: black;

25 }

26 </style>	20 </style>

27 <body>	21 <body>

28 <div class="pseudodialog" style="position: fixed; top: 10px; z-index:3000">	22 <div class="pseudodialog" style="position: fixed; top: 10px; z-index:3000">

29 This white box is the topmost modal dialog. It should be on top of everythin g.	23 This white box is the topmost modal dialog. It should be on top of everythin g.

30 </div>	24 </div>

31 <div style="position: absolute; top: 0px; z-index: 3; background-color: red; lef t: 0; right: 0; height: 200px;"></div>	25 <div style="position: absolute; top: 0px; z-index: 3; background-color: red; lef t: 0; right: 0; height: 200px;"></div>

32 <div class="pseudodialog" style="position: absolute; top: 50px; background-color : green; width: 75%; height: 400px; z-index:2000">	26 <div class="pseudodialog" style="position: absolute; top: 50px; background-color : green; width: 75%; height: 400px; z-index:2000">

33 This green box is also a modal dialog. It should be rendered above the red a nd yellow regions.	27 This green box is also a modal dialog. It should be rendered above the red a nd yellow regions.

34 <div class="container box">	28 <div class="container box">

35 <div class="transformed box">A transform within the dialog's subtree.</d iv>	29 <div class="transformed box">A transform within the dialog's subtree.</d iv>

36 </div>	30 </div>

37 <div class="box" style="position: absolute; top:300px; z-index: 2; backgroun d-color: cyan">	31 <div class="box" style="position: absolute; top:300px; z-index: 2; backgroun d-color: cyan">

38 This shows z-index stacking within the dialog's subtree. The cyan box sh ould be on top of the magenta one.	32 This shows z-index stacking within the dialog's subtree. The cyan box sh ould be on top of the magenta one.

39 </div>	33 </div>

40 <div class="box" style="position: absolute; top:350px; left:50px; z-index: 1 ; background-color: magenta"></div>	34 <div class="box" style="position: absolute; top:350px; left:50px; z-index: 1 ; background-color: magenta"></div>

41 <div style="position: fixed; top: 90px; left: 30px; background-color: green" >This is part of the green dialog.</div>	35 <div style="position: fixed; top: 90px; left: 30px; background-color: green" >This is part of the green dialog.</div>

42 </div>	36 </div>

43 <div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em ; background-color: yellow; z-index:1000">	37 <div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em ; background-color: yellow; z-index:1000">

44 </div>	38 </div>

45 </body>	39 </body>

46 </html>	40 </html>

OLD	NEW