variable-first-line.html (3504B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables with ::first-line pseudo-element.</title> 5 6 <meta rel="author" title="Kevin Babbitt"> 7 <meta rel="author" title="Greg Whitworth"> 8 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 9 <!-- This is not directly specified in the spec but should work --> 10 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> 11 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <style> 15 div { 16 width: 500px; 17 } 18 19 #div1::first-line { 20 color: var(--my-color); 21 --my-color: rgb(0, 0, 255); 22 } 23 24 #div2::first-line { 25 font-size: var(--my-font-size); 26 --my-font-size: 25px; 27 } 28 29 #div3::first-line { 30 font-weight: var(--my-font-weight); 31 --my-font-weight: 900; 32 } 33 34 #div4::first-line { 35 position: var(--my-position); 36 --my-position: absolute; 37 } 38 39 #div5::first-line { 40 color: var(--my-color1); 41 --my-color1: var(--my-color2); 42 --my-color2: rgb(0, 0, 255); 43 } 44 45 #div6::first-line { 46 position: var(--my-position1); 47 --my-position1: var(--my-position2); 48 --my-position2: absolute; 49 } 50 </style> 51 </head> 52 <body> 53 <div id="div1">CSS variable defining 'color' property should be applied to ::first-line and its color should be blue.</div> 54 <br /> 55 <div id="div2">CSS variable defining 'font-size' property should be applied to ::first-line and its font-size should be 25px.</div> 56 <br /> 57 <div id="div3">CSS variable defining 'font-weight' property should be applied to ::first-line and its font-weight should be 900.</div> 58 <br /> 59 <div id="div4">CSS variable defining 'position' property should not be applied to ::first-line and its position should be static.</div> 60 <br /> 61 <div id="div5">CSS variable referencing another CSS variable that defines 'color' property should be applied to ::first-line and its color should be blue.</div> 62 <br /> 63 <div id="div6">CSS variable referencing another CSS variable that defines 'position' property should not be applied to ::first-line and its position should be static.</div> 64 65 <script> 66 "use strict"; 67 68 let templates = [ 69 { elementId: "div1", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "color" }, 70 { elementId: "div2", property: "font-size", expectedValue: "25px", testName: "font-size" }, 71 { elementId: "div3", property: "font-weight", expectedValue: "900", testName: "font-weight" }, 72 { elementId: "div4", property: "position", expectedValue: "static", testName: "position" }, 73 { elementId: "div5", property: "color", expectedValue: "rgb(0, 0, 255)", testName: "nested color" }, 74 { elementId: "div6", property: "position", expectedValue: "static", testName: "abspos" }, 75 ]; 76 77 templates.forEach(function (template) { 78 test( function () { 79 var elem = document.getElementById(template.elementId); 80 var actualValue = window.getComputedStyle(elem, ':first-line').getPropertyValue(template.property); 81 assert_equals(template.expectedValue, actualValue); 82 }, template.testName); 83 }); 84 </script> 85 </body> 86 </html>