layout/reftests/box-shadow/611574-2.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head><style>
   4 button,span,fieldset { border-radius: 7px 3px;  background-color: #0F0; }
   5 button { border: none; outline: 3px solid black; outline-offset: -2px; }
   6 </style></head>
   7 <body style="margin:30px">
   8 <div style="column-count:3; column-fill:auto; height:600px">
   9 <p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button>
  10 <p><button style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</button>
  11 <p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button>
  12 <p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button>
  13 <p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button>
  14
  15 <p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button>
  16 <p><button style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</button>
  17 <p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
  18 <p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
  19 <p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>
  20
  21 <!--  XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference
  22 <p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
  23 <p><span style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</span>
  24 <p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
  25 <p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
  26 <p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>
  27
  28 <p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
  29 <p><span style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</span>
  30 <p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
  31 <p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
  32 <p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
  33 -->
  34
  35 <p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
  36 <p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
  37 <p><fieldset style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
  38 <p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
  39 <p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
  40 <p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
  41
  42 <p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
  43 <p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
  44 <p><fieldset style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
  45 <p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
  46 <p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
  47 <p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
  48
  49 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
  50 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
  51 <p><fieldset style="display:inline;box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
  52 <p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
  53 <p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
  54 <p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
  55
  56 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
  57 <p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
  58 <p><fieldset style="display:inline;box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
  59 <p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
  60 <p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
  61 <p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
  62
  63 </div>
  64
  65
  66 </body>
  67 </html>