From 51609ca969b49a2a570dee197d7768324981b798 Mon Sep 17 00:00:00 2001 From: Rakina Zata Amni Date: Tue, 28 Aug 2018 14:49:45 +0200 Subject: [PATCH 1/4] Add createCSSStyleSheet and createEmptyCSSStyleSheet and return moreStyleSheets --- index.bs | 51 ++++- index.html | 649 ++++++++++++++++++++++++++++++++++------------------- 2 files changed, 461 insertions(+), 239 deletions(-) diff --git a/index.bs b/index.bs index f69ba5f..95d34ec 100644 --- a/index.bs +++ b/index.bs @@ -6,6 +6,7 @@ Status: DREAM ED: https://wicg.github.io/construct-stylesheets/index.html Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/ Editor: Eric Willigers, Google, ericwilligers@google.com +Editor: Rakina Zata Amni, Google, rakina@google.com Abstract: This draft defines additions to CSSOM to make StyleSheet objects directly constructable, along with methods and APIs to make it easier to deal with stylesheets in the context of custom elements and similar. Ignored Terms: ShadowRoot, create a medialist object, add a css style sheet, document css style sheets @@ -18,8 +19,9 @@ Adding Stylesheets In Script {#adding-stylesheets} ================================= 
-[Constructor(DOMString text, optional CSSStyleSheetInit options)]
-partial interface CSSStyleSheet {
+partial interface Document {
+	[NewObject] Promise<CSSStyleSheet> createCSSStyleSheet(DOMString text, optional CSSStyleSheetInit options);
+	[NewObject] CSSStyleSheet createEmptyCSSStyleSheet(optional CSSStyleSheetInit options);
 };
 
 dictionary CSSStyleSheetInit {
@@ -28,10 +30,17 @@ dictionary CSSStyleSheetInit {
 	boolean alternate = false;
 	boolean disabled = false;
 };
+
+partial interface DocumentOrShadowRoot {
+	attribute StyleSheetList moreStyleSheets;
+};
+
+partial interface CSSStyleSheet {
+};
-
CSSStyleSheet(text, options)
+
createCSSStyleSheet(text, options)
When called, execute these steps: @@ -45,7 +54,7 @@ dictionary CSSStyleSheetInit { 2. If the {{CSSStyleSheetInit/media}} attribute of options is a string, create a MediaList object from the string and assign it as sheet’s media. - Otherwise, assign the value of the attribute as sheet’s media. + Otherwise, assign a copy of the value of the attribute as sheet’s media. 3. If the {{CSSStyleSheetInit/alternate}} attribute of options is true, set sheet’s alternate flag. 4. If the {{CSSStyleSheetInit/disabled}} attribute of options is true, @@ -55,7 +64,39 @@ dictionary CSSStyleSheetInit { assign the list as sheet’s CSS rules; otherwise, set sheet’s CSS rules to an empty list. - 6. Return sheet. + 6. Let promise be a promise. + 7. Resolve promise with sheet. + 8. Return promise. +
+ +
createEmptyCSSStyleSheet(options)
+
+ Synchronously creates an empty CSSStyleSheet object and returns it. + + When called, execute these steps: + + 1. Construct a new {{CSSStyleSheet}} object sheet, + with location set to null, + no parent CSS style sheet, + no owner node, + no owner CSS rule, + and a title set to the {{CSSStyleSheetInit/title}} attribute of options. + Set sheet’s origin-clean flag. + 2. If the {{CSSStyleSheetInit/media}} attribute of options is a string, + create a MediaList object from the string + and assign it as sheet’s media. + Otherwise, assign a copy of the value of the attribute as sheet’s media. + 3. If the {{CSSStyleSheetInit/alternate}} attribute of options is true, + set sheet’s alternate flag. + 4. If the {{CSSStyleSheetInit/disabled}} attribute of options is true, + set sheet’s disabled flag. + 5. Return sheet. +
+ +
moreStyleSheets
+
+ Style sheets assigned to this attribute are part of the document CSS style sheets. + They are ordered after the stylesheets in {{Document/styleSheets}}.
diff --git a/index.html b/index.html index 3430595..2b4c1c0 100644 --- a/index.html +++ b/index.html @@ -992,57 +992,93 @@ .toc > li li { font-weight: normal; } .toc > li li li { font-size: 95%; } .toc > li li li li { font-size: 90%; } + .toc > li li li li .secno { font-size: 85%; } .toc > li li li li li { font-size: 85%; } + .toc > li li li li li .secno { font-size: 100%; } - .toc > li { margin: 1.5rem 0; } - .toc > li li { margin: 0.3rem 0; } - .toc > li li li { margin-left: 2rem; } + /* @supports not (display:grid) { */ + .toc > li { margin: 1.5rem 0; } + .toc > li li { margin: 0.3rem 0; } + .toc > li li li { margin-left: 2rem; } - /* Section numbers in a column of their own */ - .toc .secno { - float: left; - width: 4rem; - white-space: nowrap; - } - .toc > li li li li .secno { - font-size: 85%; - } - .toc > li li li li li .secno { - font-size: 100%; - } + /* Section numbers in a column of their own */ + .toc .secno { + float: left; + width: 4rem; + white-space: nowrap; + } - :not(li) > .toc { margin-left: 5rem; } - .toc .secno { margin-left: -5rem; } - .toc > li li li .secno { margin-left: -7rem; } - .toc > li li li li .secno { margin-left: -9rem; } - .toc > li li li li li .secno { margin-left: -11rem; } + .toc li { + clear: both; + } - /* Tighten up indentation in narrow ToCs */ - @media (max-width: 30em) { - :not(li) > .toc { margin-left: 4rem; } - .toc .secno { margin-left: -4rem; } - .toc > li li li { margin-left: 1rem; } - .toc > li li li .secno { margin-left: -5rem; } - .toc > li li li li .secno { margin-left: -6rem; } - .toc > li li li li li .secno { margin-left: -7rem; } - } - @media screen and (min-width: 78em) { - body:not(.toc-inline) :not(li) > .toc { margin-left: 4rem; } - body:not(.toc-inline) .toc .secno { margin-left: -4rem; } - body:not(.toc-inline) .toc > li li li { margin-left: 1rem; } - body:not(.toc-inline) .toc > li li li .secno { margin-left: -5rem; } - body:not(.toc-inline) .toc > li li li li .secno { margin-left: -6rem; } - body:not(.toc-inline) .toc > li li li li li .secno { margin-left: -7rem; } - } - body.toc-sidebar #toc :not(li) > .toc { margin-left: 4rem; } - body.toc-sidebar #toc .toc .secno { margin-left: -4rem; } - body.toc-sidebar #toc .toc > li li li { margin-left: 1rem; } - body.toc-sidebar #toc .toc > li li li .secno { margin-left: -5rem; } - body.toc-sidebar #toc .toc > li li li li .secno { margin-left: -6rem; } - body.toc-sidebar #toc .toc > li li li li li .secno { margin-left: -7rem; } - - .toc li { - clear: both; + :not(li) > .toc { margin-left: 5rem; } + .toc .secno { margin-left: -5rem; } + .toc > li li li .secno { margin-left: -7rem; } + .toc > li li li li .secno { margin-left: -9rem; } + .toc > li li li li li .secno { margin-left: -11rem; } + + /* Tighten up indentation in narrow ToCs */ + @media (max-width: 30em) { + :not(li) > .toc { margin-left: 4rem; } + .toc .secno { margin-left: -4rem; } + .toc > li li li { margin-left: 1rem; } + .toc > li li li .secno { margin-left: -5rem; } + .toc > li li li li .secno { margin-left: -6rem; } + .toc > li li li li li .secno { margin-left: -7rem; } + } + /* } */ + + @supports (display:grid) { + /* Use #toc over .toc to override non-@supports rules. */ + #toc { + display: grid; + align-content: start; + grid-template-columns: auto 1fr; + grid-column-gap: 1rem; + column-gap: 1rem; + grid-row-gap: .6rem; + row-gap: .6rem; + } + #toc h2 { + grid-column: 1 / -1; + margin-bottom: 0; + } + #toc ol, + #toc li, + #toc a { + display: contents; + /* Switch to subgrid when supported */ + } + #toc span { + margin: 0; + } + #toc > .toc > li > a > span { + /* The spans of the top-level list, + comprising the first items of each top-level section. */ + margin-top: 1.1rem; + } + #toc#toc .secno { /* Ugh, need more specificity to override base.css */ + grid-column: 1; + width: auto; + margin-left: 0; + } + #toc .content { + grid-column: 2; + width: auto; + margin-right: 1rem; + } + #toc .content:hover { + background: rgba(75%, 75%, 75%, .25); + border-bottom: 3px solid #054572; + margin-bottom: -3px; + } + #toc li li li .content { + margin-left: 1rem; + } + #toc li li li li .content { + margin-left: 2rem; + } } @@ -1176,9 +1212,8 @@ } } - + - +.dfn-paneled { cursor: pointer; } +

Constructable Stylesheet Objects

-

A Collection of Interesting Ideas,

+

A Collection of Interesting Ideas,

This version:
https://wicg.github.io/construct-stylesheets/index.html -
Issue Tracking: -
GitHub
Editors:
Tab Atkins Jr. (Google)
(Google) +
(Google)

CC0 To the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work. -In addition, as of 3 July 2018, +In addition, as of 28 August 2018, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0, which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0. Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document.

@@ -1473,49 +1507,90 @@

Table of Contents

1. Adding Stylesheets In Script

-
[Constructor(DOMString text, optional CSSStyleSheetInit options)]
-partial interface CSSStyleSheet {
+
partial interface Document {
+  [NewObject] Promise<CSSStyleSheet> createCSSStyleSheet(DOMString text, optional CSSStyleSheetInit options);
+  [NewObject] CSSStyleSheet createEmptyCSSStyleSheet(optional CSSStyleSheetInit options);
+};
+
+dictionary CSSStyleSheetInit {
+  (MediaList or DOMString) media = "";
+  DOMString title = "";
+  boolean alternate = false;
+  boolean disabled = false;
+};
+
+partial interface DocumentOrShadowRoot {
+  attribute StyleSheetList moreStyleSheets;
 };
 
-dictionary CSSStyleSheetInit {
-  (MediaList or DOMString) media = "";
-  DOMString title = "";
-  boolean alternate = false;
-  boolean disabled = false;
+partial interface CSSStyleSheet {
 };
 

    

-    
CSSStyleSheet(text, options)
+    
createCSSStyleSheet(text, options)
     

       When called, execute these steps: 
      
    
-      
  1. 
-       
    Construct a new CSSStyleSheet object sheet,
+      
  2. 
+       
    Construct a new CSSStyleSheet object sheet,
 with location set to null,
 no parent CSS style sheet,
 no owner node,
 no owner CSS rule,
 and a title set to the title attribute of options.
 Set sheet’s origin-clean flag.
    
-      
  3. 
+      
  4. 
        
    If the media attribute of options is a string, create a MediaList object from the string
 and assign it as sheet’s media.
-Otherwise, assign the value of the attribute as sheet’s media.
    
-      
  5. 
+Otherwise, assign a copy of the value of the attribute as sheet’s media.
    
+      
  6. 
        
    If the alternate attribute of options is true,
 set sheet’s alternate flag.
    
-      
  7. 
+      
  8. 
        
    If the disabled attribute of options is true,
 set sheet’s disabled flag.
    
-      
  9. 
-       
    Parse a stylesheet from text.
+      
  10. 
+       
    Parse a stylesheet from text.
 If it returned a list of rules,
 assign the list as sheet’s CSS rules;
 otherwise,
 set sheet’s CSS rules to an empty list.
    
-      
  11. 
+      
  12. 
+       
    Let promise be a promise.
    
+      
  13. 
+       
    Resolve promise with sheet.
    
+      
  14. 
+       
    Return promise.
    
+     

+    
createEmptyCSSStyleSheet(options)
+    

+      Synchronously creates an empty CSSStyleSheet object and returns it. 
+     
When called, execute these steps:

+     
    
+      
  1. 
+       
    Construct a new CSSStyleSheet object sheet,
+with location set to null,
+no parent CSS style sheet,
+no owner node,
+no owner CSS rule,
+and a title set to the title attribute of options.
+Set sheet’s origin-clean flag.
    
+      
  2. 
+       
    If the media attribute of options is a string, create a MediaList object from the string
+and assign it as sheet’s media.
+Otherwise, assign a copy of the value of the attribute as sheet’s media.
    
+      
  3. 
+       
    If the alternate attribute of options is true,
+set sheet’s alternate flag.
    
+      
  4. 
+       
    If the disabled attribute of options is true,
+set sheet’s disabled flag.
    
+      
  5. 
        
    Return sheet.
    
      

+    
moreStyleSheets,  of type StyleSheetList
+    
 Style sheets assigned to this attribute are part of the document CSS style sheets.
+		They are ordered after the stylesheets in styleSheets. 
    

    
2. Applying Styles In All Contexts
@@ -1669,32 +1744,117 @@

Index

Terms defined by this specification

+ + + + + + + + + + + +

Terms defined by reference

References

@@ -1704,120 +1864,141 @@

N
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. 20 February 2014. CR. URL: https://www.w3.org/TR/css-syntax-3/
[CSSOM-1]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). 17 March 2016. WD. URL: https://www.w3.org/TR/cssom-1/ +
[DOM] +
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[WebIDL]
Cameron McCormack; Boris Zbarsky; Tobie Langel. Web IDL. 15 December 2016. ED. URL: https://heycam.github.io/webidl/

IDL Index

-
[Constructor(DOMString text, optional CSSStyleSheetInit options)]
-partial interface CSSStyleSheet {
+
partial interface Document {
+  [NewObject] Promise<CSSStyleSheet> createCSSStyleSheet(DOMString text, optional CSSStyleSheetInit options);
+  [NewObject] CSSStyleSheet createEmptyCSSStyleSheet(optional CSSStyleSheetInit options);
+};
+
+dictionary CSSStyleSheetInit {
+  (MediaList or DOMString) media = "";
+  DOMString title = "";
+  boolean alternate = false;
+  boolean disabled = false;
 };
 
-dictionary CSSStyleSheetInit {
-  (MediaList or DOMString) media = "";
-  DOMString title = "";
-  boolean alternate = false;
-  boolean disabled = false;
+partial interface DocumentOrShadowRoot {
+  attribute StyleSheetList moreStyleSheets;
+};
+
+partial interface CSSStyleSheet {
 };
 
 

-
diff --git a/index.html b/index.html index 2b4c1c0..82131b9 100644 --- a/index.html +++ b/index.html @@ -1558,7 +1558,7 @@

@import rules in sheet have finished loading.

  • Return promise.

    @@ -1754,6 +1754,12 @@

    moreStyleSheets, in §1
  • title, in §1 +