LayoutTests/dialog/top-layer-containing-block.html - Issue 24493004: Make dialog::backdrop span the viewport by default.

Side by Side Diff: LayoutTests/dialog/top-layer-containing-block.html

Issue 24493004: Make dialog::backdrop span the viewport by default. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 7 years, 2 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

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

2 <html>	2 <html>

	3 <head>

	4 <style>

	5 ::backdrop {

	6 display: none;

	7 }

	8 </style>

	9 </head>

3 <body>	10 <body>

4 <p>	11 <p>

5 This tests that a modal dialog's containing block is in the initial containing b lock and that it is unaffected by	12 This tests that a modal dialog's containing block is in the initial containing b lock and that it is unaffected by

6 ancestor elements with overflow or opacity.	13 ancestor elements with overflow or opacity.

7 <div style="position: absolute; top: 400px; opacity: 0.3">	14 <div style="position: absolute; top: 400px; opacity: 0.3">

8 <dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">	15 <dialog id="opaqueDialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta">

9 This dialog should be unaffected by its ancestor with opacity.	16 This dialog should be unaffected by its ancestor with opacity.

10 </dialog>	17 </dialog>

11 </div>	18 </div>

12 <div style="position: absolute; overflow: hidden; width: 500px; height: 150px; t op: 400px; left: 300px">	19 <div style="position: absolute; overflow: hidden; width: 500px; height: 150px; t op: 400px; left: 300px">

13 <dialog id="unclippedDialog" style="position: absolute; top: 200px; left: 0p x; height: 100px; background-color: cyan">	20 <dialog id="unclippedDialog" style="position: absolute; top: 200px; left: 0p x; height: 100px; background-color: cyan">

14 This dialog should be unaffected by its ancestor with overflow. It shoul d not be clipped.	21 This dialog should be unaffected by its ancestor with overflow. It shoul d not be clipped.

15 </dialog>	22 </dialog>

16 </div>	23 </div>

17 <div style="position: absolute; top: 1000px; left: 1000px; width: 20px;">	24 <div style="position: absolute; top: 1000px; left: 1000px; width: 20px;">

18 <dialog id="bottomDialog" style="position: absolute; top: 100px; height: 250 px; width: 90%; background-color: yellow">	25 <dialog id="bottomDialog" style="position: absolute; top: 100px; height: 250 px; width: 90%; background-color: yellow">

19 This dialog should be onscreen with a width of 90% of the page. It is th e child of an narrow element	26 This dialog should be onscreen with a width of 90% of the page. It is th e child of an narrow element

20 positioned off screen, but the containing block of a top layer element i s the initial containing block, so its	27 positioned off screen, but the containing block of a top layer element i s the initial containing block, so its

21 position and percent lengths are relative to that.	28 position and percent lengths are relative to that.

22 </dialog>	29 </dialog>

23 </div>	30 </div>

24 <script>	31 <script>

25 document.getElementById('bottomDialog').showModal();	32 document.getElementById('bottomDialog').showModal();

26 document.getElementById('unclippedDialog').showModal();	33 document.getElementById('unclippedDialog').showModal();

27 document.getElementById('opaqueDialog').showModal();	34 document.getElementById('opaqueDialog').showModal();

28 </script>	35 </script>

29 </body>	36 </body>

30 </html>	37 </html>

OLD	NEW