doc_matched_selectors.html (1815B)
1 <!-- Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ --> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf8"> 7 <style> 8 @import url(./doc_matched_selectors_imported_1.css) layer(importedFirst); 9 @import url(./doc_matched_selectors_imported_2.css) layer(importedSecond); 10 @import url(./doc_matched_selectors_imported_3.css) layer(importedFirst); 11 @import url(./doc_matched_selectors_imported_4.css) layer; 12 @import url(./doc_matched_selectors_imported_5.css) layer; 13 14 @layer first, second; 15 16 .matched1, .matched2, .matched3, .matched4, .matched5 { 17 color: #000; 18 } 19 20 div { 21 position: absolute; 22 top: 40px; 23 left: 20px; 24 border: 1px solid #000; 25 color: #111; 26 width: 100px; 27 height: 50px; 28 } 29 30 main { 31 /* 32 * Set "winning" custom properties values to "blue" so we can check in the 33 * test that the best matching rule/property is actually what is applied by 34 * the engine. 35 */ 36 --winning-color: blue; 37 } 38 39 section { 40 min-width: 10px; 41 min-height: 10px; 42 display: inline-block; 43 44 /* starting-style rules should be ignored by the computed view */ 45 @starting-style { 46 background-color: honeydew; 47 } 48 } 49 50 #align { 51 text-align: center; 52 } 53 </style> 54 </head> 55 <body> 56 inspectstyle($("test")); 57 <div id="test" class="matched1 matched2 matched3 matched4 matched5">Test div</div> 58 <div id="dummy"> 59 <div></div> 60 </div> 61 <main></main> 62 <div id="align" style="text-align: left;" align="right"> 63 Align 64 <div id="align-child" align="center">Align child</div> 65 </div> 66 </body> 67 </html>