LayoutTests/fast/dom/HTMLDialogElement/top-layer-containing-block-expected.html - Issue 14373010: Make abspos <dialog>'s containing block be the ICB.

Side by Side Diff: LayoutTests/fast/dom/HTMLDialogElement/top-layer-containing-block-expected.html

Issue 14373010: Make abspos <dialog>'s containing block be the ICB. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: review comments Created 7 years, 7 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/fast/dom/HTMLDialogElement/top-layer-containing-block.html ('k') | LayoutTests/fast/dom/HTMLDialogElement/top-layer-containing-block-scrolled-viewport.html » ('j') | Source/core/html/HTMLDialogElement.cpp » ('J')
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>	3 <head>

4 <script>	4 <script>

5 </script>	5 </script>

6 <style>	6 <style>

7 .pseudodialog {	7 .pseudodialog {

8 position: absolute;	8 position: absolute;

9 left: 0; right: 0;	9 left: 0; right: 0;

10 margin: auto;	10 margin: auto;

11 border: solid;	11 border: solid;

12 padding: 1em;	12 padding: 1em;

13 background: white;	13 background: white;

14 color: black;	14 color: black;

15 }	15 }

16 </style>	16 </style>

17 </head>	17 </head>

18 <body>	18 <body>

19 <p>	19 <p>

20 This tests that a top layer element's containing block is in the initial contain ing block and that it is unaffected by	20 This tests that a modal dialog's containing block is in the initial containing b lock and that it is unaffected by

21 ancestor elements with overflow or opacity. Dialog elements are used to demonst rate these properties. A dialog opened	21 ancestor elements with overflow or opacity.

22 with showModal() is in the top layer; one opened with dialog.show() is not.

23

24 <div class="pseudodialog" style="position: absolute; top: 100px; height: 250px; width: 90%; background-color: yellow">	22 <div class="pseudodialog" style="position: absolute; top: 100px; height: 250px; width: 90%; background-color: yellow">

25 This modal dialog should be onscreen with a width of 90% of the page. It is the child of an narrow element	23 This dialog should be onscreen with a width of 90% of the page. It is the ch ild of an narrow element

26 positioned off screen, but the containing block of a top layer element is th e initial containing block, so its	24 positioned off screen, but the containing block of a top layer element is th e initial containing block, so its

27 position and percent lengths are relative to that.	25 position and percent lengths are relative to that.

28 </div>	26 </div>

29 <div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; heig ht: 100px; background-color: cyan">	27 <div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; heig ht: 100px; background-color: cyan">

30 This modal dialog should be unaffected by its ancestor with overflow. It sho uld not be clipped.	28 This dialog should be unaffected by its ancestor with overflow. It should no t be clipped.

31 </div>

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

33 <div class="pseudodialog" style="position: absolute; top: 0px; height: 150px ; width: 150px; background-color: cyan">

34 This non-modal dialog should be affected by its ancestor with overflow. It should be clipped.

35 </div>

36 </div>	29 </div>

37 <div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; back ground-color: magenta">	30 <div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; back ground-color: magenta">

38 This modal dialog should be unaffected by its ancestor with opacity.	31 This dialog should be unaffected by its ancestor with opacity.

39 </div>

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

41 <div class="pseudodialog" style="position: absolute; top: 0px; height: 150px ; width: 150px; background-color: magenta">

42 This non-modal dialog should be affected by its ancestor with opacity.

43 </div>

44 </div>	32 </div>

45 </body>	33 </body>

46 </html>	34 </html>

OLD	NEW