third_party/WebKit/LayoutTests/dialog/modal-dialog-generated-content.html

   1 <!DOCTYPE html>
   2 <style>
   3 dialog {
   4     padding: 0px;
   5     border: none;
   6     margin: 0px;
   7     top: 100px;
   8     left: 100px;
   9     height: 100px;
  10     width: 100px;
  11     background: green;
  12 }
  13
  14 dialog::before {
  15     content: '::before';
  16     position: absolute;
  17     top: 0px;
  18 }
  19
  20 dialog::after {
  21     content: '::after';
  22     position: absolute;
  23     bottom: 0px;
  24 }
  25
  26 dialog::backdrop {
  27     position: absolute;
  28     top: 100px;
  29     left: 300px;
  30     height: 100px;
  31     width: 100px;
  32     background: green;
  33     content: 'THIS TEXT SHOULD NOT BE SEEN';
  34 }
  35
  36 dialog::backdrop::before {
  37     content: '::backdrop::before';
  38     position: absolute;
  39     top: 0px;
  40     background: red;
  41 }
  42 dialog::backdrop::after {
  43     content: '::backdrop::after';
  44     position: absolute;
  45     bottom: 0px;
  46     background: red;
  47 }
  48 </style>
  49 <body>
  50 Test for a modal dialog with ::before, ::after, and ::backdrop. The test passes
  51 if there are two green boxes, one with the texts "::before" and "::after" in it.
  52 <dialog></dialog>
  53 <script>
  54 document.querySelector('dialog').showModal();
  55 </script>
  56 </body>