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 normal 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     webkitBorderHorizontalSpacing: '12px',
  48     webkitBorderVerticalSpacing: '12px',
  49     webkitFontSmoothing: 'none',
  50     wordSpacing: '12px',
  51     visibility: 'collapse',
  52   };
  53
  54   for (var property in testCases) {
  55     style[property] = testCases[property];
  56   }
  57
  58   requestAnimationFrame(function() {
  59     testHandle.step(function() {
  60       var computedStyle = getComputedStyle(target, 'first-letter');
  61       for (var property in testCases) {
  62         assert_equals(computedStyle[property], testCases[property], property + ' property');
  63       }
  64     });
  65     testHandle.done();
  66   });
  67 }, 'Whitelisted properties should get applied to first-letter pseudo elements.');
  68
  69 async_test(function(testHandle) {
  70   var testCases = {
  71     transition: 'transform 1s',
  72     transform: 'rotate(45deg)',
  73     webkitFilter: 'url(#)',
  74     wordBreak: 'break-all',
  75   };
  76
  77   for (var property in testCases) {
  78     style[property] = testCases[property];
  79   }
  80
  81   requestAnimationFrame(function() {
  82     testHandle.step(function() {
  83       var computedStyle = getComputedStyle(target, 'first-letter');
  84       var defaultComputedStyle = getComputedStyle(target);
  85       for (var property in testCases) {
  86         assert_equals(computedStyle[property], defaultComputedStyle[property], property + ' property');
  87       }
  88     });
  89     testHandle.done();
  90   });
  91 }, 'Non-whitelisted properties should not get applied to first-letter pseudo elements.');
  92 </script>