Handle <meta name=viewport> elements when added to document

components/layout/layout_task.rs

@@ -78,8 +78,9 @@ use style::media_queries::{Device, MediaQueryList, MediaType};
 use style::properties::longhands::{display, position};
 use style::properties::style_structs;
 use style::selector_matching::Stylist;
-use style::stylesheets::{CSSRuleIteratorExt, Origin, Stylesheet};
+use style::stylesheets::{CSSRule, CSSRuleIteratorExt, Origin, Stylesheet};
 use style::values::AuExtensionMethods;
+use style::viewport::ViewportRule;
 use url::Url;
 use util::geometry::{MAX_RECT, ZERO_POINT};
 use util::ipc::OptionalIpcSender;
@@ -618,6 +619,9 @@ impl LayoutTask {
                                             possibly_locked_rw_data)
             }
             Msg::SetQuirksMode => self.handle_set_quirks_mode(possibly_locked_rw_data),
+            Msg::AddMetaViewport(translated_rule) => {
+                self.handle_add_meta_viewport(translated_rule, possibly_locked_rw_data)
+            }
             Msg::GetRPC(response_chan) => {
                 response_chan.send(box LayoutRPCImpl(self.rw_data.clone()) as
                                    Box<LayoutRPC + Send>).unwrap();
@@ -823,6 +827,19 @@ impl LayoutTask {
         LayoutTask::return_rw_data(possibly_locked_rw_data, rw_data);
     }
 
+    fn handle_add_meta_viewport<'a>(&'a self,
+                                    translated_rule: ViewportRule,
+                                    possibly_locked_rw_data:
+                                      &mut Option<MutexGuard<'a, LayoutTaskData>>)
+    {
+        let mut rw_data = self.lock_rw_data(possibly_locked_rw_data);
+        rw_data.stylist.add_stylesheet(Stylesheet {
+            rules: vec![CSSRule::Viewport(translated_rule)],
+            origin: Origin::Author
+        });
+        LayoutTask::return_rw_data(possibly_locked_rw_data, rw_data);
+    }
+
     /// Sets quirks mode for the document, causing the quirks mode stylesheet to be loaded.
     fn handle_set_quirks_mode<'a>(&'a self,
                                   possibly_locked_rw_data:
@@ -1657,4 +1674,3 @@ fn get_root_flow_background_color(flow: &mut Flow) -> AzColor {
                   .resolve_color(kid_block_flow.fragment.style.get_background().background_color)
                   .to_gfx_color()
 }
-

components/script/dom/htmlmetaelement.rs

@@ -5,13 +5,18 @@
 use dom::bindings::codegen::Bindings::HTMLMetaElementBinding;
 use dom::bindings::codegen::Bindings::HTMLMetaElementBinding::HTMLMetaElementMethods;
 use dom::bindings::codegen::InheritTypes::HTMLMetaElementDerived;
-use dom::bindings::js::Root;
+use dom::bindings::codegen::InheritTypes::{ElementCast, HTMLElementCast, NodeCast};
+use dom::bindings::js::{Root, RootedReference};
 use dom::document::Document;
 use dom::element::ElementTypeId;
 use dom::eventtarget::{EventTarget, EventTargetTypeId};
 use dom::htmlelement::{HTMLElement, HTMLElementTypeId};
-use dom::node::{Node, NodeTypeId};
-use util::str::DOMString;
+use dom::node::{Node, NodeTypeId, window_from_node};
+use dom::virtualmethods::VirtualMethods;
+use layout_interface::{LayoutChan, Msg};
+use std::ascii::AsciiExt;
+use style::viewport::ViewportRule;
+use util::str::{DOMString, HTML_SPACE_CHARACTERS};
 
 #[dom_struct]
 pub struct HTMLMetaElement {
@@ -42,6 +47,35 @@ impl HTMLMetaElement {
         let element = HTMLMetaElement::new_inherited(localName, prefix, document);
         Node::reflect_node(box element, document, HTMLMetaElementBinding::Wrap)
     }
+
+    fn process_attributes(&self) {
+        let element = ElementCast::from_ref(self);
+        if let Some(name) = element.get_attribute(&ns!(""), &atom!("name")).r() {
+            let name = name.value().to_ascii_lowercase();
+            let name = name.trim_matches(HTML_SPACE_CHARACTERS);
+
+            match name {
+                "viewport" => self.translate_viewport(),
+                _ => {}
+            }
+        }
+    }
+
+    fn translate_viewport(&self) {
+        let element = ElementCast::from_ref(self);
+        if let Some(content) = element.get_attribute(&ns!(""), &atom!("content")).r() {
+            let content = content.value();
+            if !content.is_empty() {
+                if let Some(translated_rule) = ViewportRule::from_meta(&**content) {
+                    let node = NodeCast::from_ref(self);
+                    let win = window_from_node(node);
+                    let LayoutChan(ref layout_chan) = win.r().layout_chan();
+
+                    layout_chan.send(Msg::AddMetaViewport(translated_rule)).unwrap();
+                }
+            }
+        }
+    }
 }
 
 impl HTMLMetaElementMethods for HTMLMetaElement {
@@ -57,3 +91,20 @@ impl HTMLMetaElementMethods for HTMLMetaElement {
     // https://html.spec.whatwg.org/multipage/#dom-meta-content
     make_setter!(SetContent, "content");
 }
+
+impl VirtualMethods for HTMLMetaElement {
+    fn super_type<'b>(&'b self) -> Option<&'b VirtualMethods> {
+        let htmlelement: &HTMLElement = HTMLElementCast::from_ref(self);
+        Some(htmlelement as &VirtualMethods)
+    }
+
+    fn bind_to_tree(&self, tree_in_doc: bool) {
+        if let Some(ref s) = self.super_type() {
+            s.bind_to_tree(tree_in_doc);
+        }
+
+        if tree_in_doc {
+            self.process_attributes();
+        }
+    }
+}

