src/third_party/WebKit/LayoutTests/fast/css/first-letter-property-whitelist.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/testharnessreport.js"></script>
   4 <style>
   5 #target::first-letter {}
   6 #target { visibility: hidden; }
   7 </style>
   8 <div id="target">text</div>
   9 <script>
  10 'use strict';
  11
  12 var style;
  13
  14 test(function() {
  15   var styleRule = document.styleSheets[0].rules[0];
  16   assert_equals(styleRule.selectorText, '#target::first-letter', 'make sure we have the correct style rule');
  17   style = styleRule.style;
  18 }, 'pre test setup');
  19
  20 async_test(function(testHandle) {
  21   var testCases = {
  22     backgroundAttachment: 'fixed',
  23     backgroundBlendMode: 'hue',
  24     backgroundClip: 'padding-box',
  25     backgroundColor: 'rgb(10, 20, 30)',
  26     backgroundImage: 'linear-gradient(black, white)',
  27     backgroundOrigin: 'border-box',
  28     backgroundPosition: 'left 10px top 20px',
  29     backgroundRepeat: 'no-repeat',
  30     backgroundSize: '10px 20px',
  31     border: '40px dotted rgb(10, 20, 30)',
  32     borderImage: 'linear-gradient(black, white) 10% / 20 / 30px repeat',
  33     borderRadius: '10px 20px',
  34     boxShadow: 'rgb(10, 20, 30) 10px 20px 30px 40px inset',
  35     color: 'rgba(10, 20, 30, 0.4)',
  36     float: 'right',
  37     font: 'italic small-caps 900 10px/20px sans-serif',
  38     fontKerning: 'none',
  39     letterSpacing: '12px',
  40     margin: '10px 20px 30px 40px',
  41     padding: '10px 20px 30px 40px',
  42     textDecoration: 'overline wavy rgb(10, 20, 30)',
  43     textShadow: 'rgb(10, 20, 30) 10px 20px 30px',
  44     textTransform: 'capitalize',
  45     verticalAlign: '12%',
  46     webkitBackgroundComposite: 'xor',
  47     webkitBorderFit: 'lines',
  48     webkitBorderHorizontalSpacing: '12px',
  49     webkitBorderVerticalSpacing: '12px',
  50     webkitFontSmoothing: 'none',
  51     webkitLineBoxContain: 'glyphs',
  52     wordSpacing: '12px',
  53     visibility: 'collapse',
  54   };
  55
  56   for (var property in testCases) {
  57     style[property] = testCases[property];
  58   }
  59
  60   requestAnimationFrame(function() {
  61     testHandle.step(function() {
  62       var computedStyle = getComputedStyle(target, 'first-letter');
  63       for (var property in testCases) {
  64         assert_equals(computedStyle[property], testCases[property], property + ' property');
  65       }
  66     });
  67     testHandle.done();
  68   });
  69 }, 'Whitelisted properties should get applied to first-letter pseudo elements.');
  70
  71 async_test(function(testHandle) {
  72   var testCases = {
  73     transition: 'transform 1s',
  74     transform: 'rotate(45deg)',
  75     webkitFilter: 'url(#)',
  76     wordBreak: 'break-all',
  77   };
  78
  79   for (var property in testCases) {
  80     style[property] = testCases[property];
  81   }
  82
  83   requestAnimationFrame(function() {
  84     testHandle.step(function() {
  85       var computedStyle = getComputedStyle(target, 'first-letter');
  86       var defaultComputedStyle = getComputedStyle(target);
  87       for (var property in testCases) {
  88         assert_equals(computedStyle[property], defaultComputedStyle[property], property + ' property');
  89       }
  90     });
  91     testHandle.done();
  92   });
  93 }, 'Non-whitelisted properties should not get applied to first-letter pseudo elements.');
  94 </script>