testing/web-platform/tests/css/css-content/content-none-details.html

   1 <!doctype html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <title>CSS Content: content:none on DETAILS</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
  10   <link rel="help" href="https://drafts.csswg.org/css-content/#valdef-content-none">
  11   <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1699964">
  12   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
  13   <meta name="flags" content="ahem">
  14   <meta name="assert" content="content:none should inhibit the <details> children from having boxes.  Its pseudos should not be affected though.">
  15   <link rel="match" href="content-none-details-ref.html">
  16   <style>
  17 html,body {
  18   color:black; background-color:white; font:4px/1 Ahem; padding:0; margin:0;
  19 }
  20 body { margin-left: 3ch; }
  21 body > * {
  22   content:none;
  23   padding:0; margin:0; border:none;
  24 }
  25 ::marker { content: 'M'; }
  26 .after::after { content: 'A'; }
  27 .before::before { content: 'B'; }
  28
  29   </style>
  30 </head>
  31 <body>
  32
  33 <script>
  34   document.body.style.display = 'none';
  35
  36   const display = [
  37     "display:block", "display:inline", "display:ruby", "display:none", "display:grid",
  38     "display:flex", "display:table", "display:list-item", "display:contents",
  39     "columns:2",
  40   ];
  41   const overflow = [
  42     "", "overflow:scroll", "overflow:clip",
  43   ];
  44   const position = [
  45     "", "position:absolute",
  46   ];
  47   const tags = [
  48     "details",
  49   ];
  50   const classes = [
  51     "", "after", "before",
  52   ];
  53   const body = document.body;
  54   for (var d of display) {
  55     for (var o of overflow) {
  56       for (var p of position) {
  57         for (var c of classes) {
  58           for (var t of tags) {
  59             let elem = document.createElement(t);
  60             elem.style = d + ';' + o + ';' + p + ';'
  61             elem.className = c;
  62             elem.setAttribute("open", "true");
  63             let summary = document.createElement("summary");
  64             summary.append(document.createTextNode("FAIL"));
  65             elem.append(summary);
  66             elem.append(document.createTextNode("FAIL"));
  67             body.append(elem);
  68           }
  69         }
  70       }
  71     }
  72   }
  73
  74   document.body.style.display = '';
  75 </script>
  76
  77 </body>
  78 </html>