components/script/dom/virtualmethods.rs

@@ -20,6 +20,7 @@ use dom::bindings::codegen::InheritTypes::HTMLIFrameElementCast;
 use dom::bindings::codegen::InheritTypes::HTMLImageElementCast;
 use dom::bindings::codegen::InheritTypes::HTMLInputElementCast;
 use dom::bindings::codegen::InheritTypes::HTMLLinkElementCast;
+use dom::bindings::codegen::InheritTypes::HTMLMetaElementCast;
 use dom::bindings::codegen::InheritTypes::HTMLObjectElementCast;
 use dom::bindings::codegen::InheritTypes::HTMLOptGroupElementCast;
 use dom::bindings::codegen::InheritTypes::HTMLOptionElementCast;
@@ -179,6 +180,10 @@ pub fn vtable_for<'a>(node: &'a Node) -> &'a (VirtualMethods + 'a) {
             let element = HTMLLinkElementCast::to_ref(node).unwrap();
             element as &'a (VirtualMethods + 'a)
         }
+        NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLMetaElement)) => {
+            let element = HTMLMetaElementCast::to_ref(node).unwrap();
+            element as &'a (VirtualMethods + 'a)
+        }
         NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLObjectElement)) => {
             let element = HTMLObjectElementCast::to_ref(node).unwrap();
             element as &'a (VirtualMethods + 'a)

components/script/layout_interface.rs

@@ -28,6 +28,7 @@ use string_cache::Atom;
 use style::animation::PropertyAnimation;
 use style::media_queries::MediaQueryList;
 use style::stylesheets::Stylesheet;
+use style::viewport::ViewportRule;
 use url::Url;
 pub use dom::node::TrustedNodeAddress;
 
@@ -39,6 +40,9 @@ pub enum Msg {
     /// Adds the given stylesheet to the document.
     LoadStylesheet(Url, MediaQueryList, PendingAsyncLoad, Box<StylesheetLoadResponder + Send>),
 
+    /// Adds a @viewport rule (translated from a <META name="viewport"> element) to the document.
+    AddMetaViewport(ViewportRule),
+
     /// Puts a document into quirks mode, causing the quirks mode stylesheet to be loaded.
     SetQuirksMode,
 

tests/ref/basic.list

@@ -397,6 +397,7 @@ flaky_cpu,prefs:"layout.writing-mode.enabled" == vertical-lr-blocks.html vertica
 == vertical_align_top_a.html vertical_align_top_ref.html
 == vertical_align_top_bottom_a.html vertical_align_top_bottom_ref.html
 == vertical_align_top_span_a.html vertical_align_top_span_ref.html
+== viewport_meta.html viewport_rule_ref.html
 resolution=800x600 == viewport_percentage_vmin_vmax.html viewport_percentage_vmin_vmax_a.html
 # resolution=600x800 == viewport_percentage_vmin_vmax.html viewport_percentage_vmin_vmax_b.html
 resolution=800x600 == viewport_percentage_vw_vh.html viewport_percentage_vw_vh_a.html

tests/ref/viewport_meta.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=240">
+    <style>
+      #container {
+        background: blue;
+        height: 100vh;
+        width: 100vw;
+      }
+
+      #box {
+        background: green;
+        height: 50vh;
+        width: 50vw;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="box">
+      </div>
+    </div>
+  </body>
+</html>